/* KLO LIFE — responsive layer. Loaded in every page's <helmet>.
   Overrides inline grid/type declarations at mobile & tablet breakpoints.
   Desktop (1024px+) keeps the original inline design untouched. */

html, body { overflow-x: hidden; }
img, svg { max-width: 100%; }

/* Tap-target hygiene for nav/footer links on touch */
@media (hover: none) {
  a[data-r="foot-link"] { display: inline-block; padding: 4px 0; }
}

/* ============ TABLET : 768–1023px ============ */
@media (max-width: 1023px) {
  [data-r="cols3"] { grid-template-columns: repeat(2, 1fr) !important; }
  [data-r="foot"]  { grid-template-columns: 1fr 1fr !important; row-gap: 30px !important; }
}

/* ============ MOBILE : ≤767px ============ */
@media (max-width: 767px) {
  /* stack every multi-column band */
  [data-r="cols3"],
  [data-r="cols2"],
  [data-r="member"],
  [data-r="future"] { grid-template-columns: 1fr !important; }

  /* patent references : key-value pairs stacked, not a 2-col table */
  [data-r="kv"] { grid-template-columns: 1fr !important; gap: 2px !important; padding: 12px 0 !important; }
  [data-r="kv"] > div:first-child { text-transform: uppercase; }

  /* committee portrait: full-width, capped, centred */
  [data-r="member"] > div:first-child { max-width: 300px; margin: 0 auto; }
  [data-r="member"] { text-align: left; }

  /* footer: everything stacked, generous rhythm */
  [data-r="foot"] { grid-template-columns: 1fr !important; row-gap: 34px !important; }

  /* body measure & size tuned for phone reading */
  [data-r="body"] { font-size: 16.5px !important; line-height: 1.6 !important; }

  /* section-index rows: tighten the number gutter */
  [data-r="index-row"] { grid-template-columns: 44px 1fr !important; gap: 14px !important; }
  [data-r="index-cta"] { display: none !important; }

  /* manifesto: divider rules between stacked paragraphs */
  [data-r="mani-item"] { border-top: 1px solid #D7D3CC; padding-top: 28px; }
  [data-r="mani-item"]:first-child { border-top: 0; padding-top: 0; }

  /* ---- mobile legibility: keep the editorial look, add weight & air ---- */
  /* body copy: comfortable reading size + rhythm across the whole site */
  main p { font-size: 17px !important; line-height: 1.64 !important; text-wrap: pretty; }
  /* Bodoni display is hairline-thin at small sizes — give it more stroke */
  main h1 { font-weight: 600 !important; letter-spacing: -0.006em; }
  main h2, main h3 { font-weight: 600 !important; }
  main blockquote { font-weight: 600 !important; }
  /* mono labels/captions: a touch larger and looser to stay readable */
  figcaption { font-size: 11.5px !important; letter-spacing: 0.02em !important; line-height: 1.55 !important; }
}

/* ---- mobile logo: drop the illustrative seal, keep the KLO wordmark ---- */
@media (max-width: 767px) {
  [data-r="logo-mark"] { display: none !important; }
}

/* ============ HEADER nav / hamburger swap ============ */
[data-r="burger"] { display: none; }
@media (max-width: 767px) {
  [data-r="desktop-nav"] { display: none !important; }
  [data-r="burger"] { display: inline-flex !important; }
}

/* Full-screen editorial menu overlay (mobile) */
[data-r="menu-overlay"] {
  position: fixed; inset: 0; z-index: 60; background: #F4F1EA;
  opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
[data-r="menu-overlay"][data-open="1"] { opacity: 1; pointer-events: auto; }

/* ============ Publications collapsibles ============ */
/* On desktop the groups are always open and the toggle chevron is hidden. */
@media (min-width: 768px) {
  [data-r="pub-body"] { display: block !important; }
  [data-r="pub-chevron"] { display: none !important; }
  [data-r="pub-head"] { cursor: default !important; }
}