/* Mobile optimizations for the exported design (which ships desktop-only inline styles).
   Loaded on every page after the DS styles. Kept override-heavy on purpose. */

@media (max-width: 860px) {
  html, body { max-width: 100%; }
  body { overflow-x: clip; }   /* clip (not hidden) — prevents sideways scroll WITHOUT breaking vertical scroll/sticky */
  img, svg, video, image-slot { max-width: 100%; height: auto; }

  /* Collapse every multi-column inline grid to a single column */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* Headings must wrap on mobile (the design forces white-space:nowrap on several) */
  h1, h2, h3 { white-space: normal !important; overflow-wrap: break-word; }

  /* Nav: compact single-row bar (logo + primary CTA + theme). Hide the long text menu +
     language switcher so it doesn't overflow/overlap. (Full menu still reachable from page body.) */
  nav { flex-wrap: nowrap !important; justify-content: space-between !important;
    gap: 10px !important; padding: 12px 16px !important; background: var(--pp-bg) !important;
    border-bottom: 1px solid var(--pp-line) !important; }
  nav > div { gap: 10px !important; flex-wrap: nowrap !important; }
  nav > div a:not([href="/survey"]) { display: none !important; }  /* text menu links (keep Survey CTA) */
  nav > div > span { display: none !important; }                   /* current-page label (subpages) */
  nav [data-lang] { display: none !important; }                    /* language switcher */

  /* Hero was height:100vh + overflow:hidden -> clipped the stacked content */
  section#top { height: auto !important; min-height: 0 !important; }
  section#top > div { height: auto !important; overflow: visible !important; padding: 92px 0 48px !important; }
  [data-hero-copy] { max-width: 100% !important; }
  [data-mark] { width: min(210px, 52vw) !important; height: auto !important; margin: 0 auto 8px !important; }
  [data-scroll-cue] { display: none !important; }

  /* Photo/mission band: stack normally, turn the absolute cover image into a full-width top band */
  section#why { min-height: 0 !important; display: block !important; }
  section#why [data-photo-inner] { position: relative !important; inset: auto !important;
    width: 100% !important; height: 220px !important; margin-bottom: 8px; }
  section#why [data-photo-inner] image-slot, section#why [data-photo-inner] img { width: 100% !important; height: 100% !important; object-fit: cover; }
  section#why [data-photo-inner] + div { display: none !important; }  /* the desktop side-fade overlay */
  /* #why content had its own horizontal padding on top of the section padding (40px vs 20px
     everywhere else) -> zero the inner padding so it lines up with the other sections */
  section#why > div:not([data-photo-inner]) { padding-left: 0 !important; padding-right: 0 !important; }

  /* Ease big section paddings a touch */
  section { padding-left: clamp(16px, 5vw, 24px) !important; padding-right: clamp(16px, 5vw, 24px) !important; }

  /* Bottom of page: the community section ships 90-150px vertical padding -> big empty band on
     mobile. Trim it, and tidy the footer so it doesn't float in whitespace. */
  section#notes { padding-top: 52px !important; padding-bottom: 52px !important; }
  footer { padding-top: 40px !important; padding-bottom: 48px !important; }
  footer > div { gap: 26px !important; }
  footer > div > div:first-child { max-width: 100% !important; }
}

@media (max-width: 520px) {
  h1 { font-size: clamp(30px, 11vw, 42px) !important; }
  h2 { font-size: clamp(24px, 7vw, 34px) !important; }
}