/* =========================================================================
   Event Page styles — sits on top of design-tokens.css.
   Mirrors the seeko-child §10 single-event-page conventions: cream info
   panel, navy/gold accents, Montserrat headings, Nunito Sans body.
   ========================================================================= */

/* 1. SECTION: Host-page reset + page shell */
/* ---------- Host-page reset on single social_event ----------
   Neutralise the Seeko theme's .entry-content chrome (max-width / border /
   bg / padding) and hide the theme's h1.entry-title — the new design has
   its own hero with its own H1. */
/* 1.1 .entry-content host reset — neutralises Seeko chrome on single_social_event */
body.single-social_event .entry-content {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}
/* 1.2 Hide Seeko theme entry-title / page-header / standard image — design has its own hero */
body.single-social_event h1.entry-title,
body.single-social_event .entry-header,
body.single-social_event .page-header,
body.single-social_event .single-post-title,
body.single-social_event .col-header,
body.single-social_event .standard-post-img { display: none !important; }
/* Reset legacy single-event chrome from functions.php §28 in case it leaks.
   IMPORTANT: must `:not(.event-card__title)` so this doesn't clobber the
   design's title rules (`margin: 10px 0 calc(--sp-lg + 5px)`, `padding-bottom: 8px`,
   border-bottom for the gold underline, and the `margin-left/right: auto` centering
   inside @container narrow blocks). Without the :not, the reset's higher
   specificity (0,2,2) beats the design's `.event-card__title` (0,1,0) and the
   underline ends up flush with the cards below, plus the title can't centre. */
/* 1.3 Reset legacy single-event h2/h3 chrome — skips .event-card__title so design rules win */
body.single-social_event .entry-content h2:not(.event-card__title),
body.single-social_event .entry-content h3:not(.entry-title):not(.event-card__title) {
  background: transparent !important;
  border-left: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0;
}

/* 1.4 Page shell wrappers */
/* ---------- Page shell ---------- */
/* 1.4.1 html scrollbar-gutter — reserves gutter so layout does not shift */
html { scrollbar-gutter: stable; }
/* 1.4.2 .event-page — page container, declares vp container-query scope */
.event-page {
  display: block;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  width: 100%;
  min-height: 100%;
  container-type: inline-size;
  container-name: vp;
}

/* end of 1.4.2 */
/* end of 1.4 */
/* end of 1 */
/* 2. SECTION: Viewport frame — Tweaks panel simulator */
/* =========================================================================
   VIEWPORT FRAME — Tweaks panel "Width" simulator
   Mirrors the accounts-page setup. Centres the design + lets us preview at
   common breakpoints without resizing the actual browser.
   ========================================================================= */
/* 2.1 .viewport-frame — centred container that caps width for breakpoint preview */
.viewport-frame {
  width: 100%;
  margin: 0 auto;
  background: var(--color-bg);
  min-height: 100vh;
}
/* 2.2 .viewport-frame[data-viewport] — width variants per preview breakpoint */
.viewport-frame[data-viewport="fit"]  { max-width: none; }
.viewport-frame[data-viewport="1920"] { max-width: 1920px; }
.viewport-frame[data-viewport="1440"] { max-width: 1440px; }
.viewport-frame[data-viewport="1280"] { max-width: 1280px; }
.viewport-frame[data-viewport="1024"] { max-width: 1024px; }
.viewport-frame[data-viewport="768"]  { max-width: 768px; }
.viewport-frame[data-viewport="600"]  { max-width: 600px; }
.viewport-frame[data-viewport="414"]  { max-width: 414px; }
.viewport-frame[data-viewport="360"]  { max-width: 360px; }
/* 2.3 .viewport-frame non-fit — outline + halo around the simulated viewport */
.viewport-frame:not([data-viewport="fit"]) {
  outline: 1px solid rgba(3, 27, 131, 0.10);
  box-shadow: 0 0 0 8px rgba(3, 27, 131, 0.04);
}
/* 2.4 .viewport-frame__badge — fixed pill that labels the active preview width */
.viewport-frame__badge {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-navy);
  color: var(--color-gold-light);
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 12px rgba(3, 27, 131, 0.20);
  z-index: 50;
  pointer-events: none;
}

/* end of 2.4 */
/* end of 2 */
/* 3. SECTION: Page inner, breadcrumbs and hero block */
/* 3.1 .event-page__inner — inner content wrapper, sets max-width + page padding */
.event-page__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--sp-2xl) var(--sp-2xl) var(--sp-4xl);
}

/* end of 3.1 */
/* 3.2 Breadcrumbs */
/* ---------- Breadcrumbs ---------- */
/* 3.2.1 .event-breadcrumbs — breadcrumb row layout */
.event-breadcrumbs {
  display: flex;
  gap: var(--sp-sm);
  align-items: center;
  font-size: 13px;
  color: var(--color-text-muted);
  margin-bottom: var(--sp-lg);
}
/* 3.2.2 .event-breadcrumbs a — link colour and hover transition */
.event-breadcrumbs a {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}
/* 3.2.3 .event-breadcrumbs a:hover — navy on hover */
.event-breadcrumbs a:hover { color: var(--color-navy); }
/* 3.2.4 .event-breadcrumbs__sep — separator opacity */
.event-breadcrumbs__sep { opacity: .5; }
/* 3.2.5 .event-breadcrumbs__current — current crumb truncation */
.event-breadcrumbs__current {
  color: var(--color-navy);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 320px;
}

