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

/* ---------- 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. */
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;
}
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. */
body.single-social_event .entry-content h2:not(.event-card__title),
body.single-social_event .entry-content h3:not(.entry-title):not(.event-card__title) {
  background: transparent !important;
  border-left: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0;
}

/* ---------- Page shell ---------- */
html { scrollbar-gutter: stable; }
.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;
}

/* =========================================================================
   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.
   ========================================================================= */
.viewport-frame {
  width: 100%;
  margin: 0 auto;
  background: var(--color-bg);
  min-height: 100vh;
}
.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; }
.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);
}
.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;
}

.event-page__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--sp-2xl) var(--sp-2xl) var(--sp-4xl);
}

/* ---------- Breadcrumbs ---------- */
.event-breadcrumbs {
  display: flex;
  gap: var(--sp-sm);
  align-items: center;
  font-size: 13px;
  color: var(--color-text-muted);
  margin-bottom: var(--sp-lg);
}
.event-breadcrumbs a {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}
.event-breadcrumbs a:hover { color: var(--color-navy); }
.event-breadcrumbs__sep { opacity: .5; }
.event-breadcrumbs__current {
  color: var(--color-navy);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 320px;
}

/* ---------- Hero block ---------- */
.event-hero {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--sp-xl);
  align-items: stretch;
  margin-bottom: var(--sp-2xl);
}
.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;
}
.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);
}
.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;
}
.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;
}
.event-hero__media-thumbs {
  position: absolute;
  bottom: var(--sp-lg);
  right: var(--sp-lg);
  display: flex;
  gap: 6px;
  z-index: 2;
}
.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;
}
.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);
}

.event-hero__body {
  display: flex; flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  min-width: 0;
}
.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; }

/* Status / curation badges (above the title) */
.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);
}
.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;
}
.event-badge--curated {
  background: var(--color-navy);
  color: var(--color-gold-light);
  border: 1px solid var(--color-navy);
}
.event-badge--listed {
  background: transparent;
  color: var(--color-navy);
  border: 1px solid var(--color-border-strong);
}
.event-badge--filling {
  background: var(--color-cream);
  color: var(--color-gold-dark);
  border: 1px solid var(--color-gold);
}
.event-badge--almost-full {
  background: var(--color-warning-bg);
  color: var(--color-warning);
  border: 1px solid var(--color-warning);
}
.event-badge--age {
  background: rgba(3,27,131,.06);
  color: var(--color-navy);
  border: 1px solid var(--color-border-strong);
}

.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);
}
.event-hero__tagline {
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  margin: 10px 0 0;
  text-wrap: pretty;
}

/* Pillar facts (when, where, price) — sit in the hero column */
.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;
}
.event-pillar {
  display: flex; flex-direction: column; gap: 6px;
  align-items: center;
  text-align: center;
}
.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);
}
.event-pillar__body { min-width: 0; text-align: center; }
.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;
}
.event-pillar__value {
  font-size: 15px;
  color: var(--color-navy);
  font-weight: 600;
  line-height: 1.35;
}
.event-pillar__sub {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.4;
  margin-top: 2px;
}
.event-pillar__sub-line { display: block; margin-top: 2px; }
.event-pillar__sub a {
  color: var(--color-gold-dark);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* CTA cluster */
.event-cta-cluster {
  display: flex; flex-direction: column;
  gap: var(--sp-sm);
  margin-top: auto;
  padding-top: var(--sp-md);
}
.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;
}
.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);
}
.btn-primary:hover { background: var(--color-navy-light); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); box-shadow: none; }

.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);
}
.btn-secondary:hover { transform: translateY(-1px); }
.btn-secondary:active { transform: translateY(0); box-shadow: none; }

.btn-tertiary {
  background: transparent;
  color: var(--color-navy);
  padding: 8px 12px;
  font-size: 13px;
}
.btn-tertiary:hover { background: var(--color-surface-raised); }

/* ---------- Main column layout (aside removed) ---------- */
.event-layout {
  display: block;
}

