/* =========================================================================
   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):not(.event-where-whocoming__title):not(.event-description h3) {
  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.
   S229 16/09/26 (T-S229-052): hidden on Rob's word. The category now prints as a pill in the
   hero's badge row beside the age pill (event-system.php), in that pill's own styling. The rule
   and the markup are left in place so the design chip can be restored by deleting one line. */
.event-hero__media-label { display: none !important; }
.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;
  /* S227 (Rob, S225): "it shouldn't have a full width card that's just stupid". Measured
     live, the card ran 614px at 768 and 814px at 1024 against a 400px map, because the two
     LOCKED container blocks give the quote CELL a grid area spanning both columns. Those
     blocks are not touched: the CARD stops at the map's own 400px (5.16.13) instead, which
     is what 5.16.3 already says the design is, "the quote UNDER THE MAP at map width
     always". Measured after: 400.00px at 768, 1024, 1280 and 1920 with its left edge on
     the map's to 0.00px, and 261.59px unchanged at 360 where the grid is one column. */
  max-width: 400px;
  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); }

/* S229 16/09/26 (T-S229-055), Rob: "the location is still left aligned, it's not centered",
   and on the map itself: "the map renders with [square corners] ... the container is going to
   have to have square 90 degree gold border corners". The chip's text centres, and the map
   cell that holds a Google iframe drops its 16px radius so the gold edge follows the tile it
   actually contains. The chip is also a link to the venue page now (event-system.php). */
.event-map__chip { text-align: center; }
.event-map__chip-link { color: inherit; text-decoration: none; display: block; }
.event-map__chip-link:hover strong { color: var(--color-gold); }
.event-where-cell--map .event-map:has(iframe) { border-radius: 0; }
.event-where-cell--map .event-map:has(iframe) iframe { border-radius: 0; }
/* 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(0,0,0,.15);
  display: flex;
  flex-direction: column;
  min-height: 280px;
  /* S220 VC 07, item 199, 14/09/2026. Rob: "none of those gaps are uniform. They should all be
     uniform and correctly laid out." ONE rhythm owns every gap in this card now: 16px between
     every block, and the card's own padding is 16px, so the edges match the gaps. Every rule
     below that used to set its own margin has been stood down rather than left to compete. */
  gap: var(--sp-lg);
}
/* 5.13.3a A CTA wrapper with nothing in it still earns two flex gaps, which reads as a dead band of
   white (S220, item 199). It is never :empty - it always holds an .event-ticket-section - so the test
   is whether anything at all is rendered inside that section: the wrapper is hidden only when the
   sections are its only elements. That is the member who holds a place, whose card state now lives on
   their Events tab (S218), and a whitespace-only section counts as empty too.
   F45 (S238): the test used to be "holds no link, button, form or input", which treated every
   deliberately TEXT-ONLY state as empty and hid it: the D-339 "Tickets for this event are not on sale
   yet" note, the D-343 "Refund requested" state, the D-310 last-ticket hold notice, the age-restricted
   notice, the S207 cancelled-event notice with the viewer's own refund line, and the buyer's own
   "Payment successful!" banner after a Stripe checkout. Any rendered element now keeps the wrapper. */
.event-aside-card--ticket > .event-aside-card__cta-wrap:not(:has(*:not(.event-ticket-section))) {
  display: none;
}
/* 5.13.3c THE RHYTHM IS THE ONLY THING ALLOWED TO SET A GAP IN THIS CARD. Blocks arrive here from
   several PHP emitters, each with its own margin, which is how the card ended up with gaps of 4, 0,
   28, 22, 12, 12 and 4 pixels. Vertical margins on a direct child are stood down so the flex gap is
   the single owner; horizontal margins are untouched, because some children centre themselves. */
