/* ============================================================
   USC — phone layout.
   Loaded after each page's own <style>, so it wins without
   touching the desktop design. Nothing below 760px applies up.
   Written as one design, not a pile of patches.
   ============================================================ */

/* An element marked hidden stays hidden even when it carries an inline display style.
   Without this, the Youth trial and Open Week steps all showed at once. */
[hidden]{display:none !important;}

/* ---------- menu button + full-screen menu (phones only) ---------- */
.menu-btn{display:none;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid #3a382f;border-radius:8px;background:transparent;color:#f4f2ec;cursor:pointer;flex:none;padding:0;}
.menu-btn span{display:block;width:18px;height:2px;background:currentColor;position:relative;}
.menu-btn span::before,.menu-btn span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor;}
.menu-btn span::before{top:-6px;} .menu-btn span::after{top:6px;}
.mnav{display:none;position:fixed;inset:0;z-index:60;background:#1e1d1a;color:#f4f2ec;padding:14px 20px 28px;flex-direction:column;overflow:auto;}
.mnav.open{display:flex;}
.mnav .top{display:flex;align-items:center;justify-content:space-between;height:56px;margin-bottom:18px;}
.mnav .top img{height:34px;width:auto;display:block;}
.mnav .close{width:44px;height:44px;border:1px solid #3a382f;border-radius:8px;background:transparent;color:#f4f2ec;font-size:22px;line-height:1;cursor:pointer;}
.mnav a.item{display:flex;align-items:center;justify-content:space-between;padding:15px 4px;border-bottom:1px solid #3a382f;color:#f4f2ec;text-decoration:none;font-family:'Archivo','Helvetica Neue',Arial,sans-serif;font-weight:700;font-size:22px;letter-spacing:-0.01em;}
.mnav a.item.on{color:#8fd17a;}
.mnav a.item::after{content:"→";color:#8fd17a;font-size:18px;}
.mnav .cta{margin-top:auto;padding-top:26px;display:flex;flex-direction:column;gap:10px;}
.mnav .cta a{display:flex;align-items:center;justify-content:center;height:50px;border-radius:6px;font-weight:600;font-size:15px;text-decoration:none;}
.mnav .cta .primary{background:#1f5a33;color:#f4f2ec;}
.mnav .cta .secondary{border:1px solid #3a382f;color:#f4f2ec;}
.mnav .foot{margin-top:18px;font-size:13px;color:#b9b6ad;line-height:1.6;}
body.menu-open{overflow:hidden;}

@media (max-width:760px){

  /* ===== 1. HEADER — sticky, hides going down, returns going up ===== */
  .site .hdr{height:auto !important;padding:9px 16px !important;gap:10px !important;flex-wrap:nowrap !important;
             position:sticky;top:0;z-index:40;background:#1e1d1a;
             transition:transform .22s ease, box-shadow .22s ease;}
  .site .hdr.hdr-float{box-shadow:0 8px 20px rgba(0,0,0,0.4);}
  .site .hdr.hdr-hide{transform:translateY(-101%);box-shadow:none;}
  .site .hdr img{height:30px !important;}
  .site .hdrnav{display:none !important;}
  .site .hdr .btn{height:40px !important;font-size:13px !important;padding:0 13px !important;white-space:nowrap;}
  .menu-btn{display:inline-flex;}

  /* ===== 2. TYPE — one scale, built for a 430px screen =====
     Bigger jump between headings and body than the desktop scale,
     so a section reads at a glance instead of as even grey text. */
  .site h1.d{font-size:38px !important;line-height:1.0 !important;letter-spacing:-0.03em !important;}
  .site h2.d{font-size:29px !important;line-height:1.06 !important;letter-spacing:-0.025em !important;}
  .site h3.d,.site h3{font-size:20px !important;line-height:1.18 !important;}
  .site p{font-size:16px;line-height:1.62;}
  .site p.d{line-height:1.08 !important;}            /* display-font paragraphs are headings, not body */
  .site .sm,.site p.sm{font-size:14.5px !important;}
  .site [style*="font-size:19px"],.site [style*="font-size:18px"]{font-size:16px !important;}
  .site .muted{color:#cdcac1 !important;}            /* readable secondary text on the dark ground */
  .site .faint{color:#a5a299 !important;}

  /* Eyebrows become real labels: small, spaced, green.
     Only the non-link ones. The same class is used for small green
     links (an email address, Instagram, "Directions"), and shouting
     an email address in capitals is wrong. */
  .site .eb{font-size:11.5px !important;letter-spacing:0.11em !important;
            font-weight:700 !important;line-height:1.4;text-wrap:balance;}
  .site span.eb,.site div.eb,.site p.eb{text-transform:uppercase;}
  .site a.eb{text-transform:none;letter-spacing:0.01em !important;font-size:14px !important;}

  /* ===== 3. HERO — the photo is visible, the words are readable =====
     Desktop lays the words over the photo. At phone size that buries
     the photo behind a veil and still leaves the text fighting it.
     So on a phone: photo across the top, words below on the ground. */
  .site [style*="position:relative;height:600px;overflow:hidden"],
  .site [style*="position:relative;height:640px;overflow:hidden"],
  .site [style*="position:relative;height:680px;overflow:hidden"],
  .site [style*="position:relative;height:720px;overflow:hidden"],
  .site [style*="position:relative;height:740px;overflow:hidden"]{
    height:auto !important;display:flex;flex-direction:column;}

  .site [style*="position:relative;height:600px;overflow:hidden"] > img,
  .site [style*="position:relative;height:640px;overflow:hidden"] > img,
  .site [style*="position:relative;height:680px;overflow:hidden"] > img,
  .site [style*="position:relative;height:720px;overflow:hidden"] > img,
  .site [style*="position:relative;height:740px;overflow:hidden"] > img{
    position:relative !important;inset:auto !important;width:100% !important;height:264px !important;
    object-position:50% 42% !important;}

  /* the darkening veil has no job once the words are off the photo */
  .site [style*="linear-gradient(90deg,rgba(30,29,26,0.93)"]{display:none !important;}

  .site [style*="left:48px;right:48px;bottom:72px"]{
    position:relative !important;left:auto !important;right:auto !important;bottom:auto !important;
    max-width:none !important;padding:30px 20px 8px !important;gap:14px !important;}

  /* ===== 4. RHYTHM — one beat down the page ===== */
  .site .wrap{padding-left:20px !important;padding-right:20px !important;}
  /* The site's original phone rule, `.site .wrap{padding:0 20px}`, wipes the top AND bottom
     padding of every section. Only some values were being put back, so any section using
     80px, 96px or a small value ended with nothing under it, and the next section (or the
     footer) sat hard against its last card. Every value the pages use is restored here. */
  .site [style*="padding-top:64px"],.site [style*="padding-top:72px"],
  .site [style*="padding-top:80px"],.site [style*="padding-top:88px"]{padding-top:46px !important;}
  .site [style*="padding-bottom:64px"],.site [style*="padding-bottom:72px"],
  .site [style*="padding-bottom:80px"],.site [style*="padding-bottom:88px"],
  .site [style*="padding-bottom:96px"]{padding-bottom:50px !important;}
  .site .wrap[style*="padding-top:36px"],.site .wrap[style*="padding-bottom:36px"]{padding-top:32px !important;padding-bottom:32px !important;}
  .site .wrap[style*="padding-bottom:40px"]{padding-bottom:30px !important;}
  .site .wrap[style*="padding-top:24px"]{padding-top:24px !important;}
  .site .wrap[style*="padding-top:20px"]{padding-top:20px !important;}
  .site .wrap[style*="padding-bottom:24px"],.site .wrap[style*="padding-bottom:26px"]{padding-bottom:24px !important;}
  .site .wrap[style*="padding-bottom:20px"]{padding-bottom:20px !important;}
  .site .wrap[style*="padding-bottom:12px"]{padding-bottom:12px !important;}
  .site [style*="padding:52px 48px"]{padding:32px 20px !important;}
  .site [style*="gap:64px"],.site [style*="gap:56px"]{gap:26px !important;}
  .site [style*="gap:36px"],.site [style*="gap:32px"]{gap:22px !important;}

  /* every multi-column row becomes one column */
  .site [style*="grid-template-columns:"]{grid-template-columns:1fr !important;}

  /* a heading with a button beside it stacks, button under */
  .site [style*="justify-content:space-between"][style*="align-items:flex-end"]{
    flex-direction:column;align-items:flex-start !important;gap:16px !important;}

  /* ===== 5. CARDS AND BUTTONS ===== */
  .site .card{padding:20px !important;border-radius:12px !important;}
  .site .btn{min-height:52px;font-size:15px !important;padding:0 20px !important;}
  .site .hdr .btn{min-height:40px;}
  .site [style*="flex-wrap:wrap"] > .btn{flex:1 1 100%;justify-content:center;}
  /* words sitting on a photo card need the photo held back */
  .site [style*="linear-gradient(0deg"]{
    background:linear-gradient(0deg,rgba(30,29,26,0.97) 0%,rgba(30,29,26,0.82) 52%,rgba(30,29,26,0.45) 100%) !important;}

  /* ===== 6. COACH CARDS — portrait above, words at full width ===== */
  .site :not(.wrap)[style*="grid-template-columns:200px 1fr"]{gap:14px !important;padding:24px 0 !important;}
  .site :not(.wrap)[style*="grid-template-columns:200px 1fr"] > :first-child{width:128px;}
  .site .wrap[style*="grid-template-columns:200px 1fr"]{gap:20px !important;}
  .site .wrap[style*="grid-template-columns:200px 1fr"] > :first-child{width:160px;}
  .site img[src="/coach-team.jpg"]{margin-top:26px;border-radius:10px;}

  /* ===== 7. LABEL / VALUE ROWS — label above as an eyebrow ===== */
  .site .row{grid-template-columns:1fr !important;gap:5px !important;padding:16px 0 !important;}
  .site .ygrid3,.site .facts,.site .terms,.site .bk{grid-template-columns:1fr !important;}
  .site .row > :first-child{font-size:11.5px;letter-spacing:0.11em;text-transform:uppercase;
                            color:#8fd17a;font-weight:700;text-wrap:balance;}

  /* ===== 8. TIMETABLE — a row of time pills per day ===== */
  /* The printed timetable (what shows if the live one cannot load) */
  .site #timetable{gap:24px !important;}
  .site #timetable:not(.ttgrid) > div{display:block !important;}
  .site #timetable:not(.ttgrid) > div > div{display:flex;flex-direction:row !important;align-items:baseline;
                               gap:10px !important;margin-bottom:11px;}
  .site #timetable:not(.ttgrid) > div > span.sm{display:inline-flex;padding:7px 12px;margin:0 6px 6px 0;
                                   border:1px solid #3a382f;border-radius:999px;background:#232220;
                                   color:#e4e2db;font-size:14px !important;}

  /* The live timetable. The page's own phone rule made it a sideways swipe of 132px columns,
     which clipped the day names and coach names and left a hole under the short days.
     On a phone it now reads like the printed one: each day a heading, sessions as chips. */
  .site #timetable.ttgrid{display:flex !important;flex-direction:column !important;overflow:visible !important;
                          gap:22px !important;scroll-snap-type:none !important;padding-bottom:0 !important;}
  .site #timetable.ttgrid .ttcol{flex:none !important;display:flex !important;flex-direction:row !important;
                                 flex-wrap:wrap;gap:6px !important;}
  .site #timetable.ttgrid .tthead{flex:0 0 100%;flex-direction:row !important;align-items:baseline;gap:10px !important;
                                  padding-bottom:9px !important;margin-bottom:4px;}
  .site #timetable.ttgrid .tthead .d{font-size:20px !important;}
  .site #timetable.ttgrid .ttrow{display:inline-flex !important;flex-direction:row !important;align-items:baseline;
                                 gap:6px;padding:7px 12px;border:1px solid #3a382f;border-radius:999px;background:#232220;}
  .site #timetable.ttgrid .tttime{font-size:14px !important;font-weight:600;color:#f4f2ec;}
  .site #timetable.ttgrid .ttmeta{font-size:13px !important;color:#a5a299;}
  .site .ttlive{margin-bottom:6px !important;font-size:13px !important;}

  /* ===== 9. THE OPEN WEEK DRAW BANNER =====
     The one solid-green block on the site, so it should land like a
     feature and not a squeezed strip. Room around it, the prize line
     bigger than a section heading, and the label in the house style. */
  .site [style="background:#1f5a33;color:#f4f2ec;"] > .wrap{
    padding-top:46px !important;padding-bottom:46px !important;gap:18px !important;}
  .site [style="background:#1f5a33;color:#f4f2ec;"] > .wrap > div{gap:13px !important;}
  .site [style="background:#1f5a33;color:#f4f2ec;"] span{
    font-size:11.5px !important;letter-spacing:0.11em !important;text-transform:uppercase;
    font-weight:700 !important;line-height:1.4;}
  .site [style="background:#1f5a33;color:#f4f2ec;"] p.d{
    font-size:33px !important;line-height:1.04 !important;letter-spacing:-0.025em !important;
    text-wrap:balance;}
  .site [style="background:#1f5a33;color:#f4f2ec;"] > .wrap > p{font-size:15.5px !important;}

  /* ===== 10. ODDS AND ENDS ===== */
  .site .ytabs{flex-wrap:wrap !important;overflow:visible !important;gap:8px !important;}
  .site .bk{gap:22px !important;margin-top:22px;}
  .site .calgrid{gap:4px !important;}
  .site .timegrid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr)) !important;}
  .site input,.site select,.site textarea{font-size:16px !important;}  /* stops iOS zooming on focus */
}