.event-main { min-width: 0; }
.event-top-row {
  display: grid;
  position: relative;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--sp-lg);
  margin-bottom: var(--sp-lg);
}
.event-top-row > .event-aside-card {
  width: 90%;
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
}
.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;
}
@container vp (max-width: 880px) {
  .event-top-row { grid-template-columns: 1fr; }
}
.event-aside {
  display: flex; flex-direction: column;
  gap: var(--sp-lg);
}

/* ---------- Google review badge — sits in the 30% column on the where-card top row ---------- */
.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;
}
.event-google-review__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-sm);
  margin-bottom: 2px;
}
.event-google-review__brand {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  line-height: 1;
}
.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);
}
.event-google-review__score-row {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
}
.event-google-review__score {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 28px;
  color: var(--color-navy);
  line-height: 1;
}
.event-google-review__stars {
  display: inline-flex;
  gap: 1px;
  font-size: 16px;
  letter-spacing: 1px;
  line-height: 1;
}
.event-google-review__star { color: rgba(204, 153, 0, 0.22); }
.event-google-review__star--full { color: var(--color-gold); }
.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;
}
.event-google-review__count {
  font-size: 12px;
  color: var(--color-navy);
  opacity: 0.75;
}
.event-google-review__unrated {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  color: var(--color-text-muted);
  font-style: italic;
}
.event-google-review__note {
  margin-top: 2px;
  font-size: 11px;
  font-style: italic;
  color: var(--color-text-muted);
}

/* ---------- Flourish title (gold side-rules with diamond endcaps) ---------- */
.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;
}
.event-card__title--flourish::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -8px;
  height: 2px;
  background: var(--color-gold);
}
.event-flourish-line {
  flex: 1 1 0;
  height: 1px;
  background: var(--color-gold);
  position: relative;
  min-width: 0;
}
.event-flourish-line::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 6px;
  height: 6px;
  background: var(--color-gold);
  transform: translateY(-50%) rotate(45deg);
}
.event-card__title--flourish > .event-flourish-line:first-child::before { right: 0; }
.event-card__title--flourish > .event-flourish-line:last-child::before { left: 0; }
.event-flourish-text { white-space: nowrap; padding: 0 4px; }

/* ---------- What's included bullet list ---------- */
.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;
}
.event-included-list li {
  padding-left: 4px;
}
.event-included-list li::marker {
  color: var(--color-gold);
}
.event-aside-card--centered .event-included-list {
  list-style-position: inside;
  text-align: center;
  padding-left: 0;
}
.event-aside-card--centered .event-included-list li {
  padding-left: 0;
}

/* ---------- Why this venue (host quote under map) ---------- */
.event-why-venue {
  margin: 0;
  padding: var(--sp-lg);
  background: var(--color-cream);
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-gold);
  box-shadow: var(--shadow-md);
  position: relative;
}
.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;
}
.event-why-venue__mark--open { margin-right: 4px; }
.event-why-venue__mark--close { margin-left: 2px; }
.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;
}
.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);
}
@container vp (max-width: 880px) {
  .event-why-venue { width: auto; margin-top: 15px; }
}

/* ---------- Cards ---------- */
.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);
}
.event-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
/* Baseline card-to-card gap: 82px = 40px + 2px divider + 40px. */
.event-card + .event-card { margin-top: 82px; }
.event-fullstack { margin-top: 82px; position: relative; }
.event-fullstack > .event-card + .event-card { margin-top: 82px; position: relative; }

/* 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;
}
/* 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; }
.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);
}
.event-card__subtitle {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 0 0 var(--sp-lg);
  line-height: 1.5;
}

/* Cream info-panel — matches existing seeko-child .single-event-info-panel */
.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);
}
.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;
}
.event-info-row:last-child { border-bottom: none; }
.event-info-row strong {
  flex: 0 0 110px;
  color: var(--color-navy);
  font-weight: 700;
}
.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; }

