/* ============================================================
   Global responsive layer — loaded on every page after the
   page's own <style>. Desktop (>=1025px) is left untouched
   except for overflow / media safety rules.
   ============================================================ */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { max-width: 100%; overflow-x: hidden; }

img, video { max-width: 100%; height: auto; }
img { display: block; }
.brand img, nav img { display: inline-block; }
iframe, embed, object { max-width: 100%; }
svg { max-width: 100%; }

pre, code { overflow-wrap: anywhere; }
h1, h2, h3, h4, p, li, td, th, blockquote { overflow-wrap: break-word; }

/* wide tables become swipeable */
.tbl-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
.tbl-scroll > table { min-width: 620px; }

/* horizontal scroll areas feel native on touch */
[class*="scroll"], .reveal:has(> .lvl-grid) { -webkit-overflow-scrolling: touch; }

/* safe-area insets (iPhone notch / home indicator) */
nav .nav-inner {
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
}
footer { padding-bottom: calc(28px + env(safe-area-inset-bottom)); }

/* full-height helpers on iOS Safari */
.vh100, .full-height { height: 100dvh; }

/* touch devices: hover-only affordances become always-visible */
@media (hover: none) {
  .nav-links a:hover, a:hover { transition: none; }
  [class*="card"]:hover, [class*="-card"] { transform: none !important; }
}

/* ---------- mobile navigation ---------- */
.nav-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line, rgba(0,0,0,.12));
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  padding: 0;
  flex: 0 0 auto;
}
.nav-burger span {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  position: relative;
  transition: .2s;
}
.nav-burger span::before, .nav-burger span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px;
  background: currentColor; transition: .2s;
}
.nav-burger span::before { top: -6px; }
.nav-burger span::after { top: 6px; }
.nav-burger[aria-expanded="true"] span { background: transparent; }
.nav-burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-burger[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

.nav-drawer {
  display: none;
  position: fixed;
  inset: 0 0 auto 0;
  top: var(--nav-h, 64px);
  max-height: calc(100dvh - var(--nav-h, 64px));
  overflow-y: auto;
  background: var(--bg, #fff);
  border-bottom: 1px solid var(--line, rgba(0,0,0,.12));
  padding: 14px max(18px, env(safe-area-inset-left)) calc(20px + env(safe-area-inset-bottom));
  z-index: 998;
  -webkit-overflow-scrolling: touch;
}
.nav-drawer.open { display: block; }
.nav-drawer a, .nav-drawer .lang {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 4px 6px;
  font-size: 15px;
  color: inherit;
  border-bottom: 1px solid var(--line, rgba(0,0,0,.08));
}
.nav-drawer .lang { border-bottom: 0; gap: 6px; }
.nav-drawer .btn {
  justify-content: center;
  margin-top: 12px;
  border-bottom: 0;
  min-height: 48px;
}
body.nav-open { overflow: hidden; }

/* ---------- tablets / small laptops ---------- */
@media (max-width: 1024px) {
  .pat-grid, .stages, .vt-stats, .wsp-facts, .wsp-grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wsp-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-grid, .vt-grid, .d-cols, .lvl-cols, .wsp-why { grid-template-columns: minmax(0, 1fr); }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav-links { display: none !important; }
  .nav-burger { display: inline-flex; }
}

/* ---------- large phones and below ---------- */
@media (max-width: 768px) {
  .wrap, .nav-inner, section > .wrap { padding-left: max(18px, env(safe-area-inset-left)); padding-right: max(18px, env(safe-area-inset-right)); }

  .pat-grid, .stages, .vt-stats, .wsp-facts, .wsp-grid3, .wsp-track,
  .foot-grid, .bk-two, .lvl-cols, .d-cols, .wsp-why, .stat-row, .metric-grid,
  .ins-grid, .day, .ph-row, .lvl-block, .bk-step, .pat-modal-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  h1 { font-size: clamp(28px, 8vw, 42px) !important; line-height: 1.12; }
  h2 { font-size: clamp(23px, 6.2vw, 32px) !important; line-height: 1.18; }
  h3 { font-size: clamp(18px, 4.8vw, 23px) !important; }
  p, li { font-size: clamp(14.5px, 3.9vw, 16.5px); }

  .btn, button, .nav-drawer a, input[type="submit"] {
    min-height: 44px;
  }
  .btn { display: inline-flex; align-items: center; justify-content: center; }
  input, select, textarea { font-size: 16px; } /* prevents iOS zoom-on-focus */

  .cta-card, .detail, .assess, [class*="-card"] { padding-left: 20px; padding-right: 20px; }
  .foot-base { flex-direction: column; gap: 10px; }
  .nav-right .btn-nav { display: none; }
  .nav-right { gap: 10px; }
}

/* ---------- small phones ---------- */
@media (max-width: 480px) {
  .wrap, .nav-inner { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  .brand { font-size: 15px; }
  .brand-txt .byline { font-size: 10px; }
  h1 { font-size: clamp(25px, 8.4vw, 34px) !important; }
  .cta-card, .detail, .assess { padding: 26px 18px !important; }
}