/* =========================================================================
   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. */
/* S181 (18/08/26, T-S181-004): the first selector was the BARE `.event-card + .event-card`,
   which also caught the ARCHIVE-STYLE item cards nested inside the Similar events rail (the
   section wrapper and the item cards share the .event-card class), pushing every rail card
   after the first down by 82px - the staggered mess in Rob's screenshot. Scoped to the two
   real section contexts; the rail's grid now lays its items out untouched. */
.event-main > .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); }
/* 5.11.7 .event-map--online - the internet mark that stands in for the map on an online event
   (S169, Rob 03/08/26: "just replace the map with an icon of the internet"). It keeps the designed
   cell exactly - same height, gold border, radius and shadow - and only changes what is INSIDE it,
   because an online event has no place to draw. The map-tile gradient and its diagonal hatch are
   both dropped: they read as streets, and there is no street. Rob is doing the visual pass on this
   later, so this is deliberately plain rather than decorated. */
.event-map--online {
  background: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
}
.event-map--online::before { content: none; }
/* 5.11.8 .event-map__globe - the mark itself, centred in the cell */
.event-map__globe { display: block; opacity: .85; }

/* 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.2a — REMOVED 18/08/2026 (S181, VS4, T-S181-004, Rob's order). The S167
   `--nohistory` variant made the host quote SPAN BOTH COLUMNS whenever the venue had no
   history, which moved it out from under the map. Rob named it "the wrong answer" on
   T-S167-004 and his design screenshots (18/08/26) show the quote UNDER THE MAP at map
   width always — which is exactly what the base 5.16.2 grid ("map right / quote right")
   already does. The empty-row-2 hole the variant papered over disappears now the venue
   history block renders real past events and reviews. The removed rules are in git. */
/* 5.16.3a .event-where-grid--maponly — single-column variant (S154). The right-hand column
   (transport/parking/access, the Google rating badge, "Who's coming" and the venue review
   history) was invented design-mockup content and has been removed from the template, so the
   only remaining cell is the map. Compound selector so it wins over the plain
   .event-where-grid grid declarations inside the container queries below, which are LOCKED
   and must not be edited. */
.event-where-grid.event-where-grid--maponly {
  grid-template-columns: 1fr;
  grid-template-areas: "map";
  justify-items: stretch;
}
/* S167 FIX. The single column was set here in S154 and the map was left at its two-column
   size, so "Where you'll be" drew a 400px square in a 1044px section with ~644px of dead
   white space beside it - which reads as a broken section rather than an empty one. 5.16.13's
   `width: 400px` is the two-column size and still governs the two-column layouts, so it is
   released HERE, on the --maponly compound selector, rather than edited there. Height stays
   400px so the section keeps its proportions. */
.event-where-grid.event-where-grid--maponly .event-where-cell--map {
  justify-self: stretch;
  width: 100%;
}
.event-where-grid.event-where-grid--maponly .event-map {
  width: 100%;
  aspect-ratio: auto;
}
/* 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.15a .event-where-whocoming--in-card — S181 (18/08/26, Rob's ruling): on an ONLINE event
   the block lives at the bottom of the centred "What's included" aside card instead of the venue
   column, so it centres to match the card. The gold rule above it comes from the base ::before.
   Aesthetic first pass only — Rob tunes it in his visual sweep. */
.event-where-whocoming--in-card {
  margin-top: var(--sp-lg);
  text-align: center;
}
.event-where-whocoming--in-card .event-attendees { justify-content: center; }
.event-where-whocoming--in-card .event-attendees__avatars { justify-content: center; }
/* 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;
}
/* 5.14b .event-aside-card__going — S181 (18/08/26): the settled you're-going state that replaces
   the CTA for a member already holding a place (Rob's screenshot: the card offered "Reserve my
   spot" to a holder). Brand SUCCESS palette per D-206. */
.event-aside-card__going {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  color: var(--color-success);
  background: var(--color-success-bg);
  border: 1px solid var(--color-success);
  border-radius: 16px;
  padding: 10px 26px;
}

/* 5.14a .event-aside-card__attvis — S181 (18/08/26, D-389): the ticket-time attendance-privacy
   line in the ticket aside. First pass; Rob's sweep. */