.event-aside-card--ticket > * {
  margin-top: 0;
  margin-bottom: 0;
}
/* 5.13.3b The price and the state chip share one unnamed wrapper, so it carries the rhythm too. */
.event-aside-card--ticket > [data-ev-headline] {
  display: flex;
  flex-direction: column;
  /* S230 17/09/2026, Rob on a past event: "no idea why, but that should obviously be centred."
     This wrapper holds the price and the state chip. As a flex column it stretched its children, so
     the price sat hard left while everything else on the card was centred. */
  align-items: center;
  gap: var(--sp-lg);
}
/* 5.13.4 .event-aside-card--ticket .event-aside-card__price — price block spacing */
.event-aside-card--ticket .event-aside-card__price {
  /* S220 item 199: was margin-top 30px / margin-bottom 4px, which made the space above the price
     nearly twice every other gap and the space below it a quarter of one. The flex gap owns both. */
  margin-top: 0;
  margin-bottom: 0;
}
/* 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;
  /* S220 item 199: this padding is the space between the line and its own gold rule, so it is one
     rhythm step; the card's gap then puts the same step below the rule. */
  padding-bottom: var(--sp-lg);
  /* Rob, 14/09/26: "that should be gold because it looks bland". */
  color: var(--color-gold);
}
/* 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.6a S220 VC 07, item 198, 14/09/2026. Once the member HOLDS a place, the
   ticket controls that used to sit between the capacity line and the cancellation
   terms moved to their own Events tab (D-518), so 5.13.6's rule and the hint's
   ::before drew two gold rules back to back with nothing between them. Rob's
   design has one, so 5.13.6 stands down in that one state. Declaration handed
   over verbatim by ev5c, results/s218/ev5c/ev5c_report.md section 9.3. */
.event-aside-card--ticket [data-ev-headline]:has(.event-aside-card__price--going) + .event-aside-card__price-meta::after {
  display: none;
}
/* 5.13.6b S220 item 199. 5.13.5's padding-bottom exists to hold that gold rule. With the rule hidden
   it is 16px of empty space, which makes the gap above the next rule a double step and breaks the
   one rhythm. No rule, no padding. */
.event-aside-card--ticket [data-ev-headline]:has(.event-aside-card__price--going) + .event-aside-card__price-meta {
  padding-bottom: 0;
}
/* 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;
  /* S220 item 199: 2px of rule plus one rhythm step of clear space beneath it. The 12px margin is
     gone because the card's gap already sets the space above the rule. */
  padding-top: 18px;
  margin-top: 0;
}
/* 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;
  /* S220 item 199: was 8px, an odd half-step sitting on top of the card's own gap. */
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 67.5%;
  height: 2px;
  background: var(--color-gold);
}
/* 5.13.19a .event-aside-card__joining-note - S220 VC 07, T-S218-047, 14/09/2026. This line used to
   carry font-size, colour AND a 10px top margin as an inline style straight from the PHP, and that
   inline margin beat the card's own rhythm, leaving this one block 26px below the hint while every
   other gap was 16px. The style attribute is gone from the emitter and the rhythm owns the spacing. */
.event-aside-card__joining-note {
  font-size: 12px;
  color: var(--color-text-muted);
}
/* 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;
}
/* S219 (Rob 10/09/26): the venue row carries the UK Socials site icon, a picture on white, so its disc
   is white inside the gold ring rather than a white square sitting on the navy gradient. */
.event-organiser__avatar.venue-sigil:has(.uks-site-pin) {
  background: #FFFFFF !important;
}
.event-organiser__avatar.venue-sigil .uks-site-pin {
  width: 70% !important;
  height: 70% !important;
}
/* 5.15.2 .event-organiser__avatar — cream gold-bordered avatar disc */
/* S231 18/09/26 (triage item 8), Rob: "the icon buttons in that panel should have the light cream
   background. They have a blue gradient at the moment and you can't really see the icons
   themselves." The glyphs inside are drawn navy and gold, so a navy-to-cyan gradient behind them
   swallowed them. Cream is the platform surface and the navy line work reads against it; the
   initials variant takes navy for the same reason, gold-light on cream was invisible. */