/* end of 3.2 */
/* 3.3 Hero block */
/* ---------- Hero block ---------- */
/* 3.3.1 .event-hero — two-column hero grid (media + body) */
.event-hero {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--sp-xl);
  align-items: stretch;
  margin-bottom: var(--sp-2xl);
}
/* 3.3.2 .event-hero__media — hero image frame with gold border and gradient bg */
.event-hero__media {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 2px solid var(--color-gold);
  box-shadow: var(--shadow-lg);
  transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
  background: linear-gradient(135deg,
    rgba(3,27,131,.85) 0%,
    rgba(3,27,131,.6) 35%,
    rgba(0,204,255,.4) 100%);
  min-height: 420px;
}
/* 3.3.3 .event-hero__media:hover — lift + deeper shadow */
.event-hero__media:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(3,27,131,.22), 0 4px 10px rgba(3,27,131,.14);
}
/* 3.3.4 .event-hero__media::after — radial gold/cyan glints overlay */
.event-hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 80%, rgba(255,215,0,.18), transparent 50%),
    radial-gradient(circle at 90% 20%, rgba(0,204,255,.18), transparent 50%);
  pointer-events: none;
}
/* 3.3.5 .event-hero__media-label — bottom-left category chip on the hero image */
.event-hero__media-label {
  position: absolute;
  bottom: var(--sp-lg);
  left: var(--sp-lg);
  background: rgba(3,27,131,.78);
  color: var(--color-gold-light);
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  z-index: 2;
}
/* 3.3.6 .event-hero__media-thumbs — bottom-right thumbnail strip on the hero */
.event-hero__media-thumbs {
  position: absolute;
  bottom: var(--sp-lg);
  right: var(--sp-lg);
  display: flex;
  gap: 6px;
  z-index: 2;
}
/* 3.3.7 .event-hero__thumb — individual hero thumbnail tile */
.event-hero__thumb {
  width: 42px; height: 42px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-gold);
  background-size: cover;
  background-position: center;
  cursor: pointer;
}
/* 3.3.8 .event-hero__thumb--1..4 — colour-themed thumbnail variants */
.event-hero__thumb--1 { background: linear-gradient(135deg, #1a3a8a, #4a90e2); }
.event-hero__thumb--2 { background: linear-gradient(135deg, #b8860b, #ffd700); }
.event-hero__thumb--3 { background: linear-gradient(135deg, #2d5016, #5a8c3e); }
.event-hero__thumb--4 {
  display: flex; align-items: center; justify-content: center;
  background: rgba(3,27,131,.85);
  color: var(--color-gold-light);
  font-family: var(--font-heading);
  font-size: 11px; font-weight: 700;
  border-color: var(--color-gold);
}

/* 3.3.9 .event-hero__body — hero right-column flex stack, centred */
.event-hero__body {
  display: flex; flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  min-width: 0;
}
/* 3.3.10 .event-hero__body direct-child spacing — badges, title and hero-cards rhythm */
.event-hero__body > .event-badges { margin-bottom: 0; }
.event-hero__body > .event-hero__title { margin: calc(var(--sp-xl) + 25px) auto calc(var(--sp-xl) - 10px); }
.event-hero__body > .event-hero-cards { margin-top: 20px; }

/* 3.3.11 Status / curation badges (above the title) */
/* Status / curation badges (above the title) */
/* 3.3.11.1 .event-badges — badge row, wraps and centres on the hero axis */
.event-badges {
  display: flex; flex-wrap: wrap;
  /* Centre so a wrapped row sits symmetrically on the hero's vertical axis
     (DESIGN_RULES Rule 1/2). On a single line this still reads left-leaning
     because the badges hug each other via `gap`. */
  justify-content: center;
  gap: var(--sp-sm);
}
/* 3.3.11.2 .event-badge — base badge pill (uppercase, font-heading) */
.event-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-family: var(--font-heading);
  line-height: 1;
}
/* 3.3.11.3 .event-badge--curated — navy bg gold text variant */
.event-badge--curated {
  background: var(--color-navy);
  color: var(--color-gold-light);
  border: 1px solid var(--color-navy);
}
/* 3.3.11.4 .event-badge--listed — outline variant */
.event-badge--listed {
  background: transparent;
  color: var(--color-navy);
  border: 1px solid var(--color-border-strong);
}
/* 3.3.11.5 .event-badge--filling — cream / gold variant */
.event-badge--filling {
  background: var(--color-cream);
  color: var(--color-gold-dark);
  border: 1px solid var(--color-gold);
}
/* 3.3.11.6 .event-badge--almost-full — warning variant */
.event-badge--almost-full {
  background: var(--color-warning-bg);
  color: var(--color-warning);
  border: 1px solid var(--color-warning);
}
/* 3.3.11.7 .event-badge--age — navy tint variant */
.event-badge--age {
  background: rgba(3,27,131,.06);
  color: var(--color-navy);
  border: 1px solid var(--color-border-strong);
}

/* end of 3.3.11 */
/* 3.3.12 .event-hero__title — H1 with gold-underline, navy, font-heading */
.event-hero__title {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.15;
  margin: 0;
  text-wrap: pretty;
  display: table;
  margin-inline: auto;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-gold);
  text-shadow: 0 4px 6px rgba(3,27,131,.18), 0 2px 4px rgba(3,27,131,.12);
}
/* 3.3.13 .event-hero__tagline — supporting line under the title */
.event-hero__tagline {
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  margin: 10px 0 0;
  text-wrap: pretty;
}

/* 3.3.14 Pillar facts (when, where, price) — sit in the hero column */
/* Pillar facts (when, where, price) — sit in the hero column */
/* 3.3.14.1 .event-pillars — vertical pillar stack, centred, gold-bordered top */
.event-pillars {
  display: flex; flex-direction: column;
  gap: var(--sp-md);
  padding-top: var(--sp-md);
  border-top: 1px solid var(--color-border);
  align-items: center;
  text-align: center;
}
/* 3.3.14.2 .event-pillar — single pillar row layout */
.event-pillar {
  display: flex; flex-direction: column; gap: 6px;
  align-items: center;
  text-align: center;
}
/* 3.3.14.3 .event-pillar__icon — square gold-bordered icon tile */
.event-pillar__icon {
  width: 32px; height: 32px;
  flex: 0 0 32px;
  border-radius: var(--radius-sm);
  background: var(--color-cream);
  color: var(--color-gold-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  border: 1px solid var(--color-gold);
}
/* 3.3.14.4 .event-pillar__body — body column inside a pillar */
.event-pillar__body { min-width: 0; text-align: center; }
/* 3.3.14.5 .event-pillar__label — uppercase pillar label */
.event-pillar__label {
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-heading);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  display: block;
  margin-bottom: 2px;
}
/* 3.3.14.6 .event-pillar__value — primary pillar value */
.event-pillar__value {
  font-size: 15px;
  color: var(--color-navy);
  font-weight: 600;
  line-height: 1.35;
}
/* 3.3.14.7 .event-pillar__sub — secondary line under the value */
.event-pillar__sub {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.4;
  margin-top: 2px;
}
/* 3.3.14.8 .event-pillar__sub-line — extra sub-line */
.event-pillar__sub-line { display: block; margin-top: 2px; }
/* 3.3.14.9 .event-pillar__sub a — gold-dark underlined links inside pillar sub */
.event-pillar__sub a {
  color: var(--color-gold-dark);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* end of 3.3.14 */
/* 3.3.15 CTA cluster */
/* CTA cluster */
/* 3.3.15.1 .event-cta-cluster — bottom-pinned CTA stack inside hero */
.event-cta-cluster {
  display: flex; flex-direction: column;
  gap: var(--sp-sm);
  margin-top: auto;
  padding-top: var(--sp-md);
}
/* 3.3.15.2 .btn-primary / .btn-secondary / .btn-tertiary — shared button base */
.btn-primary, .btn-secondary, .btn-tertiary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px;
  border-radius: var(--radius-md);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .02em;
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
  border: 1px solid transparent;
  text-decoration: none;
  line-height: 1.2;
}
/* 3.3.15.3 .btn-primary — navy bg, gold text */
.btn-primary {
  background: var(--color-navy);
  color: var(--color-gold-light);
  box-shadow: 0 2px 0 rgba(3,27,131,.25), 0 4px 10px rgba(3,27,131,.18);
}
/* 3.3.15.4 .btn-primary:hover — lighter navy + lift */
.btn-primary:hover { background: var(--color-navy-light); transform: translateY(-1px); }
/* 3.3.15.5 .btn-primary:active — reset transform/shadow */
.btn-primary:active { transform: translateY(0); box-shadow: none; }

/* 3.3.15.6 .btn-secondary — transparent bg, gold border */
.btn-secondary {
  background: transparent;
  color: var(--color-navy);
  border: 1px solid var(--color-gold);
  box-shadow: 0 2px 0 rgba(3,27,131,.10), 0 3px 6px rgba(3,27,131,.10);
}
/* 3.3.15.7 .btn-secondary:hover — lift on hover */
.btn-secondary:hover { transform: translateY(-1px); }
/* 3.3.15.8 .btn-secondary:active — reset transform/shadow */
.btn-secondary:active { transform: translateY(0); box-shadow: none; }

/* 3.3.15.9 .btn-tertiary — text-only tertiary button */
.btn-tertiary {
  background: transparent;
  color: var(--color-navy);
  padding: 8px 12px;
  font-size: 13px;
}
/* 3.3.15.10 .btn-tertiary:hover — raised surface bg on hover */
.btn-tertiary:hover { background: var(--color-surface-raised); }

/* end of 3.3.15 */
/* end of 3.3 */
/* end of 3 */
/* 4. SECTION: Main column layout, google-review badge, flourish, lists, why-venue */
/* ---------- Main column layout (aside removed) ---------- */
/* 4.1 .event-layout — main column container */
.event-layout {
  display: block;
}

/* 4.2 .event-main — main column min-width 0 (prevent overflow) */
.event-main { min-width: 0; }
/* 4.3 .event-top-row — three-column top row for hero-adjacent cards */
.event-top-row {
  display: grid;
  position: relative;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--sp-lg);
  margin-bottom: var(--sp-lg);
}
/* 4.4 .event-top-row > .event-aside-card — 90% width and centred inside its grid cell */
.event-top-row > .event-aside-card {
  width: 90%;
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
}
/* 4.5 .event-fullstack / .event-main .event-card — 90% width and centred for stacked cards */
.event-fullstack > .event-card,
.event-layout > .event-main > .event-card,
.event-main > section.event-card {
  width: 90%;
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
}
/* 4.6 @container vp <=880 — top-row collapses to single column */
@container vp (max-width: 880px) {
  .event-top-row { grid-template-columns: 1fr; }
}
/* end of 4.6 */
/* 4.7 .event-aside — vertical stack for aside cards */
.event-aside {
  display: flex; flex-direction: column;
  gap: var(--sp-lg);
}

/* end of 4.7 */
/* 4.8 Google review badge — sits in the 30% column on the where-card top row */
/* ---------- Google review badge — sits in the 30% column on the where-card top row ---------- */
/* 4.8.1 .event-google-review — cream gold-bordered card frame */
.event-google-review {
  background: var(--color-cream);
  border: 1.5px solid var(--color-gold);
  border-radius: var(--radius-md);
  padding: var(--sp-sm) var(--sp-md);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: 2px;
  justify-self: end;
  margin-right: 11px;
}
/* 4.8.2 .event-google-review__head — header row inside the badge */
.event-google-review__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-sm);
  margin-bottom: 2px;
}
/* 4.8.3 .event-google-review__brand — "Google" wordmark style */
.event-google-review__brand {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  line-height: 1;
}
/* 4.8.4 .event-google-review__label — uppercase REVIEWS label */
.event-google-review__label {
  font-size: 10px;
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
/* 4.8.5 .event-google-review__score-row — score + stars row */
.event-google-review__score-row {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
}
/* 4.8.6 .event-google-review__score — large numeric score */
.event-google-review__score {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 28px;
  color: var(--color-navy);
  line-height: 1;
}
/* 4.8.7 .event-google-review__stars — inline star row */
.event-google-review__stars {
  display: inline-flex;
  gap: 1px;
  font-size: 16px;
  letter-spacing: 1px;
  line-height: 1;
}
/* 4.8.8 .event-google-review__star — empty-star colour */
.event-google-review__star { color: rgba(204, 153, 0, 0.22); }
/* 4.8.9 .event-google-review__star--full — filled star colour */
.event-google-review__star--full { color: var(--color-gold); }
/* 4.8.10 .event-google-review__star--half — half-filled star via gradient text-clip */
.event-google-review__star--half {
  background: linear-gradient(90deg, var(--color-gold) 50%, rgba(204, 153, 0, 0.22) 50%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
/* 4.8.11 .event-google-review__count — review count secondary text */
.event-google-review__count {
  font-size: 12px;
  color: var(--color-navy);
  opacity: 0.75;
}
/* 4.8.12 .event-google-review__unrated — italic placeholder when no rating yet */
.event-google-review__unrated {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  color: var(--color-text-muted);
  font-style: italic;
}
/* 4.8.13 .event-google-review__note — small italic helper note */
.event-google-review__note {
  margin-top: 2px;
  font-size: 11px;
  font-style: italic;
  color: var(--color-text-muted);
}

/* end of 4.8 */
/* 4.9 Flourish title (gold side-rules with diamond endcaps) */
/* ---------- Flourish title (gold side-rules with diamond endcaps) ---------- */
/* 4.9.1 .event-card__title--flourish — base flourish title layout */
.event-card__title--flourish {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-lg);
  border-bottom: none !important;
  padding-bottom: 0;
  width: 100%;
  box-sizing: border-box;
  padding-left: 10px;
  padding-right: 10px;
  position: relative;
}
/* 4.9.2 .event-card__title--flourish::after — gold underline rule beneath the flourish */
.event-card__title--flourish::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -8px;
  height: 2px;
  background: var(--color-gold);
}
/* 4.9.3 .event-flourish-line — thin gold side-rule */
.event-flourish-line {
  flex: 1 1 0;
  height: 1px;
  background: var(--color-gold);
  position: relative;
  min-width: 0;
}
/* 4.9.4 .event-flourish-line::before — diamond endcap on the side-rule */
.event-flourish-line::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 6px;
  height: 6px;
  background: var(--color-gold);
  transform: translateY(-50%) rotate(45deg);
}
/* 4.9.5 .event-flourish-line:first-child/last-child endcap placement */
.event-card__title--flourish > .event-flourish-line:first-child::before { right: 0; }
.event-card__title--flourish > .event-flourish-line:last-child::before { left: 0; }
/* 4.9.6 .event-flourish-text — central text node between the side-rules */
.event-flourish-text { white-space: nowrap; padding: 0 4px; }

/* end of 4.9 */
/* 4.10 What's included bullet list */
/* ---------- What's included bullet list ---------- */
/* 4.10.1 .event-included-list — centred bullet list (default left-aligned within centred block) */
.event-included-list {
  list-style: disc;
  padding: 0;
  margin: 0 auto;
  width: max-content;
  max-width: 100%;
  text-align: left;
  padding-left: 1.25em;
  color: var(--color-navy);
  font-size: 14px;
  line-height: 1.7;
}
/* 4.10.2 .event-included-list li — list item padding */
.event-included-list li {
  padding-left: 4px;
}
/* 4.10.3 .event-included-list li::marker — gold bullet marker */
.event-included-list li::marker {
  color: var(--color-gold);
}
/* 4.10.4 .event-aside-card--centered .event-included-list — centred variant inside centred aside */
.event-aside-card--centered .event-included-list {
  list-style-position: inside;
  text-align: center;
  padding-left: 0;
}
/* 4.10.5 .event-aside-card--centered .event-included-list li — flush li inside centred variant */
.event-aside-card--centered .event-included-list li {
  padding-left: 0;
}

/* end of 4.10 */
/* 4.11 Why this venue (host quote under map) */
/* ---------- Why this venue (host quote under map) ---------- */
/* 4.11.1 .event-why-venue — cream card frame for the host quote */
.event-why-venue {
  margin: 0;
  padding: var(--sp-lg);
  background: var(--color-cream);
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-gold);
  box-shadow: var(--shadow-md);
  position: relative;
}
/* 4.11.2 .event-why-venue__mark — large gold quotation glyph */
.event-why-venue__mark {
  font-family: Georgia, "Times New Roman", serif;
  color: var(--color-gold);
  font-size: 24px;
  line-height: 0;
  vertical-align: -6px;
  font-weight: 700;
  pointer-events: none;
}
/* 4.11.3 .event-why-venue__mark--open — opening glyph spacing */
.event-why-venue__mark--open { margin-right: 4px; }
/* 4.11.4 .event-why-venue__mark--close — closing glyph spacing */
.event-why-venue__mark--close { margin-left: 2px; }
/* 4.11.5 .event-why-venue__text — italic quote body */
.event-why-venue__text {
  position: relative;
  margin: 0 0 var(--sp-sm);
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-navy);
  font-style: italic;
  text-wrap: pretty;
}
/* 4.11.6 .event-why-venue__cite — uppercase host attribution */
.event-why-venue__cite {
  font-size: 11px;
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-gold-dark);
}
/* 4.11.7 @container vp <=880 — auto-width and top spacer when stacked */
@container vp (max-width: 880px) {
  .event-why-venue { width: auto; margin-top: 15px; }
}
/* end of 4.11.7 */
/* end of 4.11 */
/* end of 4 */

/* 5. SECTION: Cards, description, tags, map, attendees, aside cards */
/* ---------- Cards ---------- */
/* 5.1 .event-card — main content card frame */
.event-card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-gold);
  box-shadow: var(--shadow-md);
  /* +10px top / +5px bottom over the base --sp-xl pad so titles and body
     content breathe more inside each card. */
  padding: calc(var(--sp-xl) + 10px) var(--sp-xl) calc(var(--sp-xl) + 5px);
  transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}
/* 5.2 .event-card:hover — lift + larger shadow */
.event-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
/* 5.3 Card-gap rhythm — 82px between successive cards */
/* Baseline card-to-card gap: 82px = 40px + 2px divider + 40px. */
.event-card + .event-card { margin-top: 82px; }
.event-fullstack { margin-top: 82px; position: relative; }
.event-fullstack > .event-card + .event-card { margin-top: 82px; position: relative; }

/* 5.4 Gold inter-card dividers — 80% wide rule above each major card region */
/* Three thin gold dividers between major page regions — global at all
   breakpoints. 80% screen-width, centred, absolutely positioned in the gap
   above each region with 10px between the gold line and the card below. */
.event-hero + .event-layout::before,
.event-top-row + .event-card::before,
.event-fullstack::before,
.event-fullstack > .event-card + .event-card::before {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 100%;
  margin-bottom: 40px;
  height: 2px;
  background: var(--color-gold);
  opacity: .55;
  pointer-events: none;
}
/* 5.5 First-divider spacing — extra 5px above the divider directly below the hero */
/* Card gap for the boundary just below the hero: 87px (45 above + 2 + 40 below)
   so the divider directly beneath the hero gets an extra 5px above. */
.event-hero + .event-layout { position: relative; margin-top: 87px; }
.event-top-row + .event-card { position: relative; margin-top: 82px; }
/* 5.6 .event-card__title — H2 card title with gold underline */
.event-card__title {
  font-family: var(--font-heading);
  font-size: 36px;
  color: var(--color-navy);
  font-weight: 700;
  /* +10px above (clear space over the title) and +5px below the gold rule
     before body content begins. */
  margin: 10px 0 calc(var(--sp-lg) + 5px);
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-gold);
  display: table;
  text-shadow: 0 4px 6px rgba(3,27,131,.18), 0 2px 4px rgba(3,27,131,.12);
}
/* 5.7 .event-card__subtitle — supporting subtitle under the card title */
.event-card__subtitle {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 0 0 var(--sp-lg);
  line-height: 1.5;
}

