/* ============================================================
   MHITR HALLOWEEN — LINEUP / PRESALE PAGE  (lineup.html)
   Layered ON TOP of style.css. Page-scoped via body.page-lineup so
   nothing here can touch the live index.html teaser.

   New client artwork = an illustrated bedroom-rave scene: cooler,
   lighter indigo walls (#363753 sampled), pure-white condensed
   display type and the same screenprint orange (#E14B22 sampled).
   The site's print-patch identity is kept (crop-mark brackets,
   grain, candle glow) but the palette follows the new art.
   Layout: poster overlay LEFT, signup panel RIGHT (per brief).
   ============================================================ */

body.page-lineup {
  --ink:      #2E3050;   /* base behind the bg image (matches art wall) */
  --ink-2:    #20223C;
  --patch:    rgba(23, 25, 52, .80);  /* panel sits on a busier scene -> denser */
  --field:    rgba(12, 13, 32, .66);
  --line:     rgba(178, 184, 222, .24);
  --line-2:   rgba(178, 184, 222, .15);

  --orange:     #E14B22;   /* sampled from the poster wordmark */
  --orange-lit: #F5643A;
  --orange-deep:#B33A16;

  --cream:   #F0F1F7;   /* the art's display type is cool white, not bone */
  --haze:    #AAAFD0;
}

/* ---------- new backdrop ---------- */
body.page-lineup .bg {
  background-image: url("/assets/images/lineup-bg-mobile.jpg");
  background-image: image-set(
    url("/assets/images/lineup-bg-mobile.webp") type("image/webp"),
    url("/assets/images/lineup-bg-mobile.jpg")  type("image/jpeg"));
  background-position: center top;
}
@media (min-width: 760px) {
  body.page-lineup .bg {
    background-image: url("/assets/images/lineup-bg-desktop.jpg");
    background-image: image-set(
      url("/assets/images/lineup-bg-desktop.webp") type("image/webp"),
      url("/assets/images/lineup-bg-desktop.jpg")  type("image/jpeg"));
    background-position: center center;
  }
}
/* lighter vignette than the teaser — this illustration IS the content,
   it shouldn't be crushed; the poster gets its own local scrim instead. */
body.page-lineup .bg::after {
  background:
    radial-gradient(150% 95% at 50% 6%, rgba(46,48,80,0), rgba(24,26,50,.42) 80%),
    linear-gradient(180deg, rgba(46,48,80,.26) 0%, rgba(28,30,54,.36) 58%, rgba(22,24,46,.58) 100%);
}

/* the scene already carries orange lamps/spots — keep the glow faint */
body.page-lineup .glow { opacity: .55; }

/* ============================================================
   POSTER OVERLAY (left column)
   Overlay.png is genuinely transparent — its lower third
   ("+40 OTHER ARTISTS", "POWERED BY RAZE") lands over the bed and
   window illustration. Composite-tested: it needs a local blurred
   scrim behind it or the white type breaks up.
   ============================================================ */
body.page-lineup .lockup {
  position: relative;
  isolation: isolate;
  max-width: 460px;
}
body.page-lineup .lockup::before {
  content: "";
  position: absolute;
  inset: -7% -12%;
  z-index: -1;
  background: radial-gradient(closest-side,
    rgba(15, 16, 40, .74), rgba(15, 16, 40, .46) 60%, rgba(15, 16, 40, 0) 86%);
  filter: blur(20px);
  pointer-events: none;
}
body.page-lineup .lockup img {
  /* static shadow, not drop-shadow: avoids the aliased-alpha halo (gotcha 9) */
  filter: none;
  margin-inline: auto;
}

/* ============================================================
   PRESALE COUNTDOWN
   ============================================================ */
.countdown {
  margin: 0 0 22px;
  padding: 15px 16px 14px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(12, 13, 32, .58), rgba(12, 13, 32, .34));
  box-shadow: inset 0 1px 0 rgba(240, 241, 247, .05);
}
.countdown__label {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--haze);
  line-height: 1.5;
}
.countdown__label strong {
  display: block;
  margin-top: 3px;
  color: var(--orange);
  font-weight: 700;
  letter-spacing: .12em;
}
.countdown__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.cd-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 9px 2px 8px;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  background: rgba(8, 9, 26, .52);
}
.cd-num {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.55rem, 5.6vw, 2rem);
  line-height: 1;
  color: var(--cream);
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}
.cd-unit {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--haze);
}
/* live state — swapped in by countdown.js once the target passes */
.countdown__live {
  margin: 0;
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--cream);
  text-align: center;
}
.countdown__live strong {
  color: var(--orange);
  text-transform: uppercase;
  letter-spacing: .1em;
}
.countdown.is-live .countdown__label { margin-bottom: 0; }