.event-organiser__avatar {
  /* S231 18/09/26 (triage item 20a), Rob: "make sure they are an odd height, so that there's a
     definite pixel row in the centre. Same with the width." 48 has no centre row; 49 does. */
  width: 49px; height: 49px;
  overflow: hidden;
  border-radius: 50%;
  border: 2px solid var(--color-gold);
  background: var(--color-cream, #FFFBE6);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-navy);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  flex: 0 0 49px;
}
/* 5.15.2b .event-organiser__sigil-img — the organiser's own picture, filling the disc. */
.event-organiser__sigil-img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
/* 5.15.2c .organiser-sigil--default - the organiser has uploaded no sigil, so the disc carries the
   platform's DEFAULT SIGIL and never a letter. S234 21/09/2026, Rob: "for god's knows why the
   organiser sigil on the event page still shows as a letter, not the actual sigil". The mark and
   its setting are the ones every member, venue and organiser card already uses (page-polish.css
   .uks-card__sigil): the gold person on navy inside the gold ring. SIZE IS MEASURED, not copied:
   the mark's painted ink runs 4.3 to 19.7 in its 24 viewBox, so at 26px it stands 16.7px tall,
   which is the ink height of the calendar glyph in the disc two cards above it (measured 17.5px
   at 22px) and reads at the same weight as the venue pin between them. Its ink is centred in its
   own viewBox (mid 12.0 of 24), so the disc centres it by ink, not by box. */
.event-organiser__avatar.organiser-sigil--default {
  background: var(--color-navy, #031B83);
}
.event-organiser__avatar.organiser-sigil--default svg {
  width: 26px;
  height: 26px;
}
/* 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 */
/* S231 18/09/26 (triage item 20a), Rob: "the organiser panel is taller than the other two panels.
   They should be all uniform." MEASURED at 1280: 75.0 / 75.0 / 87.0, because the organiser card
   carries two lines of text and the other two carry one. A grid with equal auto rows makes the
   three the same height whatever they hold, rather than pinning a number that a longer organiser
   name would break. */
.event-hero-cards {
  display: grid;
  grid-auto-rows: 1fr;
  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 {
  position: relative;
  /* room for the pinned disc: 15px gap + 49px disc + the row gap */
  padding-left: calc(15px + 49px + var(--sp-md));
  margin-top: var(--sp-md);
  /* S231 18/09/26 (triage item 8), Rob: "make that bigger until the point where there's 15 pixel
     padding on the left and the right before the icon and after the text." 15px each side. */
  padding: var(--sp-md) 15px;
  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.1b .event-organiser__name — sized from the WIDEST possible date so it can never wrap.
   S231 18/09/26 (triage item 8), Rob: "Use the date as the reference... And then see what the size
   of that font is and then use that for the others. Because what we need to make sure is no matter
   what the date is, it will always fit correctly." MEASURED: every weekday x month x ordinal
   combination rendered in the card's own font; the widest is "Wednesday the 22nd of September
   2026" at 267.4px on 14px. With 15px padding either side, a 49px disc and the 12px gap, the text
   column is 350.4px at 1280 on paper, but the Show Interest button shares that flex line, so the
   real limit was found by SWEEPING sizes against the longest date at every width and reading how
   many lines it took: 18.3px wrapped at 1280, 17.5px is the largest that holds one line at 1920,
   1280 and 768. Held to the side by side layout: below 600 the card stacks and keeps the 14px base.
   ⚠️ KNOWN AND PRE-EXISTING: at 1024 the longest date wraps at EVERY size tested including today's
   14px, because the column is at its narrowest there. That is a layout limit, not this change. */
@container vp (min-width: 600px) {
  .event-organiser__name { font-size: 17.5px; }
}
/* 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%;
}
/* S231 18/09/26, Rob: "putting the circles dead center, left aligned, fifteen pixel padding from
   the left border... just make sure it's centered." The disc used to be pushed to the END of its
   column, so its distance from the card edge moved with the text beside it. It now starts at the
   card's own 15px padding edge and stays there whatever the label does. */
.event-hero-organiser .event-organiser__avatar {
  /* MEASURED after the first attempt: left gap 15.00 on all three, but the organiser card's disc
     sat 6.00px high because that card carries a Show Interest row underneath and the disc was only
     centred inside the text block, not the card. Pinned to the card instead, so it is 15px from the
     left border and dead centre of the card whatever sits below it. */
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
}
.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 {
    position: static;
    transform: none;
    grid-column: auto;
    justify-self: center;
    margin-right: 0;
    margin-bottom: var(--sp-sm);
  }
  .event-hero-organiser { padding-left: 15px; }
}
/* 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(0,0,0,.18), 0 4px 10px rgba(0,0,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-md);
}
/* 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;
  line-height: 1.5;
  color: var(--color-text-muted);
  font-style: italic;
}
/* 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 [REMOVED S182, T-S181-006] .event-aside-card__going — the S181 replacement div is gone:
   its root cause (has_ticket blind to 'rsvp' rows) is fixed in event-system.php 6.3, so the
   ticket renderer's own going state (code behind the eye, Cancel RSVP, refunds) renders again. */

/* 5.14c S182 (T-S181-006 item 2): the starred ticket code in the confirmed aside. Shared
   .going-code visuals live in page-polish.css; this spaces it off the Cancel/refund controls,
   which were touching its border in the first capture. */
/* S227 item 82, Rob: "the distance between the cancel button and the code itself is way too
   tight". 12px measured; --sp-xl matches the gap the card already puts above the code row. */
.event-ticket-confirmed .going-code { margin: 4px 0 var(--sp-xl); }
.event-ticket-confirmed .event-ticket-confirmed__line { margin-bottom: 6px; }
/* S219 (found by ev1, S218): the cancellation terms under Request a refund had no rule at all, so they
   printed at full page-text size and ran up over the button. The price card's own small muted caption.
   F45 (S238): the D-339 "not on sale yet" note is the same kind of line and had no rule at all, so it
   shares this one. Both are now the only thing in their section (S218 moved the refund button to the
   Events tab), so the 10px that spaced the refund note off that button is stood down and the card's
   16px rhythm (5.13.3c) owns the spacing. */
.event-page .event-aside-card p.event-ticket-refund-note,
.event-aside-card p.event-ticket-refund-note,
.event-page .event-aside-card p.event-ticket-pending-note,
.event-aside-card p.event-ticket-pending-note {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-muted);
  text-align: center;
}

/* 5.14d S182 (D-390): the permanent-layout honest empty state. Every slot with no data renders
   "Not available" in muted text - the layout never changes with the data. */
.event-na {
  color: var(--color-text-muted, #8a8a8a);
  font-weight: 400;
  font-style: italic;
}
.event-aside-card__price-amount .event-na { font-size: 20px; font-style: normal; }

/* 5.14e S182 (Rob 18/08/26: "if in doubt, centre it"): an empty section centres its title (the
   title is display:table, so auto margins centre it) and its Not-available line. */
.event-card--centered-empty .event-card__title { margin-left: auto; margin-right: auto; }
.event-card--centered-empty .event-na { display: block; text-align: center; }

/* 5.14f S182 (same ruling): partial rows centre. One or two gallery photos centre at the same
   tile width the 3-column grid gives them; a 1-2 card Similar-events row centres its cards. */
.event-gallery--n1,
.event-gallery--n2 {
  display: flex;
  justify-content: center;
}
.event-gallery--n1 .event-gallery__item,
.event-gallery--n2 .event-gallery__item {
  flex: 0 0 calc((100% - 2 * var(--sp-md)) / 3);
}
/* Double-class so it beats page-polish's `.events-grid { display:grid !important }` at any
   load order (higher specificity, same importance). The grid's own gap rule still applies. */
.events-grid.events-grid--centered {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
}
.events-grid.events-grid--centered > .event-card {
  flex: 0 0 280px;
  max-width: 320px;
}

/* 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 {
  /* S220 VC 07, item 199, 14/09/2026. Rob: "for some reason there's another blue spacer and we
     don't have blue spaces", and he chose to take it out rather than redraw it in gold. The margin
     and padding go with it because the card's own gap now sets this block's distance, and the
     inner gap goes from 4px to the same step so the label no longer sits on the button. */
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-lg);
  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.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%;
    /* S229: the 56px below the image existed to clear the category chip that used to hang
       under it. The chip is now a pill in the badge row, so the image takes the stack's own
       28px rhythm instead (Rob: the gaps should be uniform). */
    margin: 0 auto;
    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. That overflow:hidden is an
     INLINE style (event-system.php line 13810), so this needs !important to win at all, and
     `clip` + a clip margin rather than `visible` so the map still clips its own tiles and only
     the chip is let through. S227, item 107. */
  .event-where-grid .event-map { overflow: clip !important; overflow-clip-margin: 140px; }
  .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-color: var(--color-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23031B83' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5.5' y='10' width='13' height='7.5' rx='1.6'/%3E%3Cpath d='M8.5 10V7.5a3.5 3.5 0 0 1 7 0V10'/%3E%3Cpath d='M3 20.5h18'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 14px calc(50% - 1px);
  background-size: 14px 14px;
  border: 1px solid var(--color-gold);
  border-radius: var(--radius-pill);
  padding: 8px 16px 8px 33px;
  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: "";
  display: inline-block;
  width: 14px; height: 14px;
  vertical-align: -1.5px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23031B83' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5.5' y='10' width='13' height='7.5' rx='1.6'/%3E%3Cpath d='M8.5 10V7.5a3.5 3.5 0 0 1 7 0V10'/%3E%3Cpath d='M3 20.5h18'/%3E%3C/svg%3E") no-repeat center / contain;
  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 */
/* S231 18/09/26 (triage item 13), Rob: "The panel that those buttons are on is wider than the other
   panels and the border is darker for some reason. So it should look like everything else."
   MEASURED against its own siblings on the event page: every other card sat at left 92.0 with a
   width of 1080.9, a 1px gold border and a 16px radius; this one sat at left 32.0 with a width of
   1201.0, a 2px border and a 12px radius. It now takes the card's own box exactly. The two
   .event-share blocks that used to sit here and at 8.14.1b are merged into this one, so there is a
   single rule per property rather than one stacked on the other. */
.event-share {
  display: flex; gap: var(--sp-sm);
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  width: 90%;
  margin-inline: auto;
  background: #FFFFFF;
  border: 1px solid var(--color-gold);
  border-radius: 16px;
  padding: 16px;
  padding-top: var(--sp-lg);
  /* S227 items 79 + 113 - Rob: the grey-blue hairline that used to sit here moves BELOW the
     icons and turns gold (see .event-share > span:last-child below), and the strip takes the
     same 82px gap to the next card that every other card on this page uses, so the Report
     button no longer ends exactly on the Similar events card. */
  margin-top: var(--sp-2xl);
  margin-bottom: 82px;
}
/* S230 17/09/2026, Rob: "anything that wraps weirdly like that should be vertically stacked...
   the label share this event and then the next line have the WhatsApp and copy link". With Email
   removed the two remaining buttons measure 104.2 + 108.8 plus the gap, which fits the 310.5px
   strip at 360, so only the label needs its own row. Held to phone widths; 601 and up already
   fits on one line and is untouched. */
@media (max-width: 600px) {
  .event-share__label { flex: 0 0 100%; text-align: center; }
}
/* S230 17/09/2026, Rob: "the label and the two pills should actually be on their own white card
   with a gold border", and "I have no idea why the WhatsApp is the colour that it is, it should
   be the same as the copy link". The card itself is now declared once, at 8.14.1 above. */
.event-share__btn,
.event-share__btn .event-share__btn-label {
  color: var(--color-navy);
}
.event-share__wa { display: block; width: 18px; height: 18px; flex: 0 0 auto; }
/* 8.14.2 .event-share__label — share strip label */
/* S231 18/09/26 (triage item 13), Rob: "the label share this event is still low contrast. It should
   be normal font." It measured navy at 55 per cent and weight 600; it is now the body navy at the
   normal weight. */
.event-share__label {
  font-size: 13px;
  color: var(--color-navy);
  font-weight: 400;
  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);
  box-shadow: var(--shadow-gold-hover); /* R3-08 24/09/26, D-640: was none; gold at rest wherever the border is gold. */
  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. */
/* margin-bottom: the Seeko parent theme puts 16-18px under every <button>; align-items:center
   centres the margin box, so the icons floated 8-9px above the label's centre (S227 item 79).
   border-color: the grey wash is off brand; platform controls are white with a gold edge. */
.event-share__btn { padding: 0; margin-bottom: 0; border-color: var(--color-gold); }
.event-share__btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
/* 8.14.3b .event-share > span:last-child — the Report button's wrapper. Rob (79, 113): the
   button is centred, on its own line, with the gold spacer above it. margin-left beats the
   inline `margin-left:auto` in event-system.php line 14076, which was pinning it hard right. */
.event-share > span:last-child:not(.event-share__said):not(.event-share__label) {
  flex: 0 0 100%;
  display: flex;
  justify-content: center;
  margin-left: 0 !important;
  margin-top: var(--sp-lg);
  padding-top: var(--sp-lg);
  /* S231 18/09/26, Rob: "just shorten the spacers to the widths that I said... for the share
     buttons make it just wider than the row with the buttons on it." MEASURED at 1280: the label
     and the two buttons span 348.4px, so the rule is 372px, centred, and never wider than the
     card. It was a full-width border-top. */
  position: relative;
}
.event-share > span:last-child:not(.event-share__said):not(.event-share__label)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 372px;
  max-width: 100%;
  height: 1px;
  background: var(--color-gold);
}
/* 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);
}
/* 8.14.5 .event-share__btn:active - the press. S231 18/09/26 (triage item 13), Rob: "double check
   that the share buttons actually animate correctly when clicked." They did not: nothing on the
   platform styled their pressed state, so the PARENT THEME won it and painted the button grey
   (rgb(238,238,238)) with dark grey text and a transparent border for as long as the mouse was
   down. R3-08 25/09/26 (D-640 pressed state, item measured live): the "one class deeper wins on
   specificity" reasoning above was wrong - the theme's reset also carries the `button` element
   token (0,3,1), which beats this all-class selector (0,3,0) even though it looks deeper, and the
   held state was still measuring the theme's grey fill and transparent border live. background and
   border-color now carry !important to win outright; box-shadow/transform/transition were never
   contested (the theme's reset does not set them) so they are unchanged. Fill is the D-640 pressed
   cream, not the button's own white rest fill, and `transition: none` still holds D-594: the press
   is instant and simultaneous. */
.event-share .event-share__btn:active {
  transform: translateY(1px);
  box-shadow: none;
  transition: none;
  background: var(--color-cream-hover) !important;
  border-color: var(--color-gold) !important;
  color: var(--color-navy) !important;
}

/* 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__body > .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 6px 29px;
    background-position: 12px calc(50% - 1px);
  }
}
/* 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; }
  /* item 107 - at this width the address wraps to a third line and the chip grows from 58px
     to 78.8px, so the 60px reserve above leaves it 0.6px off the TRANSPORT heading. 81px puts
     that gap back to the 21.4px every wider phone already has. */
  .event-where-cell--map { padding-bottom: 81px; }
  .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; }
  /* TKT-1 (S238, Rob, the 28th of September 2026: "the £10 is weirdly small"). It was 22px here against 48px on every
     other phone (9.6). MEASURED on live at 360: the card has 247px of room and a price at 48px needs 147px (£10.00),
     174px (£100.00) or 214px (£1,000.00), so the phone size fits here too. */
  .event-aside-card__price-amount { font-size: 48px; }

  .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) {
  /* S229 16/09/26 (T-S229-052), Rob on the stacked hero: "there's no gap between that 16 and 17
     tag and the description - The gaps above and below each of these elements vertically stacked
     should be uniform, with perhaps a slightly bigger gap above and below the title." MEASURED
     at 360 before: image to title 45, title to description 24, description to pills 0, pills to
     the date card 20. After: 28 above and below the title, 20 everywhere else. */
  /* The hero is a grid with a 12px row gap and the image carries 28px below it, so the gap
     above the title is set from both: 16 + 12 = 28, matching the gap below the title. */
  .event-hero__body { padding-top: 0; }
  .event-hero__body .event-hero__title { margin-top: 0; }
  .event-hero__media { margin-bottom: 4px; }
  .event-hero__body .event-hero__tagline { margin-top: 14px; }
  .event-hero__body .event-badges { margin-top: 20px; }
  .event-hero__body .event-hero-cards { margin-top: 20px; }
  .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;
}
/* S219: the real path has an article between the section and the row (the S95-001 correction below);
   the old selector never matched, so the theme's -25px row margins scrolled the page 10px sideways. */
