/* Valence — mobile & tablet refinements.
   Every rule lives inside a max-width media query, so the desktop layout
   (wider than 900px) is untouched. !important is needed because the pages
   style elements inline. */

/* ---------- Navigation (<=900px) ---------- */
@media (max-width: 900px) {
  html:not([data-page="home"]) body nav[data-screen-label="Nav"] { padding: 0 16px !important; gap: 10px !important; }
  html body [data-nav="toggle"][data-nav-global] { display: inline-flex !important; margin-left: auto; }
  html body [data-nav="links"]:not([data-open]) { display: none !important; }
  html.va-nav-open body [data-nav="links"]:not([data-open]) {
    display: flex !important; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 22px !important;
    padding: 26px 20px 30px; white-space: normal !important; font-size: 13px !important;
    background: #F2E9DE; border-bottom: 1px solid rgba(20,35,60,.14);
    box-shadow: 0 18px 40px rgba(16,26,43,.12);
  }
  html.va-nav-open body nav[data-screen-label="Nav"] { z-index: 85 !important; } /* above the shop's coming-soon card */
  html.va-nav-open body [data-nav="links"][data-nav-theme="dark"] {
    background: #101A2B; border-bottom-color: rgba(242,233,222,.14);
  }
  html:not([data-page="home"]) body [data-nav="links"] a { padding-top: 4px; padding-bottom: 4px; }
}
@media (max-width: 480px) {
  /* keep logo + MENU + primary CTA on one row */
  html:not([data-page="home"]) body nav[data-screen-label="Nav"] > a:last-child,
  html:not([data-page="home"]) body nav[data-screen-label="Nav"] > span:last-child,
  html:not([data-page="home"]) body nav[data-screen-label="Nav"] > div:last-child > button {
    padding: 11px 13px !important; font-size: 11px !important; letter-spacing: .12em !important;
  }
  html:not([data-page="home"]) body nav[data-screen-label="Nav"] > a:first-child img { height: 32px !important; }
  html:not([data-page="home"]) body [data-nav="toggle"] { padding: 10px 12px !important; }
}

/* ---------- Global safety (<=768px) ---------- */
@media (max-width: 768px) {
  html, body { overflow-x: clip; }
  html body img, html body video, html body svg { max-width: 100%; }
  html body input, html body select, html body textarea { font-size: 16px !important; } /* stops iOS zoom-on-focus */
}