/* ---------- Description block ---------- */
.event-description {
  font-size: 15px;
  line-height: 1.65;
  padding-top: 5px;
  color: var(--color-navy);
}
.event-description p { margin: 0 0 var(--sp-md); }
.event-description p:last-child { margin-bottom: 0; }
.event-description p:first-of-type::first-letter {
  /* drop-cap removed */
}
.event-description p:first-of-type::first-line {
  /* removed — first line no longer bolded */
}
.event-description p strong,
.event-description p b {
  color: var(--color-navy);
  font-weight: 700;
}
.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);
}
.event-description ul {
  margin: 0 0 var(--sp-md);
  padding-left: 22px;
  list-style: none;
}
.event-description li {
  margin-bottom: 6px;
  position: relative;
  padding-left: 4px;
  color: var(--color-navy);
}
.event-description li::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-gold);
}

/* ---------- Tags ---------- */
.event-tags {
  display: flex; flex-wrap: wrap; gap: var(--sp-sm);
  margin-top: var(--sp-lg);
}
.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);
}

/* ---------- Map ---------- */
.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;
}
.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);
}
.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;
}
.event-map__pin::after {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-navy);
  rotate: 45deg;
}
.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);
}
.event-map__chip strong { display: block; font-size: 13px; color: var(--color-gold-dark); }

/* ---------- Going / attendee strip ---------- */
.event-attendees {
  display: flex; align-items: center; gap: var(--sp-md);
}
.event-attendees__count {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-navy);
  font-size: 14px;
}
.event-attendees__avatars {
  display: flex;
}
.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;
}
.event-avatar:first-child { margin-left: 0; }
.event-avatar--more {
  background: var(--color-cream);
  color: var(--color-gold-dark);
  border-color: var(--color-gold);
  font-size: 11px;
}
.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; }

/* ---------- Aside cards ---------- */
.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);
}
.event-aside-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.event-aside-card--ticket {
  width: 90%;
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
  border: 2px solid var(--color-gold);
  box-shadow: 0 4px 12px rgba(204,153,0,.15);
  display: flex;
  flex-direction: column;
  min-height: 280px;
}
.event-aside-card--ticket .event-aside-card__price {
  margin-top: 30px;
  margin-bottom: 4px;
}
.event-aside-card--ticket .event-aside-card__price-meta {
  position: relative;
  margin-bottom: 0;
  padding-bottom: 16px;
}
.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);
}
.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%;
  /* Surface bg / navy text / gold border + translateY(10px) so the button's
     centre sits on the midpoint between the two gold dividers. Applied
     globally — higher breakpoints override only the width. */
  transform: translateY(10px);
  background: var(--color-surface);
  color: var(--color-navy);
  border: 1px solid var(--color-gold);
  box-shadow: 0 2px 0 rgba(204,153,0,.18), 0 4px 10px rgba(204,153,0,.15);
}
.event-aside-card--ticket .event-aside-card__cta:hover {
  background: var(--color-navy);
  color: var(--color-gold-light);
  border: 1px solid var(--color-navy);
  box-shadow: 0 2px 0 rgba(3,27,131,.25), 0 4px 10px rgba(3,27,131,.18);
}
@container vp (min-width: 1280px) {
  .event-aside-card--ticket .event-aside-card__cta { width: 36%;
  /* Auto margins centre the button between price-meta and hint, but the two
     gold dividers bracket the CTA asymmetrically (the bottom divider sits 7px
     inside the hint's padding). Translate down by 10px so the button's
     centre sits on the midpoint between the two gold lines. */
  transform: translateY(10px);
  background: var(--color-surface);
  color: var(--color-navy);
  border: 1px solid var(--color-gold);
  box-shadow: 0 2px 0 rgba(204,153,0,.18), 0 4px 10px rgba(204,153,0,.15);
}
.event-aside-card--ticket .event-aside-card__cta:hover {
  background: var(--color-navy);
  color: var(--color-gold-light);
  border: 1px solid var(--color-navy);
  box-shadow: 0 2px 0 rgba(3,27,131,.25), 0 4px 10px rgba(3,27,131,.18);
}
}
.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;
}
.event-fact-list--centered {
  width: 100%;
}
.event-fact-list--centered .event-fact {
  justify-content: center;
}
.event-aside-card__price {
  display: flex; align-items: baseline; justify-content: center; gap: 6px;
  margin-bottom: 4px;
}
.event-aside-card__price-amount {
  font-family: var(--font-heading);
  font-size: 88px;
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1;
}
.event-aside-card__price-unit {
  font-size: 13px;
  color: var(--color-text-muted);
}
.event-aside-card__price-meta {
  font-size: 12px;
  text-align: center;
  color: var(--color-text-muted);
  margin-bottom: var(--sp-lg);
}
.event-aside-card__cta { width: 100%; }
.event-aside-card--ticket .event-aside-card__hint {
  position: relative;
  padding-top: 24px;
  margin-top: 12px;
}
.event-aside-card--ticket .event-aside-card__hint::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 67.5%;
  height: 2px;
  background: var(--color-gold);
}
.event-aside-card__hint {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: var(--sp-sm);
  line-height: 1.4;
  text-align: center;
}