body.single-social_event #page-wrapper > section.container > article > .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: 40px !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: 29px !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;
  }
}


/* 11.8a <=380 — the tag is retuned smaller at this width (section 9.7), so its reserve
   follows it down. Keeps the gap under the tag equal to the 10px gap above it. */
@container vp (max-width: 380px) {
  /* S229 16/09/26 (T-S229-052): the 28px here reserved room for the category chip that hung
     under the image. The chip is now a pill in the badge row, so this reserve goes and the
     stack's own rhythm applies: 4 + the hero grid's 12px row gap + 12 = the 28px gap above the
     title, matching the 28px below it. */
  .event-hero__media { margin-bottom: 16px !important; }
}
/* end of 11.8a */
/* 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) auto;
  /* S227 items 79 + 129, Rob: "the host register card is wider than all the other cards,
     should be the same width". Every .event-card on this page is max-width 90% and centred in
     its column; this was max-width:none and filled it, which measured 32.4px wider at 360 and
     121.6px wider at 1280. Same rule, same edge, same radius, same shadow as the cards. */
  max-width: 90%;
  padding: var(--sp-lg);
  border: 1.5px solid var(--color-gold);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  background: #fff;
}
/* S231 18/09/26, Rob: "The host register should be the same title as all the other titles. So give
   it a drop shadow and give it its own spacer underneath. And then there's gap, and then there's
   that one line of subtitle or description, and then a bit more of a gap, and then the first name."
   The shadow and the rule are the event page title's own, and the rule hugs the words. */
