/* ============================================================
   FORKAIA — Site-wide mobile polish layer
   Nov 5, 2026. Defensive overrides so legacy pages that were
   built desktop-first collapse cleanly on phones. Loaded on
   every page via <link> injection; does not fight page CSS
   except on known problem patterns (multi-column grids with
   fixed column tracks, cramped lists, overflowing hero titles,
   sub-44px tap targets).
   Scope: only engages below 760px. Desktop styling untouched.
   ============================================================ */

/* Opt-out hook: any element with .no-mobile-polish keeps its
   own layout even on phones. Use this on cases we don't want to
   touch (data tables, charts, intentionally horizontal grids). */

@media (max-width: 760px) {

  /* ------------ Global reset ------------ */
  html, body {
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
  }
  body {
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  /* ------------ Collapse any multi-column grid ------------ */
  /* Known pattern: grid-template-columns using repeat(N, ...) or
     explicit "1fr 1fr" / "Xpx 1fr" / etc. All collapse to a single
     column on phones unless the element opts out. Inline styles
     take CSS precedence over classes, so we also target style="*grid*". */
  [style*="grid-template-columns"]:not(.no-mobile-polish),
  .grid-2, .grid-3, .grid-4,
  .cols-2, .cols-3, .cols-4,
  .two-col, .three-col, .four-col {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* Specifically the syllabus-row used across course pages. */
  .syllabus-row {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 14px 0 !important;
  }

  /* ------------ Hero headlines ------------ */
  /* Clamp any very large hero font so it doesn't overflow a 375px viewport */
  h1.hero, h1.hero-xl, .hero-h1, .pg h1.hero, .pg h1 {
    font-size: clamp(34px, 9vw, 54px) !important;
    line-height: 1.04 !important;
    letter-spacing: -0.02em !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto;
  }
  h2, h2.stage-h, h2.section-h {
    font-size: clamp(22px, 5.5vw, 32px) !important;
    line-height: 1.15 !important;
  }

  /* ------------ Lists: prevent "one word per line" cramping ------------ */
  /* When a column collapses from 2 to 1, ul bullets need normal padding
     — many pages were pushing ul{padding-left:30px} inside a 50% column
     making each word wrap. */
  .college-card ul,
  .card ul,
  .panel ul {
    padding-left: 20px !important;
  }
  .college-card li,
  .card li,
  .panel li {
    font-size: 14px !important;
    line-height: 1.6 !important;
    padding-right: 4px !important;
  }

  /* ------------ Images / media never overflow ------------ */
  img, svg, video, iframe {
    max-width: 100% !important;
    height: auto !important;
  }

  /* ------------ Buttons + tap targets 44px minimum ------------ */
  a.btn, button, .btn, .btn-primary, .btn-primary-sun, .btn-ghost-ink,
  .cta, .cta-primary, .pill, .chip {
    min-height: 44px !important;
    padding-top: 11px !important;
    padding-bottom: 11px !important;
  }

  /* Chip / tag rows — wrap cleanly instead of forcing horizontal scroll */
  .chips, .tags, .course-chips, .pill-row {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* ------------ Navigation ------------ */
  /* Top nav on narrow screens: shrink gap, hide secondary links if too tight */
  .college-nav .inner,
  .nav .inner,
  nav .inner {
    gap: 12px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  .college-nav .inner > *,
  .nav .inner > * {
    font-size: 13px !important;
  }

  /* ------------ Page padding ------------ */
  .pg {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: 28px !important;
    padding-bottom: 60px !important;
  }

  /* ------------ Cards ------------ */
  .college-card, .card, .panel {
    padding: 20px 18px !important;
    border-radius: 14px !important;
  }

  /* ------------ Footer ------------ */
  .mega-footer .mf-inner,
  .college-foot .inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* ------------ Tables: scroll horizontally instead of overflowing ------------ */
  .table-wrap, .data-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* ------------ Forms ------------ */
  input, select, textarea {
    font-size: 16px !important; /* prevents iOS zoom on focus */
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ------------ Spacing between stacked columns of long text ------------ */
  .mf-col {
    margin-bottom: 12px !important;
  }
}

/* Extra-narrow phones (iPhone SE ~ 375px) */
@media (max-width: 400px) {
  h1.hero, h1.hero-xl, .pg h1 {
    font-size: clamp(30px, 8.5vw, 44px) !important;
  }
  .pg { padding-left: 14px !important; padding-right: 14px !important; }
}