/* ============================================================
   HERO-DUOTONE.CSS — variant-specific hero treatment ONLY.
   "Duotone": full-bleed MITEC photo with the lightened soft-light
   duotone grade, faded to ink on the LEFT so the (left-aligned)
   content sits on clean ink; the building breathes on the right.
   Source: spectrum-hero-a-duotone (treatment only — markup is the
   shared stripped vertical hero).
   Everything shared (.hero-logo, .sr-only, #wave base, .cta-row,
   .countdown/.cd-*, buttons) lives in css/site.css.
   ============================================================ */

/* ============ HERO — VARIANT: DUOTONE / IMAGE ON THE SIDE ============ */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;
  background:
    radial-gradient(120% 80% at 18% 30%, rgba(91,42,158,.30), transparent 55%),
    radial-gradient(110% 90% at 88% 75%, rgba(4,174,203,.20), transparent 55%),
    var(--bg-ink);
  overflow:hidden;padding-top:var(--hdr-h)}

/* ---- VENUE PHOTO (MITEC blue-hour) — DUOTONE WASH + FADE-TO-INK ---- */
.hero-photo{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero-photo>div{position:absolute;inset:0}
.hp-base{
  background:url("../assets/venue/mitec-night.jpg") center 40% / cover no-repeat;
  filter:saturate(.92) contrast(1.05) brightness(1.05);
  transform:scale(1.04);transform-origin:75% 50%}
.hp-grade-color{
  background:linear-gradient(135deg,#3a1f7a 0%,#6a259c 26%,#2665AC 58%,#145EA6 76%,#04AECB 100%);
  mix-blend-mode:soft-light;opacity:.55}
.hp-grade-glow{
  background:radial-gradient(120% 90% at 75% 60%, rgba(4,174,203,.28), transparent 60%);
  mix-blend-mode:screen;opacity:.45}

#wave{z-index:2}

/* constant-luminance scrim: heavier on the LEFT (content column), fades right. */
.hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg, rgba(11,10,26,.96) 0%, rgba(11,10,26,.86) 26%, rgba(11,10,26,.5) 52%, rgba(11,10,26,.14) 74%, transparent 100%),
    radial-gradient(90% 78% at 22% 50%, rgba(11,10,26,.78), rgba(11,10,26,.30) 55%, transparent 80%),
    linear-gradient(180deg, rgba(11,10,26,.62) 0%, transparent 22%, transparent 56%, rgba(11,10,26,.86) 100%)}

/* content left-aligned over the faded clean-ink left zone */
.hero-inner{position:relative;z-index:3;width:100%;max-width:var(--maxw);margin:0 auto;
  display:flex;flex-direction:column;align-items:flex-start;text-align:left;
  padding:clamp(28px,5vh,60px) var(--gut)}
.hero-logo{margin-left:0;margin-right:auto}
.hero-meta{justify-content:flex-start}
.hero-foot{justify-content:flex-start}
.cta-row{justify-content:flex-start}
.countdown{text-align:left}
.cd-grid{justify-content:flex-start}

@media(max-width:620px){
  .hero-inner{align-items:center;text-align:center}
  .hero-logo{margin-left:auto;margin-right:auto}
  .hero-meta{justify-content:center}
  /* too narrow to sit side by side: stack, and drop the dividing rule */
  .hero-foot{flex-direction:column;align-items:center}
  .hero-foot .cta-row{padding-left:0}
  .hero-foot .cta-row::before{display:none}
  .cta-row{justify-content:center}
  .countdown{text-align:center}
  .cd-grid{justify-content:center}
}