.host-register__title {
  margin: 0 auto var(--sp-lg);
  color: var(--color-navy);
  text-align: center;
  display: table !important;
  width: fit-content !important;
  max-width: 100%;
  margin-inline: auto !important;
  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);
}
.host-register__intro {
  /* a bit more of a gap before the first name than the title leaves above the intro */
  margin: 0 0 var(--sp-xl);
  color: var(--color-navy);
  font-size: 14px;
  text-align: center;
}
.host-register__list { list-style: none; margin: 0; padding: 0; }
/* S227 item 129, Rob: "the options for the hosts isn't centered" and "I don't know why it says
   'marked as attended' randomly on the side of the bottom one". The name, the two options and
   the state line each take their own full-width line so all three centre on the card's axis,
   which is also what lifts the state off the side of the button row. The divider was navy at
   12 percent, Rob's "grey or light blue spaces"; it is gold like every other rule on the page. */
.host-register__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--sp-sm);
  padding: 10px 0;
  /* S231 18/09/26, Rob: "for the host register make it just wider than the title." MEASURED at
     1280: the title's own ink is 250.1px wide, so the rule is 282px, centred, and never wider than
     the card. It was a full-width border-top. */
  position: relative;
}
/* The rules separate one name from the next, so the first row does not draw one: the title's own
   spacer is the only rule above the list. */