/* Small fact list inside aside */
.event-fact-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: 10px;
}
.event-fact {
  display: flex; gap: 10px;
  font-size: 13px;
  color: var(--color-navy);
  line-height: 1.4;
}
.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);
}
.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;
}
.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;
}
.event-fact-list--noicon .event-fact:last-child { border-bottom: none; }
.event-fact-list--centered.event-fact-list--noicon .event-fact { text-align: center; }

/* Organiser snippet */
.event-organiser {
  display: flex; gap: var(--sp-md); align-items: center;
}
.event-organiser__avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 2px solid var(--color-gold);
  background: linear-gradient(135deg, var(--color-navy), var(--color-cyan));
  display: flex; align-items: center; justify-content: center;
  color: var(--color-gold-light);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  flex: 0 0 48px;
}
.event-organiser__body { min-width: 0; flex: 1; }
.event-organiser__name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  color: var(--color-navy);
}
.event-organiser__meta {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* Hero-column cards container — venue + organiser stack under pillars */
.event-hero-cards {
  display: flex; flex-direction: column;
  gap: var(--sp-sm);
  align-self: stretch; width: 100%;
}
.event-hero-cards .event-hero-organiser { margin-top: 0; }

/* Hero-column organiser card — sits under the pillars in the body column,
   fills the dead space on wide viewports. Mirrors aside-card chrome. */
.event-hero-organiser {
  margin-top: var(--sp-md);
  padding: var(--sp-md) var(--sp-lg);
  border: 1.5px solid var(--color-gold);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  flex-wrap: wrap;
  text-align: left;
  transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}
.event-hero-organiser:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.event-hero-organiser__actions {
  display: flex; gap: var(--sp-sm);
  flex-shrink: 0;
}
/* Centred-stack treatment for all viewports where the info cards wrap.
   Extended from 1024px to 1440px — cards wrap at 1280 and 1440 too because
   the organiser content + buttons exceed the right-column card width. */
@container vp (max-width: 1440px) {
  .event-hero-organiser .event-organiser {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0;
    width: 100%;
  }
  .event-hero-organiser .event-organiser__avatar {
    grid-column: 1;
    justify-self: end;
    margin-right: var(--sp-md);
  }
  .event-hero-organiser .event-organiser__body {
    grid-column: 2;
    flex: 0 1 auto;
    text-align: center;
  }
  .event-hero-organiser__actions {
    flex-basis: 100%;
    justify-content: center;
  }
}

/* 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. */
.event-card--full {
  grid-column: 1 / -1;
}

.event-where-grid {
  display: grid;
  grid-template-columns: 400px 1fr;
  grid-template-areas:
    "map   right"
    "quote right";
  gap: var(--sp-xl);
  align-items: start;
}
.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; }
/* 1024 breakpoint only — bump venue-history up by ~the note's height so
   the absolute-positioned note lands inside the cell with the same small
   gap as on wider screens. Other breakpoints already pixel-tuned. */
