/* ============================================================
   BIG SCREEN HACK — Mobile refinement overlay
   Loaded AFTER the inline <style> in index.html / sponsor.html /
   events/*.html. Narrow, targeted fixes so phones get a real first-
   class experience while desktop remains untouched.

   Tokens come from assets/css/bsh-tokens.css (the canonical design
   system). This file only layers responsive behaviour + a handful
   of accessibility polish.
   ============================================================ */

/* -----------------------------------------------------------
   0 · Global mobile hygiene
   ----------------------------------------------------------- */
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  -webkit-tap-highlight-color:rgba(61,125,255,.22);
  overflow-x:hidden;
}
/* Never let a child blow out viewport width */
img,video,canvas,svg,iframe{max-width:100%;height:auto}
/* Modals / fixed overlays must respect iOS safe areas */
.apply-modal,.poster-result,.reel-modal{
  padding-top:max(env(safe-area-inset-top),0px);
  padding-bottom:max(env(safe-area-inset-bottom),0px);
}

/* -----------------------------------------------------------
   1 · Minimum 44px touch targets for anything interactive
   ----------------------------------------------------------- */
@media(pointer:coarse){
  .btn,.btn-primary,.btn-ghost,.btn.p,.btn.ghost,.btn.warm,
  .n-cta,.n-brand,.ft-c a,.tab-btn,
  .apply-form button,.apply-form input[type="submit"],
  .share-btn,.poster-btn,.c-open,
  button:not(.cursor):not(.cursor-ring){
    min-height:44px;
    min-width:44px;
  }
  /* Bigger tap zone around small icon buttons */
  .ticker-close,.poster-close,.modal-close,.reel-close{
    padding:12px;
  }
}

/* -----------------------------------------------------------
   2 · Nav: show a compact Apply CTA on mobile
      (current CSS hides both .n-links AND .n-cta below 900px —
       the primary conversion button disappeared on phones)
   ----------------------------------------------------------- */
@media(max-width:900px){
  nav{padding:12px clamp(16px,4vw,28px)}
  .n-brand{font-size:.72rem;letter-spacing:.14em}
  /* Force the Apply CTA back, slimmer */
  .n-cta{
    display:inline-block!important;
    padding:8px 14px;
    font-size:.68rem;
    letter-spacing:.18em;
  }
}
@media(max-width:420px){
  .n-brand .bar{display:none} /* hide VideoStack × RecDek on very narrow */
  .n-brand{font-size:.65rem}
}

/* -----------------------------------------------------------
   3 · HUD corners — hide non-essential ornament on small screens
   ----------------------------------------------------------- */
@media(max-width:700px){
  .hud-bl,.hud-br{display:none}
}

/* -----------------------------------------------------------
   4 · Section rhythm — tighter vertical padding on phones.
      Previously each section had ~81px top + 81px bottom = 162px
      of dead space × 11 sections = almost 2 screenfuls of padding
      alone. Now ~48px each side = 40% less scroll.
   ----------------------------------------------------------- */
@media(max-width:768px){
  .sc-pad,.sc,.sc-partners,.sc-imagine,
  .sc-hero,.sc-numbers,.sc-manifesto,.sc-events,
  .sc-process,.sc-stakes,.sc-reel,.sc-apply,.sc-how,.sc-prizes{
    padding-top:clamp(40px,6vh,68px)!important;
    padding-bottom:clamp(40px,6vh,68px)!important;
    padding-left:clamp(20px,5vw,32px);
    padding-right:clamp(20px,5vw,32px);
  }
  /* Trim the extra white-space inside .hero-stage, which also pads */
  .sc-hero .hero-stage{
    padding-top:clamp(24px,5vh,56px)!important;
    padding-bottom:clamp(40px,8vh,80px)!important;
  }
  /* Manifesto lines have big top/bottom margins — tighten */
  .mf-wrap,.mf-lines{margin-top:0!important;margin-bottom:0!important}
  .mf-line{margin-bottom:clamp(8px,2vw,18px)!important}
  /* Events cards — snugger gap */
  .c-grid,.ev-grid{gap:14px!important}
  /* How-it-works grid — tighten row gap */
  .hw-grid{gap:14px!important}
  /* Footer over-padded on phones */
  footer{padding-top:40px!important;padding-bottom:28px!important}
}
@media(max-width:480px){
  .sc-pad,.sc,.sc-partners,.sc-imagine,
  .sc-hero,.sc-numbers,.sc-manifesto,.sc-events,
  .sc-process,.sc-stakes,.sc-reel,.sc-apply,.sc-how,.sc-prizes{
    padding-top:36px!important;
    padding-bottom:36px!important;
  }
}

