/* =========================================================
   responsive.css — breakpoint styles for all pages
   ─────────────────────────────────────────────────────────
   Medium   ≤ 1024px  (compact desktop / large tablet)
   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
   ========================================================= */


/* ══════════════════════════════════════════════════════════
   MEDIUM  ≤ 1024px
   ══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* Researchers: narrow sidebar before it collapses */
  .sidebar { width: 180px; }
  .phase-content { padding: 2.5rem 2rem 4rem; }
  .phase-cols { gap: 1.5rem; }
}


/* ══════════════════════════════════════════════════════════
   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; font-size: 0.68rem; height: 52px; }

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

  /* ── Landing cards ───────────────────────────────────── */
  .landing-cards { padding: 2.5rem 1.25rem; gap: 1rem; }

  /* ── About strip ─────────────────────────────────────── */
  .about-strip  { 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; }

  /* ── Researchers: sidebar → horizontal tab bar ───────── */
  .researchers-wrap  { flex-direction: column; min-height: unset; padding: 0 1.25rem; }

  .sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 0.75rem 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .sidebar-sticky {
    position: static;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    padding: 0 1.25rem;
    white-space: nowrap;
  }

  .sidebar-label { display: none; }

  .phase-btn {
    display: inline-flex;
    align-items: center;
    width: auto;
    border-left: none;
    border-bottom: 2px solid transparent;
    padding: 0.5rem 1rem;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .phase-btn.active {
    border-left-color: transparent;
    border-bottom-color: var(--teal);
    background: rgba(43, 138, 138, 0.06);
  }

  /* Phase content area */
  .phase-content     { padding: 2rem 1.25rem 3rem; }
  .phase-big-num     { font-size: 4rem; margin-bottom: -1rem; }
  .phase-title       { font-size: 1.9rem; }

  /* Phase columns: 2-col → 1-col */
  .phase-cols        { grid-template-columns: 1fr; gap: 1.25rem; }

  /* Prompt block */
  .prompt-wrap       { margin-top: 1.5rem; }
  .prompt-block      { font-size: 0.76rem; padding: 1.1rem 1.25rem; }
}


/* ══════════════════════════════════════════════════════════
   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; font-size: 0.63rem; 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       { font-size: 0.78rem; margin: 0.85rem auto 1.75rem; }
  .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; }

  /* ── Landing cards ───────────────────────────────────── */
  .landing-cards  { padding: 2rem 1rem; gap: 1rem; }
  .lcard          { padding: 1.75rem 1.5rem; }
  .lcard h3       { font-size: 1.65rem; }

  /* ── About strip ─────────────────────────────────────── */
  .about-strip    { padding: 0 1rem 2rem; }
  .about-inner    { padding: 1.5rem; }

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

  /* ── 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          { font-size: 0.61rem; padding: 0.25rem 0.65rem; }
  .access-key     { font-size: 0.65rem; padding: 0.6rem 0.85rem; gap: 0.4rem; }

  /* ── Researchers ─────────────────────────────────────── */
  .researchers-wrap { padding: 0 1rem; }
  .sidebar        { padding: 0.5rem 0; }
  .sidebar-sticky { padding: 0 1rem; }
  .phase-btn      { padding: 0.4rem 0.75rem; font-size: 0.67rem; }
  .phase-num      { display: none; }        /* too tight — hide num labels */

  .phase-content  { padding: 1.5rem 1rem 2.5rem; }
  .phase-big-num  { font-size: 3rem; }
  .phase-title    { font-size: 1.5rem; }
  .phase-sub      { font-size: 0.67rem; }

  .check-list li  { font-size: 0.76rem; }
  .risk-list li   { font-size: 0.71rem; }
  .prompt-block   { font-size: 0.72rem; padding: 1rem; }

  /* ── Footer ──────────────────────────────────────────── */
  .footer-inner   { flex-direction: column; gap: 0.5rem; text-align: right; align-items: flex-end; }
}