/*
 * 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 */
}

/* ---------------------------------------------------------------------------
   Defensive reset — overrides parent theme + Elementor globals

   Elementor (and many themes) inject global h1-h6/p/a sizing, margins, and
   link colours that bleed into our cards (giant titles, weird line-heights,
   unwanted underline colours, etc). We fight back with high-specificity
   selectors and !important on the inherited properties that actually matter.
   Everything is scoped under .ee-wrap so nothing leaks out to the rest of
   the site.

   This block is verbose on purpose — precision beats cleanliness when the
   opposition is other people's CSS.
--------------------------------------------------------------------------- */

.ee-wrap,
.ee-wrap * {
  box-sizing: border-box;
}

/* Reset inherited typography inside our wrapper. We explicitly re-declare
   font-size/weight/line-height/letter-spacing on structural tags so Elementor
   heading tokens (--e-global-typography-*) can't reach in. */
.ee-wrap h1, .ee-wrap h2, .ee-wrap h3,
.ee-wrap h4, .ee-wrap h5, .ee-wrap h6 {
  font-family: inherit !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: normal !important;
  margin: 0 !important;
  padding: 0 !important;
  color: inherit;
  text-transform: none !important;
  text-shadow: inherit;
  background: transparent !important;
}

.ee-wrap p {
  margin: 0;
  padding: 0;
  font-family: inherit;
  line-height: 1.5;
  color: inherit;
}

.ee-wrap a {
  background: transparent !important;
  text-shadow: none;
}

.ee-wrap ul, .ee-wrap ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ee-wrap img {
  max-width: 100%;
  height: auto;
  display: block;
}

.ee-wrap button {
  font-family: inherit;
  cursor: pointer;
}

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

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

.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-wrap .ee-page-heading,
h1.ee-page-heading {
  font-size: clamp(1.625rem, 4vw, 2.5rem) !important;
  font-weight: 700 !important;
  color: var(--ee-dark) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
  margin: 0 0 2.5rem !important;
  padding: 0 !important;
  text-transform: none !important;
}

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

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

/* ---------------------------------------------------------------------------
   Layout variants — stacked (default), 2-col grid, 3-col grid.
   The layout class is emitted by the render function from the saved option.
--------------------------------------------------------------------------- */

/* Explicit stacked (same as base, declared for clarity/symmetry) */
.ee-list.ee-list--stacked {
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
}

/* ===== 2-column grid — 16:9 image area ===== */
.ee-list.ee-list--grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  /* stretch = default; cards in a row match heights, actions pin to bottom */
}

/* ===== 3-column grid — 5:4 image area ===== */
.ee-list.ee-list--grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

/* ---------------------------------------------------------------------------
   Grid mode media-card reskin
   In grid modes the card flips from the stacked-hero design (body floats over
   image) to a media-card design: image on top with a fixed aspect ratio,
   content panel below on a light surface. Inspired by .eti_media-card in the
   ETI style guide (style-guide/components.css).
--------------------------------------------------------------------------- */

/* Card shell:
   - Image cards become an elevated white surface (body panel below image).
   - Flat cards (no-image) keep their admin-picked bg color + --ee-flat-text;
     :not(.ee-card--no-image) scopes all image-card restyling to image cards.
   Layout props (min-height, aspect-ratio, height) apply to both so the grid
   can still size cards predictably. */
.ee-list--grid-2 .ee-card,
.ee-list--grid-3 .ee-card {
  min-height: 0 !important;
  aspect-ratio: auto !important;
  height: 100%;
  justify-content: flex-start !important;
}
.ee-list--grid-2 .ee-card:not(.ee-card--no-image),
.ee-list--grid-3 .ee-card:not(.ee-card--no-image) {
  background-color: #ffffff !important;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 6px 20px -6px rgb(0 0 0 / 0.14);
}
.ee-list--grid-2 .ee-card:not(.ee-card--no-image):hover,
.ee-list--grid-3 .ee-card:not(.ee-card--no-image):hover {
  box-shadow: 0 2px 4px rgb(0 0 0 / 0.08), 0 12px 32px -6px rgb(0 0 0 / 0.20);
}