/* -----------------------------------------------------------
   5 · Hero — phone layout
   ----------------------------------------------------------- */
@media(max-width:900px){
  .hero-stage{grid-template-columns:1fr!important;gap:20px}
  .hero-left{max-width:100%}
  /* Brand wordmark — keep it poster-scale on phones */
  .hero-brand{
    font-size:clamp(3rem,16vw,5.6rem)!important;
    line-height:.85!important;
    margin-bottom:14px!important;
  }
  .hero-brand .ed{font-size:.34em}
  /* Promise line — scaled to feel big but not wrap awkwardly */
  .hero-promise{font-size:clamp(1.6rem,7.5vw,2.6rem)!important;margin-bottom:16px}
  .hp-prefix{font-size:.46em!important;margin-bottom:10px!important}
  .hp-rotor{height:1.15em}
  .hp-fest{font-size:clamp(1.6rem,7.5vw,2.6rem);letter-spacing:.02em}
  .hero-lede,.hp-lede{font-size:clamp(1rem,3.8vw,1.15rem)!important;line-height:1.55;max-width:100%}
  .hero-cta,.hero-ctas{flex-direction:column;gap:12px;align-items:stretch}
  .hero-cta .btn,.hero-ctas .btn,.hero-cta a.btn,.hero-ctas a.btn{width:100%;justify-content:center;text-align:center}
  .hero-frames{display:none!important}
}
@media(max-width:420px){
  .hero-brand{font-size:clamp(2.6rem,15vw,4.2rem)!important}
}

/* -----------------------------------------------------------
   6 · Numbers grid — 2 columns on phones
   ----------------------------------------------------------- */
@media(max-width:700px){
  .num-grid{grid-template-columns:repeat(2,1fr)!important;gap:20px}
  .num-item{padding:20px 10px}
  .num-item .n{font-size:clamp(2.4rem,12vw,4rem)}
}

/* -----------------------------------------------------------
   7 · Manifesto — lines stack cleanly
   ----------------------------------------------------------- */
@media(max-width:768px){
  .mf-lines{padding:0}
  .mf-line{font-size:clamp(2rem,10vw,3.4rem)!important;line-height:.95}
  .mf-line.l2{padding-left:0}
  .mf-line.l3{padding-left:0}
  .mf-caption{padding-left:0;max-width:100%;font-size:.95rem}
}

/* -----------------------------------------------------------
   8 · Events — force vertical card stack (no more horizontal pin)
   ----------------------------------------------------------- */
@media(max-width:900px){
  .c-grid,.cities-track,.ev-row,.ev-grid{
    grid-template-columns:1fr!important;
    gap:20px!important;
    display:grid!important;
    overflow:visible!important;
    transform:none!important;
    width:auto!important;
  }
  .cities-track>*{min-width:0!important;width:100%!important}
  .c-card,.ev-card{padding:24px;border-radius:2px}
  .c-card h3,.ev-card h3{font-size:clamp(1.4rem,5.5vw,1.8rem)}
}

/* -----------------------------------------------------------
   9 · How-it-works / Tracks / Stakes grids — single column
   ----------------------------------------------------------- */
