/* ============================================================================
   FE Open Event template — the event hero (a NEW component) plus the small bit
   of event-specific furniture. Every other section reuses the site's existing
   components (stats-banner, audience-switcher, facility-cards, split-panel,
   accordion, card, call-to-action, Formidable / Event Tickets), which the main
   enqueue cascade already loads on this template. Enqueued conditionally by
   inc/fe-open-event-setup.php. Ported from design-export/event-featured/base.css.
   No literal colour: every value is a token. */

/* ---------------------------------------- event hero (the fifth hero type) ---
   An event, with a live countdown. Sits on the base .hero shell (dark ground,
   background image/video, tint + overlay, page-title text colours). */
.hero-event { padding-block: 3.4rem 3rem; }
/* padding-inline-start clears an overhanging site logo (--logo-clear in
   tokens.css, 0 for every brand but UCNL, and 0 below 64em on UCNL too). The
   featured-event hero is the first thing under the header on this template. */
.hero-event > .row { position: relative; z-index: 1; padding-inline-start: var(--logo-clear); }
.hero-event .content { max-width: 760px; }
.hero-event .hero-title { font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(2.4rem, 5vw, 3.5rem); line-height: var(--display-lh); letter-spacing: var(--display-track); margin-bottom: 1rem; }

.hero-event__badge { display: inline-flex; align-items: center; background: var(--btn-accent-bg); color: var(--btn-accent-text); font-family: var(--font-display); font-weight: 800; font-size: var(--fs-min); letter-spacing: .04em; text-transform: uppercase; padding: .45rem 1.1rem; border-radius: var(--radius-pill); margin-bottom: 1.1rem; }

.hero-event__facts { list-style: none; padding: 0; margin: 1.3rem 0 0; display: flex; flex-wrap: wrap; gap: .6rem 1.9rem; }
.hero-event__fact { display: flex; align-items: center; gap: .55rem; font-family: var(--font-display); font-weight: 700; font-size: 1.3125rem; color: var(--page-title-fg); }
.hero-event__fact::before { content: ""; flex: 0 0 auto; width: 10px; height: 10px; background: var(--page-title-eyebrow); }

.hero-event__countdown { margin-top: 1.8rem; }
.hero-event__countdown-label { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-eyebrow); letter-spacing: .14em; text-transform: uppercase; color: var(--page-title-muted); margin-bottom: .6rem; }
.hero-event__clock { display: flex; align-items: flex-start; gap: .5rem; }
.hero-event__unit { display: flex; flex-direction: column; align-items: center; min-width: 74px; }
.hero-event__digits { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 3.5rem; line-height: 1; letter-spacing: -.02em; color: var(--page-title-eyebrow); font-variant-numeric: tabular-nums; }
.hero-event__unit-label { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--page-title-muted); margin-top: .3rem; }
.hero-event__sep { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 3.5rem; line-height: 1; color: var(--page-title-rule); }
.hero-event__ctas { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.8rem; }

@media (max-width: 52em) {
  .hero-event__digits, .hero-event__sep { font-size: 2.6rem; }
  .hero-event__unit { min-width: 58px; }
  .hero-event__facts { gap: .5rem 1.2rem; }
}
@media (max-width: 32em) {
  /* Seconds are noise on a phone once the clock has to wrap. */
  .hero-event__unit:last-child, .hero-event__clock .hero-event__sep:last-of-type { display: none; }
}

/* ------------------------------------------------- registration furniture ---
   The RSVP form (Event Tickets) sits in a white card on the navy band; the
   nested-light-surface reset (bridge.css) keeps its text dark. */
.feoe-register-card { background: var(--white); border-radius: var(--radius-md); padding: 2rem 2.1rem; box-shadow: var(--shadow-lg); }
.feoe-calendar-links { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; align-items: center; margin-top: 1.4rem; }
.feoe-calendar-links .eyebrow { color: var(--page-title-muted); margin: 0; }