/* SSBMT event (registration) page hero — the same design as the home hero, coloured by the event's theme from the admin.
   Use with hero.css. The page already sets --reg-primary, --reg-dark and --reg-accent per event (theme picker). */
.hx--event {
  --hx-maroon-dk: var(--reg-dark, #3d0508);
  --hx-green: var(--reg-accent, #228B22);
  --hx-green-dk: color-mix(in srgb, var(--reg-accent, #228B22) 82%, #000);
  --hx-on-accent: #fff;            /* event.js switches it to dark text when the accent is light (e.g. amber) */
  background: var(--reg-dark, #3d0508);
}
.hx--event::before {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--reg-dark) 97%, #000) 0%, color-mix(in srgb, var(--reg-dark) 90%, transparent) 42%,
      color-mix(in srgb, var(--reg-primary) 62%, transparent) 72%, color-mix(in srgb, var(--reg-primary) 45%, transparent) 100%),
    linear-gradient(0deg, color-mix(in srgb, var(--reg-dark) 90%, #000) 0%, transparent 35%);
}
.hx--event .hx__btn--main { color: var(--hx-on-accent); }
.hx--event .hx__eyebrow i { background: var(--reg-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--reg-accent) 30%, transparent); }
.hx--event .hx__wrap { padding-top: 40px; }
.hx__back { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 28px; color: rgba(255,255,255,.72); font-size: 15px; font-weight: 600; text-decoration: none; }
.hx__back:hover { color: #fff; }
.hx--event .hx__slide { opacity: 1; visibility: visible; transform: none; }
/* "Add to calendar" sits with the other outline buttons */
.hx__cue { display: flex; justify-content: center; margin: 48px 0 28px; }
.hx__cue a { display: grid; place-items: center; width: 48px; height: 48px; border: 1.5px solid rgba(255,255,255,.4); border-radius: 50%; color: #fff; animation: hx-bob 2s ease-in-out infinite; }
.hx__cue svg { width: 20px; height: 20px; }
@keyframes hx-bob { 50% { transform: translateY(5px); } }
@media (min-width: 992px) { .hx--event { min-height: min(calc(100svh - var(--hx-header)), 1100px); } }
@media (max-width: 991.98px) { .hx--event .hx__poster { display: block; max-width: 640px; margin-top: 8px; } .hx--event .hx__btn--poster { display: none; } }
@media (max-width: 575.98px) { .hx--event .hx__poster { display: none; } .hx--event .hx__btn--poster { display: inline-flex; } .hx__cue { margin: 32px 0 20px; } }
@media (prefers-reduced-motion: reduce) { .hx__cue a { animation: none; } }

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   SSBMT SITE OVERRIDES — everything above is the supplied event.css, byte for byte.
   Appended so the next drop can be copied over the top and only this block re-applied.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ⚠️⚠️ A FALLBACK UNDER THE color-mix() GRADIENT — AND IT MUST ONLY APPLY WHERE color-mix IS ABSENT.
   event.css paints the photo fade entirely with color-mix(), which a browser without support drops
   whole, leaving ::before transparent and white wording straight on a bright photograph.
   ⚠️⚠️ THE FIRST VERSION OF THIS WAS WRONG AND IT COST THE PHOTOGRAPH. Written as a plain rule and
      APPENDED, it sat later in the file than the supplied one and therefore won EVERYWHERE, not
      just where the fallback was needed — and because the colour stops are solid (you cannot blend
      a CSS variable toward transparent without color-mix) the overlay became opaque and the hall
      photo vanished behind a flat slab of green. The whole point of the layer is to be see-through.
   📌 So it is gated on `@supports not`. Where color-mix works — every current browser — the
      supplied rule is untouched and the photograph shows exactly as designed. Only an old browser
      gets this, and there it is deliberately held at 86% so the picture still reads through it. */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .hx--event::before {
    background:
      linear-gradient(90deg, var(--reg-dark, #3d0508) 0%, var(--reg-dark, #3d0508) 42%,
        var(--reg-primary, #800000) 78%, var(--reg-primary, #800000) 100%),
      linear-gradient(0deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 35%);
    opacity: .86;
  }
}

/* The calendar control is the site's existing dropdown. It sits in the row as an outline button,
   and its menu is positioned by the rules already in register.php. */
.hx--event .cal-dropdown { position: relative; display: inline-block; }
.hx--event .cal-dropdown > .hx__btn { width: 100%; }

/* ⚠️ The back link and the scroll cue belong to the hero, so they must not inherit the page's own
   link colours further down register.php. */
.hx--event .hx__back,
.hx--event .hx__cue a { text-decoration: none; }
.hx--event .hx__cue a:hover { background: rgba(255,255,255,.14); }


/* ── THE SIZE DAMPING ON SHORT SCREENS — REMOVED ──────────────────────────────
   ⚠️⚠️ THIS SPACE HELD RULES THAT SHRANK THIS HERO ON SHORT SCREENS AND NARROWED THE POSTER ON
      TABLETS. THEY ARE GONE ON PURPOSE. DO NOT PUT THEM BACK WITHOUT ASKING.
      They were the event-page twin of the damping removed from hero.css, and for the same reason:
      the client's instruction is to FOLLOW THE MOCK, and the damping made the page smaller than
      the design on an ordinary laptop. The tablet poster goes back to the 640px the supplied
      event.css specifies.
   📌 THE TRADE: on a short screen the hero is now taller than the viewport and the page scrolls,
      which is what the mock does. Nothing is hidden — it continues below the fold, and the round
      chevron is there to say so.
   ⚠️ What is NOT size damping stays above: the colour fallback, the calendar dropdown, and the
      link-colour rules. Those are integration, not scale. */