/* responsive.css — Global mobile safety net for MODE website.
   Strategy: attribute selectors match inline grid templates React renders
   into .jsx section modules. Each pattern covered with BOTH spacing
   variants — e.g. `repeat(3, 1fr)` AND `repeat(3,1fr)` — so this survives
   any CSS minifier or build-pipeline whitespace normalization.

   Note: the 3 homepage .astro components (Hero, Treatments, Philosophy)
   own their own scoped <style> blocks and do NOT rely on these rules.
   This file is the fallback for the 15 .jsx section modules. */

/* Header is position:fixed — offset anchor-link scrolls so targets land
   below the header, not under it. Applies globally at all viewports. */
html {
  scroll-padding-top: 80px;
}

/* ============================================================
   TABLET & MOBILE — ≤960px
   Desktop-first site collapses to stacked single column.
   ============================================================ */
@media (max-width: 960px) {
  html, body {
    overflow-x: hidden;
  }

  /* --- Section horizontal padding compression (40px → 24px) --- */
  section[style*="padding: 96px 40px"],
  section[style*="padding:96px 40px"],
  section[style*="padding: 120px 40px"],
  section[style*="padding:120px 40px"],
  section[style*="padding: 80px 40px"],
  section[style*="padding:80px 40px"],
  section[style*="padding: 60px 40px"],
  section[style*="padding:60px 40px"],
  section[style*="padding: 40px 40px"],
  section[style*="padding:40px 40px"],
  section[style*="padding: 160px 40px"],
  section[style*="padding:160px 40px"],
  section[style*="padding: 48px 40px"],
  section[style*="padding:48px 40px"],
  section[style*="padding: 140px 40px"],
  section[style*="padding:140px 40px"],
  footer[style*="padding"],
  header[style*="padding"] {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* --- Universal grid collapse ---
     Cover every grid template the site uses, both with and without
     space after the colon and between fr values. */
  [style*="grid-template-columns: repeat(2"],
  [style*="grid-template-columns:repeat(2"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns:repeat(4"],

  /* Ratio grids — both spacing variants */
  [style*="grid-template-columns: 1.1fr 1fr"],
  [style*="grid-template-columns:1.1fr 1fr"],
  [style*="grid-template-columns: 1.15fr 1fr"],
  [style*="grid-template-columns:1.15fr 1fr"],
  [style*="grid-template-columns: 1.2fr 1fr"],
  [style*="grid-template-columns:1.2fr 1fr"],
  [style*="grid-template-columns: 1.4fr 1fr"],
  [style*="grid-template-columns:1.4fr 1fr"],
  [style*="grid-template-columns: 1fr 1.2fr"],
  [style*="grid-template-columns:1fr 1.2fr"],
  [style*="grid-template-columns: 1fr 1.4fr"],
  [style*="grid-template-columns:1fr 1.4fr"],
  [style*="grid-template-columns: 1fr 1.6fr"],
  [style*="grid-template-columns:1fr 1.6fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr"],

  /* Mixed fr + fixed grids */
  [style*="grid-template-columns: 2fr 2fr 1fr"],
  [style*="grid-template-columns:2fr 2fr 1fr"],
  [style*="grid-template-columns: 2fr 1fr 1fr auto"],
  [style*="grid-template-columns:2fr 1fr 1fr auto"],
  [style*="grid-template-columns: 280px 1fr auto"],
  [style*="grid-template-columns:280px 1fr auto"],
  [style*="grid-template-columns: 240px 1fr"],
  [style*="grid-template-columns:240px 1fr"],
  [style*="grid-template-columns: 160px 1fr auto"],
  [style*="grid-template-columns:160px 1fr auto"],
  [style*="grid-template-columns: 100px 1fr auto"],
  [style*="grid-template-columns:100px 1fr auto"] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  /* --- Vertical padding compression --- */
  [style*="padding: 120px 40px"],
  [style*="padding:120px 40px"] { padding-top: 64px !important; padding-bottom: 64px !important; }
  [style*="padding: 96px 40px"],
  [style*="padding:96px 40px"]  { padding-top: 56px !important; padding-bottom: 56px !important; }
  [style*="padding: 160px 40px"],
  [style*="padding:160px 40px"] { padding-top: 96px !important; padding-bottom: 48px !important; }
  [style*="padding: 80px 40px"],
  [style*="padding:80px 40px"]  { padding-top: 48px !important; padding-bottom: 48px !important; }
  [style*="padding: 140px 40px"],
  [style*="padding:140px 40px"] { padding-top: 80px !important; padding-bottom: 56px !important; }

  /* --- Hero min-height collapse --- */
  [style*="minHeight: '90vh'"],
  [style*="min-height: 90vh"],
  [style*="min-height:90vh"] {
    min-height: auto !important;
    padding-top: 100px !important;
    padding-bottom: 56px !important;
  }

  /* --- Image aspect ratios stay responsive --- */
  [style*="aspectRatio: '4/5'"],
  [style*="aspect-ratio: 4/5"],
  [style*="aspectRatio: '4/3'"],
  [style*="aspect-ratio: 4/3"],
  [style*="aspectRatio: '16/9'"],
  [style*="aspect-ratio: 16/9"] {
    max-width: 100% !important;
  }

  /* --- Jumbo hero headlines — force cap --- */
  h1[style*="clamp(72px"],
  h1[style*="clamp(84px"],
  h1[style*="clamp(88px"],
  h1[style*="clamp(92px"],
  h1[style*="clamp(96px"],
  h1[style*="clamp(104px"] {
    font-size: clamp(48px, 10vw, 64px) !important;
  }

  /* --- Reading widths drop to 100% on mobile --- */
  [style*="maxWidth: 1360"],
  [style*="max-width: 1360"],
  [style*="max-width:1360"],
  [style*="maxWidth: 1200"],
  [style*="max-width: 1200"],
  [style*="max-width:1200"],
  [style*="maxWidth: 1080"],
  [style*="max-width: 1080"],
  [style*="max-width:1080"] {
    max-width: 100% !important;
  }

  /* --- Spread-flex rows --- */
  [style*="justify-content: space-between"][style*="flex-wrap"] {
    gap: 20px !important;
  }

  /* --- Booking widget full-screen on mobile --- */
  [role="dialog"][aria-modal="true"] {
    max-width: 100% !important;
  }

  /* --- Pullquote / large inline sizes shrink --- */
  [style*="font-size: 48"],
  [style*="fontSize: 48"] { font-size: 32px !important; }
  [style*="font-size: 64"],
  [style*="fontSize: 64"] { font-size: 40px !important; }
}

/* ============================================================
   PHONE — ≤820px
   Cap tall aspect-ratio images so a 4/5 portrait doesn't dominate
   the viewport once the grid has stacked.
   ============================================================ */
@media (max-width: 820px) {
  [style*="aspectRatio: '4/5'"],
  [style*="aspect-ratio: 4/5"] {
    max-height: 400px !important;
  }
}

/* ============================================================
   SMALL MOBILE — ≤480px
   Further compression for phones.
   ============================================================ */
@media (max-width: 480px) {
  section[style*="padding"],
  footer[style*="padding"],
  header[style*="padding"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  h1[style*="clamp"] {
    font-size: clamp(40px, 11vw, 56px) !important;
    letter-spacing: -0.02em !important;
  }

  h2[style*="clamp(34px"],
  h2[style*="clamp(32px"],
  h2[style*="clamp(36px"] {
    font-size: 30px !important;
  }

  [style*="grid-template-columns"] { gap: 24px !important; }

  [style*="max-width: 640"],
  [style*="max-width:640"],
  [style*="maxWidth: 640"] { max-width: 100% !important; }
}