/* ─────────────────────────────────────────
   RESPONSIVE STYLES — EXTRA-SMALL SCREENS (≤480px)
   ───────────────────────────────────────── */

@media (max-width: 480px) {
  .container {
    padding: 0.8rem;
  }
  header h1 {
    font-size: var(--fs-2xl);
  }
  header::before {
    font-size: var(--fs-4xl);
  }

  /* Typography adjustments */
  .def-head blockquote,
  .final-message blockquote,
  .centrepiece blockquote,
  .safety-centrepiece blockquote,
  .core-principle blockquote,
  .principle-block blockquote,
  .smoke-block blockquote,
  .circle-block blockquote,
  .prob-spectrum-head blockquote,
  .teaching-line blockquote {
    font-size: var(--fs-md);
  }

  .golden-rule h3,
  .reflection-rule h3,
  .selfcheck-rule h3,
  .pr-text-col h3,
  .osce-head h3,
  .loop-block-head h3,
  .wb-head h3,
  .tier-col h3,
  .cc-side h3,
  .example-card-head h4,
  .errors-block h3,
  .mistakes-block h3 {
    font-size: var(--fs-md);
  }

  /* Grids => single column */
  .domains-grid,
  .traits-grid,
  .pillars-grid,
  .four-q-grid,
  .socrates-grid {
    grid-template-columns: 1fr;
  }

  .paeds-clues-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Flow & pills */
  .fm-pills {
    flex-direction: column;
    gap: 0.4rem;
  }
  .fm-pill {
    width: 100%;
    text-align: center;
  }
  .takehome .th-pills,
  .summary-question,
  .fm-triad {
    flex-direction: column;
  }

  /* Specific smaller adjustments */
  .cycle-block h3,
  .thinking-tool-block h3,
  .framework-block h3,
  .four-q-block h3 {
    font-size: var(--fs-md);
  }
}