/* ============================================================
   css/main.css
   MASTER STYLESHEET — IMPORT ORDER
   ─────────────────────────────────────────────────────────────
   This is the only stylesheet linked in index.html.
   Import order matters: variables → reset → base → components → sections.
   ============================================================ */

/* ── 1. Design tokens ── */
@import 'global/variables.css';

/* ── 2. Reset ── */
@import 'global/reset.css';

/* ── 3. Typography & base text styles ── */
@import 'global/typography.css';

/* ── 4. Layout utilities ── */
@import 'global/utilities.css';

/* ── 5. Reusable components ── */
@import 'components/buttons.css';
@import 'components/cards.css';
@import 'components/navbar.css';
@import 'components/footer.css';
@import 'components/forms.css';

/* ── 6. Section-specific styles ── */
@import 'sections/hero.css';
@import 'sections/academics.css';
@import 'sections/people.css';
@import 'sections/disclosures.css';

/* ═══════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS — GLOBAL OVERRIDES
   Place section-specific breakpoints in their own files.
═══════════════════════════════════════════════ */

/* Tablet landscape ≤1024px */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* Tablet portrait ≤768px */
@media (max-width: 768px) {
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .testi-card { min-width: 100%; }
}

/* Mobile ≤600px */
@media (max-width: 600px) {
  .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
}

/* Small mobile ≤380px */
@media (max-width: 380px) {
  .btn-group { flex-direction: column; }
  .btn-group a, .btn-group button { width: 100%; justify-content: center; text-align: center; }
  .adm-cta .btn-group { align-items: center; }
}

/* Touch-friendly targets */
@media (pointer: coarse) {
  .act-pill { padding: 12px 20px; }
}