/* responsive.css — one place for phone/tablet fixes across the 6 pages.
   Loaded after the page's own <style>, so it wins on equal specificity. */

/* ---------- nav: real mobile menu instead of "hide everything but the button" ---------- */
@media (max-width: 860px) {
  .nav { flex-wrap: wrap; row-gap: 0; }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin-left: auto; padding: 0;
    border: 1px solid var(--line); border-radius: 10px; background: none; color: var(--text); cursor: pointer;
  }
  .nav-toggle svg { width: 20px; height: 20px; }
  .nav-toggle .i-x { display: none; }
  .nav.is-open .nav-toggle .i-x { display: block; }
  .nav.is-open .nav-toggle .i-bars { display: none; }

  .nav .nav-links {
    display: none; flex: 1 0 100%; flex-direction: column; align-items: stretch;
    gap: 2px; margin: 12px 0 4px; padding-top: 10px; border-top: 1px solid var(--line);
  }
  .nav.is-open .nav-links { display: flex; }
  /* undo the old "hide links on phones" rule */
  .nav a:not(.btn) { display: block; }
  .nav .nav-links > a, .nav .nav-drop-trigger { padding: 12px 6px; font-size: 17px; line-height: 24px; }
  .nav .nav-links > a.btn { margin-top: 10px; text-align: center; justify-content: center; }

  /* dropdowns become plain indented lists */
  .nav-drop { display: block; }
  .nav-drop::before { display: none; }
  .nav-drop-menu {
    position: static !important; display: grid !important; opacity: 1 !important; visibility: visible !important;
    transform: none !important; width: auto; min-width: 0; margin: 0 0 6px 14px; padding: 0 0 0 12px;
    border: 0; border-left: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none;
  }
  .nav-drop-menu a { padding: 9px 8px; font-size: 15px; }
  .nav-drop-menu a em { font-size: 12.5px; }
}
@media (min-width: 861px) { .nav-toggle { display: none; } }

/* ---------- type on phones: sizes come from type.css tokens (they already scale); only line-heights tighten ---------- */
@media (max-width: 760px) {
  h1 { line-height: 1.08 !important; }
  h2 { line-height: 1.15 !important; }
  h3 { line-height: 1.3 !important; }
  p, li { line-height: 1.6 !important; }
  .wrap { padding-inline: 18px; }
  /* tap targets */
  a.btn, button, .ch-tab, .lab-head { min-height: 44px; }
  .ch-tabs { gap: 0; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .ch-tab { white-space: nowrap; padding: 12px 14px; }
}

/* ---------- wide things that must scroll or stack on phones ---------- */
@media (max-width: 640px) {
  /* stopped-ideas lists in /method: label over text instead of a 150px column */
  [style*="grid-template-columns: 150px 1fr"] { grid-template-columns: 1fr !important; gap: 4px 0 !important; }
  /* SVG diagrams with min-width: allow horizontal scroll inside their card */
  [style*="min-width: 640px"] { min-width: 560px !important; }
  figure:has(> svg[style*="min-width"]), div:has(> svg[style*="min-width"]) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* tables */
  table { font-size: var(--fs-small); }
  /* creative frames: fit the column */
  .fbpost, .feed-slot { max-width: min(360px, 100%); }
  .feed-slot { flex: 0 0 min(300px, 84vw); }
  .ttpost, .feed-slot .ttpost { max-width: min(250px, 70vw); }
  /* hero split → stack, image after text */
  header .wrap { gap: 28px !important; padding-block: 44px 40px !important; }
  header .wrap > div[style*="flex: 0 1 340px"] { flex-basis: 220px !important; }
  /* band of headline figures: 2 columns, not 1 */
  .band [style*="grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px)"] { grid-template-columns: 1fr 1fr !important; gap: 22px 16px !important; }
  .band .num, .band [class*="num"] { font-size: var(--fs-h2) !important; }
}

/* ---------- large screens: cap line length, let the frame breathe ---------- */
@media (min-width: 1600px) {
  .wrap { max-width: 1000px; }
  p { max-width: 62ch; }
}

/* ---------- decorative ribbons behind the hero: don't crush a square image into a strip ---------- */
@media (max-width: 640px) {
  .ribbons--hero img { object-position: 50% 20%; opacity: .55; }
}

/* ---------- grids: a cell with a horizontal scroller inside must be allowed to shrink ---------- */
[style*="display: grid"] > div, .feed-grid > div { min-width: 0; }
[style*="display: grid"] > div > div[style*="overflow: hidden"] { max-width: 100%; }