/* ============================================================
   MOBILE — small-screen corrections that span components.
   Loaded last, so it wins over the per-component media queries.
   ============================================================ */

/* Long fee/cutoff prose and wide tables must scroll inside their own box
   rather than pushing the whole page sideways. */
.table-scroll,
.data-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 1040px) {
  /* The filter bar sticks under a shorter header on mobile. */
  .filter-bar { top: 68px; }
}

@media (max-width: 768px) {
  :root {
    --section-y: 56px;
    --space-4xl: 64px;
  }

  .hero { padding-block: var(--space-2xl) var(--space-xl); }
  .hero h1 { font-size: clamp(1.9rem, 8vw, 2.5rem); }
  .hero-lede { font-size: var(--text-base); }
  .hero-trust { gap: var(--space-sm) var(--space-md); }
  .hero-trust-item { font-size: var(--text-xs); }

  /* Two buttons side by side get too narrow to read at ~360px. */
  .college-card-actions { flex-direction: column; }
  .college-card-actions .btn { width: 100%; }

  .cta-actions { flex-direction: column; }
  .cta-actions .btn { width: 100%; }

  .section-head p { font-size: var(--text-base); }

  /* Tables on a college page: let them scroll, don't squeeze the columns. */
  .data-table { display: block; overflow-x: auto; white-space: normal; }
  .data-table th { width: auto; min-width: 130px; }

  /* Filter bar wraps to two rows; make each control full width. */
  .filter-row { gap: var(--space-sm); }
  .filter-search { min-width: 100%; }
  .filter-select { flex: 1; min-width: calc(50% - var(--space-sm)); }
  .filter-count { width: 100%; }
}

@media (max-width: 560px) {
  .container { padding-inline: var(--space-md); }

  /* The topbar email overflows on narrow phones — the call bar covers phone
     and WhatsApp anyway, so keep only what fits. */
  .topbar-item.email { display: none; }

  .fact-strip { margin-top: 0; border-radius: var(--radius-md); }
  .fact-cell { padding: var(--space-md); }

  .breadcrumb { font-size: 0.68rem; }

  .modal-head, .modal-body { padding: var(--space-lg); }
  .popup-form { padding: var(--space-xl) var(--space-lg) var(--space-lg); }

  .footer-legal { gap: var(--space-md); }
}