/* 5.8 Cream info-panel — matches existing seeko-child .single-event-info-panel */
/* Cream info-panel — matches existing seeko-child .single-event-info-panel */
/* 5.8.1 .event-info-panel — cream / gold panel container */
.event-info-panel {
  background: var(--color-cream);
  border: 1px solid var(--color-gold);
  border-radius: var(--radius-md);
  padding: var(--sp-lg) var(--sp-xl);
}
/* 5.8.2 .event-info-row — single info row layout */
.event-info-row {
  display: flex; gap: var(--sp-lg);
  padding: 10px 0;
  border-bottom: 1px solid rgba(204,153,0,.18);
  font-size: 14px;
  line-height: 1.5;
}
/* 5.8.3 .event-info-row:last-child — drop bottom border on final row */
.event-info-row:last-child { border-bottom: none; }
/* 5.8.4 .event-info-row strong — fixed-width navy label column */
.event-info-row strong {
  flex: 0 0 110px;
  color: var(--color-navy);
  font-weight: 700;
}
/* 5.8.5 .event-info-row__value — value column with muted small + gold-dark link */
.event-info-row__value { color: var(--color-text); flex: 1; min-width: 0; }
.event-info-row__value small { color: var(--color-text-muted); display: block; margin-top: 2px; }
.event-info-row__value a { color: var(--color-gold-dark); text-decoration: underline; text-underline-offset: 2px; }

/* end of 5.8 */
/* 5.9 Description block */
/* ---------- Description block ---------- */
/* 5.9.1 .event-description — rich-text body, navy on cream */
.event-description {
  font-size: 15px;
  line-height: 1.65;
  padding-top: 5px;
  color: var(--color-navy);
}
/* 5.9.2 .event-description p — paragraph spacing */
.event-description p { margin: 0 0 var(--sp-md); }
/* 5.9.3 .event-description p:last-child — drop final-paragraph margin */
.event-description p:last-child { margin-bottom: 0; }
/* 5.9.4 .event-description p:first-of-type::first-letter — drop-cap removed */
.event-description p:first-of-type::first-letter {
  /* drop-cap removed */
}
/* 5.9.5 .event-description p:first-of-type::first-line — first-line bold removed */
.event-description p:first-of-type::first-line {
  /* removed — first line no longer bolded */
}
/* 5.9.6 .event-description p strong/b — inline bold styling */
.event-description p strong,
.event-description p b {
  color: var(--color-navy);
  font-weight: 700;
}
/* 5.9.7 .event-description h3 — uppercase sub-heading with gold rule */
.event-description h3 {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  color: var(--color-gold-dark);
  text-transform: uppercase;
  letter-spacing: .04em;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--color-gold);
  display: inline-block;
  /* "What to expect" sub-heading inside the description — give it real
     breathing room above and below so it reads as a proper section header
     rather than something jammed against the body copy. */
  margin: var(--sp-xl) 0 var(--sp-md);
}
/* 5.9.8 .event-description ul — bullet list base */
.event-description ul {
  margin: 0 0 var(--sp-md);
  padding-left: 22px;
  list-style: none;
}
/* 5.9.9 .event-description li — list item layout */
.event-description li {
  margin-bottom: 6px;
  position: relative;
  padding-left: 4px;
  color: var(--color-navy);
}
/* 5.9.10 .event-description li::before — gold dot bullet */
.event-description li::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-gold);
}

/* end of 5.9 */
/* 5.10 Tags */
/* ---------- Tags ---------- */
/* 5.10.1 .event-tags — wrap row of tag pills */
.event-tags {
  display: flex; flex-wrap: wrap; gap: var(--sp-sm);
  margin-top: var(--sp-lg);
}
/* 5.10.2 .event-tag — single tag pill */
.event-tag {
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-heading);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-navy);
  border: 1px solid var(--color-gold);
}

/* end of 5.10 */
/* 5.11 Map */
/* ---------- Map ---------- */
/* 5.11.1 .event-map — placeholder map tile with subtle blue gradient */
.event-map {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-gold);
  box-shadow: var(--shadow-md);
  height: 240px;
  background:
    linear-gradient(135deg, #d8e8f5 0%, #c5d8eb 50%, #d8e8f5 100%);
  position: relative;
}
/* 5.11.2 .event-map::before — repeating diagonal hatch overlay */
.event-map::before {
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(45deg, transparent, transparent 18px, rgba(3,27,131,.04) 18px, rgba(3,27,131,.04) 19px),
    repeating-linear-gradient(-45deg, transparent, transparent 30px, rgba(3,27,131,.03) 30px, rgba(3,27,131,.03) 31px);
}
/* 5.11.3 .event-map__pin — centred gold map pin */
.event-map__pin {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -100%);
  width: 28px; height: 36px;
  background: var(--color-gold);
  border: 2px solid var(--color-navy);
  border-radius: 14px 14px 14px 2px;
  rotate: -45deg;
  display: flex; align-items: center; justify-content: center;
}
/* 5.11.4 .event-map__pin::after — navy dot inside the pin */
.event-map__pin::after {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-navy);
  rotate: 45deg;
}
/* 5.11.5 .event-map__chip — address chip pinned to the map's bottom-left */
.event-map__chip {
  position: absolute;
  bottom: var(--sp-md); left: var(--sp-md);
  background: var(--color-surface);
  border: 1px solid var(--color-gold);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 12px;
  color: var(--color-navy);
  box-shadow: var(--shadow-sm);
}
/* 5.11.6 .event-map__chip strong — chip primary line */
.event-map__chip strong { display: block; font-size: 13px; color: var(--color-gold-dark); }

/* end of 5.11 */
/* 5.12 Going / attendee strip */
/* ---------- Going / attendee strip ---------- */
/* 5.12.1 .event-attendees — going-strip row layout */
.event-attendees {
  display: flex; align-items: center; gap: var(--sp-md);
}
/* 5.12.2 .event-attendees__count — bold count text */
.event-attendees__count {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-navy);
  font-size: 14px;
}
/* 5.12.3 .event-attendees__avatars — overlapping avatar row */
.event-attendees__avatars {
  display: flex;
}
/* 5.12.4 .event-avatar — single avatar disc */
.event-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 2px solid var(--color-surface);
  margin-left: -8px;
  background-size: cover; background-position: center;
  flex: 0 0 36px;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-navy);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