/* Image area: stops being absolute and takes a fixed aspect ratio at the top. */
.ee-list--grid-2 .ee-card__bg,
.ee-list--grid-3 .ee-card__bg {
  position: relative;
  inset: auto;
  width: 100%;
  flex-shrink: 0;
  overflow: hidden;
}
.ee-list--grid-2 .ee-card__bg { aspect-ratio: 16 / 9; }
.ee-list--grid-3 .ee-card__bg { aspect-ratio: 5 / 4; }

/* Dark gradient overlay not needed when body sits below — hide it. */
.ee-list--grid-2 .ee-card__overlay,
.ee-list--grid-3 .ee-card__overlay {
  display: none;
}

/* Big date-range label stays top-right overlaid on the image. Detail pills
   get hidden in grid mode (redundant with the range; More-Info shows them). */
.ee-list--grid-2 .ee-card__dates-wrap,
.ee-list--grid-3 .ee-card__dates-wrap {
  top: 0.875rem;
  right: 0.875rem;
}
.ee-list--grid-2 .ee-card__dates-label {
  font-size: clamp(0.85rem, 1vw, 1rem) !important;
  padding: 0.3rem 0.6rem !important;
}
.ee-list--grid-3 .ee-card__dates-label {
  font-size: clamp(0.75rem, 0.9vw, 0.9rem) !important;
  padding: 0.25rem 0.55rem !important;
}

/* Body panel: CSS grid with logo + title as row 1, everything else (location,
   dates, actions) spanning both columns in subsequent rows. `display: contents`
   on .ee-card__info promotes its children so they can participate in this grid
   — keeping the HTML structure intact while giving grid mode the layout it
   needs. align-content: start keeps rows stacked at the top so sparse cards
   don't spread content vertically.
   Scoped to image cards — flat cards use .ee-card__flat layout. */
.ee-list--grid-2 .ee-card:not(.ee-card--no-image) .ee-card__body,
.ee-list--grid-3 .ee-card:not(.ee-card--no-image) .ee-card__body {
  position: static !important;
  z-index: auto !important;
  display: grid !important;
  grid-template-columns: auto 1fr;
  align-items: start !important;
  align-content: start;
  column-gap: 0.875rem;
  row-gap: 0.5rem;
  padding: 1.25rem 1.5rem 1.5rem !important;
  flex: 1;
  background: transparent;
}
.ee-list--grid-3 .ee-card:not(.ee-card--no-image) .ee-card__body {
  padding: 1rem 1.125rem 1.25rem !important;
  column-gap: 0.75rem;
  row-gap: 0.4rem;
}

/* Info becomes display:contents so its children (title, location, dates,
   actions) are laid out directly by the body's grid. The info container
   itself disappears from the visual box tree (DOM + a11y intact). */
.ee-list--grid-2 .ee-card:not(.ee-card--no-image) .ee-card__info,
.ee-list--grid-3 .ee-card:not(.ee-card--no-image) .ee-card__info {
  display: contents;
}

/* No-logo case: collapse to single column so the title starts at the edge. */
.ee-list--grid-2 .ee-card:not(.ee-card--no-image) .ee-card__body:not(:has(.ee-card__logo)),
.ee-list--grid-3 .ee-card:not(.ee-card--no-image) .ee-card__body:not(:has(.ee-card__logo)) {
  grid-template-columns: 1fr;
}

/* Row 1 — logo (left) + title (right), vertically centred with each other.
   Logo is bigger than before now that it owns its row. */
.ee-list--grid-2 .ee-card:not(.ee-card--no-image) .ee-card__logo,
.ee-list--grid-3 .ee-card:not(.ee-card--no-image) .ee-card__logo {
  grid-column: 1;
  grid-row: 1;
  width: 64px !important;
  height: 64px !important;
  padding: 4px !important;
  margin: 0;
  align-self: center;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.1);
}
.ee-list--grid-3 .ee-card:not(.ee-card--no-image) .ee-card__logo {
  width: 56px !important;
  height: 56px !important;
}
.ee-list--grid-2 .ee-card:not(.ee-card--no-image) .ee-card__title,
.ee-list--grid-3 .ee-card:not(.ee-card--no-image) .ee-card__title {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
}

