/* =====================================================================
   RESPONSIVE
   All media queries for the site live in this file only. styles.css
   holds the base (desktop) layer; nothing here introduces new
   components, it only reflows existing ones.

   Breakpoints (aligned to Bootstrap 5.3):
     1199.98px  xl  — header collapses (matches .navbar-expand-xl)
      991.98px  lg  — 3-up grids drop to 2-up, splits stack
      767.98px  md  — 2-up grids drop to 1-up
      575.98px  sm  — padding tightens, tables scroll
   ===================================================================== */

/* ---------------------------------------------------------------------
   xl — 1199.98px : header / navigation
   The header is .navbar-expand-xl, so Bootstrap swaps to the hamburger
   at this width. The nav rules have to change at the same width or the
   collapsed menu renders as a row.
   --------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .main-nav { flex-direction: column; align-items: flex-start; gap: 14px; padding-top: 18px; padding-bottom: 6px; }
  .main-nav .btn-primary { margin-top: 4px; }
  .split { grid-template-columns: 1fr; gap: 40px; }
  .split-sticky { position: static; }
}

/* ---------------------------------------------------------------------
   lg — 991.98px
   --------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .hero { padding: 72px 24px 80px; }
  .page-hero { padding: 52px 0 56px; }
  .numbered-grid { grid-template-columns: repeat(2, 1fr); }
  .next-steps { grid-template-columns: repeat(2, 1fr); }
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
  .section-header-row { align-items: flex-start; gap: 28px; }
  .cta-inner { gap: 28px; }
}

/* ---------------------------------------------------------------------
   md — 767.98px
   --------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .stage-body { grid-template-columns: 1fr; gap: 24px; padding-left: 0; }
  .stage-col:last-child .stage-col-label { color: var(--color-crimson); }
  .scholarships-grid { grid-template-columns: 1fr; }
  .scholarship-card { padding: 24px; }
  .booking-grid { grid-template-columns: 1fr; gap: 40px; }
  .numbered-grid { grid-template-columns: 1fr; }
  .panel-grid { grid-template-columns: 1fr; }
  .next-steps { grid-template-columns: 1fr; }
  .result-grid { grid-template-columns: 1fr; }
  .apply-form .form-row-3 { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .page-hero .page-hero-meta { gap: 22px; }
  .prose { max-width: none; }
  .directory-list { max-height: none; }
}

/* ---------------------------------------------------------------------
   sm — 575.98px
   --------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .hero { padding: 56px 18px 64px; }
  .page-hero { padding: 40px 0 44px; }
  .page-hero .page-hero-lead { font-size: 16.5px; }
  .card { padding: 24px; }
  .panel { padding: 24px; }
  .numbered-item { padding: 24px; }
  .quiz-submit { flex-direction: column; align-items: flex-start; gap: 12px; }
  .accordion-trigger { grid-template-columns: 1fr auto; padding: 20px; gap: 8px 20px; align-items: start; }
  .stage-num { margin-top: 2px; }
  .accordion-title { font-size: 18px; line-height: 1.2; }
  .accordion-meta { grid-column: 2 / -1; justify-content: space-between; }
  .booking-form-wrap { padding: 20px; }
  .apply-form-wrap { padding: 22px; }
  .apply-success { padding: 26px 22px; }
  .stat-strip { grid-template-columns: 1fr; }
  .stat-value { font-size: 30px; }
  .hero-ctas .btn-primary, .hero-ctas .btn-outline,
  .cta-actions .btn-on-crimson, .cta-actions .btn-on-crimson-outline { width: 100%; text-align: center; }
  .directory-row { flex-wrap: wrap; gap: 8px 14px; padding: 14px 18px; }
  .directory-row .uni-index { width: auto; }
  .directory-row .uni-title { flex: 1 1 100%; order: 3; }
  .table-header-row { padding: 20px; }
  .table-footnote { padding: 14px 18px; }
  table th:first-child, table td:first-child { padding-left: 18px; }
  table th:last-child, table td:last-child { padding-right: 18px; }
  .footer-bottom { flex-direction: column; gap: 12px; }
}