/* ACRÈ Padel — mobile responsive overrides
   Targets all pages built with inline styles in JSX. Uses tag selectors +
   attribute-substring selectors with !important to defeat inline rules.
   Loaded after colors_and_type.css on every page. */

/* ─────────────────────────────────────────────────────────────
   PHONE — under 720px
   ───────────────────────────────────────────────────────────── */
@media (max-width: 720px) {

  /* Stop horizontal scroll bleed */
  html, body { overflow-x: hidden !important; }

  /* ── Section + container padding ── */
  section { padding: 72px 20px !important; }

  /* ── Headlines & body — ramp DOWN harder for editorial calm ── */
  h1 { font-size: clamp(34px, 9.4vw, 52px) !important; line-height: 1.04 !important; }
  h2 { font-size: clamp(26px, 6.4vw, 38px) !important; line-height: 1.12 !important; }
  h3 { font-size: clamp(20px, 4.6vw, 26px) !important; line-height: 1.2  !important; }

  /* Cap any oversized clamp() decorative text */
  [style*="clamp(56px"], [style*="clamp(72px"], [style*="clamp(60px"],
  [style*="clamp(48px"], [style*="clamp(40px"] {
    font-size: clamp(32px, 9vw, 52px) !important;
    line-height: 1.05 !important;
  }
  [style*="font-script"], span[style*="var(--font-script)"] {
    font-size: 1.05em !important;
    line-height: 1 !important;
  }
  [style*="font-size: 112px"], [style*="fontSize: 112"] {
    font-size: 76px !important; line-height: 0.85 !important;
  }
  h1[style*="clamp"] { font-size: clamp(34px, 9.4vw, 52px) !important; line-height: 1.04 !important; }

  /* ── Grids → single column ── */
  [style*="grid-template-columns"] {
    display: block !important;
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns"] > * { margin-bottom: 22px !important; }
  [style*="grid-template-columns"] > *:last-child { margin-bottom: 0 !important; }

  /* ── Footer ── */
  footer { padding: 56px 20px 40px !important; }
  footer [style*="grid-template-columns"] { gap: 28px !important; margin-bottom: 32px !important; }
  /* Bigger ACRÈ Padel wordmark on mobile.
     Wordmark is two text spans (ACRÈ + Padel) — target font-size:56 + the
     proportional script "Padel" right under it. */
  footer span[style*="font-size: 56"] {
    font-size: 88px !important;
    letter-spacing: 0.04em !important;
  }
  footer span[style*="font-size: 36.96"],
  footer span[style*="font-size: 37"] {
    font-size: 60px !important;
    margin-top: -6px !important;
  }
  footer [style*="font-size: 14"]      { font-size: 13px !important; }
  footer [style*="justify-content: space-between"] {
    flex-direction: column !important;
    gap: 14px !important;
    align-items: flex-start !important;
  }
  footer [style*="font-style: italic"][style*="22"] {
    font-size: 18px !important;
  }
  footer [style*="letter-spacing"] { font-size: 10px !important; }

  /* ── Top nav (the fixed top-bar only — NOT the menu sheet's <nav>) ──
     Force a strict single-row layout: logo flex-start, burger flex-end,
     both vertically centred against a fixed-height row. */
  nav[style*="position: fixed"] {
    padding: 0 16px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    column-gap: 0 !important;
    grid-template-columns: none !important;
    height: 60px !important;
    min-height: 60px !important;
    box-sizing: border-box !important;
  }
  nav[style*="position: fixed"] > a:first-child {
    display: inline-flex !important;
    align-items: center !important;
    height: 100% !important;
    flex: 0 0 auto !important;
    line-height: 0 !important;
    align-self: center !important;
  }
  nav[style*="position: fixed"] > a:first-child img {
    height: 30px !important;
    width: auto !important;
    display: block !important;
  }
  nav[style*="position: fixed"] > div:nth-of-type(1) { display: none !important; }
  nav[style*="position: fixed"] > div:last-of-type {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    height: 100% !important;
    flex: 0 0 auto !important;
    gap: 0 !important;
    margin: 0 !important;
    align-self: center !important;
  }
  nav[style*="position: fixed"] .acre-nav-cta { display: none !important; }
  nav[style*="position: fixed"] .acre-nav-burger {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
    align-self: center !important;
    box-sizing: border-box !important;
  }

  /* ── Hero (homepage) ── */
  section[style*="height: 100vh"] {
    height: 100vh !important;
    min-height: 620px !important;
  }
  section[style*="height: 100vh"] h1 {
    font-size: clamp(36px, 9.6vw, 56px) !important;
    line-height: 1.04 !important;
  }
  section[style*="height: 100vh"] > div[style*="bottom: 120"] {
    bottom: 80px !important;
    left: 20px !important;
    right: 20px !important;
  }
  section[style*="height: 100vh"] > div[style*="top: 100"] {
    top: 76px !important;
    right: 20px !important;
    font-size: 9.5px !important;
  }
  section[style*="height: 100vh"] > div[style*="bottom: 40"] {
    left: 20px !important; bottom: 24px !important;
  }

  /* ── Eyebrows ── */
  [style*="letter-spacing: 0.2em"],
  [style*="letter-spacing: 0.22em"],
  [style*="letter-spacing: 0.24em"],
  [style*="letter-spacing: 0.28em"] {
    font-size: 9px !important; letter-spacing: 0.2em !important;
  }

  /* ── Marquee ── */
  section[style*="overflow: hidden"] [style*="font-style: italic"][style*="36"] {
    font-size: 20px !important;
  }
  section[style*="32px 0"] { padding: 18px 0 !important; }

  /* ── Buttons / pills ── */
  button, a > span[style*="border-radius: 9999"] {
    font-size: 10.5px !important;
    letter-spacing: 0.18em !important;
  }

  /* ── Forms ── */
  input, textarea, select { font-size: 16px !important; }
  form [style*="grid-template-columns: 1fr 1fr"] { display: block !important; }
  form [style*="grid-template-columns: 1fr 1fr"] > div { margin-bottom: 16px !important; }

  /* ── Visit map ── */
  [style*="aspect-ratio"][style*="4 / 5"] { width: 100% !important; max-width: 100% !important; }

  /* ── Tournaments rows ── */
  #tournaments [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 22px 0 !important;
  }
  #tournaments [style*="grid-template-columns"] > * {
    margin-bottom: 4px !important;
  }
  #tournaments [style*="text-align: right"] {
    text-align: left !important;
    margin-top: 14px !important;
    display: block !important;
  }
  #tournaments [style*="fontSize: 22"], #tournaments [style*="font-size: 22"] {
    font-size: 19px !important;
    line-height: 1.2 !important;
  }
  #tournaments button, #tournaments a > span[style*="border-radius"] {
    font-size: 10px !important;
    letter-spacing: 0.18em !important;
    padding: 9px 16px !important;
    white-space: nowrap !important;
  }
  #tournaments h2 { font-size: 32px !important; }
  #tournaments h2 span { font-size: 1em !important; }
  #tournaments [style*="justify-content: space-between"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }

  /* ── Happenings ── */
  #happenings [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: 1fr !important;
  }
  #happenings [style*="justify-content: center"][style*="gap: 4"] {
    gap: 2px !important;
  }
  #happenings button { padding: 8px 12px !important; font-size: 10px !important; }

  /* ── Curtain intro ── */
  [aria-hidden="true"] img[src*="monogram"] { height: 160px !important; }

  /* ── GlassPadel reservation strip ── */
  section[id="reserve"] { padding: 32px 20px !important; }
  section[id="reserve"] [style*="justify-content: space-between"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 18px !important;
  }
  section[id="reserve"] [style*="22"][style*="line-height"] {
    font-size: 18px !important;
  }

  /* ── Cards stretching beyond width ── */
  [style*="min-width: 260"], [style*="min-width: 240"] { min-width: 0 !important; }

  /* ── Apparel hero ink band ── */
  section[style*="padding: 128px 48px 80px"],
  section[style*="200px 48px 88px"] {
    padding: 96px 20px 56px !important;
  }
  section[style*="padding: 128px 48px 80px"] h1,
  section[style*="200px 48px 88px"] h1 {
    font-size: clamp(34px, 9.4vw, 52px) !important;
  }

  /* ── Events hero stacked headline ── */
  h1[style*="flex-direction: column"] {
    font-size: clamp(34px, 9.4vw, 52px) !important;
  }

  /* ── Cafe page mobile fixes ── */

  /* CafeHero — collapse the absolute-positioned scribble cluster
     so it stacks cleanly under the headline on mobile, without overlap. */
  .cafe-hero-scribbles {
    position: static !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 16px !important;
    margin-top: 16px !important;
  }
  .cafe-hero-scribbles > * {
    position: static !important;
    top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
  }
  .cafe-hero-scribbles svg { max-width: 36vw !important; width: auto !important; height: auto !important; }
  .cafe-hero-scribbles > :first-child svg { max-width: 28vw !important; }   /* citrus */
  .cafe-hero-scribbles > :nth-child(2) svg { max-width: 52vw !important; }  /* smoothie */
  .cafe-hero-scribbles > :last-child svg  { max-width: 28vw !important; }   /* avocado */

  /* CafeStory "Café" — clamp min was 320px which overflows phone width. */
  .cafe-story-script {
    font-size: clamp(140px, 36vw, 220px) !important;
    line-height: 0.9 !important;
  }
  .cafe-story-script + div {
    bottom: -6px !important;
    right: 6vw !important;
  }
  .cafe-story-script + div svg { max-width: 36vw !important; height: auto !important; }

  /* CafeMenu — scribble icons get a touch smaller and centred */
  #menu [style*="grid-template-columns: 1fr 1fr 1fr"] > * + * {
    margin-top: 48px !important;
  }
  /* Hairline between menu sections on mobile */
  #menu [style*="grid-template-columns: 1fr 1fr 1fr"] > * + *::before {
    content: "";
    display: block;
    width: 40px;
    height: 1px;
    background: rgba(26,20,16,0.18);
    margin: 0 auto 28px;
  }

  /* CafeMoment — closing scribble + flanking icons */
  /* ── Mobile burger sheet — gentler court lines ── */
  div[aria-hidden][style*="background: rgb(139, 42, 31)"] svg g[stroke="#EFE9D6"] {
    stroke-width: 1 !important;
    opacity: 0.5 !important;
  }
  /* CafeMoment — closing scribble + flanking icons */
  .cafe-moment-icons svg { max-width: 18vw !important; height: auto !important; }
  .cafe-moment-hero svg { max-width: 28vw !important; height: auto !important; }
}

/* ─────────────────────────────────────────────────────────────
   TABLET — 721–1024px
   ───────────────────────────────────────────────────────────── */
@media (min-width: 721px) and (max-width: 1024px) {
  section { padding: 112px 36px !important; }
  h1 { font-size: clamp(56px, 10vw, 96px) !important; }
  h2 { font-size: clamp(36px, 6vw, 52px) !important; }
  nav { padding: 16px 28px !important; }
  [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: 1fr 1fr !important;
  }
  [style*="grid-template-columns: 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
  }
}