.host-register__list > .host-register__row:first-child::before { content: none; }
.host-register__row::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 282px;
  max-width: 100%;
  height: 1px;
  background: var(--color-gold);
}
.host-register__name { flex: 1 1 100%; color: var(--color-navy); font-weight: 600; }
.host-register__actions { display: flex; justify-content: center; gap: 8px; }
.host-register__state { flex: 1 1 100%; color: var(--color-navy); font-size: 13px; opacity: 0.75; }

/* 11.14 THE ORGANISER'S REFUND REQUESTS PANEL (event-system.php 6.1h2, D-343). PANEL-1 (Rob, the 28th of September 2026: the
   panel shown in gallery 08 and 09 was rejected: no card, a grey ground, lines left and centred by turns, uneven gaps). It is
   now the page's organiser card, by values Rob has already signed off and nothing new:
   - the card, its title and the gold divider between two rows are the host register card's (11.12: 90 per cent wide, 16px
     padding, 1.5px gold border, the card radius and shadow, white; the navy title with the gold rule that hugs its words;
     the 282px gold rule between one name and the next);
   - the rhythm is the cancel panel's (page-polish.css 55): the card and each request are columns whose GAP is the only
     vertical space, and every child's own margin is stood down, so no gap can drift;
   - every line is this page's notice text (11.13: navy, the body face, 14px on 1.5), centred.
   This replaces 11.14a and 11.14b (S238 STYLE and F40f), which centred five lines only and spaced two requests by 2em. */
