/* =============================================================================
   phone.css — the phone floor. Loaded after the skin, so no skin can undo it.

   From a 320–414px audit of every pitch site, 2026-09-26. Each rule fixes
   something that was measured on a page, not guessed at.
   ========================================================================== */

/* iOS zooms the whole page in when a field under 16px is focused, and leaves it
   zoomed. The fields were 15px. */
@media (max-width:1024px), (pointer:coarse){
  .field input,.field select,.field textarea{ font-size:16px; }
}

@media (max-width:860px){
  /* the footer links were 14–20px tall, 11px apart: a thumb needs 44 */
  .footer ul{ gap:0; }
  .footer li a{ display:inline-flex; align-items:center; min-height:44px; }
}

/* the line under the club's name was 9.5px; that is small on a tablet too, and on a phone on its side */
@media (max-width:1024px), (max-height:500px){
  .brand__sub{ font-size:11px; }
}

@media (max-width:620px){
  /* a long name ran off the right edge of the footer ("BETHNAL GREEN KARATE CLU") */
  .footer .brand{ max-width:100%; }
  .footer .brand__txt{ min-width:0; }
  .footer .brand__name{ white-space:normal; }

  /* A timetable is a list on a phone. The table was 620px wide in a sideways
     scroller, so the class, the thing a parent is looking for, sat off the right
     edge. Each row is now the day and the time, with the class under them. */
  .tt-scroll{ overflow:visible; }
  table.tt,table.tt tbody{ display:block; min-width:0; }
  table.tt thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  table.tt tr{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px; padding:15px 18px; border-bottom:1px solid var(--line); }
  table.tt tr:last-child{ border-bottom:0; }
  table.tt td{ display:block; padding:0; border:0; }
  table.tt td:nth-child(2){ margin-left:auto; text-align:right; color:var(--fg-2); }
  table.tt td:nth-child(n+3){ flex:1 1 100%; }
  table.tt td:has(> .state:empty){ display:none; }
}

/* =============================================================================
   The hero on every screen (2026-09-30, rebuilt 2026-10-01).
   The first screen should be the gym. Below 1080px the photographs take the top
   and the headline and first button still show under them; on a phone held
   sideways the two sit side by side again, so the photo is not a sliver.
   Checked at 1920, 1440, 1280×720, 1024, 768, 414, 390, 360, 320 and 844×390.
   ========================================================================== */
/* stacked: phones, and tablets held upright. A tablet on its side (1024×768) keeps
   the desktop split below, or the headline fell to the bottom edge of the screen. */
@media (max-width:1080px) and (orientation:portrait), (max-width:899px){
  .hero{ display:block; min-height:0; padding:clamp(14px,3vw,28px) 0 clamp(40px,7vw,64px); }
  .hero__in{ grid-template-columns:1fr; gap:clamp(22px,4vw,40px); }
  .hero__media{ order:-1; }
  .hero .hero__frame{ height:min(50svh, 64vw, 540px); }
  .hero__tag{ top:12px; left:12px; }
  .hero .hero__title{ --hl:clamp(44px, 11.6vw, 108px); }
  .hero__copy .lede{ max-width:56ch; }
}
@media (min-width:900px) and (max-width:1080px) and (orientation:landscape){
  .hero__in{ grid-template-columns:minmax(0,1fr) minmax(0,1.02fr); gap:32px; }
  .hero .hero__title{ --hl:clamp(44px, min(7.4vw, 12svh), 96px); }
  .hero__copy .lede{ font-size:15.5px; }
}
@media (max-width:620px){
  .hero{ padding-top:0; }
  .hero__in{ gap:22px; }
  .hero__media{ margin-inline:calc(var(--gut) * -1); }
  .hero .hero__frame{ clip-path:none; height:min(37svh, 96vw, 380px); }
  .hero__strip{ min-height:44px; padding:6px var(--gut); flex-wrap:nowrap; }
  .skin--studio .hero__strip{ padding-top:30px; }   /* studio tucks the strip 24px under the photograph */
  .hero__chip{ flex:1 1 auto; }
  .hero__chip > span{ display:none; }              /* the title only: the lead says the rest */
  .hero__chip b{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; max-width:100%; }
  .hero__arrow{ display:none; }                    /* swipe the photograph, or tap a segment */
  .hero__segs{ margin-right:0; gap:4px; }
  .hero__seg{ width:26px; height:34px; }
  .hero .hero__title{ --hl:clamp(40px, 14.2vw, 72px); }
  /* photo, headline, button: the first screen. The lead follows the buttons. */
  .hero__copy{ display:flex; flex-direction:column; }
  .hero__kicker{ margin-bottom:12px; align-self:flex-start; }
  .hero__actions{ order:1; margin-top:20px; gap:12px 22px; }
  .hero__copy .lede{ order:2; font-size:15.5px; line-height:1.5; margin-top:20px; }
  .hero__facts{ order:3; }
  .hero__actions .btn{ flex:1 1 auto; }
  .hero__facts{ margin-top:26px; font-size:10.5px; }
  .closing .display--xxl{ font-size:clamp(56px,17vw,96px); }
  .way{ flex:1 1 100%; }
  .pv{ padding:6px 44px 6px 14px; font-size:12px; text-align:left; justify-content:flex-start; }
}
/* short phones: a shorter photograph, so the headline still makes the first screen */
@media (max-width:620px) and (max-height:700px){
  .hero .hero__frame{ height:min(33svh, 92vw, 320px); }
}
/* 320px: a name with no mark has to fit beside the button and the menu */
@media (max-width:400px){
  .brand--text .brand__txt{ display:flex; min-width:0; }
  .brand--text .brand__name{ font-size:14px; white-space:normal; line-height:1.05; }
  .brand--text .brand__sub{ display:none; }
  .nav__cta{ gap:8px; }
  .nav__cta .btn--primary{ padding:11px 13px; font-size:11.5px; letter-spacing:.06em; }
}
/* a phone on its side: side by side, the photograph as tall as the screen allows */
@media (max-height:520px) and (orientation:landscape) and (min-width:560px){
  .hero{ display:flex; min-height:calc(100svh - var(--navh) - var(--pvh)); padding:14px 0 18px; }
  .hero__in{ grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:clamp(20px,3vw,36px); align-items:center; }
  .hero__media{ order:0; margin-inline:0; }
  .hero .hero__frame{ height:max(170px, calc(100svh - var(--navh) - var(--pvh) - 92px)); clip-path:none; }
  .hero__strip{ min-height:40px; padding:4px 12px; }
  .skin--studio .hero__strip{ padding-top:28px; }
  .hero__chip > span,.hero__arrow,.hero__copy .lede{ display:none; }
  .hero .hero__title{ --hl:clamp(30px, 12.5svh, 60px); }
  .hero__kicker{ margin-bottom:10px; }
  .hero__actions{ margin-top:16px; }
  .hero__facts{ margin-top:16px; font-size:10px; }
  .hero__actions .btn{ padding:12px 18px; }
}