/* No-logo: title spans the single column. */
.ee-list--grid-2 .ee-card:not(.ee-card--no-image) .ee-card__body:not(:has(.ee-card__logo)) .ee-card__title,
.ee-list--grid-3 .ee-card:not(.ee-card--no-image) .ee-card__body:not(:has(.ee-card__logo)) .ee-card__title {
  grid-column: 1;
}

/* Rows 2+ — everything below the header row spans both columns, left-aligned
   from the card edge (not indented under the logo). */
.ee-list--grid-2 .ee-card:not(.ee-card--no-image) .ee-card__location,
.ee-list--grid-2 .ee-card:not(.ee-card--no-image) .ee-card__dates-detail--grid,
.ee-list--grid-2 .ee-card:not(.ee-card--no-image) .ee-card__actions,
.ee-list--grid-3 .ee-card:not(.ee-card--no-image) .ee-card__location,
.ee-list--grid-3 .ee-card:not(.ee-card--no-image) .ee-card__dates-detail--grid,
.ee-list--grid-3 .ee-card:not(.ee-card--no-image) .ee-card__actions {
  grid-column: 1 / -1;
}

/* Small top margin on the first below-header row to separate from the title
   line, then tighter spacing between the detail rows. */
.ee-list--grid-2 .ee-card:not(.ee-card--no-image) .ee-card__location,
.ee-list--grid-3 .ee-card:not(.ee-card--no-image) .ee-card__location {
  margin-top: 0.25rem;
}
.ee-list--grid-2 .ee-card:not(.ee-card--no-image) .ee-card__actions,
.ee-list--grid-3 .ee-card:not(.ee-card--no-image) .ee-card__actions {
  padding-top: 0.5rem;
}

/* Date-detail pills — base (in .ee-card__dates-wrap) is SHOWN in stacked mode,
   HIDDEN in grid mode. The --grid copy (in .ee-card__info) is the opposite. */
.ee-card__dates-detail--grid {
  display: none;
}
.ee-list--grid-2 .ee-card__dates-wrap .ee-card__dates-detail,
.ee-list--grid-3 .ee-card__dates-wrap .ee-card__dates-detail {
  display: none;
}
.ee-list--grid-2 .ee-card__dates-detail--grid,
.ee-list--grid-3 .ee-card__dates-detail--grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.3rem;
  margin-top: 0.25rem;
}

/* Dark-on-light date pills for image cards in grid mode (body sits on white). */
.ee-wrap .ee-list--grid-2 .ee-card:not(.ee-card--no-image) .ee-card__dates-detail--grid .ee-card__date-item,
.ee-wrap .ee-list--grid-3 .ee-card:not(.ee-card--no-image) .ee-card__dates-detail--grid .ee-card__date-item {
  background: color-mix(in srgb, var(--ee-dark) 6%, transparent) !important;
  border-color: color-mix(in srgb, var(--ee-dark) 14%, transparent) !important;
  color: color-mix(in srgb, var(--ee-dark) 75%, transparent) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  text-shadow: none;
  font-size: 0.75rem;
}
.ee-list--grid-3 .ee-card:not(.ee-card--no-image) .ee-card__dates-detail--grid .ee-card__date-item {
  font-size: 0.7rem;
  padding: 0.2rem 0.55rem 0.2rem 0.4rem;
}

/* Info column lays out vertically — same as body, just re-assert. */
.ee-list--grid-2 .ee-card__info,
.ee-list--grid-3 .ee-card__info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
}

/* Title: dark-on-light, no shadow — IMAGE CARDS ONLY.
   Flat (no-image) cards keep var(--ee-flat-text) set by the base flat-card
   rules + admin text colour picker.
   NOTE: .ee-wrap prefix used on colour-setting rules to out-specific the
   base .ee-wrap-prefixed rules further down this stylesheet. */