/* 5.12.5 .event-avatar:first-child — flush left, no overlap */
.event-avatar:first-child { margin-left: 0; }
/* 5.12.6 .event-avatar--more — cream "+N more" variant */
.event-avatar--more {
  background: var(--color-cream);
  color: var(--color-gold-dark);
  border-color: var(--color-gold);
  font-size: 11px;
}
/* 5.12.7 .event-avatar--c1..c6 — gradient colour variants for placeholder avatars */
.event-avatar--c1 { background: linear-gradient(135deg, #4a90e2, #1a3a8a); color: #fff; }
.event-avatar--c2 { background: linear-gradient(135deg, #ffd700, #b8860b); color: var(--color-navy); }
.event-avatar--c3 { background: linear-gradient(135deg, #5a8c3e, #2d5016); color: #fff; }
.event-avatar--c4 { background: linear-gradient(135deg, #ec4899, #be185d); color: #fff; }
.event-avatar--c5 { background: linear-gradient(135deg, #06b6d4, #0e7490); color: #fff; }
.event-avatar--c6 { background: linear-gradient(135deg, #fb923c, #c2410c); color: #fff; }

/* end of 5.12 */
/* 5.13 Aside cards */
/* ---------- Aside cards ---------- */
/* 5.13.1 .event-aside-card — base aside card frame */
.event-aside-card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-gold);
  box-shadow: var(--shadow-md);
  padding: var(--sp-lg);
  transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}
/* 5.13.2 .event-aside-card:hover — lift + larger shadow */
.event-aside-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
/* 5.13.3 .event-aside-card--ticket — ticket / price card */
.event-aside-card--ticket {
  width: 90%;
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
  border: 2px solid var(--color-gold);
  box-shadow: 0 4px 12px rgba(204,153,0,.15);
  display: flex;
  flex-direction: column;
  min-height: 280px;
}
/* 5.13.4 .event-aside-card--ticket .event-aside-card__price — price block spacing */
.event-aside-card--ticket .event-aside-card__price {
  margin-top: 30px;
  margin-bottom: 4px;
}
/* 5.13.5 .event-aside-card--ticket .event-aside-card__price-meta — price-meta with gold underline */
.event-aside-card--ticket .event-aside-card__price-meta {
  position: relative;
  margin-bottom: 0;
  padding-bottom: 16px;
}
/* 5.13.6 .event-aside-card--ticket .event-aside-card__price-meta::after — centred gold rule */
.event-aside-card--ticket .event-aside-card__price-meta::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 67.5%;
  height: 2px;
  background: var(--color-gold);
}
/* 5.13.7 .event-aside-card--ticket .event-aside-card__cta — layout only (visual props removed S100; .btn-option / .btn-option--lg now own them) */
.event-aside-card--ticket .event-aside-card__cta {
  margin: auto auto;
  align-self: center;
  /* Gold dividers above/below are 67.5% wide; CTA is 60% of that = 40.5%.
     Higher breakpoints (1280+) override to 36%. */
  width: 40.5%;
  /* translateY(10px) so the button's centre sits on the midpoint between
     the two gold dividers. Pure positioning — no visual props. */
  transform: translateY(10px);
}
/* 5.13.8 — hover preserves the +10px rest offset and adds a -1px lift nudge.
   Without this, .btn-option:hover would replace the rest transform with
   translateY(-1px), causing an 11px jump (S100 26/05/26). */
.event-aside-card--ticket .event-aside-card__cta:hover {
  transform: translateY(9px) !important;
}
/* 5.13.8b — "You're going" state: centre the code text in the gap above the
   Cancel RSVP button (between the upper gold divider and the button's top edge).
   Mirrors the button's translateY(10) centring approach (S100 26/05/26).
   p element keeps its default top/bottom margin so the flow layout is unchanged
   — only the visual position shifts. */
.event-aside-card .event-ticket-confirmed,
.event-aside-card__cta-wrap .event-ticket-confirmed {
  transform: translateY(19px);
  text-align: center;
}
/* 5.13.9 @container vp >=1280 — wider-viewport CTA width override (layout only) */
@container vp (min-width: 1280px) {
  .event-aside-card--ticket .event-aside-card__cta {
    width: 36%;
    transform: translateY(10px);
  }
}
/* end of 5.13.9 */
/* 5.13.10 .event-aside-card--centered — centred aside variant */
.event-aside-card--centered {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding-top: calc(var(--sp-lg) + 10px);
  gap: 6px;
}
/* 5.13.11 .event-fact-list--centered — centred fact list wrapper */
.event-fact-list--centered {
  width: 100%;
}
/* 5.13.12 .event-fact-list--centered .event-fact — centred fact rows */
.event-fact-list--centered .event-fact {
  justify-content: center;
}
/* 5.13.13 .event-aside-card__price — price block baseline row */
.event-aside-card__price {
  display: flex; align-items: baseline; justify-content: center; gap: 6px;
  margin-bottom: 4px;
}
/* 5.13.14 .event-aside-card__price-amount — large numeric price */
.event-aside-card__price-amount {
  font-family: var(--font-heading);
  font-size: 88px;
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1;
}
/* 5.13.15 .event-aside-card__price-unit — muted price unit */
.event-aside-card__price-unit {
  font-size: 13px;
  color: var(--color-text-muted);
}
/* 5.13.16 .event-aside-card__price-meta — centred meta under price */
.event-aside-card__price-meta {
  font-size: 12px;
  text-align: center;
  color: var(--color-text-muted);
  margin-bottom: var(--sp-lg);
}
/* 5.13.17 .event-aside-card__cta — generic aside CTA full width */
.event-aside-card__cta { width: 100%; }
/* 5.13.18 .event-aside-card--ticket .event-aside-card__hint — hint block with top divider */
.event-aside-card--ticket .event-aside-card__hint {
  position: relative;
  padding-top: 24px;
  margin-top: 12px;
}
/* 5.13.19 .event-aside-card--ticket .event-aside-card__hint::before — gold rule above the hint */
.event-aside-card--ticket .event-aside-card__hint::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 67.5%;
  height: 2px;
  background: var(--color-gold);
}
/* 5.13.20 .event-aside-card__hint — base hint text (muted, centred) */
.event-aside-card__hint {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: var(--sp-sm);
  line-height: 1.4;
  text-align: center;
}

/* end of 5.13 */
/* 5.14 Small fact list inside aside */
/* Small fact list inside aside */
/* 5.14.1 .event-fact-list — vertical fact list */
.event-fact-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: 10px;
}
/* 5.14.2 .event-fact — single fact row */
.event-fact {
  display: flex; gap: 10px;
  font-size: 13px;
  color: var(--color-navy);
  line-height: 1.4;
}
/* 5.14.3 .event-fact__icon — fixed-size icon column */
.event-fact__icon {
  flex: 0 0 18px;
  width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  color: var(--color-gold-dark);
}
/* 5.14.4 .event-fact strong — uppercase label inside a fact row */
.event-fact strong {
  color: var(--color-gold-dark);
  display: block;
  font-size: 10.5px;
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
/* 5.14.5 .event-fact-list--noicon .event-fact — icon-less dotted-divider variant */
.event-fact-list--noicon .event-fact {
  gap: 0;
  font-size: 14px;
  color: var(--color-navy);
  font-weight: 500;
  padding: 6.4px 10px;
  border-bottom: 1.5px dotted rgba(204, 153, 0, 0.7);
  margin-left: 14px;
  margin-right: 14px;
  box-sizing: border-box;
}
/* 5.14.6 .event-fact-list--noicon .event-fact:last-child — drop final divider */
.event-fact-list--noicon .event-fact:last-child { border-bottom: none; }
/* 5.14.7 .event-fact-list--centered.event-fact-list--noicon .event-fact — centred icon-less variant */
.event-fact-list--centered.event-fact-list--noicon .event-fact { text-align: center; }

/* end of 5.14 */
/* 5.15 Organiser snippet */
/* Organiser snippet */
/* 5.15.1 .event-organiser — organiser row layout */
.event-organiser {
  display: flex; gap: var(--sp-md); align-items: center;
}
/* 5.15.2 .event-organiser__avatar — gradient gold-bordered avatar disc */
.event-organiser__avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 2px solid var(--color-gold);
  background: linear-gradient(135deg, var(--color-navy), var(--color-cyan));
  display: flex; align-items: center; justify-content: center;
  color: var(--color-gold-light);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  flex: 0 0 48px;
}
/* 5.15.3 .event-organiser__body — text column min-width 0 */
.event-organiser__body { min-width: 0; flex: 1; }
/* 5.15.4 .event-organiser__name — organiser name bold */
.event-organiser__name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  color: var(--color-navy);
}
/* 5.15.5 .event-organiser__meta — organiser meta line */
.event-organiser__meta {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* 5.15.6 Hero-column cards container — venue + organiser stack under pillars */
/* Hero-column cards container — venue + organiser stack under pillars */
/* 5.15.6.1 .event-hero-cards — vertical stack inside hero column */
.event-hero-cards {
  display: flex; flex-direction: column;
  gap: var(--sp-sm);
  /* 90% + centred to match the width of the cards below (.event-aside-card /
     .event-main .event-card are also 90% centred). (Rob 29/06/26.) */
  align-self: center;
  width: 90%; max-width: 90%;
  margin-left: auto; margin-right: auto;
}
/* 5.15.6.2 .event-hero-cards .event-hero-organiser — neutralise top margin inside stack */
.event-hero-cards .event-hero-organiser { margin-top: 0; }

/* end of 5.15.6 */
/* 5.15.7 Hero-column organiser card */
/* Hero-column organiser card — sits under the pillars in the body column,
   fills the dead space on wide viewports. Mirrors aside-card chrome. */
/* 5.15.7.1 .event-hero-organiser — gold-bordered card under the pillars */
.event-hero-organiser {
  margin-top: var(--sp-md);
  padding: var(--sp-md) var(--sp-lg);
  border: 1.5px solid var(--color-gold);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  flex-wrap: wrap;
  text-align: left;
  transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}
/* 5.15.7.2 .event-hero-organiser:hover — lift + shadow */
.event-hero-organiser:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
/* 5.15.7.3 .event-hero-organiser__actions — actions row inside the hero-organiser */
.event-hero-organiser__actions {
  display: flex; gap: var(--sp-sm);
  flex-shrink: 0;
}
/* Clickable card titles inherit the navy heading colour — no gold link colour or
   underline from Seeko / the global link styles. (Rob 29/06/26 N3.) */
.event-organiser__name a { color: inherit; text-decoration: none; cursor: pointer; }
.event-organiser__name a:hover,
.event-organiser__name a:focus { color: inherit !important; text-decoration: none !important; }
/* Show-Interest button is content-sized + centred, not stretched full-width.
   (Rob 29/06/26 N4.) */
.event-hero-organiser__actions .wishlist-button,
.event-hero-organiser__actions .btn-option {
  width: auto !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
}
/* 5.15.7.3.1 .event-interested-count — public "X interested" count next to the
   event's own Show-Interest button. (S124 01/07/26 — Rob: never use
   follower/follow language; show interest counts on each entity's own page.) */
.event-hero-organiser__actions {
  align-items: center;
}
.event-interested-count {
  font-size: 12px;
  font-weight: 600;
  color: rgba(3, 27, 131, 0.6);
  white-space: nowrap;
}
/* 5.15.7.4 Centred-stack treatment at ALL widths (was @container vp ≤1440).
   The button always sits on its own centred row and the avatar+body stay
   centred, so a long venue/organiser name that wraps the button never ends up
   left-aligned at wide widths. (Rob 29/06/26.) */
.event-hero-organiser .event-organiser {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0;
  width: 100%;
}
.event-hero-organiser .event-organiser__avatar {
  grid-column: 1;
  justify-self: end;
  margin-right: var(--sp-md);
}
.event-hero-organiser .event-organiser__body {
  grid-column: 2;
  flex: 0 1 auto;
  text-align: center;
}
.event-hero-organiser__actions {
  flex-basis: 100%;
  justify-content: center;
}
/* ≤599 (container): full vertical stack — sigil on top + centred, then text,
   then button. The side-by-side sigil reads oddly at phone widths. (Rob 29/06/26.) */
@container vp (max-width: 599px) {
  .event-hero-organiser .event-organiser {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .event-hero-organiser .event-organiser__avatar {
    grid-column: auto;
    justify-self: center;
    margin-right: 0;
    margin-bottom: var(--sp-sm);
  }
}
/* end of 5.15.7.4 */
/* end of 5.15.7 */
/* end of 5.15 */

/* 5.16 Past-event gallery + where-grid layout */
/* Past-event gallery — fixed 6-photo grid, 3×2 on desktop, 2×3 on tablet,
   1-col stack on phone. Placeholder tiles use cream + navy label until
   real images land. */
/* 5.16.1 .event-card--full — full-width card across the grid */
.event-card--full {
  grid-column: 1 / -1;
}

/* 5.16.2 .event-where-grid — two-column where-card grid (map left, content right) */
.event-where-grid {
  display: grid;
  grid-template-columns: 400px 1fr;
  grid-template-areas:
    "map   right"
    "quote right";
  gap: var(--sp-xl);
  align-items: start;
}
/* 5.16.3 .event-where-cell--map / --right — grid-area assignments */
.event-where-cell--map { grid-area: map; }
.event-where-cell--right { grid-area: right; display: flex; flex-direction: column; gap: var(--sp-lg); align-self: stretch; }
.event-where-cell--right .event-venue-history { margin-top: auto; margin-bottom: 2px; }
/* 5.16.4 @container vp 1024-1279 — stacked where-grid with venue + quote rows */
/* 1024 breakpoint only — bump venue-history up by ~the note's height so
   the absolute-positioned note lands inside the cell with the same small
   gap as on wider screens. Other breakpoints already pixel-tuned. */
@container vp (min-width: 1024px) and (max-width: 1279px) {
  /* 1024 — tighten the hero title top margin by 10px. */
  .event-hero__body > .event-hero__title {
    margin-top: calc(var(--sp-xl) + 15px);
  }
  /* 1024 — CTA matches the 1280+ treatment: surface bg / navy text / gold
     border, translated down 10px so the text centre sits on the midpoint
     between the two gold dividers, sized to 60% of the 67.5% default. */
  .event-aside-card--ticket .event-aside-card__cta {
    width: 40.5%;
    transform: translateY(10px);
    background: var(--color-surface);
    color: var(--color-navy);
    border: 1px solid var(--color-gold);
    box-shadow: 0 2px 0 rgba(204,153,0,.18), 0 4px 10px rgba(204,153,0,.15);
  }
  .event-aside-card--ticket .event-aside-card__cta:hover {
    background: var(--color-navy);
    color: var(--color-gold-light);
    border: 1px solid var(--color-navy);
    box-shadow: 0 2px 0 rgba(3,27,131,.25), 0 4px 10px rgba(3,27,131,.18);
  }
  /* 1024 — centre every card title (and its gold underline) by default,
     mirroring 768. Flourish titles already centre via flex. */
  .event-main .event-card { text-align: center; }
  .event-card__title { margin-left: auto; margin-right: auto; text-align: center; }
  .event-description ul { display: inline-block; text-align: left; }
  /* 1024 — stacked layout: map+toprow share row 1; whocoming, venue-history,
     and quote each take their own full-width row below. cell--right uses
     display:contents so its children become direct grid children of where-grid.
     ⚠️ LOCKED 2026-05-12 — DO NOT MODIFY without explicit user request. */
  .event-where-grid {
    grid-template-columns: 400px 1fr;
    grid-template-areas:
      "map   toprow"
      "map   whocom"
      "venue venue"
      "quote quote";
    align-items: start;
  }
  .event-where-cell--map { grid-area: map; justify-self: start; }
  .event-where-cell--right { display: contents; }
  .event-where-toprow {
    grid-area: toprow;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-xl);
  }
  .event-where-toprow__aside { display: flex; justify-content: center; }
  .event-where-whocoming { grid-area: whocom; text-align: center; }
  .event-where-whocoming .event-whocoming-row { grid-template-columns: 1fr; justify-items: center; }
  .event-where-whocoming .event-attendees { justify-content: center; }
  .event-venue-history { grid-area: venue; text-align: center; }
  .event-where-cell--quote { grid-area: quote; text-align: center; }
}
/* end of 5.16.4 */
/* 5.16.5 @container vp >=1280 — venue-history fills right cell with note hanging absolutely */
@container vp (min-width: 1280px) {
  /* 1280+ — vh grows to fill the right cell so its bottom aligns with the
     quote bottom in the left column. Note hangs absolutely below the vh box. */
  .event-where-cell--right .event-venue-history {
    margin-top: 0;
    margin-bottom: 4px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
  }
  .event-where-cell--right .event-venue-history__reviews {
    margin-top: auto;
  }
}
/* end of 5.16.5 */
/* 5.16.6 @container vp >=1024 — extra bottom padding on where-grid card */
@container vp (min-width: 1024px) {
  .event-fullstack > .event-card:has(.event-where-grid) {
    padding-bottom: var(--sp-xl);
  }
}
/* end of 5.16.6 */
/* 5.16.7 .event-where-cell--quote — quote cell grid-area */
.event-where-cell--quote { grid-area: quote; align-self: start; }
/* 5.16.8 .event-where-toprow — transport + Google review top row */
.event-where-toprow {
  display: grid;
  grid-template-columns: 70% 30%;
  gap: var(--sp-md);
  align-items: center;
}
/* 5.16.9 @container vp 1024-1279 — auto right column at 1024 (avoids Google badge squash) */
/* 1024 breakpoint only — at 30% the aside column squashes the Google
   review badge. Plenty of slack in the facts column on the left, so let
   the aside take its content's natural width here. */
@container vp (min-width: 1024px) and (max-width: 1279px) {
  .event-where-toprow { grid-template-columns: 1fr auto; }
}
/* end of 5.16.9 */
/* 5.16.10 .event-where-toprow__facts — facts column reset */
.event-where-toprow__facts { margin: 0; }
/* 5.16.11 .event-where-toprow__facts.event-fact-list--noicon .event-fact — width and gutters */
.event-where-toprow__facts.event-fact-list--noicon .event-fact {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  width: 80%;
  box-sizing: border-box;
}
/* 5.16.12 .event-where-toprow__aside — aside column floor */
.event-where-toprow__aside { min-height: 1px; }
/* 5.16.13 .event-where-grid .event-map — fixed 400x400 map at base */
.event-where-grid .event-map {
  width: 400px;
  height: 400px;
  aspect-ratio: 1 / 1;
  flex: 0 0 auto;
}
/* 5.16.14 .event-where-right — secondary right column stack */
.event-where-right {
  display: flex; flex-direction: column;
  gap: var(--sp-lg);
  align-self: stretch;
}
/* 5.16.15 .event-where-whocoming — who's-coming block with gold top rule */
.event-where-whocoming {
  position: relative;
  padding-top: calc(var(--sp-lg) + 6px);
  border-top: 0;
}
/* 5.16.16 .event-where-whocoming::before — centred gold rule above the block */
.event-where-whocoming::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 2px;
  background: var(--color-gold);
  opacity: .55;
}
/* 5.16.17 .event-where-whocoming__title — uppercase title */
.event-where-whocoming__title {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-gold-dark);
  margin: 0 0 var(--sp-sm);
}
/* 5.16.18 .event-where-facts — facts list inside who-coming */
.event-where-facts { margin-top: 0; }

/* end of 5.16 */
/* end of 5 */
/* 6. SECTION: Venue history (anonymised member reviews of the venue) */
/* ---------- Venue history (anonymised member reviews of the venue) ---------- */
/* 6.1 .event-venue-history — venue-history wrapper with gold top rule */
.event-venue-history {
  position: relative;
  padding-top: calc(var(--sp-lg) + 6px);
  border-top: 0;
}
/* 6.2 .event-venue-history::before — centred gold rule above the block */
.event-venue-history::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 2px;
  background: var(--color-gold);
  opacity: .55;
}
/* 6.3 .event-venue-history__title — uppercase venue-history title */
.event-venue-history__title {
  font-family: var(--font-heading);
  font-size: 13px;
  padding-top: 5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-gold-dark);
  margin: 0 0 var(--sp-xs);
}
/* 6.4 .event-venue-history__summary — summary copy under the title */
.event-venue-history__summary {
  font-size: 13px;
  color: var(--color-navy);
  margin-bottom: var(--sp-md);
  line-height: 1.5;
}
/* 6.5 .event-venue-history__rating — inline rating row */
.event-venue-history__rating {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-gold-dark);
}
/* 6.6 .event-venue-history__star — gold star glyph */
.event-venue-history__star {
  color: var(--color-gold);
  font-size: 13px;
}
/* 6.7 .event-venue-history__reviews — review list */
.event-venue-history__reviews {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
/* 6.8 .event-venue-review — single review card */
.event-venue-review {
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-gold);
  border-radius: var(--radius-sm);
  padding: var(--sp-sm) var(--sp-md);
  box-shadow: var(--shadow-md);
}
/* 6.9 .event-venue-review__meta — review meta row (stars + attribution) */
.event-venue-review__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-sm);
  margin-bottom: 4px;
}
/* 6.10 .event-venue-review__stars — gold stars line */
.event-venue-review__stars {
  font-size: 13px;
  color: var(--color-gold);
  letter-spacing: 1px;
  line-height: 1;
}
/* 6.11 .event-venue-review__stars-empty — faded star colour */
.event-venue-review__stars-empty {
  color: rgba(204, 153, 0, 0.25);
}
/* 6.12 .event-venue-review__attribution — uppercase attribution */
.event-venue-review__attribution {
  font-size: 11px;
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
/* 6.13 .event-venue-review__text — italic review body */
.event-venue-review__text {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-navy);
  font-style: italic;
}
/* 6.14 .event-venue-history__note — absolute-positioned helper note below the block */
.event-venue-history__note {
  margin: 0;
  font-size: 11px;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
}
/* 6.15 @container vp <=1279 — vertically centre the note in the row-gap */
/* 1024 and below — venue-history sits in its own grid row, so vertically
   centre the note inside the row-gap below it (gap = var(--sp-xl)).
   ⚠️ LOCKED 2026-05-12 — DO NOT MODIFY without explicit user request. */