.event-aside-card__attvis {
  margin-top: var(--sp-md);
  padding-top: var(--sp-md);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
  align-items: center;
  text-align: center;
}
.event-aside-card__attvis-label { font-size: 12px; color: var(--color-text-secondary); }
.event-aside-card__attvis-btn { font-size: 11px; padding: 4px 10px; }

/* 6.6a .event-venue-review-form — S181 (18/08/26): the attendee "Rate this venue" capture,
   rendered only for members the server would accept. Brand: gold stars, D019 div controls,
   the global gold-bordered input, .btn-option submit. First pass; Rob tunes in his sweep. */
.event-venue-review-form {
  margin-top: var(--sp-md);
  padding-top: var(--sp-md);
  border-top: 1px solid var(--color-border);
}
.event-venue-review-form__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-xs);
}
.event-venue-review-form__stars { display: flex; gap: 4px; margin: 0 0 var(--sp-sm); }
.event-venue-review-form__star {
  font-size: 22px;
  line-height: 1;
  color: rgba(204, 153, 0, 0.25);
  cursor: pointer;
  user-select: none;
}
.event-venue-review-form__star.is-on { color: var(--color-gold); }
.event-venue-review-form__text { width: 100%; margin: 0 0 var(--sp-sm); }
.event-venue-review-form__msg { font-size: 12px; color: var(--color-navy); margin-top: var(--sp-xs); }
/* 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.3a .event-share__btn svg — S167 FIX: the four share icons were invisible.
   Measured live: the button computes `padding: 9px 18px` inherited from the Seeko parent
   theme (LB-119), and with box-sizing: border-box on a 36px button that leaves a content
   box 0px wide. The icon is a flex child at `flex: 0 1 auto` with `min-width: auto`, so it
   shrank to `width: 0px` and all four buttons rendered as empty circles - while measuring
   as present, visible, 38x36 and correctly labelled, which is why the S162 check passed
   them. Zero the inherited padding and pin the icon so it cannot shrink. */
.event-share__btn { padding: 0; }
.event-share__btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
/* 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 REMOVED (Fable S140 sanitise): targeted the old builder's header wrapper,
   which no longer renders anywhere (custom header live since S138). */

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

/* 11.13 .event-ticket-hold-notice — the last-ticket HOLD notice (D-310, S154).
   Two states, same panel: "someone is at the checkout for the last ticket, it comes back in m:ss"
   for whoever was beaten to it, and "your ticket is held while you pay, m:ss left" for the buyer.
   On brand per Rob 26/07/2026: navy text, gold border, centred. */
.event-ticket-hold-notice {
  margin: 0 0 var(--sp-md);
  padding: var(--sp-md) var(--sp-md);
  border: 2px solid var(--color-gold);
  border-radius: 12px;
  background: #fff;
  text-align: center;
}
.event-ticket-hold-notice__text {
  margin: 0;
  color: var(--color-navy);
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}
.event-ticket-hold-notice__timer {
  display: inline-block;
  min-width: 3.5em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-navy);
}

/* 11.14 .host-register — the curated-event HOST REGISTER (D-312, S154). Shown only to the event's
   two hosts (plus organiser/admin): the guest list before, who turned up after. Brand: navy text,
   gold border, centred heading. Never seen by a member. */
.host-register {
  margin: var(--sp-xl) 0;
  padding: var(--sp-lg);
  border: 2px solid var(--color-gold);
  border-radius: 12px;
  background: #fff;
}
.host-register__title {
  margin: 0 0 var(--sp-sm);
  color: var(--color-navy);
  text-align: center;
}
.host-register__intro {
  margin: 0 0 var(--sp-md);
  color: var(--color-navy);
  font-size: 14px;
  text-align: center;
}
.host-register__list { list-style: none; margin: 0; padding: 0; }
.host-register__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-sm);
  padding: 10px 0;
  border-top: 1px solid rgba(3, 27, 131, 0.12);
}
.host-register__name { flex: 1 1 12em; color: var(--color-navy); font-weight: 600; }
.host-register__actions { display: flex; gap: 8px; }
.host-register__state { flex: 0 0 auto; color: var(--color-navy); font-size: 13px; opacity: 0.75; }

/* end of 11 */