/*
 * Escape Events – Compiled Stylesheet
 *
 * Styled to match the Escape RV brand aesthetic:
 *   – Warm cream backgrounds, generous whitespace
 *   – Dark charcoal text and card shells
 *   – Terracotta-red primary CTA (#C0381E)
 *   – Clean, minimal, outdoorsy
 *
 * All rules scoped to .ee-* classes — zero theme interference.
 * No global resets. No Tailwind preflight.
 *
 * Source: assets/css/src/escape-events.css
 * Rebuild: npm run build  (from plugin root)
 */

/* ---------------------------------------------------------------------------
   Brand tokens
   Update these variables to adjust the colour scheme site-wide.
--------------------------------------------------------------------------- */

:root {
  --ee-red:        #C0381E;   /* Escape RV terracotta CTA */
  --ee-red-dark:   #A42E17;
  --ee-dark:       #1A1C1E;   /* near-black charcoal, matches nav */
  --ee-dark-mid:   #2C3438;
  --ee-cream:      #F0EBE3;   /* site background warm cream */
  --ee-sage:       #4D6B72;   /* footer band teal/sage */
}

/* ---------------------------------------------------------------------------
   Wrapper
--------------------------------------------------------------------------- */

.ee-wrap {
  max-width: 1100px;
  margin-inline: auto;
  padding: 4rem 2rem;
  font-family: inherit;
}

.ee-empty {
  text-align: center;
  color: #6b7280;
  font-size: 1.125rem;
  padding: 5rem 0;
  letter-spacing: 0.01em;
}

/* ---------------------------------------------------------------------------
   Page heading (archive only)
   Matches the site's clean, widely-spaced heading style.
--------------------------------------------------------------------------- */

.ee-page-heading {
  font-size: clamp(1.625rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--ee-dark);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 2.5rem;
}

/* ---------------------------------------------------------------------------
   Event list
--------------------------------------------------------------------------- */

.ee-list {
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
}

/* ---------------------------------------------------------------------------
   Card shell
--------------------------------------------------------------------------- */