@container vp (min-width: 1024px) and (max-width: 1279px) {
  /* 1024 — tighten the hero title top margin by 10px. */
  .event-hero__body > .event-hero__title {
    margin-top: calc(var(--sp-xl) + 15px);
  }
  /* 1024 — CTA matches the 1280+ treatment: surface bg / navy text / gold
     border, translated down 10px so the text centre sits on the midpoint
     between the two gold dividers, sized to 60% of the 67.5% default. */
  .event-aside-card--ticket .event-aside-card__cta {
    width: 40.5%;
    transform: translateY(10px);
    background: var(--color-surface);
    color: var(--color-navy);
    border: 1px solid var(--color-gold);
    box-shadow: 0 2px 0 rgba(204,153,0,.18), 0 4px 10px rgba(204,153,0,.15);
  }
  .event-aside-card--ticket .event-aside-card__cta:hover {
    background: var(--color-navy);
    color: var(--color-gold-light);
    border: 1px solid var(--color-navy);
    box-shadow: 0 2px 0 rgba(3,27,131,.25), 0 4px 10px rgba(3,27,131,.18);
  }
  /* 1024 — centre every card title (and its gold underline) by default,
     mirroring 768. Flourish titles already centre via flex. */
  .event-main .event-card { text-align: center; }
  .event-card__title { margin-left: auto; margin-right: auto; text-align: center; }
  .event-description ul { display: inline-block; text-align: left; }
  /* 1024 — stacked layout: map+toprow share row 1; whocoming, venue-history,
     and quote each take their own full-width row below. cell--right uses
     display:contents so its children become direct grid children of where-grid.
     ⚠️ LOCKED 2026-05-12 — DO NOT MODIFY without explicit user request. */
  .event-where-grid {
    grid-template-columns: 400px 1fr;
    grid-template-areas:
      "map   toprow"
      "map   whocom"
      "venue venue"
      "quote quote";
    align-items: start;
  }
  .event-where-cell--map { grid-area: map; justify-self: start; }
  .event-where-cell--right { display: contents; }
  .event-where-toprow {
    grid-area: toprow;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-xl);
  }
  .event-where-toprow__aside { display: flex; justify-content: center; }
  .event-where-whocoming { grid-area: whocom; text-align: center; }
  .event-where-whocoming .event-whocoming-row { grid-template-columns: 1fr; justify-items: center; }
  .event-where-whocoming .event-attendees { justify-content: center; }
  .event-venue-history { grid-area: venue; text-align: center; }
  .event-where-cell--quote { grid-area: quote; text-align: center; }
}
@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;
  }
}
@container vp (min-width: 1024px) {
  .event-fullstack > .event-card:has(.event-where-grid) {
    padding-bottom: var(--sp-xl);
  }
}
.event-where-cell--quote { grid-area: quote; align-self: start; }
.event-where-toprow {
  display: grid;
  grid-template-columns: 70% 30%;
  gap: var(--sp-md);
  align-items: center;
}
/* 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; }
}
.event-where-toprow__facts { margin: 0; }
.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;
}
.event-where-toprow__aside { min-height: 1px; }
.event-where-grid .event-map {
  width: 400px;
  height: 400px;
  aspect-ratio: 1 / 1;
  flex: 0 0 auto;
}
.event-where-right {
  display: flex; flex-direction: column;
  gap: var(--sp-lg);
  align-self: stretch;
}
.event-where-whocoming {
  position: relative;
  padding-top: calc(var(--sp-lg) + 6px);
  border-top: 0;
}
.event-where-whocoming::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 2px;
  background: var(--color-gold);
  opacity: .55;
}
.event-where-whocoming__title {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-gold-dark);
  margin: 0 0 var(--sp-sm);
}
.event-where-facts { margin-top: 0; }

/* ---------- Venue history (anonymised member reviews of the venue) ---------- */
.event-venue-history {
  position: relative;
  padding-top: calc(var(--sp-lg) + 6px);
  border-top: 0;
}
.event-venue-history::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 2px;
  background: var(--color-gold);
  opacity: .55;
}
.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);
}
.event-venue-history__summary {
  font-size: 13px;
  color: var(--color-navy);
  margin-bottom: var(--sp-md);
  line-height: 1.5;
}
.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);
}
.event-venue-history__star {
  color: var(--color-gold);
  font-size: 13px;
}
.event-venue-history__reviews {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.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);
}
.event-venue-review__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-sm);
  margin-bottom: 4px;
}
.event-venue-review__stars {
  font-size: 13px;
  color: var(--color-gold);
  letter-spacing: 1px;
  line-height: 1;
}
.event-venue-review__stars-empty {
  color: rgba(204, 153, 0, 0.25);
}
.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);
}
.event-venue-review__text {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-navy);
  font-style: italic;
}
.event-venue-history__note {
  margin: 0;
  font-size: 11px;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
}
/* 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;
  }
}
.event-venue-history { position: relative; }
  line-height: 1.5;
  color: var(--color-text-muted);
  font-style: italic;
}

.event-whocoming-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--sp-lg);
  align-items: start;
}
.event-whocoming-row__share { display: flex; flex-direction: column; gap: var(--sp-md); }
.event-whocoming-row__share .event-share { margin-top: 0; flex-wrap: wrap; }

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

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

@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; }
}

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

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

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

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

.event-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-md);
}
.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);
}
.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%); }
.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);
}

@container vp (max-width: 1023px) {
  .event-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@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; }
}
@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; }
}

/* ---------- 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.
*/
.event-page.is-logged-out [data-sensitive] {
  position: relative;
}
.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) */
.event-page.is-logged-out [data-sensitive="inline"] > * {
  filter: blur(4px);
}

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

