/* =========================================================
   responsive.css — breakpoint styles for all pages
   ─────────────────────────────────────────────────────────
   Tablet   ≤  768px  (tablet / landscape phone)
   Mobile   ≤  480px  (phone)
   ─────────────────────────────────────────────────────────
   Base styles live in assets/css/main.css
   Page-specific base styles in assets/css/{page}.css
   ========================================================= */


/* ══════════════════════════════════════════════════════════
   TABLET  ≤ 768px
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Nav ─────────────────────────────────────────────── */
  .nav-inner    { padding: 0.5rem 1.25rem; min-height: 60px; }
  .nav-title    { display: none; }        /* drop site title — logo is enough */
  .nav-vbar     { display: none; }
  .nav-btn      { padding: 0 0.6rem; height: 52px; flex-shrink: 0; white-space: nowrap; }
  .nav-links    { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; scrollbar-width: none; }
  .nav-links::-webkit-scrollbar { display: none; }

  /* ── Hero (home) ─────────────────────────────────────── */
  .hero         { padding: 4rem 1.5rem 3.5rem; }
  .hero-sub     { margin: 1rem auto 2rem; }

  /* ── Colophon ────────────────────────────────────────── */
  .colophon     { padding: 0 1.25rem 2.5rem; }

  /* ── Page header (tools / researchers) ──────────────── */
  .page-header       { padding: 2.5rem 1.25rem 2rem; }
  .page-title        { font-size: clamp(1.8rem, 5vw, 2.6rem); }

  /* ── Tools: container & access key ──────────────────── */
  .container         { padding-left: 1.25rem; padding-right: 1.25rem; }
  .tools-container   { padding-top: 1.5rem !important; padding-bottom: 2.5rem !important; }
  .access-key        { flex-direction: column; align-items: flex-start; gap: 0.5rem; }

  /* Prompt block */
  .prompt-block      { padding: var(--prompt-pad-top) 1.25rem 1.1rem; }
}


/* ══════════════════════════════════════════════════════════
   MOBILE  ≤ 480px
   ══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* ── Nav ─────────────────────────────────────────────── */
  .nav-inner      { padding: 0.4rem 1rem; }
  .dddi-logo--nav { height: 28px; }
  .nav-ext        { display: none; }           /* hide DataPoints link */
  .nav-btn        { padding: 0 0.45rem; height: 48px; }
  .theme-toggle   { margin-left: 0.4rem; padding: 0.25rem 0.4rem; }
  .theme-toggle svg { width: 13px; height: 13px; }

  /* ── Hero ────────────────────────────────────────────── */
  .hero           { padding: 3rem 1rem 2.5rem; }
  .hero-sub       { margin: 0.85rem auto 1.75rem; font-size: 0.88rem; }
  /* The institutional line wraps to two lines at this width; trimmed so it stays a
     caption to the title rather than competing with it. */
  .hero-eyebrow   { font-size: 0.78rem; letter-spacing: 0.1em; margin-bottom: 1rem; }
  .btn-row        { flex-direction: column; align-items: center; gap: 0.6rem; }
  .btn-dark,
  .btn-ghost      { width: 100%; max-width: 260px; text-align: center; padding: 0.65rem 1.5rem; }

  /* ── Colophon ────────────────────────────────────────── */
  .colophon       { padding: 0 1rem 2rem; }
  .colophon-inner { padding: 1.5rem; }

  /* ── Page header ─────────────────────────────────────── */
  .page-header    { padding: 2rem 1rem 1.5rem; }
  .page-title     { font-size: clamp(1.55rem, 6vw, 2rem); }

  /* ── Tools ───────────────────────────────────────────── */
  .container      { padding-left: 1rem; padding-right: 1rem; }
  .tools-container { padding-top: 1rem !important; padding-bottom: 1.5rem !important; }
  .filter-row     { gap: 0.3rem; }
  .fpill          { padding: 0.25rem 0.65rem; }
  .access-key     { padding: 0.6rem 0.85rem; gap: 0.4rem; }

  .prompt-block   { padding: var(--prompt-pad-top) 1rem 1rem; }

  /* ── Footer ──────────────────────────────────────────── */
  .footer-inner   { flex-direction: column; gap: 0.75rem; text-align: left; align-items: flex-start; }
  .footer-links ul { gap: 0.35rem 0.9rem; }
  .footer-copy    { margin-left: 0; text-align: left; }
}