.ee-wrap .ee-list--grid-2 .ee-card:not(.ee-card--no-image) .ee-card__title,
.ee-wrap .ee-list--grid-3 .ee-card:not(.ee-card--no-image) .ee-card__title,
.ee-wrap .ee-list--grid-2 .ee-card:not(.ee-card--no-image) h2.ee-card__title,
.ee-wrap .ee-list--grid-3 .ee-card:not(.ee-card--no-image) h2.ee-card__title {
  color: var(--ee-dark) !important;
  text-shadow: none !important;
}
.ee-wrap .ee-list--grid-2 .ee-card__title { font-size: clamp(1.1rem, 1.8vw, 1.4rem) !important; }
.ee-wrap .ee-list--grid-3 .ee-card__title { font-size: clamp(1rem, 1.4vw, 1.2rem) !important; }

/* Location colour — image cards go dark; flat cards keep --ee-flat-text. */
.ee-wrap .ee-list--grid-2 .ee-card:not(.ee-card--no-image) .ee-card__location,
.ee-wrap .ee-list--grid-3 .ee-card:not(.ee-card--no-image) .ee-card__location {
  color: color-mix(in srgb, var(--ee-dark) 70%, transparent) !important;
}
.ee-wrap .ee-list--grid-2 .ee-card__location { font-size: clamp(0.8rem, 1vw, 0.95rem) !important; }
.ee-wrap .ee-list--grid-3 .ee-card__location { font-size: clamp(0.75rem, 0.9vw, 0.875rem) !important; }

/* Maps link — inherit from location (image cards dark, flat cards flat-text). */
.ee-wrap .ee-list--grid-2 .ee-card:not(.ee-card--no-image) .ee-card__location .ee-card__maps-link,
.ee-wrap .ee-list--grid-3 .ee-card:not(.ee-card--no-image) .ee-card__location .ee-card__maps-link,
.ee-wrap .ee-list--grid-2 .ee-card:not(.ee-card--no-image) .ee-card__location a.ee-card__maps-link,
.ee-wrap .ee-list--grid-3 .ee-card:not(.ee-card--no-image) .ee-card__location a.ee-card__maps-link {
  color: inherit !important;
  text-decoration-color: color-mix(in srgb, var(--ee-dark) 30%, transparent) !important;
}
.ee-wrap .ee-list--grid-2 .ee-card:not(.ee-card--no-image) .ee-card__location .ee-card__maps-link:hover,
.ee-wrap .ee-list--grid-3 .ee-card:not(.ee-card--no-image) .ee-card__location .ee-card__maps-link:hover,
.ee-wrap .ee-list--grid-2 .ee-card:not(.ee-card--no-image) .ee-card__location a.ee-card__maps-link:hover,
.ee-wrap .ee-list--grid-3 .ee-card:not(.ee-card--no-image) .ee-card__location a.ee-card__maps-link:hover {
  color: var(--ee-dark) !important;
  text-decoration-color: color-mix(in srgb, var(--ee-dark) 60%, transparent) !important;
}

/* Icon opacity stronger on light bg (image cards only). */
.ee-wrap .ee-list--grid-2 .ee-card:not(.ee-card--no-image) .ee-card__location .ee-icon,
.ee-wrap .ee-list--grid-3 .ee-card:not(.ee-card--no-image) .ee-card__location .ee-icon {
  opacity: 0.55;
}