/* 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);
}
.event-page.is-logged-out .event-loggedout-banner { display: flex; }
.event-loggedout-banner__text {
  font-size: 14px;
  color: var(--color-navy);
  line-height: 1.4;
}
.event-loggedout-banner__text strong {
  font-family: var(--font-heading);
  font-weight: 700;
  display: block;
  margin-bottom: 2px;
}
.event-loggedout-banner__actions {
  display: flex; gap: var(--sp-sm);
  flex-shrink: 0;
}

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

/* ---------- Direction B specifics: social-engine layer ---------- */
.event-engine-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-md);
  margin-top: var(--sp-lg);
}
.event-engine-stat {
  background: var(--color-surface-raised);
  border: 1.5px solid var(--color-gold);
  border-radius: var(--radius-md);
  padding: var(--sp-md);
}
.event-engine-stat__value {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1;
}
.event-engine-stat__label {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 4px;
  line-height: 1.35;
}
.event-engine-stat__hint {
  font-size: 11px;
  color: var(--color-gold-dark);
  margin-top: 6px;
  font-weight: 600;
}

/* Character-badge breakdown */
.event-char-breakdown {
  display: flex; flex-direction: column;
  gap: 8px;
}
.event-char-row {
  display: grid;
  grid-template-columns: 110px 1fr 32px;
  align-items: center;
  gap: var(--sp-md);
  font-size: 13px;
}
.event-char-row__label {
  color: var(--color-navy);
  font-weight: 600;
}
.event-char-row__bar {
  height: 8px;
  background: rgba(3,27,131,.08);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.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;
}
.event-char-row__count {
  text-align: right;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-navy);
  font-size: 13px;
}

/* Suggested matches at this event */
.event-matches {
  display: flex; flex-direction: column;
  gap: var(--sp-md);
}
.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;
}
.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;
}
.event-match__body { flex: 1; min-width: 0; }
.event-match__name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  color: var(--color-navy);
}
.event-match__why {
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.4;
  margin-top: 2px;
}
.event-match__chips {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: 6px;
}
.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;
}
.event-match__action {
  display: flex; flex-direction: column; gap: 4px;
  align-items: flex-end;
}