@media(max-width:900px){
  .hw-grid,.proc-wrap,.tr-grid,.tr-hd,.pz-row,
  .stake-grid,.p-grid{
    grid-template-columns:1fr!important;
  }
  .proc-sticky{position:static!important}
}

/* -----------------------------------------------------------
  10 · Reel — swipeable horizontal strip with bigger cards
  ----------------------------------------------------------- */
@media(max-width:900px){
  .reel-track{
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding:0 20px 24px;
    gap:16px;
  }
  .reel-track::-webkit-scrollbar{height:0;display:none}
  .reel-card{
    flex:0 0 78vw;
    max-width:320px;
    scroll-snap-align:center;
  }
}

/* -----------------------------------------------------------
  11 · Partner ticker — fix inconsistent logo heights
       (spec: every mark renders at the same visual height,
        widths vary because wordmarks are wider — that's fine)
  ----------------------------------------------------------- */
.pt-logo img{height:34px;max-width:180px;width:auto;object-fit:contain}
.pt-logo.-text{
  font-family:var(--mono);
  font-size:.82rem;
  letter-spacing:.2em;
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:2px;
  min-height:48px;
  display:inline-flex;
  align-items:center;
}
.pt-logo.big{font-size:.96rem;letter-spacing:.22em}
@media(max-width:768px){
  .pt-logo img{height:28px;max-width:140px}
  .pt-logo.-text{font-size:.7rem;padding:6px 10px;min-height:40px}
  .pt-row{gap:20px}
}
@media(max-width:480px){
  .pt-logo img{height:24px;max-width:120px}
  .pt-logo.-text{font-size:.62rem;letter-spacing:.16em;padding:5px 8px}
  .pt-row{gap:14px 18px}
}

/* -----------------------------------------------------------
  12 · Apply modal — full-screen on phones, proper scrolling
  ----------------------------------------------------------- */
@media(max-width:700px){
  /* Apply-overlay is the outer scroller — let it fill the viewport */
  .apply-overlay{
    padding:0!important;
    align-items:stretch!important;
  }
  .apply-modal{
    max-width:100%!important;
    width:100%!important;
    min-height:100dvh;
    max-height:none!important;
    border-radius:0!important;
    padding:28px 20px 40px!important;
    margin:0!important;
    box-shadow:none!important;
  }
  .apply-tabs{flex-wrap:wrap;gap:4px}
  .apply-tab{
    flex:1 1 calc(50% - 2px);
    min-width:0;
    font-size:.68rem;
    letter-spacing:.08em;
    padding:12px 6px;
  }
  .apply-grid{grid-template-columns:1fr!important;gap:14px!important}
  .apply-field > span{font-size:.7rem}
  .apply-field input[type=text],
  .apply-field input[type=email],
  .apply-field input[type=url],
  .apply-field select,
  .apply-field textarea{
    font-size:16px!important; /* kills iOS zoom on focus */
    padding:13px 14px!important;
  }
}

/* -----------------------------------------------------------
 12b · Reel (video) modal — this one broke on mobile:
       .modal-overlay > .modal with a mux-player inside .modal-media
  ----------------------------------------------------------- */