.ee-card {
  position: relative;
  overflow: hidden;
  border-radius: 1.25rem;   /* matches site's rounded image treatment */
  min-height: 460px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background-color: var(--ee-dark);
  box-shadow:
    0 2px 4px rgb(0 0 0 / 0.08),
    0 8px 32px -4px rgb(0 0 0 / 0.22);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

/* Hover: deepen shadow only — no lift, so the image zoom is the sole movement */
.ee-card:hover {
  box-shadow:
    0 4px 8px rgb(0 0 0 / 0.1),
    0 20px 60px -4px rgb(0 0 0 / 0.32);
}

/* ---------------------------------------------------------------------------
   Flat card (no image) — horizontal two-column layout, vertically centred
--------------------------------------------------------------------------- */

/* Default background when no color is chosen */
.ee-card--no-image {
  background-color: var(--ee-dark-mid);
  min-height: 0;       /* height is content-driven, not fixed */
  --ee-flat-text: var(--ee-dark); /* overridden by inline style when text color is set */
}

/* Flat layout container: left body | right dates */
.ee-card__flat {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.75rem 2rem;
  width: 100%;
  box-sizing: border-box;
}

/* Body in flat mode: centred, no bottom-anchoring */
.ee-card--no-image .ee-card__body {
  padding: 0;
  align-items: center;
}

/* Dates in flat mode: static (not absolute), right-aligned column */
.ee-card--no-image .ee-card__dates-wrap {
  position: static;
  text-align: right;
  flex-shrink: 0;
  max-width: 280px;
}

/* Text colour overrides — all flat card text derives from --ee-flat-text so the
   admin colour picker controls every element at once. color-mix() blends the
   chosen colour toward transparent to produce muted/secondary shades. */
.ee-card--no-image .ee-card__title {
  color: var(--ee-flat-text);
  text-shadow: none;
}

.ee-card--no-image .ee-card__location {
  color: color-mix(in srgb, var(--ee-flat-text) 65%, transparent);
}

.ee-card--no-image .ee-card__maps-link {
  color: color-mix(in srgb, var(--ee-flat-text) 65%, transparent);
  text-decoration-color: color-mix(in srgb, var(--ee-flat-text) 25%, transparent);
}
.ee-card--no-image .ee-card__maps-link:hover {
  color: var(--ee-flat-text);
  text-decoration-color: color-mix(in srgb, var(--ee-flat-text) 55%, transparent);
}

.ee-card--no-image .ee-icon {
  opacity: 0.45;
}

/* Ghost action links */
.ee-card--no-image .ee-card__link {
  background: color-mix(in srgb, var(--ee-flat-text) 7%, transparent);
  border-color: color-mix(in srgb, var(--ee-flat-text) 14%, transparent);
  color: color-mix(in srgb, var(--ee-flat-text) 70%, transparent);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.ee-card--no-image .ee-card__link:hover {
  background: color-mix(in srgb, var(--ee-flat-text) 13%, transparent);
  border-color: color-mix(in srgb, var(--ee-flat-text) 25%, transparent);
  color: var(--ee-flat-text);
}
.ee-card--no-image .ee-card__more-btn.is-open {
  background: color-mix(in srgb, var(--ee-flat-text) 13%, transparent);
  border-color: color-mix(in srgb, var(--ee-flat-text) 25%, transparent);
  color: var(--ee-flat-text);
}

/* Date label + pills */
.ee-card--no-image .ee-card__dates-label {
  background: color-mix(in srgb, var(--ee-flat-text) 8%, transparent);
  color: var(--ee-flat-text);
  text-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.ee-card--no-image .ee-card__date-item {
  background: color-mix(in srgb, var(--ee-flat-text) 6%, transparent);
  border-color: color-mix(in srgb, var(--ee-flat-text) 12%, transparent);
  color: color-mix(in srgb, var(--ee-flat-text) 70%, transparent);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Flat card responsive: stack vertically on mobile */
@media (max-width: 600px) {
  .ee-card__flat {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 1.25rem 1.25rem;
  }
  .ee-card--no-image .ee-card__dates-wrap {
    text-align: left;
    max-width: 100%;
  }
  .ee-card--no-image .ee-card__dates-detail {
    align-items: flex-start;
  }
}

/* ---------------------------------------------------------------------------
   Background image / slideshow
--------------------------------------------------------------------------- */

.ee-card__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

/* Each slide: absolutely fills the bg container */
.ee-card__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
  will-change: opacity;
}

.ee-card__slide.is-active {
  opacity: 1;
}

.ee-card__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Slight zoom on hover — only on the active slide to avoid weird multi-image movement */
.ee-card:hover .ee-card__slide.is-active img {
  transform: scale(1.05);
  transition: transform 0.7s ease, opacity 1.2s ease-in-out;
}

/* ---------------------------------------------------------------------------
   Gradient overlay
   Deeper at the bottom so title and meta are always readable.
   Slightly warmer black to feel cohesive with the brand.
--------------------------------------------------------------------------- */

.ee-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgb(22 18 16 / 0.92)  0%,   /* warm near-black */
    rgb(22 18 16 / 0.60) 38%,
    rgb(22 18 16 / 0.15) 68%,
    rgb(22 18 16 / 0.04) 100%
  );
}

/* ---------------------------------------------------------------------------
   Date summary — top-right, always visible
--------------------------------------------------------------------------- */

.ee-card__dates-wrap {
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
  z-index: 3;
  text-align: right;
}

/* Static label — not a button, no interactive states */
.ee-card__dates-label {
  display: inline-block;
  font-size: 1.75rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1;
  letter-spacing: -0.02em;
  text-shadow: 0 1px 6px rgb(0 0 0 / 0.5);
  background: rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 10px;
  padding: 0.35rem 0.65rem;
}

/* Detail panel — always visible */
.ee-card__dates-detail {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.3rem;
  margin-top: 0.5rem;
}

/* Frosted pill tags — right-aligned in the detail panel */
.ee-card__date-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.95);
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 0.25rem 0.75rem 0.25rem 0.45rem;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Card body — flex row: logo on left, info column on right
--------------------------------------------------------------------------- */