/* ============================================================
   PANEL COPY TWEAKS
   ============================================================ */
body.page-lineup .panel__lede { margin-bottom: 14px; }
body.page-lineup .panel__lede:last-child { margin-bottom: 0; }
body.page-lineup .panel__cta {
  margin-top: 0;
  margin-bottom: 20px;
  letter-spacing: .05em;
  line-height: 1.45;
  max-width: none;
}
/* junk-folder note in the success state — quieter than the lede above it */
.panel__note {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--haze);
}
.panel__note strong { color: var(--cream); font-weight: 700; }
body.page-lineup .panel__success .panel__cta { margin-bottom: 0; }

/* dropdown must not flash open before the vendor CSS lands (gotcha 19) */
.iti__dropdown-content.iti__hide { display: none !important; }

/* ============================================================
   TWO-COLUMN — poster LEFT, signup RIGHT
   Uses an aspect-ratio threshold as well as width so squarish
   in-between windows (~768–880px) don't fall into the gap between
   the phone and desktop treatments (gotcha 20).
   ============================================================ */
@media (min-width: 768px) and (min-aspect-ratio: 7/10) {
  body.page-lineup .stage__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(28px, 4.6vw, 60px);
    align-items: center;
  }
  body.page-lineup .lockup {
    max-width: 500px;
    justify-self: end;   /* poster left  */
  }
  body.page-lineup .lockup img {
    max-height: calc(100svh - 200px);
    width: auto;
    max-width: 100%;
  }
  body.page-lineup .panel {
    max-width: 470px;
    justify-self: start;  /* signup right */
  }
  body.page-lineup .glow {
    left: 30%; top: 50%;
    width: min(54vw, 700px);
    height: min(88vh, 780px);
  }
}

/* ============================================================
   LANDSCAPE PHONES — first-class layout (gotcha 27)
   844x390 / 932x430 / 667x375: desktop-ish width and aspect but
   almost no height. Keep the two columns, cap the poster to the
   viewport and tighten the panel so it scrolls sensibly.
   Must come AFTER the desktop block to win at equal specificity.
   ============================================================ */
@media (min-width: 640px) and (min-aspect-ratio: 7/10) and (max-height: 520px) {
  body.page-lineup .stage {
    padding: 20px clamp(14px, 3vw, 28px);
    align-items: flex-start;
  }
  body.page-lineup .stage__inner {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: clamp(18px, 3vw, 32px);
    min-height: 0;
  }
  body.page-lineup .lockup {
    max-width: none;
    width: auto;
    min-height: 0;
  }
  body.page-lineup .lockup img {
    max-height: calc(100svh - 40px);
    width: auto;
    max-width: 40vw;
  }
  body.page-lineup .panel { max-width: 460px; }
  body.page-lineup .panel__inner { padding: 20px 22px; }
  body.page-lineup .panel__title { font-size: clamp(1.7rem, 3.4vw, 2.2rem); margin-bottom: 10px; }
  body.page-lineup .panel__lede { font-size: 14px; margin-bottom: 10px; }
  body.page-lineup .countdown { padding: 11px 12px 10px; margin-bottom: 16px; }
  body.page-lineup .countdown__label { margin-bottom: 9px; }
  body.page-lineup .cd-num { font-size: 1.4rem; }
  body.page-lineup .form__row { margin-bottom: 11px; }
  body.page-lineup .form__consent { margin-bottom: 16px; font-size: 12.5px; }
  body.page-lineup .btn-ticket .btn__face { padding: 13px 16px; font-size: 1.05rem; }
  body.page-lineup .glow { opacity: .4; }
}

/* ---------- very small phones: keep the countdown cells honest ---------- */
@media (max-width: 359px) {
  .countdown__grid { gap: 6px; }
  .cd-cell { padding: 8px 0 7px; }
  .cd-unit { font-size: 8.5px; letter-spacing: .14em; }
}