@container vp (max-width: 1279px) {
  .event-venue-history__note {
    top: calc(100% + var(--sp-xl) / 2);
    transform: translateY(-50%);
    text-align: center;
    line-height: 1.2;
  }
}
/* end of 6.15 */
/* 6.16 .event-venue-history position relative (re-declared) */
.event-venue-history { position: relative; }
  line-height: 1.5;
  color: var(--color-text-muted);
  font-style: italic;
}

/* 6.17 .event-whocoming-row — who's-coming + share two-column row */
.event-whocoming-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--sp-lg);
  align-items: start;
}
/* 6.18 .event-whocoming-row__share — share column stack */
.event-whocoming-row__share { display: flex; flex-direction: column; gap: var(--sp-md); }
/* 6.19 .event-whocoming-row__share .event-share — share row reset */
.event-whocoming-row__share .event-share { margin-top: 0; flex-wrap: wrap; }

/* 6.20 @container vp <=599 — narrow viewport hero media + map adjustments */
/* Narrow viewports (<600) — the where-card map is hard-coded 400×400 by
   default which overflows phones. Constrain to the container width and
   make the toprow stack so facts sit above the Google badge, both centred. */
@container vp (max-width: 599px) {
  /* Hero media — 90% width square with category label chip sitting below.
     Override overflow:hidden so the absolutely-positioned label is visible. */
  .event-hero__media {
    min-height: 0;
    aspect-ratio: 1 / 1;
    width: 90%;
    margin: 0 auto 56px;
    position: relative;
    overflow: visible;
  }
  .event-hero__media-label {
    position: absolute;
    top: calc(100% + 12px);
    left: 0; right: 0; bottom: auto;
    margin-left: auto;
    margin-right: auto;
    width: max-content;
    max-width: 100%;
    background: var(--color-surface);
    color: var(--color-gold-dark);
    border: 1px solid var(--color-gold);
    border-radius: var(--radius-sm);
    padding: var(--sp-sm) var(--sp-md);
    box-shadow: var(--shadow-sm);
    font-size: 12px;
    letter-spacing: 0.06em;
  }

  .event-where-cell--map { justify-self: stretch; width: 100%; }
  .event-where-grid .event-map {
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }
  /* Lift the address chip out of the map's bottom-left overlay and sit it
     beneath the map as its own little card, full width. Override the map's
     overflow:hidden so the absolutely-positioned chip is visible. */
  .event-where-grid .event-map { overflow: visible; }
  .event-where-cell--map { padding-bottom: 60px; }
  .event-where-grid .event-map .event-map__chip {
    position: absolute;
    top: calc(100% + var(--sp-md));
    left: 0; right: 0; bottom: auto;
    width: 100%;
    box-sizing: border-box;
  }
  .event-where-toprow {
    grid-template-columns: 1fr;
    gap: var(--sp-lg);
    justify-items: center;
    text-align: center;
  }
  .event-where-toprow__aside { justify-content: center; width: 100%; }
  .event-where-toprow__aside .event-google-review {
    margin-left: auto;
    margin-right: auto;
  }
}

/* end of 6.20 */
/* 6.21 @container vp <=880 — where-grid stacks into single column */
@container vp (max-width: 880px) {
  .event-where-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "map" "right" "quote";
  }
  /* Single-col stack — map is fixed 400px so centre it in the cell. */
  .event-where-cell--map { justify-self: center; }
  /* Centre all where-grid content at this breakpoint EXCEPT the toprow
     (transport facts + Google rating), which keeps its left-aligned grid. */
  .event-where-cell--right,
  .event-where-cell--quote { text-align: center; }
  .event-where-cell--right .event-where-toprow { text-align: left; }
  /* Centre just the transport facts list within its own column — the
     aside (Google rating) stays right-aligned in its grid cell. */
  .event-where-toprow__facts { text-align: center; }
  .event-where-toprow__facts.event-fact-list--noicon .event-fact {
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
  }
  .event-whocoming-row { grid-template-columns: 1fr; }
}

/* end of 6.21 */
/* 6.22 @container vp 768-880 — restore map-left + transport-top-right layout (locked) */
/* 768 only — restore map-left, transport-top-right, google-bottom-right
   layout (overrides the max-width:880 single-column stack). Everything
   else (whocoming, venue-history, quote) keeps its previous full-width
   centred layout BELOW the map+toprow row. Achieved by `display: contents`
   on cell--right so its children become direct grid children of where-grid,
   then placed in named areas. */
@container vp (min-width: 768px) and (max-width: 880px) {
  /* ⚠️ LOCKED 2026-05-12 — DO NOT MODIFY without explicit user request. */
  .event-where-grid {
    grid-template-columns: 400px 1fr;
    grid-template-areas:
      "map    toprow"
      "whocom whocom"
      "venue  venue"
      "quote  quote";
    align-items: stretch;
  }
  .event-where-cell--map { grid-area: map; justify-self: start; }
  .event-where-cell--right { display: contents; }
  .event-where-toprow {
    grid-area: toprow;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-xl);
    min-height: 400px;
  }
  .event-where-toprow__aside { display: flex; justify-content: center; }
  .event-where-whocoming { grid-area: whocom; text-align: center; }
  .event-where-whocoming .event-whocoming-row { grid-template-columns: 1fr; justify-items: center; }
  .event-venue-history { grid-area: venue; text-align: center; }
  .event-where-cell--quote { grid-area: quote; text-align: center; }
  /* 768 — pull facts list up so the cap-height top of "TRANSPORT" aligns
     visually with the top edge of the map (compensates for the label's
     font line-box leading). */
  .event-where-toprow__facts { margin-top: -10px; }
  .event-where-toprow__aside { transform: translateY(-6px); }
  /* 768 — horizontally centre facts+badge in the gap between the map's
     right border and the card's inner right border. Measured: gap centre
     = 983, toprow centre = 994.5, so shift toprow left by 11.5px. Badge
     also has base margin-right:11px which offsets its centre from the
     toprow's by 5.5px — zero it here so badge centre matches toprow centre.
     See RULES/centre-text-between-cards.md (same rule, horizontal axis). */
  /* 768 — zero ALL horizontal margins on the toprow children, then collapse
     the grid so the contents centre inside the (map-right → card-inner-right)
     gap. Both .event-where-toprow__facts and .event-google-review have
     margin-right hacks on the base rule that need overriding here. */
  .event-where-toprow {
    grid-template-columns: 1fr;
    justify-items: center;
    transform: none;
  }
  .event-where-toprow__facts { margin-left: 0 !important; margin-right: 0 !important; }
  .event-where-toprow__aside { margin-left: 0 !important; margin-right: 0 !important; }
  .event-where-toprow__aside .event-google-review { margin-left: 0 !important; margin-right: 0 !important; }
  /* 768 — measured: last-review-card-bottom-border vs host-quote-blockquote-
     top-border. Locked centring rule misses by ~8.5px because the outer cell
     starts above the visible gold border. Push down 8.5px. */
  .event-venue-history__note { transform: translateY(-50%) translateY(8.5px); }
}

/* end of 6.22 */
/* 6.23 @container vp 1024-1279 — note transform correction at this breakpoint */
/* 1024–1279 — same correction as the 768 block: locked rule positions the
   note relative to the venue-history element's 100%, but the visible gap
   ends at the host quote's inner blockquote top (which sits ~15px below
   the cell--quote container's top). Measured offset = 1px down at this
   breakpoint (different geometry from 768 — host quote is in the LEFT
   column under the map, not directly below venue-history). */
@container vp (min-width: 1024px) and (max-width: 1279px) {
  .event-venue-history__note { transform: translateY(-50%) translateY(1px); }
}
/* end of 6.23 */
/* 6.24 @container vp <=880 — note transform correction at stacked layouts */

/* ≤880 (covers 768, 600, 414, 360) — stacked layout: venue-history sits
   directly above host quote in its own grid row. Measured offset = +8.5px
   down at all four simulated viewports (360 / 414 / 600 / 768). See
   RULES/centre-text-between-cards.md for the measurement protocol. */
@container vp (max-width: 880px) {
  .event-venue-history__note { transform: translateY(-50%) translateY(8.5px); }
}

/* end of 6.24 */
/* 6.25 @container vp 600-767 — Google review badge centred in its aside column */
/* 600 — Google review badge centred in its aside column with horizontal
   breathing room. Original badge has margin-right:11px (base style for
   wider layouts) which pushes it past the card's inner padding; clear it
   here and centre with auto margins. */
@container vp (min-width: 600px) and (max-width: 767px) {
  .event-where-toprow__aside { justify-content: center; }
  .event-where-toprow__aside .event-google-review {
    margin-left: auto;
    margin-right: auto;
  }
}