.ee-card__body {
  position: relative;
  z-index: 2;
  padding: 1.5rem 2rem;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 1.125rem;
}

/* ---------------------------------------------------------------------------
   Logo — white square, inside body, larger than before
--------------------------------------------------------------------------- */

.ee-card__logo {
  width: 96px;
  height: 96px;
  flex-shrink: 0;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 2px 16px rgb(0 0 0 / 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  overflow: hidden;
}

.ee-card__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ---------------------------------------------------------------------------
   Info column — title, location, actions
--------------------------------------------------------------------------- */

.ee-card__info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
  min-width: 0; /* prevent overflow in flex child */
}

/* ---------------------------------------------------------------------------
   Title
--------------------------------------------------------------------------- */

.ee-card__title {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
  text-shadow: 0 1px 6px rgb(0 0 0 / 0.45);
}

/* ---------------------------------------------------------------------------
   Location
--------------------------------------------------------------------------- */

.ee-card__location {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.01em;
}

.ee-card__location-text {
  line-height: 1.5;
}

.ee-card__booth-sep {
  margin-inline: 0.3rem;
  opacity: 0.45;
}

/* Google Maps link — subtle underline, no colour change from surrounding text */
.ee-card__maps-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(255, 255, 255, 0.35);
  transition: text-decoration-color 0.15s ease;
}

.ee-card__maps-link:hover {
  color: #ffffff;
  text-decoration-color: rgba(255, 255, 255, 0.75);
}

/* ---------------------------------------------------------------------------
   SVG icons
--------------------------------------------------------------------------- */

.ee-icon {
  width: 0.9375rem;
  height: 0.9375rem;
  flex-shrink: 0;
  opacity: 0.75;
  margin-top: 0.1em;
}

/* ---------------------------------------------------------------------------
   Action row — register CTA + info links in one flex row
--------------------------------------------------------------------------- */

.ee-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.25rem;
}

/* ---------------------------------------------------------------------------
   Registration / Tickets CTA
   Brand terracotta-red — the same colour as the site's primary CTA button.
--------------------------------------------------------------------------- */

.ee-card__register {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #ffffff;
  text-decoration: none;
  background: var(--ee-red);
  border-radius: 999px;
  padding: 0.65rem 1.75rem;
  box-shadow: 0 2px 16px rgb(192 56 30 / 0.45);
  transition: background 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}

.ee-card__register:hover {
  background: var(--ee-red-dark);
  color: #ffffff;
  text-decoration: none;
  transform: scale(1.02);
  box-shadow: 0 4px 24px rgb(192 56 30 / 0.55);
}

/* ---------------------------------------------------------------------------
   Additional / info links — ghost buttons
--------------------------------------------------------------------------- */

.ee-card__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.ee-card__link {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  padding: 0.4rem 1rem;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ee-card__link:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.45);
  color: #ffffff;
  text-decoration: none;
}

/* ---------------------------------------------------------------------------
   Event item wrapper — card + description panel stacked
--------------------------------------------------------------------------- */

.ee-event-item {
  display: flex;
  flex-direction: column;
}

/* "More Info" button — same ghost pill style as .ee-card__link */
.ee-card__more-btn {
  /* Button reset */
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  cursor: pointer;
}

.ee-card__more-btn.is-open {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.45);
  color: #ffffff;
}

/* ---------------------------------------------------------------------------
   Description panel — slides open below the card
--------------------------------------------------------------------------- */

.ee-event-desc {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s ease;
  /* Visually connects to the card above — shares the bottom radius */
  background: rgba(255, 255, 255, 0.35);
  border-radius: 0 0 1.25rem 1.25rem;
  box-shadow:
    0 8px 24px -4px rgb(0 0 0 / 0.18),
    0 2px 0 0 rgb(0 0 0 / 0.04);
  /* Tiny negative margin so the panel tucks under the card edge */
  margin-top: -1.25rem;
  padding-top: 1.25rem; /* compensates for the negative margin */
}

.ee-event-desc.is-open {
  max-height: 3000px; /* generous; actual height is content-driven */
}

