/* ERA26 hook elements: early-bird countdown, Munich barometer poll,
   "who's going to Munich" strip, ticket reassurance line, Insights band.
   Added 2026-09-02 (WS-S1 hooks H1-H5).

   Reuses the site's own design tokens (defined in css/style.css): --rt-charcoal,
   --rt-gold / --rt-gold-bright, --line-warm, --on-dark-primary/-secondary/-faint.
   No new tokens are introduced. Dark-surface contract (STYLE.md): text stays
   pure #ffffff (--on-dark-primary), accents stay full-brightness gold, never
   dimmed. This file must load AFTER css/style.css so the custom properties it
   reads already exist. */

/* ---------- Shared: vertical section rhythm ----------
   Added 2026-09-02, fixing a real bug: putting the vertical margin on
   `.era-insights-band` (a class that shares its element with `.rt-shell`)
   clobbered `.rt-shell`'s own `margin: 0 auto` centering, because both rules
   have equal specificity and this file loads after style.css. The section
   flush left at x=0 instead of centering with the rest of the page -- the
   heading had no padding of its own so it read as "flush", while the cards'
   OWN 1.5rem internal padding made them look "inset" by comparison, even
   though the whole shell had silently lost its centering. Fix: put spacing on
   the outer <section>, which is a DIFFERENT element from .rt-shell, so there
   is no property collision. */
.era-hook-section { padding: 3.5rem 0; }

/* ---------- H1: early-bird countdown ---------- */
.era-eb-countdown {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin: 1.25rem 0 0;
}
.era-eb-countdown[hidden] { display: none; }
.era-eb-cell {
  background: var(--rt-charcoal);
  border: 1px solid var(--line-warm);
  padding: 0.55rem 0.9rem;
  text-align: center;
  min-width: 62px;
}
.era-eb-num {
  display: block;
  font-family: var(--font-display, inherit);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--on-dark-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.era-eb-unit {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-dark-faint);
  margin-top: 0.2rem;
}

/* ---------- H2: Munich barometer poll ---------- */
.era-poll {
  background: var(--rt-charcoal);
  border: 1px solid var(--line-warm);
  padding: 2rem;
  margin: 3rem 0;
}
.era-poll-kicker {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rt-gold-bright);
  margin: 0 0 0.6rem;
}
.era-poll-q {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--on-dark-primary);
  margin: 0 0 1.1rem;
}
.era-poll-options {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.era-poll[data-voted] .era-poll-options { display: none; }
.era-poll-btn {
  background: transparent;
  border: 1px solid var(--line-warm);
  color: var(--on-dark-primary);
  padding: 0.65rem 1.5rem;
  font: inherit;
  cursor: pointer;
}
.era-poll-btn:hover,
.era-poll-btn:focus-visible {
  border-color: var(--rt-gold);
  color: var(--rt-gold-bright);
}
.era-poll-thanks {
  display: none;
  color: var(--rt-gold-bright);
  margin: 0;
}
.era-poll[data-voted] .era-poll-thanks { display: block; }
.era-poll-note {
  color: var(--on-dark-faint);
  font-size: 0.82rem;
  margin: 1rem 0 0;
}

/* ---------- H3: who's going to Munich strip ---------- */
.era-cities-munich { margin: 3rem 0; }
.era-cities-munich-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  margin: 1rem 0 0;
  padding: 0;
}
.era-cities-munich-list li {
  color: var(--on-dark-secondary);
  font-size: 0.95rem;
}
.era-cities-munich-add {
  display: inline-block;
  margin-top: 1rem;
  color: var(--rt-gold-bright);
  text-decoration: none;
  border-bottom: 1px solid var(--rt-gold-45);
}
.era-cities-munich-add:hover,
.era-cities-munich-add:focus-visible { color: var(--on-dark-primary); border-color: var(--rt-gold-bright); }

/* ---------- H4: ticket reassurance line ---------- */
.era-ticket-reassure {
  text-align: center;
  color: var(--on-dark-faint);
  font-size: 0.85rem;
  margin: 1.5rem 0 0;
}

/* ---------- H5: Insights band ---------- */
.era-insights-grid {
  display: grid;
  /* auto-fit so the band renders correctly at any card count (1, 2 or 3):
     one card fills the row, two+ share it. Fixed repeat(2,1fr) left a single
     card left-weighted with an empty second column. Changed 2026-09-14 when the
     Munich card was removed. */
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  gap: 1.75rem;
  margin-top: 1.5rem;
}
.era-insights-card {
  display: block;
  text-decoration: none;
  padding: 1.5rem;
  background: var(--rt-charcoal);
  border: 1px solid var(--line-warm);
}
.era-insights-card h3 {
  color: var(--on-dark-primary);
  margin: 0 0 0.5rem;
  font-size: 1.15rem;
}
.era-insights-card p {
  color: var(--on-dark-secondary);
  font-size: 0.9rem;
  margin: 0;
  line-height: 1.5;
}
.era-insights-card:hover h3,
.era-insights-card:focus-visible h3 { color: var(--rt-gold-bright); }

@media (max-width: 640px) {
  .era-insights-grid { grid-template-columns: 1fr; }
}