/* ============================================================
   RESPONSIVE — Mobile-first breakpoint overrides
   Default = 375px mobile. Override at 768 / 1024 / 1280.
   ============================================================ */

/* ── Tablet ≥ 768px ──────────────────────────────────────── */
@media (min-width: 768px) {

  /* Nav */
  .uv-nav__mobile-toggle { display: none; }
  .uv-nav__links { display: flex; }
  .uv-nav__mobile-menu { display: none !important; }

  /* Explore grid */
  .explore-grid {
    grid-template-columns: 240px 1fr;
  }

  /* School layout */
  .school-layout {
    grid-template-columns: 1fr 280px;
  }

  /* Auth layout */
  .auth-layout {
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
  }
  .auth-panel-photo { display: flex; }

  /* Dashboard */
  .dashboard-layout {
    grid-template-columns: 260px 1fr;
  }

  /* Rankings */
  .rankings-table__header,
  .rankings-table__row {
    grid-template-columns: 48px 1fr 100px 80px 100px 100px;
  }

  /* School stats row */
  .school-stats-row .wrap {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Cards */
  .school-card { flex-direction: row; }
  .school-card__thumb {
    width: 140px;
    height: auto;
    flex-shrink: 0;
  }

  /* Typography scale up */
  .display { font-size: clamp(36px, 5vw, 64px); }
}

/* ── Desktop ≥ 1024px ────────────────────────────────────── */
@media (min-width: 1024px) {

  /* Explore grid full sidebar */
  .explore-grid {
    grid-template-columns: 280px 1fr;
  }

  /* School banner taller */
  .school-banner { height: 380px; }

  /* School layout full sidebar */
  .school-layout {
    grid-template-columns: 1fr 320px;
    gap: 40px;
  }

  /* Dashboard full sidebar */
  .dashboard-layout {
    grid-template-columns: 300px 1fr;
    gap: 40px;
  }

  /* Rankings columns */
  .rankings-table__header,
  .rankings-table__row {
    grid-template-columns: 60px 1fr 120px 100px 120px 120px;
    padding: 18px 28px;
  }

  /* Category hub — 3 columns */
  .category-hub-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* School cards grid 3 col */
  .school-cards-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Stats row spacing */
  .school-stats-row {
    padding: 28px 40px;
  }

  /* Section padding */
  .section { padding: 100px 0; }
}

/* ── Wide ≥ 1280px ───────────────────────────────────────── */
@media (min-width: 1280px) {

  .explore-grid { grid-template-columns: 300px 1fr; }

  .school-cards-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ── Mobile overrides < 768px ────────────────────────────── */
@media (max-width: 767px) {

  /* Wrap padding shrink */
  .wrap { padding: 0 20px; }

  /* Nav */
  .uv-nav__links { display: none; }
  .uv-nav__mobile-toggle { display: flex; }
  .uv-nav__cta { display: none; }

  /* Explore: single column, hide sidebar */
  .explore-grid { grid-template-columns: 1fr; }
  .explore-sidebar {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 800;
    background: #fff;
    overflow-y: auto;
    padding: 24px;
  }
  .explore-sidebar.open { display: block; }
  .filter-toggle-btn { display: flex; }

  /* School: stack layout */
  .school-layout { grid-template-columns: 1fr; }
  .school-banner { height: 260px; }
  .school-stats-row .wrap { grid-template-columns: repeat(2, 1fr); }

  /* Auth: single column */
  .auth-layout { grid-template-columns: 1fr; }
  .auth-panel-photo { display: none; }
  .auth-panel-form { padding: 32px 24px; min-height: 100vh; }

  /* Dashboard: single column */
  .dashboard-layout { grid-template-columns: 1fr; }
  .dashboard-sidebar-card { margin-bottom: 24px; }

  /* Rankings: simplified */
  .rankings-table__header,
  .rankings-table__row {
    grid-template-columns: 40px 1fr 80px 80px;
    padding: 14px 16px;
    gap: 10px;
  }
  /* Hide less important columns */
  .rankings-table__header > *:nth-child(5),
  .rankings-table__header > *:nth-child(6),
  .rankings-table__row > *:nth-child(5),
  .rankings-table__row > *:nth-child(6) { display: none; }

  /* Review flow */
  .review-flow-wrap { padding: 24px 0 60px; }
  .category-rate-card { padding: 16px; }

  /* Step wizard: hide label text on mobile */
  .step-label { display: none; }

  /* School cards: 1 col */
  .school-cards-grid { grid-template-columns: 1fr; }
  .school-card { flex-direction: column; }
  .school-card__thumb { width: 100%; height: 160px; }

  /* Category hub: 2 col */
  .category-hub-grid { grid-template-columns: repeat(2, 1fr); }

  /* Section spacing */
  .section { padding: 56px 0; }

  /* Typography scale */
  .display { font-size: clamp(28px, 8vw, 44px); }
  .h2 { font-size: clamp(22px, 5.5vw, 32px); }

  /* Stat tiles: 2 col */
  .school-stats-row .wrap { grid-template-columns: repeat(2, 1fr); gap: 16px; }

  /* Modal */
  .modal-box { padding: 24px 20px; }

  /* Quote card */
  .quote-card { padding: 20px; }
  .quote-card blockquote { font-size: 17px; }
}

/* ── Print ───────────────────────────────────────────────── */
@media print {
  .uv-nav, .uv-footer, .modal-backdrop, .review-gate { display: none !important; }
  body { background: #fff; color: #000; }
}