.event-refund-reqs {
  margin: var(--sp-xl) auto;
  max-width: 90%;
  padding: var(--sp-lg);
  box-sizing: border-box;
  border: 1.5px solid var(--color-gold);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-lg);
  text-align: center;
}
.event-refund-reqs > *,
.event-refund-reqs .event-refund-req > * {
  margin-top: 0;
  margin-bottom: 0;
  max-width: 100%;
}
/* The title is named through the article because the blog post heading rule (page-polish.css R3-35b: gold, with a 48px gold
   dash above) reaches every h2 inside article.standard-post, this page's too; it must not reach this card's title. */
article.standard-post .entry-content-inner .event-refund-reqs .event-refund-reqs__title::before { content: none; }
article.standard-post .entry-content-inner .event-refund-reqs .event-refund-reqs__title,
.event-refund-reqs .event-refund-reqs__title {
  color: var(--color-navy);
  text-align: center;
  display: table;
  width: fit-content;
  max-width: 100%;
  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);
}
.event-refund-reqs .event-refund-reqs__intro,
.event-refund-reqs .event-refund-reqs__own-terms,
.event-refund-reqs .event-refund-req__who,
.event-refund-reqs .event-refund-req__window,
.event-refund-reqs .event-refund-req__reason,
.event-refund-reqs .event-refund-req__why-label,
.event-refund-reqs .event-refund-req__why-hint,
.event-refund-reqs .event-refund-req__state {
  color: var(--color-navy);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
}
.event-refund-reqs .event-refund-reqs__own-terms { display: inline; }
.event-refund-reqs .event-refund-req__state:empty { display: none; }
.event-refund-reqs .event-refund-req {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-lg);
  padding-top: var(--sp-lg);
}
.event-refund-reqs .event-refund-req::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 282px;
  max-width: 100%;
  height: 1px;
  background: var(--color-gold);
}
/* The reason field is as wide as the same field in the cancel panel (page-polish.css 55: a 520px card less its 16px sides). */
.event-refund-reqs .event-refund-req__why { display: block; margin: 0 auto; width: 100%; max-width: 488px; }
.event-refund-reqs .event-refund-req__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

