/**
 * responsive.css
 * ─────────────────────────────────────────────────────────────────
 * All media queries in one place. Breakpoints:
 *
 *   900px  — Tablet:       narrower sidebar, tighter content padding
 *   700px  — Mobile:       sidebar becomes off-canvas drawer,
 *                          single-column layouts, toggle button shown
 *   400px  — Small mobile: card grid goes fully single-column
 *
 * Each breakpoint overrides only what needs to change — avoids
 * re-declaring full rules that are already correct at larger sizes.
 */

/* ── Tablet (≤ 900px) ─────────────────────── */
@media (max-width: 900px) {
  :root {
    --sidebar-w: 260px;
  }

  .cover           { padding: 60px 40px; }
  .content-wrapper { padding: 0 40px 80px; }
  .line-tabs        { margin: 20px -40px 0; padding: 0 40px; }
}

/* ── Mobile (≤ 700px) ─────────────────────── */
@media (max-width: 700px) {

  /* Sidebar: off-canvas drawer */
  #sidebar {
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    /* Sidebar width stays at its default; only position changes */
  }

  #sidebar.open {
    transform: translateX(0);
  }

  /* Remove sidebar offset from main — it's overlaid now */
  main              { margin-left: 0; }
  .reading-progress { left: 0; }

  .cover            { padding: 48px 24px; }
  .content-wrapper  { padding: 0 24px 60px; }
  .line-tabs         { margin: 20px -24px 0; padding: 0 24px; }

  /* Single-column grid layouts */
  .compare-grid      { grid-template-columns: 1fr; }
  .card-grid         { grid-template-columns: 1fr 1fr; }
  .circuit-cards     { grid-template-columns: 1fr; }
  .evolution-grid    { grid-template-columns: 1fr; }
  .flow-grid         { grid-template-columns: 1fr; }
  .model-compare     { grid-template-columns: 1fr; }
  .arch-branches     { grid-template-columns: repeat(2, 1fr); }
  .approach-grid     { grid-template-columns: 1fr; }
  .calc-grid         { grid-template-columns: 1fr; }
  .calc-final-body   { grid-template-columns: 1fr; }
  .calc-final-formula { border-right: none; border-bottom: 1px solid var(--border-soft); }

  /* Reveal toggle button on mobile */
  .sidebar-toggle   { display: flex; }

  /* ── Pipeline: vertical stack ─────────── */
  .pipeline {
    flex-direction: column;
    align-items: stretch;
    min-width: unset;
  }

  .pipeline-node { width: 100%; }

  /* Connector becomes a vertical bar */
  .pipeline-conn {
    flex: none;
    width: auto;
    height: 44px;
    padding-top: 0;
    flex-direction: row;
    justify-content: center;
  }

  .conn-track {
    width: 2px;
    height: 100%;
  }

  /* Vertical flowing gradient */
  .conn-track::before {
    background: linear-gradient(
      180deg,
      rgba(139, 105,  20, 0.15)  0%,
      rgba(196, 154,  48, 0.70) 50%,
      rgba(139, 105,  20, 0.15) 100%
    );
  }

  /* Downward-pointing arrowhead */
  .conn-track::after {
    right: auto;
    top: auto;
    bottom: -7px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 8px solid rgba(196, 154, 48, 0.75);
    border-bottom: none;
  }
}

/* ── Small mobile (≤ 400px) ───────────────── */
@media (max-width: 400px) {
  .card-grid { grid-template-columns: 1fr; }
}