/* ---------- Layout: tablets & phones (<=768px) ---------- */
@media (max-width: 768px) {
  /* side gutters: the desktop 72px gutter becomes 20px */
  html:not([data-page="home"]) body [style*=" 72px"] { padding-left: 20px !important; padding-right: 20px !important; }
  /* tall desktop section spacing, scaled down */
  html:not([data-page="home"]) body section[style*="padding: 130px"], html:not([data-page="home"]) body section[style*="padding: 120px"] { padding-top: 76px !important; padding-bottom: 76px !important; }
  html:not([data-page="home"]) body header[style*="padding: 1"][style*=" 72px"], html:not([data-page="home"]) body section[style*="padding: 180px"] { padding-top: 116px !important; padding-bottom: 64px !important; }
  html:not([data-page="home"]) body section[style*="padding: 40px 72px 130px"] { padding-bottom: 76px !important; }
  html:not([data-page="home"]) body [style*="padding: 160px 72px 80px"] { padding-top: 88px !important; padding-bottom: 56px !important; }
  html:not([data-page="home"]) body footer[style*="padding"] { padding-top: 56px !important; }

  /* multi-column grids stack to one column */
  html:not([data-page="home"]) body :is(main, section, header, footer) [style*="grid-template-columns"]:not([style*="1fr 1fr; gap: 2px"]):not([style*="64px 1fr auto"]):not([style*="1fr) 24px"]):not([data-specs]),
  html:not([data-page="home"]) body :is(section, header)[style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
  /* large desktop gaps */
  html:not([data-page="home"]) body [style*="gap: 80px"], html:not([data-page="home"]) body [style*="gap: 70px"], html:not([data-page="home"]) body [style*="gap: 64px"],
  html:not([data-page="home"]) body [style*="gap: 60px"], html:not([data-page="home"]) body [style*="gap: 56px"] { gap: 36px !important; }

  /* footer link rows wrap instead of running off-screen */
  html:not([data-page="home"]) body footer [style*="display: flex"][style*="gap: 28px"] { flex-wrap: wrap !important; gap: 16px 22px !important; }
  html:not([data-page="home"]) body footer [style*="display: flex"] { flex-wrap: wrap; }

  /* wide CTA buttons can shrink */
  html:not([data-page="home"]) body a[style*="padding: 19px 40px"], html:not([data-page="home"]) body button[style*="padding: 20px 40px"] { padding-left: 26px !important; padding-right: 26px !important; max-width: 100%; box-sizing: border-box; text-align: center; }
}

/* ---------- Page-specific (<=768px) ---------- */
@media (max-width: 768px) {
  /* About · Principles: stacked cards get even gutters and a rule between them */
  html body [data-screen-label="Principles"] [style*="grid-template-columns"] > div {
    padding: 30px 0 34px !important; border-right: none !important; border-bottom: 1px solid rgba(210,172,119,.3) !important;
  }
  html body [data-screen-label="Principles"] [style*="grid-template-columns"] > div:last-child { border-bottom: none !important; }

  /* Services: chapter copy aligns to the same gutter as the hero */
  html body [data-chapter] > div[data-copy] { padding-left: 0 !important; padding-right: 0 !important; }
  /* Services: the closing section no longer needs to fill a full screen */
  html body [data-screen-label="Services CTA"] { min-height: 0 !important; }
  /* Services: decorative scroll cue overlapped the hero copy */
  html body [data-screen-label="Services hero"] > div[style*="bottom: 28px"] { display: none !important; }
}
@media (max-width: 480px) {
  /* Services: long treatment names (e.g. Neuromodulators) must fit a phone width */
  html body [data-chapter] h2 { font-size: min(54px, 11vw) !important; overflow-wrap: break-word; }
}
@media (max-width: 400px) {
  /* Home: "nanometers" is too long for the 44px minimum on small phones */
  html body [data-screen-label="Technology teaser"] h2 { font-size: 38px !important; }
}
@media (max-width: 480px) {
  /* Home: technology card kept its 40px desktop padding and pushed the column wider than the screen */
  html body [data-screen-label="Technology teaser"] > div { grid-template-columns: minmax(0, 1fr) !important; }
  html body [data-screen-label="Technology teaser"] [style*="padding: 40px 40px 56px"] { padding: 30px 22px 40px !important; }
}
@media (max-width: 360px) {
  /* very small phones (iPhone SE 1st gen, small Androids): cap display headings */
  html body :is(h1, h2)[style*="font-size: clamp(5"], html body :is(h1, h2)[style*="font-size: clamp(6"], html body :is(h1, h2)[style*="font-size: clamp(7"] { font-size: 42px !important; }
  html[data-page="home"] body [data-screen-label="Hero"] h1 { font-size: 36px !important; }
}

/* ---------- Narrow tablets / small windows ---------- */
@media (max-width: 960px) {
  /* Book: the intake form needs the full width below ~960px */
  html body section[data-screen-label="Booking"][style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; gap: 48px !important; }
}
@media (max-width: 900px) {
  /* Technology: the three downtime cards stack instead of overflowing */
  html body [data-screen-label="Module index"] [style*="repeat(3, 1fr)"] { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ---------- Large screens (see wide.js) ---------- */
/* When the page is scaled up, keep full-screen sections exactly one screen tall. */
html.va-wide body [style*="min-height: 100vh"] { min-height: calc(100vh / var(--va-vf, 1)) !important; }
html.va-wide body [style*="height: 100vh"]:not([style*="min-height: 100vh"]):not([style*="max-height: 100vh"]) { height: calc(100vh / var(--va-vf, 1)) !important; }
html.va-wide body [style*="max-height: 100vh"] { max-height: calc(100vh / var(--va-vf, 1)) !important; }
html.va-wide body [style*="max-height: calc(100vh - 48px)"] { max-height: calc(100vh / var(--va-vf, 1) - 48px) !important; }