/* Hosts/hostesses block */
.event-hosts {
  display: flex; gap: var(--sp-md);
  flex-wrap: wrap;
}
.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;
}
.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;
}
.event-host__body { min-width: 0; flex: 1; }
.event-host__name {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-navy);
}
.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;
}

/* Itinerary */
.event-agenda {
  list-style: none;
  margin: 0; padding: 0;
}
.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);
}
.event-agenda__item:last-child { border-bottom: none; }
.event-agenda__time {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  color: var(--color-gold-dark);
}
.event-agenda__what {
  font-size: 14px;
  color: var(--color-text);
  line-height: 1.45;
}
.event-agenda__what strong {
  display: block;
  color: var(--color-navy);
  font-family: var(--font-heading);
  margin-bottom: 2px;
}

/* Comments */
.event-comments {
  display: flex; flex-direction: column;
  gap: var(--sp-md);
}
.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);
}
.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;
}
.event-comment__body { flex: 1; min-width: 0; }
.event-comment__head {
  display: flex; gap: var(--sp-sm);
  align-items: baseline;
  margin-bottom: 2px;
}
.event-comment__name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  color: var(--color-navy);
}
.event-comment__time {
  font-size: 11px;
  color: var(--color-text-muted);
}
.event-comment__text {
  font-size: 13px;
  color: var(--color-text);
  line-height: 1.5;
}
.event-comment__reactions {
  display: flex; gap: 6px;
  margin-top: 6px;
}
.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;
}

/* Accessibility list */
.event-access {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-sm) var(--sp-md);
}
.event-access__item {
  display: flex; gap: 8px; align-items: center;
  font-size: 13px;
  color: var(--color-text);
}
.event-access__item--ok::before {
  content: "✓";
  color: var(--color-success);
  font-weight: 700;
  width: 16px;
  display: inline-flex; justify-content: center;
}
.event-access__item--no::before {
  content: "✗";
  color: var(--color-text-muted);
  font-weight: 700;
  width: 16px;
  display: inline-flex; justify-content: center;
}

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

/* Direction A: simple section 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);
}

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

/* =========================================================================
   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%)
   ========================================================================= */

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

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

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

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

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

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

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

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

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

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

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

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

/* =========================================================================
   §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. */
body.single-social_event .event-card {
  overflow: visible !important;
}

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

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

/* 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);
}
body.single-social_event html,
html:has(body.single-social_event) {
  background: var(--color-bg, #F8F8F8);
}

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

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

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

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

body.single-social_event #page-wrapper > section.container {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body.single-social_event #page-wrapper > section.container > .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
body.single-social_event #page-wrapper > section.container > .row > .col-main {
  max-width: 100% !important;
  flex: 0 0 100% !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body.single-social_event .col-main > .entry-content.col-inner {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* =========================================================================
   §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.
   ========================================================================= */
.event-page .btn-secondary {
  background: transparent;
  color: var(--color-navy);
  border: 1px solid var(--color-gold);
}
.event-page .btn-secondary:hover {
  background: var(--color-cream);
}

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

/* 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;
}
.event-page .wishlist-button:hover {
  background: var(--color-cream);
  transform: translateY(-1px);
}
.event-page .wishlist-button.wishlist-active {
  background: var(--color-cream);
}

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

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

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

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

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

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

/* §S95-010 — Mobile header layout fix at ≤380px.
   Reverted: the display:none approach on elementor-element-79b2e73 broke
   Elementor's nav-menu JS init (causing the continuous loading spinner) and
   prevented the hamburger dropdown from showing. Safe fix: let Elementor's
   own responsive CSS handle nav visibility; only restore the row direction
   so logo and hamburger don't stack into separate rows.
   360px header cosmetic layout (logo too wide for 190px column) deferred. */
@media (max-width: 380px) {
  .elementor-location-header .e-con-full {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }
}