/* ==========================================================================
   Responsive layer — breakpoints: 1280 · 1100 · 960 (menu) · 860 · 720 · 480 · 360
   Tested target widths: 320, 360, 390, 430, 768, 1024, 1366, 1920 px.
   ========================================================================== */

/* Large desktops: keep content comfortable */
@media (min-width: 1600px) {
  :root { --container: 1280px; }
}

/* Laptops / small desktops: tighten the header */
@media (max-width: 1180px) {
  .nav-link, .dropdown-toggle { padding-inline: .5rem; font-size: .9rem; }
  .brand-sub { display: none; }
}

/* Navigation collapses into a hamburger menu */
@media (max-width: 960px) {
  .nav-toggle { display: inline-flex; flex: 0 0 48px; }
  .site-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--border); box-shadow: var(--shadow-hover);
    max-height: calc(100vh - var(--header-h));
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto; overscroll-behavior: contain;
    display: none;
  }
  .site-nav.is-open { display: block; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; padding: 10px clamp(18px, 4vw, 40px) 18px; }
  .nav-list > li { border-bottom: 1px solid #EEF2F6; }
  .nav-list > li:last-child { border-bottom: 0; }
  .nav-link, .dropdown-toggle {
    width: 100%; min-height: 52px; padding: .8rem .5rem; font-size: 1.02rem; border-radius: 0; justify-content: space-between;
  }
  .nav-link[aria-current="page"] { box-shadow: inset 3px 0 0 var(--teal); padding-left: .9rem; }
  .dropdown, .has-dropdown .dropdown {
    position: static; box-shadow: none; border: 0; border-radius: 0; background: var(--bg);
    min-width: 0; padding: 0; margin: 0 0 10px; display: none;
  }
  .has-dropdown .dropdown { display: none !important; }
  .has-dropdown .dropdown.is-open { display: block !important; }
  .dropdown a { padding: .85rem 1rem .85rem 1.2rem; min-height: 48px; display: flex; align-items: center; }
  .header-inner { position: relative; }
  .site-header .header-inner { flex-wrap: nowrap; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .split, .hero-grid { grid-template-columns: 1fr; }
  .portrait-card { max-width: 460px; width: 100%; justify-self: start; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filter-bar { grid-template-columns: 1fr 1fr; }
  .filter-bar .field--search { grid-column: 1 / -1; }
}

/* Tablets */
@media (max-width: 860px) {
  .figure-pair { grid-template-columns: 1fr; }
  .key-facts { grid-template-columns: 1fr; }
}

/* Phones */
@media (max-width: 720px) {
  :root { --header-h: 68px; }
  body { font-size: .98rem; line-height: 1.65; }
  .brand img { width: 36px; height: 36px; flex-basis: 36px; }
  .brand-name { font-size: 1rem; }
  .grid-2, .grid-3, .grid-4, .form-grid, .figure-pair { grid-template-columns: 1fr; }
  .filter-bar { grid-template-columns: 1fr; padding: 14px; }
  .details-panel dl { grid-template-columns: 1fr; gap: 2px; }
  .details-panel dd { margin-bottom: 10px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .form-grid .full, .form-grid > * { grid-column: auto; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn, .form-actions .btn { width: 100%; }
  .btn { white-space: normal; }
  .hero .btn-row .btn { width: 100%; }
  .timeline { padding-left: 24px; }
  .timeline::before { left: 5px; }
  .timeline li::before { left: -24px; width: 14px; height: 14px; }
  .glossary-item { padding: 18px; }
  .card { padding: 20px; }
  .callout { padding: 22px; }

  /* Tables become stacked "label: value" blocks */
  .table-wrap.stack-on-mobile { border: 0; background: transparent; overflow: visible; }
  .table-wrap.stack-on-mobile table, .table-wrap.stack-on-mobile tbody, .table-wrap.stack-on-mobile tr, .table-wrap.stack-on-mobile td { display: block; width: 100%; }
  .table-wrap.stack-on-mobile thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table-wrap.stack-on-mobile tr { background: #fff; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 14px; overflow: hidden; }
  .table-wrap.stack-on-mobile td { border-bottom: 1px solid var(--border); padding: 10px 14px; }
  .table-wrap.stack-on-mobile td:last-child { border-bottom: 0; }
  .table-wrap.stack-on-mobile td::before { content: attr(data-label); display: block; font-weight: 700; color: var(--navy); font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 2px; }
}

/* Small phones (320–430 px) */
@media (max-width: 480px) {
  .container { padding-inline: 16px; }
  .section { padding-block: 44px; }
  .hero-grid { padding-block: 44px 56px; }
  .hero h1 { font-size: clamp(1.9rem, 8vw, 2.25rem); }
  h2 { font-size: 1.5rem; }
  .page-hero h1 { font-size: 1.8rem; }
  .eyebrow { font-size: .74rem; letter-spacing: .08em; }
  .section-head { margin-bottom: 24px; }
  .portrait-card { padding: 10px; border-radius: 14px; }
  .portrait-card figcaption { padding: 10px 4px 2px; }
  .lead { font-size: 1.04rem; }
  .pub-card .pub-badges .tag { font-size: .74rem; }
  .breadcrumb { font-size: .85rem; }
  .nav-link, .dropdown-toggle { font-size: 1rem; }
  .chip-row .chip { flex: 0 1 auto; }
  .btn { padding-inline: 1rem; }
  .figure figcaption { font-size: .86rem; }
}

/* Very small (320 px) */
@media (max-width: 360px) {
  .brand-name { font-size: .95rem; }
  .brand { gap: 9px; }
  .nav-toggle { width: 44px; height: 44px; }
  .key-facts div { padding: 12px; }
  .timeline li { margin-bottom: 20px; }
}

/* Touch devices: larger hit areas for the dropdown buttons and chips */
@media (hover: none) and (pointer: coarse) {
  .dropdown a, .nav-link, .dropdown-toggle { min-height: 48px; }
  .glossary-letters a { min-width: 44px; min-height: 44px; }
}

/* Print-friendly sizing hooks kept here for narrow viewports */
@media (max-width: 720px) {
  .sticky-mobile-off { position: static; }
}