/* Ghost action links — dark outline on the light body (image cards only). */
.ee-wrap .ee-list--grid-2 .ee-card:not(.ee-card--no-image) a.ee-card__link,
.ee-wrap .ee-list--grid-2 .ee-card:not(.ee-card--no-image) button.ee-card__link,
.ee-wrap .ee-list--grid-2 .ee-card:not(.ee-card--no-image) button.ee-card__more-btn,
.ee-wrap .ee-list--grid-3 .ee-card:not(.ee-card--no-image) a.ee-card__link,
.ee-wrap .ee-list--grid-3 .ee-card:not(.ee-card--no-image) button.ee-card__link,
.ee-wrap .ee-list--grid-3 .ee-card:not(.ee-card--no-image) button.ee-card__more-btn {
  background: transparent !important;
  background-color: transparent !important;
  border-color: color-mix(in srgb, var(--ee-dark) 22%, transparent) !important;
  color: color-mix(in srgb, var(--ee-dark) 75%, transparent) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.ee-wrap .ee-list--grid-2 .ee-card:not(.ee-card--no-image) a.ee-card__link:hover,
.ee-wrap .ee-list--grid-2 .ee-card:not(.ee-card--no-image) button.ee-card__link:hover,
.ee-wrap .ee-list--grid-2 .ee-card:not(.ee-card--no-image) button.ee-card__more-btn:hover,
.ee-wrap .ee-list--grid-3 .ee-card:not(.ee-card--no-image) a.ee-card__link:hover,
.ee-wrap .ee-list--grid-3 .ee-card:not(.ee-card--no-image) button.ee-card__link:hover,
.ee-wrap .ee-list--grid-3 .ee-card:not(.ee-card--no-image) button.ee-card__more-btn:hover,
.ee-wrap .ee-list--grid-2 .ee-card:not(.ee-card--no-image) button.ee-card__more-btn.is-open,
.ee-wrap .ee-list--grid-3 .ee-card:not(.ee-card--no-image) button.ee-card__more-btn.is-open {
  background: color-mix(in srgb, var(--ee-dark) 6%, transparent) !important;
  background-color: color-mix(in srgb, var(--ee-dark) 6%, transparent) !important;
  border-color: color-mix(in srgb, var(--ee-dark) 40%, transparent) !important;
  color: var(--ee-dark) !important;
}

/* Actions row — smaller gap in tighter grid-3. */
.ee-list--grid-2 .ee-card__actions,
.ee-list--grid-3 .ee-card__actions {
  padding-top: 0.25rem;
  margin-top: auto; /* stick to bottom of body */
}
.ee-list--grid-3 .ee-card__actions { gap: 0.4rem !important; }

/* Register button sized down a touch in grid-3 so it fits next to secondary
   links on one row. grid-2 keeps the default sizing. */
.ee-list--grid-3 a.ee-card__register {
  font-size: 0.875rem !important;
  padding: 0.5rem 1.25rem !important;
}

/* ---- "Open" state in grid mode: span the full row ---- */
.ee-list--grid-2 .ee-event-item.is-open,
.ee-list--grid-3 .ee-event-item.is-open {
  grid-column: 1 / -1;
}
/* When full-width, the image area can relax into a wider aspect so it doesn't
   dominate the expanded row. Tall image on full-width looks awkward. */
.ee-list--grid-2 .ee-event-item.is-open .ee-card__bg,
.ee-list--grid-3 .ee-event-item.is-open .ee-card__bg {
  aspect-ratio: 21 / 9;
}

/* ---- Flat (no-image) cards in grid modes ----
   No image area to render. The whole card IS the body — inherits the admin-
   picked bg colour (inline style) and admin text colour (via --ee-flat-text).
   Only size/layout props here; no background or text colour overrides so the
   flat-card variables / inline styles can flow through. */
.ee-list--grid-2 .ee-card--no-image,
.ee-list--grid-3 .ee-card--no-image {
  min-height: 280px;
}
.ee-list--grid-2 .ee-card__flat,
.ee-list--grid-3 .ee-card__flat {
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 1.25rem;
  text-align: left;
  padding: 1.5rem;
  height: 100%;
}
.ee-list--grid-3 .ee-card__flat { padding: 1.25rem; }
.ee-list--grid-2 .ee-card--no-image .ee-card__dates-wrap,
.ee-list--grid-3 .ee-card--no-image .ee-card__dates-wrap {
  text-align: left;
  max-width: 100%;
  width: 100%;
  position: static;
}
.ee-list--grid-2 .ee-card--no-image .ee-card__body,
.ee-list--grid-3 .ee-card--no-image .ee-card__body {
  align-items: flex-start !important;
}

/* ---- Responsive: collapse grids on narrow screens ----
   grid-3 drops to 2-col at <=1023px (cards get too cramped otherwise),
   grid-2 drops to 1-col at <=767px (preserves a ~360px card min width),
   grid-3 also drops to 1-col at <=767px. */
@media (max-width: 1023px) {
  .ee-list.ee-list--grid-3 {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
  }
  .ee-list--grid-3 .ee-card__bg {
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 767px) {
  .ee-list.ee-list--grid-2,
  .ee-list.ee-list--grid-3 {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
  /* At 1-col the image can open up a bit more — 16:9 across the whole
     wrapper feels right for both grid variants on mobile. */
  .ee-list--grid-2 .ee-card__bg,
  .ee-list--grid-3 .ee-card__bg {
    aspect-ratio: 16 / 9;
  }
}

/* ---------------------------------------------------------------------------
   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,
.ee-card--no-image h2.ee-card__title,
.ee-wrap .ee-card--no-image .ee-card__title {
  color: var(--ee-flat-text) !important;
  text-shadow: none !important;
}

/* Flat-card location — inherits the admin text-colour picker via --ee-flat-text.
   !important to beat the base location rule which is itself !important to
   defeat Elementor. */
.ee-card--no-image .ee-card__location {
  color: color-mix(in srgb, var(--ee-flat-text) 65%, transparent) !important;
}

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

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

/* Ghost action links — dark-on-light variant for flat cards.
   Use !important to beat the base .ee-card__link rule which is itself locked
   with !important to defeat Elementor. The --ee-flat-text variable lets the
   admin text-colour picker flow through. */
.ee-card--no-image a.ee-card__link,
.ee-card--no-image button.ee-card__link,
.ee-card--no-image button.ee-card__more-btn {
  background: color-mix(in srgb, var(--ee-flat-text) 7%, transparent) !important;
  background-color: color-mix(in srgb, var(--ee-flat-text) 7%, transparent) !important;
  border-color: color-mix(in srgb, var(--ee-flat-text) 14%, transparent) !important;
  color: color-mix(in srgb, var(--ee-flat-text) 70%, transparent) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.ee-card--no-image a.ee-card__link:hover,
.ee-card--no-image button.ee-card__link:hover,
.ee-card--no-image button.ee-card__more-btn:hover,
.ee-card--no-image button.ee-card__more-btn.is-open {
  background: color-mix(in srgb, var(--ee-flat-text) 13%, transparent) !important;
  background-color: color-mix(in srgb, var(--ee-flat-text) 13%, transparent) !important;
  border-color: color-mix(in srgb, var(--ee-flat-text) 25%, transparent) !important;
  color: var(--ee-flat-text) !important;
}

/* 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-wrap .ee-card__title,
h2.ee-card__title {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem) !important;
  font-weight: 700 !important;
  color: #ffffff;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
  padding: 0 !important;
  text-shadow: 0 1px 6px rgb(0 0 0 / 0.45);
  text-transform: none !important;
}

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

/* Location block — white on image-backed cards, Elementor-proof.
   The nested <a class="ee-card__maps-link"> is the real target: themes/
   Elementor set global anchor colours (e.g. forest green) that leak in.
   Lock the colour so card contrast is guaranteed. */
.ee-wrap .ee-card__location,
.ee-card__location {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  font-size: 1.25rem !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  letter-spacing: 0.01em !important;
  line-height: 1.4 !important;
}

.ee-wrap .ee-card__location-text,
.ee-card__location-text {
  line-height: 1.4 !important;
  color: inherit !important;
}

/* Scale the pin icon to match the larger location font-size. Uses em so the
   icon tracks text size automatically. */
.ee-card__location .ee-icon {
  width: 1em !important;
  height: 1em !important;
  margin-top: 0 !important;
}

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

/* Google Maps link — inherit from the location block (white on image,
   --ee-flat-text on flat). Force color:inherit so Elementor's global
   <a> colour can't win. */
.ee-wrap .ee-card__location .ee-card__maps-link,
.ee-wrap a.ee-card__maps-link,
.ee-card__location .ee-card__maps-link,
a.ee-card__maps-link {
  color: inherit !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(255, 255, 255, 0.35) !important;
  text-underline-offset: 2px !important;
  background: transparent !important;
  text-shadow: none !important;
  transition: color 0.15s ease, text-decoration-color 0.15s ease !important;
}

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

/* ---------------------------------------------------------------------------
   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.
--------------------------------------------------------------------------- */

/* Brand terracotta CTA — Elementor-proof. Every visual property Elementor
   resets (font, color, background, border, padding, shadow) is locked with
   !important. High-specificity `.ee-wrap a.ee-card__register` beats
   `.elementor-kit-XXXX button`. The duplicate non-.ee-wrap selector covers
   any case where the scope wrapper is absent. */
.ee-wrap a.ee-card__register,
a.ee-card__register {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.375rem !important;
  font-family: inherit !important;
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  text-decoration: none !important;
  color: #ffffff !important;
  background: var(--ee-red) !important;
  background-color: var(--ee-red) !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 0.65rem 1.75rem !important;
  margin: 0 !important;
  box-shadow: 0 2px 16px rgb(192 56 30 / 0.45) !important;
  text-shadow: none !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  min-height: 0 !important;
  min-width: 0 !important;
  width: auto !important;
  transform: none !important;
  transition: background 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease !important;
}

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

.ee-wrap a.ee-card__register:focus-visible,
a.ee-card__register:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgb(192 56 30 / 0.35), 0 2px 16px rgb(192 56 30 / 0.45) !important;
}

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

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

/* Ghost pill buttons — EXTREMELY defensive against theme/Elementor button globals.
   Every visual property Elementor resets (font, color, background, border,
   padding, shadow, transform) is locked with !important. High-specificity
   selector (`.ee-wrap` prefix + element type) pushes us past Elementor's
   `.elementor-kit-XXXX button` rule (specificity 0,1,1). Both .ee-card__link
   and .ee-card__more-btn share the same look — the more-btn just happens to
   be a <button>, everything else is a <a>. */
.ee-wrap a.ee-card__link,
.ee-wrap button.ee-card__link,
.ee-wrap button.ee-card__more-btn,
a.ee-card__link,
button.ee-card__link,
button.ee-card__more-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: inherit !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  text-decoration: none !important;
  color: rgba(255, 255, 255, 0.85) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 999px !important;
  padding: 0.4rem 1rem !important;
  margin: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  min-height: 0 !important;
  min-width: 0 !important;
  width: auto !important;
  transform: none !important;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}

.ee-wrap a.ee-card__link:hover,
.ee-wrap button.ee-card__link:hover,
.ee-wrap button.ee-card__more-btn:hover,
a.ee-card__link:hover,
button.ee-card__link:hover,
button.ee-card__more-btn:hover,
.ee-wrap button.ee-card__more-btn.is-open,
button.ee-card__more-btn.is-open {
  background: rgba(255, 255, 255, 0.22) !important;
  background-color: rgba(255, 255, 255, 0.22) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
  color: #ffffff !important;
  text-decoration: none !important;
  transform: none !important;
}

/* Kill focus outlines from Elementor; use our own subtle ring */
.ee-wrap a.ee-card__link:focus-visible,
.ee-wrap button.ee-card__link:focus-visible,
.ee-wrap button.ee-card__more-btn:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6) !important;
}

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

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