.ee-event-desc__inner {
  padding: 1.75rem 2rem 2rem;
  color: var(--ee-dark);
}

/* ---------------------------------------------------------------------------
   Description two-column layout: meta (1/3) + content (2/3)
--------------------------------------------------------------------------- */

.ee-desc-layout {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}

/* Left column — dark summary card */
.ee-desc-meta {
  flex: 0 0 30%;
  background: var(--ee-dark);
  border-radius: 0.875rem;
  padding: 1.5rem;
  color: #ffffff;
}

.ee-desc-meta__title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0 0 1rem;
}

.ee-desc-meta__section {
  margin-bottom: 1rem;
}
.ee-desc-meta__section:last-child { margin-bottom: 0; }

.ee-desc-meta__heading {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 0.4rem;
}

.ee-desc-meta__item {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.55;
  margin-bottom: 0.3rem;
}
.ee-desc-meta__item:last-child { margin-bottom: 0; }

.ee-desc-meta__item .ee-icon { opacity: 0.55; margin-top: 0.2em; }

.ee-desc-meta__link {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(255, 255, 255, 0.3);
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.ee-desc-meta__link:hover {
  color: #ffffff;
  text-decoration-color: rgba(255, 255, 255, 0.7);
}

/* Register button inside the meta card */
.ee-desc-meta__register {
  display: inline-flex;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #ffffff;
  text-decoration: none;
  background: var(--ee-red);
  border-radius: 999px;
  padding: 0.55rem 1.25rem;
  transition: background 0.15s ease;
  margin-top: 0.25rem;
}
.ee-desc-meta__register:hover {
  background: var(--ee-red-dark);
  color: #ffffff;
  text-decoration: none;
}

/* Right column — post content */
.ee-desc-content {
  flex: 1;
  min-width: 0;
  font-size: 1.125rem;
  line-height: 1.8;
  color: var(--ee-dark);
}

.ee-desc-content p       { margin: 0 0 1em; }
.ee-desc-content p:last-child { margin-bottom: 0; }
.ee-desc-content h2,
.ee-desc-content h3,
.ee-desc-content h4      { margin: 1.25em 0 0.5em; font-weight: 700; }
.ee-desc-content ul,
.ee-desc-content ol      { padding-left: 1.5em; margin: 0 0 1em; }
.ee-desc-content a       { color: var(--ee-red); }
.ee-desc-content a:hover { color: var(--ee-red-dark); }

/* ---------------------------------------------------------------------------
   Responsive
--------------------------------------------------------------------------- */

@media (max-width: 768px) {
  .ee-wrap {
    padding: 2.5rem 1.25rem;
  }

  .ee-card {
    min-height: 360px;
    border-radius: 1rem;
  }

  .ee-card__body {
    padding: 1.25rem 1.5rem;
    gap: 0.875rem;
  }

  .ee-card__logo {
    width: 76px;
    height: 76px;
  }

  .ee-card__dates-label {
    font-size: 1.375rem;
  }

  /* Description panel: stack to single column */
  .ee-desc-layout {
    flex-direction: column;
    gap: 1.25rem;
  }

  .ee-desc-meta {
    flex: 0 0 auto;
    width: 100%;
  }

  .ee-desc-content {
    font-size: 1rem;
  }

  .ee-event-desc__inner {
    padding: 1.5rem 1.5rem 1.75rem;
  }
}

@media (max-width: 480px) {
  .ee-wrap {
    padding: 2rem 1rem;
  }

  .ee-card {
    min-height: 300px;
  }

  .ee-card__body {
    padding: 1rem 1.125rem;
    gap: 0.75rem;
  }

  .ee-card__logo {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    padding: 6px;
  }

  .ee-card__dates-label {
    font-size: 1.125rem;
    padding: 0.2rem 0.45rem;
  }

  /* On very small screens, hide the date detail pills on the card to reduce clutter */
  .ee-card__dates-detail {
    display: none;
  }

  .ee-card__title {
    font-size: 1.125rem;
  }

  .ee-event-desc__inner {
    padding: 1.25rem 1rem 1.5rem;
  }

  .ee-desc-content {
    font-size: 0.9375rem;
  }
}