/* end of 6.25 */
/* 6.26 .event-gallery — past-event placeholder gallery grid */
.event-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-md);
}
/* 6.27 .event-gallery__item — gallery tile base */
.event-gallery__item {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-gold);
  background: linear-gradient(135deg, var(--color-cream) 0%, #f0e8d4 100%);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: var(--sp-md);
}
/* 6.28 .event-gallery__item--2..6 — gallery tile gradient variants */
.event-gallery__item--2 { background: linear-gradient(135deg, #d9e3ff 0%, #b8c8f0 100%); }
.event-gallery__item--3 { background: linear-gradient(135deg, #f5d9b8 0%, #e8b87a 100%); }
.event-gallery__item--4 { background: linear-gradient(135deg, #c8d8b0 0%, #9eb585 100%); }
.event-gallery__item--5 { background: linear-gradient(135deg, #e8c8d8 0%, #c89bb0 100%); }
.event-gallery__item--6 { background: linear-gradient(135deg, #b8d8d4 0%, #88b5b0 100%); }
/* 6.29 .event-gallery__label — gallery tile label chip */
.event-gallery__label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12px;
  color: var(--color-navy);
  background: rgba(255,255,255,0.85);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-gold);
}

/* 6.30 @container vp <=1023 — gallery collapses to 2 columns */
@container vp (max-width: 1023px) {
  .event-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
/* end of 6.30 */
/* 6.31 @container vp >=1024 — gallery forced to 3 columns */
@container vp (min-width: 1024px) {
  /* Force the 3-col grid + 20px gap explicitly at 1024+. Each tile then comes
     out ~60% of a full-width image. `display: grid` is repeated defensively
     because a stray brace earlier in the file was breaking the base rule. */
  .event-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
}
/* end of 6.31 */
/* 6.32 @container vp <=599 — gallery single column + hero-organiser narrow tweaks */
@container vp (max-width: 599px) {
  .event-gallery { grid-template-columns: 1fr; }
  .event-hero-organiser { padding: var(--sp-md); }
  .event-hero-organiser__actions { width: 100%; }
  .event-hero-organiser__actions button { flex: 1; }
}

/* end of 6.32 */
/* end of 6 */
/* 7. SECTION: Logged-out per-element blur */
/* ---------- Logged-out: per-element blur ----------
   Sensitive elements only — venue address, exact postcode, full description,
   map, who's coming, character mix, matches, hosts, comments, accessibility,
   organiser meta. Non-sensitive (title, tagline, basic when, price, badges)
   stays visible so the logged-out visitor still gets a useful preview.
*/
/* 7.1 [data-sensitive] — relative positioning anchor for the locked overlay */
.event-page.is-logged-out [data-sensitive] {
  position: relative;
}
/* 7.2 [data-sensitive] children blur — blurs and disables sensitive content */
.event-page.is-logged-out [data-sensitive] > * {
  filter: blur(6px);
  pointer-events: none;
  user-select: none;
  transition: filter var(--duration-normal) var(--ease-out);
}
/* Tighter blur for inline pieces (single line of text inside a sentence) */
/* 7.3 [data-sensitive=inline] children — tighter blur for inline pieces */
.event-page.is-logged-out [data-sensitive="inline"] > * {
  filter: blur(4px);
}

/* 7.4 [data-sensitive=block]::after — "Log in to see" pill overlay */
/* Per-block "log in to see" pill, sits over blurred sections that are big
   enough to warrant a CTA (description, who's coming, map, matches, comments) */
.event-page.is-logged-out [data-sensitive="block"]::after {
  content: "🔒 Log in to see";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: var(--color-surface);
  border: 1px solid var(--color-gold);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-navy);
  box-shadow: var(--shadow-md);
  white-space: nowrap;
  z-index: 5;
  pointer-events: none;
}

/* 7.5 .event-loggedout-banner — top-of-page logged-out banner (hidden by default) */
/* Top-of-page logged-out banner */
.event-loggedout-banner {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  padding: var(--sp-md) var(--sp-lg);
  background: var(--color-cream);
  border: 1px solid var(--color-gold);
  border-radius: var(--radius-md);
  margin-bottom: var(--sp-lg);
}
/* 7.6 .event-page.is-logged-out .event-loggedout-banner — show banner when logged out */
.event-page.is-logged-out .event-loggedout-banner { display: flex; }
/* 7.7 .event-loggedout-banner__text — banner copy */
.event-loggedout-banner__text {
  font-size: 14px;
  color: var(--color-navy);
  line-height: 1.4;
}
/* 7.8 .event-loggedout-banner__text strong — banner headline strong */
.event-loggedout-banner__text strong {
  font-family: var(--font-heading);
  font-weight: 700;
  display: block;
  margin-bottom: 2px;
}
/* 7.9 .event-loggedout-banner__actions — banner actions row */
.event-loggedout-banner__actions {
  display: flex; gap: var(--sp-sm);
  flex-shrink: 0;
}

/* 7.10 [data-cta-locked]::before — prepend lock glyph when CTA is locked out */
/* Convert RSVP/CTA buttons to "Log in to ..." when logged out */
.event-page.is-logged-out [data-cta-locked]::before {
  content: "🔒 ";
  margin-right: 4px;
}

/* end of 7.10 */
/* end of 7 */
/* 8. SECTION: Direction B specifics — social-engine layer */
/* ---------- Direction B specifics: social-engine layer ---------- */
/* 8.1 .event-engine-grid — two-column stats grid */
.event-engine-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-md);
  margin-top: var(--sp-lg);
}
/* 8.2 .event-engine-stat — single stat card */
.event-engine-stat {
  background: var(--color-surface-raised);
  border: 1.5px solid var(--color-gold);
  border-radius: var(--radius-md);
  padding: var(--sp-md);
}
/* 8.3 .event-engine-stat__value — large value */
.event-engine-stat__value {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1;
}
/* 8.4 .event-engine-stat__label — muted label */
.event-engine-stat__label {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 4px;
  line-height: 1.35;
}
/* 8.5 .event-engine-stat__hint — gold-dark hint line */
.event-engine-stat__hint {
  font-size: 11px;
  color: var(--color-gold-dark);
  margin-top: 6px;
  font-weight: 600;
}

/* 8.6 Character-badge breakdown */
/* Character-badge breakdown */
/* 8.6.1 .event-char-breakdown — vertical breakdown stack */
.event-char-breakdown {
  display: flex; flex-direction: column;
  gap: 8px;
}
/* 8.6.2 .event-char-row — single breakdown row layout */
.event-char-row {
  display: grid;
  grid-template-columns: 110px 1fr 32px;
  align-items: center;
  gap: var(--sp-md);
  font-size: 13px;
}
/* 8.6.3 .event-char-row__label — row label */
.event-char-row__label {
  color: var(--color-navy);
  font-weight: 600;
}
/* 8.6.4 .event-char-row__bar — bar track */
.event-char-row__bar {
  height: 8px;
  background: rgba(3,27,131,.08);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
/* 8.6.5 .event-char-row__fill — gold gradient fill */
.event-char-row__fill {
  position: absolute; inset: 0 auto 0 0;
  background: linear-gradient(90deg, var(--color-gold) 0%, var(--color-gold-light) 100%);
  border-radius: 4px;
}
/* 8.6.6 .event-char-row__count — bold count */
.event-char-row__count {
  text-align: right;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-navy);
  font-size: 13px;
}

/* end of 8.6 */
/* 8.7 Suggested matches at this event */
/* Suggested matches at this event */
/* 8.7.1 .event-matches — vertical matches stack */
.event-matches {
  display: flex; flex-direction: column;
  gap: var(--sp-md);
}
/* 8.7.2 .event-match — single match card */
.event-match {
  display: flex; gap: var(--sp-md);
  padding: var(--sp-md);
  background: var(--color-cream);
  border: 1px solid var(--color-gold);
  border-radius: var(--radius-md);
  align-items: center;
}
/* 8.7.3 .event-match__avatar — match avatar disc */
.event-match__avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 2px solid var(--color-gold);
  flex: 0 0 56px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
}
/* 8.7.4 .event-match__body — match body column */
.event-match__body { flex: 1; min-width: 0; }
/* 8.7.5 .event-match__name — match name */
.event-match__name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  color: var(--color-navy);
}
/* 8.7.6 .event-match__why — match reason copy */
.event-match__why {
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.4;
  margin-top: 2px;
}
/* 8.7.7 .event-match__chips — chip row */
.event-match__chips {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: 6px;
}
/* 8.7.8 .event-match__chip — single chip pill */
.event-match__chip {
  font-size: 10.5px;
  font-weight: 700;
  font-family: var(--font-heading);
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-gold-dark);
  border: 1px solid var(--color-gold);
  letter-spacing: .03em;
  text-transform: uppercase;
}
/* 8.7.9 .event-match__action — action column right-aligned */
.event-match__action {
  display: flex; flex-direction: column; gap: 4px;
  align-items: flex-end;
}

/* end of 8.7 */
/* 8.8 Hosts/hostesses block */
/* Hosts/hostesses block */
/* 8.8.1 .event-hosts — hosts wrap row */
.event-hosts {
  display: flex; gap: var(--sp-md);
  flex-wrap: wrap;
}
/* 8.8.2 .event-host — single host card */
.event-host {
  display: flex; gap: var(--sp-sm);
  align-items: center;
  background: var(--color-surface-raised);
  border: 1.5px solid var(--color-gold);
  border-radius: var(--radius-md);
  padding: 8px 12px 8px 8px;
  flex: 1 1 220px;
  min-width: 0;
}
/* 8.8.3 .event-host__avatar — host avatar */
.event-host__avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  flex: 0 0 40px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
}
/* 8.8.4 .event-host__body — host body column */
.event-host__body { min-width: 0; flex: 1; }
/* 8.8.5 .event-host__name — host name */
.event-host__name {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-navy);
}
/* 8.8.6 .event-host__role — uppercase host role */
.event-host__role {
  font-size: 11px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-family: var(--font-heading);
  font-weight: 600;
}

/* end of 8.8 */
/* 8.9 Itinerary */
/* Itinerary */
/* 8.9.1 .event-agenda — agenda list reset */
.event-agenda {
  list-style: none;
  margin: 0; padding: 0;
}
/* 8.9.2 .event-agenda__item — single agenda row */
.event-agenda__item {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: var(--sp-lg);
  padding: var(--sp-md) 0;
  border-bottom: 1px dashed var(--color-border-strong);
}
/* 8.9.3 .event-agenda__item:last-child — drop final divider */
.event-agenda__item:last-child { border-bottom: none; }
/* 8.9.4 .event-agenda__time — time column */
.event-agenda__time {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  color: var(--color-gold-dark);
}
/* 8.9.5 .event-agenda__what — what column */
.event-agenda__what {
  font-size: 14px;
  color: var(--color-text);
  line-height: 1.45;
}
/* 8.9.6 .event-agenda__what strong — what column strong */
.event-agenda__what strong {
  display: block;
  color: var(--color-navy);
  font-family: var(--font-heading);
  margin-bottom: 2px;
}

/* end of 8.9 */
/* 8.10 Comments */
/* Comments */
/* 8.10.1 .event-comments — comments stack */
.event-comments {
  display: flex; flex-direction: column;
  gap: var(--sp-md);
}
/* 8.10.2 .event-comment — single comment row */
.event-comment {
  display: flex; gap: var(--sp-md);
  padding: var(--sp-md);
  background: var(--color-surface-raised);
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-gold);
}
/* 8.10.3 .event-comment__avatar — comment avatar */
.event-comment__avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  flex: 0 0 36px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
}
/* 8.10.4 .event-comment__body — comment body column */
.event-comment__body { flex: 1; min-width: 0; }
/* 8.10.5 .event-comment__head — comment header row */
.event-comment__head {
  display: flex; gap: var(--sp-sm);
  align-items: baseline;
  margin-bottom: 2px;
}
/* 8.10.6 .event-comment__name — comment author name */
.event-comment__name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  color: var(--color-navy);
}
/* 8.10.7 .event-comment__time — relative time stamp */
.event-comment__time {
  font-size: 11px;
  color: var(--color-text-muted);
}
/* 8.10.8 .event-comment__text — comment body text */
.event-comment__text {
  font-size: 13px;
  color: var(--color-text);
  line-height: 1.5;
}
/* 8.10.9 .event-comment__reactions — reactions row */
.event-comment__reactions {
  display: flex; gap: 6px;
  margin-top: 6px;
}
/* 8.10.10 .event-comment__reaction — reaction pill */
.event-comment__reaction {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: var(--color-cream);
  border: 1px solid var(--color-gold);
  color: var(--color-navy);
  font-weight: 600;
}

/* end of 8.10 */
/* 8.11 Accessibility list */
/* Accessibility list */
/* 8.11.1 .event-access — two-column accessibility grid */
.event-access {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-sm) var(--sp-md);
}
/* 8.11.2 .event-access__item — single accessibility item */
.event-access__item {
  display: flex; gap: 8px; align-items: center;
  font-size: 13px;
  color: var(--color-text);
}
/* 8.11.3 .event-access__item--ok::before — success tick */
.event-access__item--ok::before {
  content: "✓";
  color: var(--color-success);
  font-weight: 700;
  width: 16px;
  display: inline-flex; justify-content: center;
}
/* 8.11.4 .event-access__item--no::before — muted cross */
.event-access__item--no::before {
  content: "✗";
  color: var(--color-text-muted);
  font-weight: 700;
  width: 16px;
  display: inline-flex; justify-content: center;
}

/* end of 8.11 */
/* 8.12 Section heading rule */
/* Section heading rule */
/* 8.12.1 .event-section-rule — section-rule row */
.event-section-rule {
  display: flex; align-items: center; gap: var(--sp-md);
  margin: 0 0 var(--sp-lg);
}
/* 8.12.2 .event-section-rule__line — gold fade rule */
.event-section-rule__line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--color-gold), transparent);
}