/* ---------------------------------------------------------------------------
   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-wrap .ee-desc-meta__title,
h3.ee-desc-meta__title {
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 1rem !important;
  padding: 0 !important;
  text-transform: none !important;
}

.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 More-Info meta card — Elementor-proof. */
.ee-wrap a.ee-desc-meta__register,
a.ee-desc-meta__register {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: inherit !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  text-decoration: none !important;
  color: #ffffff !important;
  background: var(--ee-red) !important;
  background-color: var(--ee-red) !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 0.55rem 1.25rem !important;
  margin: 0.25rem 0 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  min-height: 0 !important;
  min-width: 0 !important;
  width: auto !important;
  transform: none !important;
  transition: background 0.15s ease !important;
}
.ee-wrap a.ee-desc-meta__register:hover,
a.ee-desc-meta__register:hover {
  background: var(--ee-red-dark) !important;
  background-color: var(--ee-red-dark) !important;
  color: #ffffff !important;
  text-decoration: none !important;
}
.ee-wrap a.ee-desc-meta__register:focus-visible,
a.ee-desc-meta__register:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgb(192 56 30 / 0.35) !important;
}

/* 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 !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}
.ee-desc-content h2 { font-size: 1.5rem !important; }
.ee-desc-content h3 { font-size: 1.25rem !important; }
.ee-desc-content h4 { font-size: 1.125rem !important; }
.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;
  }
}