.modal-overlay{
  /* Allow scrolling on phones when the body (description + meta) is tall */
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:0!important;
}
.modal-overlay.open{
  /* align-items:center leaves half the body clipped when it's taller
     than the viewport — switch to flex-start + let the overlay scroll */
  align-items:flex-start!important;
}
@media(max-width:700px){
  .modal{
    max-width:100%!important;
    width:100%!important;
    min-height:100dvh;
    border-radius:0!important;
    border-left:none!important;
    border-right:none!important;
    margin:0!important;
    display:flex;
    flex-direction:column;
  }
  .modal-close{
    position:fixed!important;
    top:max(14px,env(safe-area-inset-top))!important;
    right:14px!important;
    width:44px!important;
    height:44px!important;
    background:rgba(5,6,8,.78)!important;
    backdrop-filter:blur(10px);
    z-index:2010!important;
  }
  .modal-media{
    aspect-ratio:16/9;
    width:100%;
    max-height:56dvh;      /* never eat the whole phone screen */
    flex-shrink:0;
  }
  .modal-media mux-player{
    width:100%!important;
    height:100%!important;
    --media-object-fit:contain; /* letterbox rather than crop on portrait */
  }
  .modal-body{
    padding:22px 20px 40px!important;
  }
  .modal-title{font-size:clamp(1.5rem,6.2vw,2rem)!important}
  .modal-desc{font-size:.95rem}
  .modal-meta{grid-template-columns:auto 1fr;gap:4px 14px;font-size:.5rem}
  .modal-tag,.modal-tool{font-size:.5rem;padding:5px 8px}
}

/* Landscape phones — the player should fill the width but leave room
   for the close button + swipe-down gesture space */
@media(max-width:900px) and (orientation:landscape){
  .modal-media{max-height:80dvh}
}

/* -----------------------------------------------------------
  13 · Imagine / AI Poster Generator — mobile layout
  ----------------------------------------------------------- */
@media(max-width:768px){
  .im-wrap,.imagine-grid{grid-template-columns:1fr!important;gap:20px}
  .poster,.poster-visual{aspect-ratio:3/4;width:100%;max-width:360px;margin:0 auto}
  .poster-form input[type="text"]{font-size:16px}
  .share-row{flex-wrap:wrap;gap:8px}
  .share-btn{flex:1 1 calc(50% - 4px);min-width:0;font-size:.72rem;padding:10px 8px}
}

/* -----------------------------------------------------------
  14 · Parallax strips — shorter on phones
  ----------------------------------------------------------- */
@media(max-width:700px){
  .parallax-strip,.px-strip{height:clamp(200px,38vh,320px)!important}
}

/* -----------------------------------------------------------
  15 · Footer — 1 column on very narrow
  ----------------------------------------------------------- */
@media(max-width:540px){
  .ft-g{grid-template-columns:1fr!important;gap:28px}
  .ft-bot{flex-direction:column!important;gap:10px;text-align:center}
  .ft-c h4{font-size:.68rem}
}

/* -----------------------------------------------------------
  16 · Ticker (marquee) — slower, denser on phones
  ----------------------------------------------------------- */
@media(max-width:700px){
  .ticker{padding:12px 0}
  .ticker .tk-row{font-size:.72rem;letter-spacing:.18em}
  .ticker .tk-row img{height:20px!important}
}

/* -----------------------------------------------------------
  17 · Prize / Stakes rebuild — Cannes as the hero line
      (works with existing markup: .pz .gp is the Grand Prize cell)
  ----------------------------------------------------------- */
@media(max-width:900px){
  .pz-row{grid-template-columns:1fr!important;max-width:420px;margin:0 auto}
  .pz.gp{padding:32px 22px}
  .pz.gp h3{font-size:clamp(1.8rem,8vw,2.8rem)!important}
  .pz.gp .prize-pool{font-size:.85rem}
}

/* -----------------------------------------------------------
  18 · Typography safety — don't let clamp() hero blow layout
  ----------------------------------------------------------- */
@media(max-width:360px){
  :root{--fs-hero:clamp(2.4rem,10vw,3.6rem)}
  h1,h2,h3{word-break:break-word;overflow-wrap:anywhere}
}

/* -----------------------------------------------------------
  19 · Reduce motion — already respected elsewhere; add one
      global guard for the ticker + grain flicker.
  ----------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  .atom-marquee-track,.tk-row-inner{animation:none!important}
  body::after{display:none} /* grain */
}

/* -----------------------------------------------------------
  20 · Focus ring — visible keyboard focus for a11y
  ----------------------------------------------------------- */
a:focus-visible,button:focus-visible,
input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:2px;
}