/* end of 8.12 */
/* 8.13 Direction A: simple section heading */
/* Direction A: simple section heading */
/* 8.13.1 .event-section-heading — simple H2 heading */
.event-section-heading {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  color: var(--color-navy);
  margin: 0 0 var(--sp-md);
}

/* end of 8.13 */
/* 8.14 Bottom share strip */
/* Bottom share strip */
/* 8.14.1 .event-share — bottom share strip with gold top rule */
.event-share {
  display: flex; gap: var(--sp-sm);
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding-top: var(--sp-lg);
  border-top: 1px solid var(--color-border);
  margin-top: var(--sp-2xl);
}
/* 8.14.2 .event-share__label — share strip label */
.event-share__label {
  font-size: 13px;
  color: var(--color-text-muted);
  font-weight: 600;
  margin-right: var(--sp-sm);
}
/* 8.14.3 .event-share__btn — circular share button */
.event-share__btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 14px;
  color: var(--color-navy);
  transition: all var(--duration-fast) var(--ease-out);
}
/* 8.14.4 .event-share__btn:hover — gold border on hover */
.event-share__btn:hover {
  border-color: var(--color-gold);
  color: var(--color-gold-dark);
  transform: translateY(-1px);
}

/* end of 8.14 */
/* end of 8 */
/* 9. SECTION: RESPONSIVE — breakpoint system */
/* =========================================================================
   RESPONSIVE — mirrors the accounts-page system at every breakpoint.
   All driven by `@container vp` so the Tweaks panel viewport simulator
   actually triggers the rules.

   Accounts model we're replicating:
     ≥1024  — content block at 80% of the section, centred
     768–1023 — content block at 80% of the section, centred
     600–767 — full-width content (no cap), tighter gutters
     ≤599  — page padding 5cqw each side ⇒ content is 90% of viewport,
              section cards fill it 100% (not 80%)
   ========================================================================= */

/* 9.1 @container vp >=1024 — desktop, full layout width */
/* --- DESKTOP (≥1024) — full layout width, no card squeeze ---------- */
@container vp (min-width: 1024px) {
  /* About card centred at desktop widths too, to match smaller breakpoints. */
  .event-main .event-card:has(.event-description) { text-align: center; }
  .event-main .event-card:has(.event-description) .event-card__title {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  .event-main .event-card:has(.event-description) .event-description ul {
    display: block;
    text-align: center;
    padding-left: 0;
  }
  .event-main .event-card:has(.event-description) .event-description li {
    padding-left: 0;
    text-align: center;
  }
  .event-main .event-card:has(.event-description) .event-description li::before {
    position: static;
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
    top: auto;
    left: auto;
  }
  .event-main .event-card:has(.event-description) .event-tags { justify-content: center; }
  .event-page__inner { max-width: 1280px; padding: var(--sp-2xl) var(--sp-2xl) var(--sp-4xl); }
}
/* end of 9.1 */
/* 9.2 @container vp 768-1023 — tablet, narrow aside slightly */

/* --- TABLET (768 – 1023) — narrow the aside slightly --------------- */
@container vp (min-width: 768px) and (max-width: 1023px) {
  .event-page__inner { padding: var(--sp-xl) var(--sp-xl) var(--sp-3xl); }
  .event-layout {
    grid-template-columns: 1fr 280px;
    gap: var(--sp-xl);
  }
  .event-hero { gap: var(--sp-lg); }
  .event-hero__title { font-size: 30px; }
  .event-card { padding: var(--sp-lg); }
  /* Hero-cards cluster matches the 90% width used by other section cards
     at this breakpoint. 768-only — do not propagate above/below. */
  .event-hero-cards > * {
    width: 90%;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
}
/* end of 9.2 */
/* 9.3 @container vp <=880 — collapse, hero stacks + two-col into single col */

/* --- COLLAPSE (≤880) — hero stacks, two-col → single col ------------ */
@container vp (max-width: 880px) {
  .event-hero {
    grid-template-columns: 1fr;
    gap: var(--sp-lg);
  }
  /* Stacked hero — lock to ~desktop column ratio so creator-supplied
     images crop the same as on wider screens (≈1.4fr column at 420px tall
     ≈ 4:3 landscape). Shrunk to 70% width and centred at this breakpoint. */
  .event-hero__media {
    min-height: 0;
    aspect-ratio: 4 / 3;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
  }
  /* Centre the "RESTAURANT DATE" label along the bottom edge. */
  .event-hero__media-label {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
  .event-hero__title { font-size: 28px; margin-top: 5px; }

  .event-layout {
    grid-template-columns: 1fr;
    gap: var(--sp-xl);
  }
  .event-aside {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--sp-md);
  }
  .event-aside-card {
    flex: 1 1 280px;
    min-width: 0;
  }
  .event-aside-card--ticket {
    flex: 1 1 100%;
    order: -1;            /* ticket card jumps to top of aside row */
  }

  .event-engine-grid { grid-template-columns: repeat(2, 1fr); }
  .event-access { grid-template-columns: repeat(2, 1fr); }

  /* Section titles centre (with their gold underline, which hugs the text
     thanks to display: table) from this breakpoint down. Body content in
     the main-column cards centres too; the where-grid's transport+rating
     toprow keeps its left-aligned layout (handled in its own block above).
     The description bullet list switches to inline-block so the ul hugs
     its content and the bullets sit at the start of the text rather than
     pinned to the container's left edge. */
  .event-card__title { margin-left: auto; margin-right: auto; text-align: center; }
  .event-main .event-card { text-align: center; }
  .event-description ul { display: inline-block; text-align: left; }
  /* Centre each line of the description bullet list with the gold dot
     sitting inline immediately before the first character, instead of
     pinned to a left gutter (the inline-block ul above stayed left-rag). */
  .event-description ul {
    display: block;
    text-align: center;
    padding-left: 0;
  }
  .event-description li {
    padding-left: 0;
    text-align: center;
  }
  .event-description li::before {
    position: static;
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
    top: auto;
    left: auto;
  }
  .event-tags { justify-content: center; }
  .event-attendees { justify-content: center; }
  /* Non-ticket aside CTAs revert to natural width when stacked; the ticket
     CTA keeps its 40.5% width to stay aligned with the gold dividers. */
  .event-aside-card__cta { width: auto; }
}
/* end of 9.3 */
/* 9.4 @container vp 600-767 — phablet, no width cap + tighter gutters */

/* --- PHABLET (600 – 767) — no width cap, tighter gutters ------------ */
@container vp (min-width: 600px) and (max-width: 767px) {
  .event-page__inner { padding: var(--sp-lg) var(--sp-lg) var(--sp-2xl); }
  .event-hero,
  .event-layout,
  .event-card,
  .event-loggedout-banner { max-width: none; }

  .event-aside { flex-direction: column; }
  .event-aside-card { flex: 1 1 100%; }

  .event-card { padding: var(--sp-md); }
  .event-card__title { font-size: 19px; }

  .event-info-row {
    flex-direction: column;
    gap: 4px;
    padding: 8px 0;
  }
  .event-info-row strong { flex: none; }

  .event-engine-grid { grid-template-columns: 1fr; }
  .event-access { grid-template-columns: 1fr; }

  .event-char-row { grid-template-columns: 90px 1fr 28px; gap: var(--sp-sm); }
}
/* end of 9.4 */
/* 9.5 @container vp <=599 — phone, page padding 5cqw + content fills 90% */

/* --- PHONE (≤599) — page padding 5cqw, content fills 90% of viewport */
@container vp (max-width: 599px) {
  /* Page-level gutters are 5cqw each side ⇒ inner-content width = 90cqw
     (i.e. 90% of the simulated viewport), matching the accounts-page rule. */
  .event-page__inner {
    padding-inline: 5cqw;
    padding-top: var(--sp-md);
    padding-bottom: var(--sp-2xl);
  }

  .event-hero,
  .event-layout,
  .event-card,
  .event-aside-card,
  .event-loggedout-banner {
    max-width: none;
    width: 100%;
    margin-inline: 0;
  }

  .event-hero { margin-bottom: var(--sp-xl); gap: var(--sp-md); }
  .event-hero__media { min-height: 0; aspect-ratio: 4 / 3; border-radius: var(--radius-md); }
  .event-hero__title { font-size: 24px; line-height: 1.18; }
  .event-hero__tagline { font-size: 15px; }
  .event-hero__media-thumbs { bottom: var(--sp-sm); right: var(--sp-sm); }
  .event-hero__thumb { width: 36px; height: 36px; }
  .event-hero__media-label { bottom: var(--sp-sm); left: var(--sp-sm); }

  .event-aside { flex-direction: column; }

  .event-card { padding: var(--sp-md); }
  .event-card__title { font-size: 19px; }
  .event-aside-card { padding: var(--sp-md); }

  .event-info-row {
    flex-direction: column;
    gap: 4px;
    padding: 8px 0;
  }
  .event-info-row strong { flex: none; }

  .event-engine-grid { grid-template-columns: 1fr; }
  .event-access { grid-template-columns: 1fr; }
  .event-char-row { grid-template-columns: 90px 1fr 28px; gap: var(--sp-sm); }

  .event-loggedout-banner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-sm);
    padding: var(--sp-md);
  }
  .event-loggedout-banner__actions { justify-content: stretch; }
  .event-loggedout-banner__actions > * { flex: 1; }

  .event-page.is-logged-out [data-sensitive="block"]::after {
    font-size: 12px;
    padding: 6px 12px;
  }
}
/* end of 9.5 */
/* 9.6 @container vp <=480 — phone-small, tighter chrome + scaled type */

/* --- PHONE-SMALL (≤480) — tighter chrome, scaled type --------------- */
@container vp (max-width: 480px) {
  .event-breadcrumbs { font-size: 12px; gap: 4px; }
  .event-breadcrumbs__current { max-width: 180px; }

  .event-badges { gap: 6px; }
  .event-badge { font-size: 10px; padding: 4px 8px; }

  .event-hero { margin-bottom: var(--sp-lg); }
  .event-hero__media { min-height: 0; aspect-ratio: 4 / 3; }
  .event-hero__title { font-size: 22px; }
  .event-hero__tagline { font-size: 14px; }

  .event-pillar__icon { width: 28px; height: 28px; flex: 0 0 28px; font-size: 14px; }
  .event-pillar__value { font-size: 14px; }
  .event-pillar__sub { font-size: 12px; }

  .event-aside-card__price-amount { font-size: 48px; }
  .btn-primary, .btn-secondary { font-size: 13px; padding: 10px 14px; }

  /* Aside cards explicitly match event-card width (both 90%) at ≤480px. */
  .event-top-row > .event-aside-card {
    width: 90% !important;
    max-width: 90% !important;
  }

  /* Flourish title at narrow viewports — shrink inner padding/gap so the
     side rules + nowrap text fit within the card content area instead of
     overflowing the right edge. */
  .event-card__title--flourish {
    gap: var(--sp-sm);
    padding-left: 0;
    padding-right: 0;
  }
  .event-card__title--flourish::after { left: 0; right: 0; }

  .event-agenda__item { grid-template-columns: 56px 1fr; gap: var(--sp-sm); }
  .event-agenda__time { font-size: 13px; }

  .event-match { flex-wrap: wrap; }
  .event-match__action { width: 100%; flex-direction: row; justify-content: flex-end; }
}
/* end of 9.6 */
/* 9.7 @container vp <=380 — phone-xs, smallest devices */

/* --- PHONE-XS (≤380) — smallest devices ----------------------------- */
@container vp (max-width: 380px) {
  .event-breadcrumbs__current { max-width: 140px; }
  .event-hero__title { font-size: 20px; }
  .event-hero__media { min-height: 0; aspect-ratio: 4 / 3; }
  .event-card { padding: 14px; }
  .event-card__title { font-size: 17px; }
  .event-aside-card { padding: 14px; }
  .event-aside-card__price-amount { font-size: 22px; }

  .event-hero__media-thumbs { gap: 4px; }
  .event-hero__thumb { width: 30px; height: 30px; }
  .event-hero__media-label {
    font-size: 9.5px;
    padding: 4px 7px;
    letter-spacing: .08em;
  }

  .event-description { font-size: 14px; }
}

