/* ===== Homepage: full-screen video hero + morphing 2026/countdown + quick-access tiles ===== */
body{background:#0b0b0b}

/* full-screen background video (same clip as Spectate) */
.stage{position:fixed;inset:0;z-index:0;overflow:hidden;background:#0b0b0b}
#bgVideo{position:absolute;inset:0}
#bgVideo iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:max(100vw,177.78vh);height:max(100vh,56.25vw);border:0;pointer-events:none}
/* page overlay on the hero video: a diagonal orange→green colour wash + a vignette (dark edges) */
.ov{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    /* lens vignette: clearer centre, near-black in the corners (darkest point anchored AT the corners) */
    radial-gradient(ellipse farthest-corner at 50% 44%, rgba(0,0,0,0) 32%, rgba(0,0,0,.14) 56%, rgba(0,0,0,.58) 82%, rgba(0,0,0,.95) 100%),
    /* dark orange → dark green diagonal tint */
    linear-gradient(135deg, rgba(120,54,0,.72) 0%, rgba(92,56,0,.46) 45%, rgba(10,50,29,.46) 60%, rgba(7,38,22,.76) 100%)}

.home{position:relative;z-index:1;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:clamp(30px,5vh,56px);padding:calc(env(safe-area-inset-top) + 46px) 22px calc(env(safe-area-inset-bottom) + 128px)}

/* Top logo = a slow cross-fade between the MGP logo and the Okell's headline-sponsor credit
   (committee request, 13 Jul). Both overlaid in one grid cell (no layout shift), same rhythm as
   the 2026↔countdown morph. Reduced-motion: MGP logo only, no fade. */
.hero .logofade{display:grid;place-items:center;margin:0 auto 26px}
.hero .logofade img{grid-area:1/1;display:block;width:auto;height:96px;filter:drop-shadow(0 6px 22px rgba(0,0,0,.55))}
.hero .herologo{animation:logoFadeA 12s ease-in-out infinite}
.hero .sponsorlogo{opacity:0;animation:logoFadeB 12s ease-in-out infinite}
.hero .logofade .sponsorlogo{height:138px}  /* Okell's reads smaller than the wide MGP mark at equal height — oversize it */
/* MGP shows ~5s → quick .96s fade → Okell's ~4.3s → quick fade back */
@keyframes logoFadeA{0%,42%{opacity:1}50%,92%{opacity:0}100%{opacity:1}}
@keyframes logoFadeB{0%,42%{opacity:0}50%,92%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){
  .hero .herologo{animation:none}
  .hero .sponsorlogo{animation:none;opacity:0}
}
.hero{display:flex;flex-direction:column;align-items:center;text-align:center}
/* MANX GRAND PRIX must dominate on mobile: floor raised 44→54 and 10→13vw so each word reads far
   larger than the quick tiles (whose icons/labels are shrunk below). Words are short so they never
   overflow; "MANX GRAND" wraps under "PRIX" on narrow phones — that stacked wordmark is intended. */
.hero h1{font-family:var(--inline);text-transform:uppercase;font-size:clamp(54px,13vw,150px);line-height:.86;color:var(--cream);margin:0;text-shadow:0 6px 44px rgba(0,0,0,.6)}
/* strap under the title: the double orange stripe (same as the quick-button lines) running the full
   width of MANX GRAND PRIX, broken ~60% along by the tagline (on a quick-button-style dark panel). */
.mgp-strap{display:flex;align-items:center;gap:11px;align-self:stretch;margin-top:16px}
.strap-bars{display:flex;flex-direction:column;gap:3px;min-width:0}
.strap-bars i{display:block;height:4px;width:100%;background:var(--leaf);border-radius:1px;box-shadow:0 0 8px rgba(40,152,81,.5)}
.strap-bars.l{flex:0 0 60%}
.strap-bars.r{flex:1 1 0;min-width:10px}
.strap-txt{flex:0 0 auto;font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:1.5px;font-size:clamp(12px,1.5vw,17px);line-height:1;color:#fff;padding:9px 18px;border-radius:12px;text-shadow:0 1px 8px rgba(0,0,0,.8);
  background:linear-gradient(142deg,rgba(20,20,24,0) 0%,rgba(20,20,24,0) 22%,rgba(18,18,22,.32) 46%,rgba(11,11,14,.82) 74%,rgba(5,5,7,.97) 100%)}
@media(max-width:600px){
  .mgp-strap{gap:8px;margin-top:12px}
  .strap-txt{font-size:11px;letter-spacing:.8px;padding:7px 11px}
  .strap-bars.l{flex:1 1 0}   /* mobile: tagline centred — equal stripe each side */
}
/* "2026" morphs into the MGP countdown clock: digits drop away one-by-one, clock fades in, back again */
/* PERMANENT black block behind the year/clock (photos-dropdown styling). The 2026 dims (never
   fully disappears) as the clock fades in over it, and brightens back as the clock fades out. */
/* 2026 and the countdown are OVERLAID in one solid-black box. JS (sizeBox in home.php) sets the
   box's exact width/height to hug the larger of the two + equal padding, and centres the 2026 by
   its real glyph ink (so there's no leading space above it). The 2026 fades to a FAINT white ghost
   as the clock fades in, then back to full green. */
.year{box-sizing:border-box;position:relative;display:grid;place-items:center;font-family:var(--inline);font-size:clamp(40px,7.4vw,104px);line-height:1;color:var(--leaf);margin:0;letter-spacing:2px;text-shadow:0 4px 34px rgba(40,152,81,.42);
  background:rgba(0,0,0,.9);border-radius:14px;border:1.5px solid rgba(40,152,81,.5);box-shadow:0 0 20px rgba(40,152,81,.28),0 12px 34px rgba(0,0,0,.55);
  animation:yearGlow 4.2s ease-in-out infinite}
/* gentle, very smooth green glow pulse on the countdown box */
@keyframes yearGlow{
  0%,100%{border-color:rgba(40,152,81,.38);box-shadow:0 0 13px rgba(40,152,81,.18),0 12px 34px rgba(0,0,0,.55)}
  50%    {border-color:rgba(40,152,81,.64);box-shadow:0 0 30px rgba(40,152,81,.42),0 12px 34px rgba(0,0,0,.55)}
}
@media(prefers-reduced-motion:reduce){.year{animation:none}}
.y-text{grid-area:1/1;display:flex;line-height:1;font-size:.9em;transition:opacity .7s ease,color .7s ease}
.y-text.dim{opacity:.1;color:#fff}                                  /* very faint white ghost — clock stays readable */
.y-text .d{display:inline-block;min-width:.6em;text-align:center}
.y-clock{grid-area:1/1;display:flex;align-items:center;gap:clamp(5px,.9vw,11px);opacity:0;pointer-events:none;letter-spacing:0;white-space:nowrap;transition:opacity .5s ease}
.y-clock.show{opacity:1}
.y-clock .yc{display:flex;flex-direction:column;align-items:center;line-height:1}
.y-clock .yc b{display:block;width:1.35em;text-align:center;font-weight:400;font-size:.4em;line-height:.9;letter-spacing:1px;font-variant-numeric:tabular-nums}
.y-clock .yc i{font-family:var(--data);font-style:normal;font-size:.12em;letter-spacing:2px;text-transform:uppercase;color:var(--cream);opacity:.72;margin-top:.6em}

/* quick-access buttons — compact bar-tiles (text-block left, icon right) */
/* One row on desktop, each pill only as wide as its own label needs (they needn't match).
   They stay on one line down to tablet; below that they become a 2-col grid and a lone last
   pill (e.g. the 5th) centres under the rows above. */
/* the 4 quick tiles are split 2 + [2026 box] + 2 — on BOTH desktop (one row) and mobile (stacked).
   The box is vertically centred so it pokes above & below the shorter buttons, equally. */
/* width:100% (not fit-content) — as a centred flex item .qrow otherwise sizes to the labels'
   intrinsic widths, squeezing the equal-basis tiles below 184px and wrapping LIVE TIMING. */
.qrow{display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;gap:16px;width:100%;max-width:100%;margin:0 auto}
/* both groups share one explicit basis (2×184px tiles + 14px gap) — with basis:auto the
   LIVE TIMING/LIVESTREAM group's wider labels made it shrink less, skewing the box off-centre */
.qgroup{display:flex;gap:14px;flex:0 1 382px}
/* equal fixed basis (just wider than the longest label, LIVESTREAM) so all 4 tiles match and
   the 2026 box sits dead-centre — content-sized tiles skewed it (161/130 vs 175/179). */
.qgroup .qbtn{flex:0 1 184px;min-width:130px}
.qrow .year{flex:0 0 auto}
/* ≤980 (phones + portrait tablets) = stacked: box FIRST, then the 2+2 button rows.
   Below ~980 the row genuinely can't hold 4 EQUAL tiles + a centred box (LIVESTREAM's
   intrinsic tile floor forces a skew), so portrait tablets take the stacked layout too. */
@media(max-width:980px){
  .qrow{flex-direction:column;gap:clamp(14px,2.6vh,22px)}
  .qrow .year{order:-1}
  /* DON'T stretch the tiles to fill the row — size them to the longest label ("Livestream" ≈ 80px +
     icon) and centre the pair, so the 2×2 block stays narrower than the orange title strap (the widest
     element on the page). Was width:100% + flex:1 1 0 (full-width, congested). */
  .qgroup{width:auto;max-width:none;flex:0 0 auto}
  .qgroup .qbtn{flex:0 0 auto;width:146px;min-width:0}
}
@media(max-width:780px){.hero .logofade{margin-bottom:20px}.hero .logofade img{height:64px}.hero .logofade .sponsorlogo{height:92px}}
.qbtn{position:relative;min-height:78px;border-radius:14px;
  /* top-left is FULLY transparent (nothing there) and only darkens toward the bottom-right */
  background:linear-gradient(142deg,rgba(20,20,24,0) 0%,rgba(20,20,24,0) 22%,rgba(18,18,22,.32) 46%,rgba(11,11,14,.82) 74%,rgba(5,5,7,.97) 100%);
  color:#fff;text-decoration:none;padding:12px 15px;display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:4px;
  transition:transform .28s cubic-bezier(.2,.7,.3,1.2)}
.qbtn:hover{transform:translateY(-5px)}
.qbtn .qtop{display:flex;align-items:center;justify-content:space-between;gap:10px}
.qbtn .lbl{font-family:var(--inline);text-transform:uppercase;font-size:17px;line-height:1;letter-spacing:.6px;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.8)}
.qbtn .ic{flex:0 0 auto}
/* double orange line under the title, broken ~2/3 of the way along by the green year */
.qbtn .qline{display:flex;align-items:center;gap:7px;width:100%}
.qbtn .qbars{display:flex;flex-direction:column;gap:2px;min-width:0}
.qbtn .qbars i{display:block;height:3px;width:100%;background:var(--orange);border-radius:1px;box-shadow:0 0 8px rgba(243,146,0,.45)}
.qbtn .qbars.l{flex:0 0 60%}
.qbtn .qbars.r{flex:1 1 0;min-width:6px}
.qbtn .qyr{flex:0 0 auto;font-family:var(--disp);font-weight:700;font-size:13px;letter-spacing:.5px;color:var(--leaf);text-shadow:0 1px 6px rgba(0,0,0,.7)}
.qbtn .ic svg{width:24px;height:24px;fill:none;stroke:var(--orange);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.95;filter:drop-shadow(0 1px 5px rgba(0,0,0,.7))}
.qbtn.schedule  .ic svg{animation:qbob 2.6s ease-in-out infinite}
.qbtn.news      .ic svg{animation:qbob 3.1s ease-in-out infinite}
.qbtn.livestream .ic svg{transform-origin:12px 12px;animation:qpulse 2s ease-in-out infinite}
@keyframes qbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes qpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
@media(prefers-reduced-motion:reduce){.qbtn .ic svg{animation:none}.qbtn{animation:none}}

/* ── Constrained viewport HEIGHTS (laptops at OS display scaling) ──────────
   The hero is vertically centred, so on short viewports the quick-access
   tiles can end up UNDER the raised floating pills (the account/cart mini-pill
   reaches ~204px up from the bottom, the menu pill ~156px). The base hero only
   reserves 128px, so reserve the full pill zone here and tighten the stack.
   e.g. a 2560×1440 laptop at 150% Windows scaling ≈ an ~850–880px CSS-tall
   viewport — right in the range where this bit. */
/* ⚠ min-width:761 — this big reserve is for the HIGH pills (short LAPTOPS + landscape phones).
   Portrait phones (≤760) get low pills + a much smaller reserve in the mobile block at the file's end. */
@media (max-height:960px) and (min-width:761px){
  .home{padding-bottom:calc(env(safe-area-inset-bottom) + 232px)}
}
/* Shorter still: shrink the QUICK BUTTONS first (the hero logo/title/countdown stay dominant),
   only easing the hero down gently. Hierarchy: title ≫ countdown ≫ buttons — always. */
@media (max-height:800px){
  .home{gap:clamp(20px,3.5vh,40px)}
  .hero .logofade{margin-bottom:16px}
  .hero .logofade img{height:70px}
  .hero .logofade .sponsorlogo{height:100px}
  .hero h1{font-size:clamp(36px,8vw,118px)}
  .year{font-size:clamp(38px,8vw,118px)}
  .qbtn{min-height:60px;padding:10px 14px}
  .qbtn .lbl{font-size:15px}
  .qbtn .ic svg{width:20px;height:20px}
}
/* very short viewports (small phones e.g. 375×667, or short-and-wide windows):
   shrink everything, buttons hardest, so the tiles still clear the pills. */
@media (max-height:690px){
  .home{padding-bottom:calc(env(safe-area-inset-bottom) + 210px);gap:12px}
  .hero .logofade{margin-bottom:10px}
  .hero .logofade img{height:46px}
  .hero .logofade .sponsorlogo{height:66px}
  .hero h1{font-size:clamp(30px,6.4vw,86px);line-height:.92}
  .year{font-size:clamp(32px,6.4vw,86px)}
  .qgroup .qbtn{min-width:118px}
  .qbtn{min-height:54px}
}

/* landscape-tablet band: at 17px the LIVESTREAM/LIVE TIMING labels' intrinsic width stops that
   group shrinking as far as Schedule/News, skewing the 2026 box off-centre — 15px frees it. */
@media(max-width:1143px) and (min-width:981px){
  .qbtn .lbl{font-size:15px}
}
/* phones + portrait tablets (stacked layout): buttons stay clearly SMALLER than the page title.
   ⚠ MUST be at the END of the file — same-specificity base rules above would win otherwise. */
@media(max-width:980px){
  .qbtn{min-height:44px;padding:8px 11px}
  .qbtn .lbl{font-size:12.5px}
  .qbtn .ic svg{width:15px;height:15px}
  .qbtn .qyr{font-size:10px}
  .qbtn .qbars i{height:2px}
}
/* ── Portrait phones (≤760): pills are low now, so reclaim the reserved bottom space. The freed room
   goes to SMALLER quick tiles (user: they were oversized/silly) + a BIGGER countdown (was cramped).
   MUST stay last so it wins over the ≤980 + height blocks above. ── */
@media(max-width:760px){
  .home{padding-bottom:calc(env(safe-area-inset-bottom) + 128px)}
  .qbtn{min-height:38px;padding:6px 10px;gap:3px}
  .qbtn .lbl{font-size:11.5px}
  .qbtn .ic svg{width:13px;height:13px}
  .qbtn .qyr{font-size:9.5px}
  .qbtn .qbars i{height:2px}
}
/* Only tall-enough phones get the enlarged countdown (short phones keep the height-query sizing so
   nothing overflows). At 390px this floors the clock at ~50px (was 40) — clearly bigger, still under the title. */
@media(max-width:760px) and (min-height:740px){
  .year{font-size:clamp(50px,11.5vw,104px)}
}