/* end of 11 */

/* ============================================================
   S227: HAND-OFFS FROM THE CODE LANE: H4 (es8): D-544 point 3, the past-event price card centred vertically
   Written by Loose ends cloud 01 (S226) in results/s226/HANDOFFS_FOR_VC.md and copied
   here verbatim by the visual lane, because only this lane opens this file.
   ============================================================ */
/* D-544 (S225/S226, es8): THE PAST-EVENT PRICE CARD.
   1. The finished card centres its contents so the free space is equal above and
      below, which is Rob's "make it equal above and below ... just keep the gaps
      at the top and the bottom uniform and equal". The card is already
      display:flex / column with min-height 280px, so this is the one property it
      needs, and the card's height does not change.
   2. mk2's block between the two gold rules, reproduced from the values mk2
      measured off the live card: Nunito Sans 400 14px/1.5, navy, centred, with
      18px of padding under it, because the rule is 2px tall and sits at bottom 0,
      so 18px leaves exactly one 16px rhythm step of clear space, matching the
      16px flex gap above it. PHP emits .event-aside-card__between already. */
.event-aside-card--ticket.event-aside-card--past { justify-content: center; }

.event-aside-card__between {
  position: relative;
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-navy, #031B83);
  text-align: center;
  padding-bottom: 18px;
}
.event-aside-card__between::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 67.5%;
  height: 2px;
  background: var(--color-gold, #CC9900);
}

/* ============================================================
   S227: HAND-OFFS FROM THE CODE LANE: H1-AMEND (es9): Rob item 133, the online pill takes the card pill look
   Written by Loose ends cloud 01 (S226) in results/s226/HANDOFFS_FOR_VC.md and copied
   here verbatim by the visual lane, because only this lane opens this file.
   ============================================================ */
/* Rob's item 133 (S226 hand-off H1, amended by es9 15/09/2026 after driving it): the single event
   page's online pill takes the card pill's look. The PHP half (event-system.php ~13648) drops the
   inline navy-and-gold style and is prepared UNDEPLOYED on loose-ends-cloud-01.
   The four declarations H1 was missing are display, padding, font-size and margin-left: without
   them the pill renders inline, wraps at 360 and its border breaks in half. */
.event-online-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 10px;
    background: #FFFBE6;
    color: #031B83;
    border: 1px solid #CC9900;
    border-radius: 9999px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

/* ============================================================
   S227: HAND-OFFS FROM THE CODE LANE: H7 (es9): Rob item 130, the share controls
   Written by Loose ends cloud 01 (S226) in results/s226/HANDOFFS_FOR_VC.md and copied
   here verbatim by the visual lane, because only this lane opens this file.
   ============================================================ */
/* Rob's item 130 (S226 es9, 15/09/2026): the share controls were icon-only, their names hidden in
   aria-label and title, which a phone never shows. He clicked one, got Android's "Open in Gmail app?"
   chooser, and could not tell what he had pressed. Each control now carries its name, so the button
   becomes a pill instead of a circle. Nothing is removed. */
.event-share__btn {
    width: auto;
    min-width: 36px;
    height: 36px;
    padding: 0 14px;
    gap: 8px;
    /* S230 17/09/2026, Rob: "they should both be just normal buttons, not pills. I do not know
       why they are pills, so change them to normal buttons as well." 10px is the radius the
       platform buttons use. */
    border-radius: 10px;
}
.event-share__btn-label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.3px;
    white-space: nowrap;
    color: inherit;
}
@media (max-width: 480px) {
    .event-share__btn { padding: 0 12px; }
    .event-share__btn-label { font-size: 11px; }
}