/* end of 9.7 */
/* end of 9 */
/* 10. SECTION: §S92 Container-chain widen on single event pages */
/* =========================================================================
   §S92 — Container-chain widen on single event pages.
   The design's `.event-page` carries `container-type: inline-size; container-name: vp`
   so every `@container vp (...)` query in event-styles.css measures the
   inline-size of `.event-page` itself. On uksocials.club, BP/Seeko wrap the
   post in `section.container > .row > .col-main.col-lg-10.offset-lg-1 >
   .entry-content.col-inner`. That chain caps `.event-page` at ~50-79% of the
   viewport depending on breakpoint — so the design's `@container vp
   (max-width: 880px)` collapses to 1-col at viewport 1280 (when the design
   intends 3-col from ~1024 upwards) and almost everything below 1280 looks
   like the 768 layout. Mirrors the accounts-page LB-059 / D-149 fix pattern.
   Scoped to body.single-social_event so other surfaces are untouched. */
/* page-polish.css line 130 has `.event-card { overflow: hidden }` (a rule for
   the events-LISTING grid cards). The new single-event-page design reuses the
   `.event-card` class for big content sections — and its `::before` gold
   dividers are positioned 40px ABOVE each card's top edge via `bottom: 100%;
   margin-bottom: 40px`. With overflow:hidden inherited from the listing rule,
   those dividers get clipped and disappear. Scope-bump to overflow: visible on
   single-event pages so the dividers render. */
/* 10.1 body.single-social_event .event-card — overflow visible so gold dividers render */
body.single-social_event .event-card {
  overflow: visible !important;
}

/* 10.2 .event-page .event-aside-card--ticket .event-aside-card__cta — min-width fits "Reserve my spot" label */
/* Reserve my spot button: design's `width: 40.5%` is too narrow for the
   "Reserve my spot" string at typical price-card widths on the live (the design
   reference likely renders with narrower font metrics or a wider price card).
   Add `min-width: max-content` so the button always at least fits its label
   without text overflow. Keeps the design's 40.5% as the lower bound. */
.event-page .event-aside-card--ticket .event-aside-card__cta {
  min-width: max-content;
}

/* 10.3 .event-page .event-aside-card__cta-wrap — text-align centre defeats wrapper-broken flex centring */
/* Reserve button centring: the design's `align-self: center` / `margin: auto`
   rules assume the button is a DIRECT child of the `.event-aside-card--ticket`
   flex container. On the live, `event_system_ticket_button()` wraps the
   button in two block-level divs (`.event-aside-card__cta-wrap` >
   `.event-ticket-section`) before placing it inside `.event-aside-card--ticket`
   — those wrappers break the flex parent-child relationship. Use `text-align:
   center` on the wrappers so the inline-flex button centres as inline content.
   Works at every viewport. */
.event-page .event-aside-card__cta-wrap,
.event-page .event-aside-card__cta-wrap .event-ticket-section {
  text-align: center;
}

/* 10.4 body.single-social_event — match bg to navy gutter so scrollbar-gutter gap is invisible */
/* Left-edge gap fix. The design's `html { scrollbar-gutter: stable both-edges }`
   (line 8) reserves scrollbar space on BOTH sides of the viewport for symmetry.
   On live, html bg is transparent so the gutter shows through to the white
   viewport bg — visible as a "weird line" down the left side of the page.
   Match html bg to body bg so the gap is invisible. */
body.single-social_event {
  background: var(--color-bg, #F8F8F8);
}
/* 10.5 body.single-social_event html — propagate bg to html so left gutter blends */
body.single-social_event html,
html:has(body.single-social_event) {
  background: var(--color-bg, #F8F8F8);
}

/* 10.6 @container vp <=1023 — hero image 90% width override (extends design's 70% rule) */
/* Hero image 90% width at ≤1023 (Rob spec): matches the .event-aside-card and
   .event-card width: 90% rule. Design defaults to 70% at ≤880 — override to
   90% AND extend the breakpoint up to 1023. */
@container vp (max-width: 1023px) {
  .event-hero__media {
    width: 90% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* end of 10.6 */
/* 10.7 §S95-007 @container vp <=880 — hero image 90vw (90% of viewport, not parent) */
/* §S95-007 — Hero image 90% of VIEWPORT (not parent) at ≤880px stacked layout.
   At ≤880px the hero is stacked full-width above content. The max-width:1023px
   rule above gives 90% of .event-hero parent (~93% of vw) → ~85% of viewport.
   Rob: "90% of the width of the screen". 90vw fixes this. Safe at ≤880px
   because the hero spans the full page width; do NOT apply at 881-1023px
   (column layout — 90vw would overflow the column). */
@container vp (max-width: 880px) {
  .event-hero__media {
    width: 90vw !important;
    max-width: 90vw !important;
  }
}

/* end of 10.7 */
/* 10.8 @container vp <=380 — who's coming attendee strip stacks vertically */
/* "WHO'S COMING" attendee strip: at ≤380 (phone-xs), stack the avatars and
   the "9 of 12 spots filled" count VERTICALLY rather than side-by-side. */
@container vp (max-width: 380px) {
  .event-where-whocoming .event-attendees,
  .event-attendees {
    flex-direction: column;
    align-items: center;
    gap: var(--sp-sm);
    text-align: center;
  }
}

/* end of 10.8 */
/* 10.9 @container vp <=599 — card title underline breathing room at narrow widths */
/* Card title gold-underline breathing room at narrow widths (Rob: "no margin
   between the gallery and 'who is' card title gold underlines and the content
   below"). Default `.event-card__title { margin-bottom: calc(var(--sp-lg) + 5px) }`
   gets visually crunched at narrow because the title `display: table` collapses
   the box. Force more breathing room at ≤599. */
@container vp (max-width: 599px) {
  .event-card__title {
    margin-bottom: calc(var(--sp-lg) + 15px) !important;
  }
}

/* end of 10.9 */
/* 10.10 body.single-social_event #page-wrapper container neutralisations — strip Bootstrap row gutters */
body.single-social_event #page-wrapper > section.container {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body.single-social_event #page-wrapper > section.container > .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
body.single-social_event #page-wrapper > section.container > .row > .col-main {
  max-width: 100% !important;
  flex: 0 0 100% !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body.single-social_event .col-main > .entry-content.col-inner {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* end of 10.10 */
/* end of 10 */
/* 11. SECTION: §S92 Button scope-bump for .event-page wrapper */
/* =========================================================================
   §S92 — Button scope-bump for .event-page wrapper
   Seeko-dynamic.css defines `.btn-secondary` at the same specificity (0,1,0)
   as the design's bare `.btn-secondary` and loads later in the cascade, so it
   wins source-order with grey bg / white text on every secondary button on
   the event page. LB-057 / D-149 — defeat with a scope-bump on the design's
   selectors, never edit the design's rule body. `.btn-primary` does NOT need
   a scope-bump because Seeko's rule doesn't target it directly (Seeko only
   overrides `.btn`, `button`, `.btn-secondary`); the design's `.btn-primary`
   wins on specificity. Bumping `.btn-primary` would ALSO defeat the design's
   `.event-aside-card--ticket .event-aside-card__cta` cream-bg restyle (same
   specificity, mine loads later) — that's what was making the "Reserve my
   spot" button render navy-bg instead of the cream-bg design intent.
   ========================================================================= */
/* 11.1 .event-page .btn-secondary — scope-bump beats Seeko dynamic.css cascade */
.event-page .btn-secondary {
  background: transparent;
  color: var(--color-navy);
  border: 1px solid var(--color-gold);
  box-shadow: 0 2px 0 rgba(3,27,131,.10), 0 3px 6px rgba(3,27,131,.10);
  margin-bottom: 0 !important;
}
/* 11.2 .event-page .btn-secondary:hover — design's lift */
.event-page .btn-secondary:hover { transform: translateY(-1px); }
/* 11.2b .event-page .btn-secondary:active — design's reset */
.event-page .btn-secondary:active { transform: translateY(0); box-shadow: none; }

/* 11.3 .event-page .event-aside-card__cta-wrap .event-ticket-section — strip legacy cream chrome around RSVP button */
/* Neutralise the legacy `.event-ticket-section` cream wrapper that
   `event_system_events_page_styles()` (mu-plugins/event-system.php §10.4 line ~6560)
   paints around the RSVP button. The wrapper div is kept in the PHP because the
   payment-success / payment-cancelled JS handlers (§6.12) prepend banners into
   `.event-ticket-section` — but on the new event page, the cream box around the
   button is a regression from the design's clean look. Strip it. */
.event-page .event-aside-card__cta-wrap .event-ticket-section,
.event-page .event-aside-card .event-ticket-section {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  border-radius: 0;
}

/* 11.4 .event-page .wishlist-button — match .btn-secondary look on the event page */
/* Wishlist "Interested" toggle inside the event page — match .btn-secondary so
   it looks like a peer of View venue / View profile / Add to calendar. */
.event-page .wishlist-button,
.event-page .wishlist-button.wishlist-active {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: var(--radius-md);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .02em;
  background: transparent;
  color: var(--color-navy);
  border: 1px solid var(--color-gold);
  box-shadow: 0 2px 0 rgba(3,27,131,.10), 0 3px 6px rgba(3,27,131,.10);
  cursor: pointer;
  width: auto;
  min-width: 0;
  line-height: 1.2;
  text-decoration: none;
}
/* 11.5 .event-page .wishlist-button:hover — cream + lift on hover (shadow grows to match elevation) */
.event-page .wishlist-button:hover {
  background: var(--color-cream);
  transform: translateY(-1px);
  box-shadow: 0 4px 4px rgba(3,27,131,.12), 0 8px 18px rgba(3,27,131,.14);
}
/* 11.6 .event-page .wishlist-button.wishlist-active — active state keeps cream bg */
.event-page .wishlist-button.wishlist-active {
  background: var(--color-cream);
}

/* 11.7 §S95-004 @container vp <=600 — hero label below image at small viewports */
/* §S95-004 — Hero label below image at ≤600px. Design's @container vp
   (max-width: 599px) moves the label below the image. With our container
   chain fix, the container = exactly 600px at 600px viewport, missing the
   threshold by 1px. Extend to ≤600px + reset transform:translateX(-50%)
   inherited from the ≤880px centering rule so the label doesn't go off-screen.*/
@container vp (max-width: 600px) {
  .event-hero__media {
    overflow: visible !important;
    margin-bottom: 56px !important;
  }
  .event-hero__media-label {
    top: calc(100% + 12px) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    transform: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: max-content !important;
    max-width: 100% !important;
  }
}

/* end of 11.7 */
/* 11.8 §S95-005 @container vp 601-880 — hero label below image at tablet (Rob override) */
/* §S95-005 — Rob override: hero label below image at 601–880px (covers 768px tab).
   Design agent keeps label inside image above 600px. Rob explicitly overrides:
   label must appear below and centred at 768px too. Reset transform:translateX(-50%)
   from the ≤880px centering rule so label stays on-screen. */
@container vp (min-width: 601px) and (max-width: 880px) {
  .event-hero__media {
    overflow: visible !important;
    margin-bottom: 56px !important;
  }
  .event-hero__media-label {
    top: calc(100% + 12px) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    transform: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: max-content !important;
    max-width: 100% !important;
  }
}

/* end of 11.8 */
/* 11.9 §S95-001 body.single-social_event col-main — corrected container chain (article between section and row) */
/* §S95-001 — Container chain: correct DOM path (article between section and row).
   §S92's col-main rule targeted section.container > .row > .col-main, but the
   actual DOM is section.container > article > .row > .col-main, so it never
   fired. Bootstrap row's −15px negative margins cancel scrollbar-gutter's
   −15px reservation on each side — do NOT zero the row margins. */
body.single-social_event #page-wrapper > section.container > article > .row > .col-main {
  max-width: 100% !important;
  flex: 0 0 100% !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 11.10 §S95-002 .elementor-location-header — max-width none guard */
/* §S95-002 — Header max-width guard. scrollbar-gutter changed from both-edges
   to stable so there is no left gutter offset to compensate for. No margin-left
   needed. max-width: none prevents any Elementor container constraint. */
.elementor-location-header {
  max-width: none !important;
}

/* 11.11 §S95-003 html — cream bg so scrollbar-gutter strip blends */
/* §S95-003 — Scrollbar gutter left-strip background: html bg is transparent so
   the 15px left gutter shows the browser chrome colour. Set it to cream so it
   is invisible. Also cover the right gutter. */
html {
  background: var(--color-cream, #F8F8F8) !important;
}

/* 11.12 §S95-006 .event-page .event-hero-organiser__actions .wishlist-button — zero margin so flex centring groups buttons */
/* §S95-006 — Wishlist button margin fix. page-polish.css has a global rule
   `.wishlist-button { margin: 0 auto !important }` (line ~4437) that absorbs
   all free space in the event-hero-organiser__actions flex-row, pushing the
   wishlist button to the far right and leaving View Profile on the left.
   Override margin to 0 within the event page so justify-content:center on the
   flex container can group both buttons centrally. */
.event-page .event-hero-organiser__actions .wishlist-button {
  margin: 0 !important;
  align-self: center !important;
}


/* end of 11 */