/* Global mobile responsive overrides.
 *
 * Applies at viewport widths below 768px (Tailwind md breakpoint).
 *
 * Most templates hardcode desktop grids via inline styles like
 *   grid-template-columns: 1fr 360px
 *   grid-template-columns: repeat(8, 1fr)
 * which are unusable on phones. These rules catch the common patterns
 * via attribute selectors and force them to stack or wrap.
 *
 * Pages that genuinely need a different mobile layout (e.g. future
 * planner that benefits from horizontal scroll instead of stacking)
 * should opt out by using a class instead of inline style, then
 * override the class in their own stylesheet.
 */

/* Explicit horizontal-scroll wrapper for wide tables: templates wrap a
   <table>/grid in <div class="table-scroll"> and give the inner element
   a min-width. Lives OUTSIDE the media query on purpose — overflow-x:
   auto is a no-op wherever the table fits, and desktop viewports just
   above the 768px breakpoint (classic scrollbars eat layout width)
   would otherwise clip tables whose min-width exceeds the card. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 767px) {

  /* ---- two-column "main + sidebar" layouts -> stack vertically ---- */
  /* Scoped to descendants of main so fixed chrome outside main
     (e.g. the bottom tabbar) is never rewritten. */
  main [style*="grid-template-columns: 1fr 280px"],
  main [style*="grid-template-columns: 1fr 320px"],
  main [style*="grid-template-columns: 1fr 360px"],
  main [style*="grid-template-columns: 1fr 380px"],
  main [style*="grid-template-columns: 280px 1fr"],
  main [style*="grid-template-columns: 320px 1fr"],
  main [style*="grid-template-columns: 360px 1fr"],
  main [style*="grid-template-columns: 380px 1fr"],
  main [style*="grid-template-columns: 460px 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* ---- high-column inline grids -> stack or wrap ---- */
  main [style*="grid-template-columns: repeat(8, 1fr)"],
  main [style*="grid-template-columns: repeat(7, 1fr)"],
  main [style*="grid-template-columns: repeat(5, 1fr)"],
  main [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
  main [style*="grid-template-columns: repeat(6, 1fr)"],
  main [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ---- Tailwind grid-cols-N (no responsive prefix) ---- */
  main .grid.grid-cols-3:not([class*=":grid-cols-"]) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  main .grid.grid-cols-4:not([class*=":grid-cols-"]) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  main .grid.grid-cols-5:not([class*=":grid-cols-"]) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* ---- wide fixed-width table rows -> horizontal scroll ---- */
  .row-grid,
  .term-row,
  .rank-row,
  .course-row {
    min-width: 720px;
  }
  /* The closest semantic ancestor templates already have (section /
     .app-card) becomes the scroll container for those wide rows. */
  section:has(.row-grid),
  section:has(.term-row),
  section:has(.rank-row),
  section:has(.course-row),
  .app-card:has(.row-grid),
  .app-card:has(.term-row),
  .app-card:has(.rank-row),
  .app-card:has(.course-row) {
    overflow-x: auto;
  }

  /* ---- shared utilities for templates' own mobile layouts ---- */
  /* Two-line clamp for long course names (some gen-ed names embed a
     whole eligibility note) so they cannot flood cards and cells. */
  .u-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* ---- bottom tabbar safety: don't let content hide behind it ---- */
  body {
    padding-bottom: calc(70px + env(safe-area-inset-bottom));
  }

  /* ---- container padding tighter on phones ---- */
  main.container,
  main {
    padding-left: 12px;
    padding-right: 12px;
  }

  /* ---- larger tap targets (44px per Apple HIG / WCAG 2.5.8 guidance) ----
     min-height beats tokens.css's `height: 28px` regardless of cascade
     order, and .btn is inline-flex with centered content, so labels stay
     centered and button WIDTH is untouched (no horizontal overflow). */
  .btn-sm,
  button.btn-sm,
  a.btn-sm {
    min-height: 44px;
  }

  /* ---- text size adjust to prevent iOS zoom on input focus ---- */
  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  /* ---- hero stat cards (.app-card.p-4) tighter on small screens ---- */
  .app-card.p-4 {
    padding: 12px;
  }
}