/*
 * ============================================================
 *  RESPONSIVE.CSS — Breakpoints & Reduced-Motion Overrides
 * ============================================================
 *  All @media queries live here in one place so breakpoint
 *  logic is never scattered across multiple files.
 *
 *  BREAKPOINTS:
 *    ≤980px  — tablet: collapse two-col layouts to single col
 *    ≤640px  — mobile: full single-column, mobile nav menu
 *
 *  TO ADD A BREAKPOINT:
 *  Add a new @media block here. Reference any class from any
 *  other CSS file — you don't need to duplicate the rule.
 * ============================================================
 */


/* ============================================================
   TABLET  — max-width: 980px
   ============================================================ */
@media (max-width: 980px) {

  /* Collapse all two-column grids to single column */
  .two-col,
  .acad-intro,
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  /* Collapse 3-column grids to 2-column */
  .cards3,
  .stage-grid,
  .aud-row,
  .ind-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Stats grid: 2×2 instead of 4×1 */
  .stats-grid { grid-template-columns: 1fr 1fr; }

  /* Service cards: single column */
  .svc-grid { grid-template-columns: 1fr; }

  /* CTA boxes: stacked, with reduced padding */
  .discovery,
  .acad-cta {
    grid-template-columns: 1fr;
    padding: 38px 34px;
  }

  /* Decorative image offset border is too large for tablet */
  .img-frame::after { display: none; }

  /* Hide the long location label in topbar to save space */
  .topbar .tb-right span.hide-m { display: none; }
}


/* ============================================================
   MOBILE  — max-width: 640px
   ============================================================ */
@media (max-width: 640px) {

  /* Tighten section vertical padding */
  section { padding: 72px 0; }

  /* Narrower side padding on all .wrap elements */
  .wrap { padding: 0 20px; }

  /* All multi-column grids collapse to single column */
  .cards3,
  .stage-grid,
  .aud-row,
  .ind-grid,
  .stats-grid,
  .foot-grid {
    grid-template-columns: 1fr;
  }

  /* Contact form: two-field rows become one column */
  .f-row { grid-template-columns: 1fr; }

  /* Hero: less vertical padding */
  .hero-inner { padding: 84px 20px 96px; }

  /* Topbar: center the email link, hide the right group */
  .topbar-inner  { justify-content: center; }
  .topbar .tb-right { display: none; }

  /* ── Mobile nav ─────────────────────────────────────────── */

  /* Show the hamburger toggle button */
  .nav-toggle { display: block; }

  /* Nav links become a full-screen overlay */
  .nav-links {
    position:       fixed;
    inset:          0;           /* top:0 right:0 bottom:0 left:0 */
    background:     #fff;
    flex-direction: column;
    justify-content: center;
    gap:            28px;
    font-size:      19px;
    opacity:        0;
    pointer-events: none;        /* not clickable when hidden */
    transition:     opacity .25s;
    z-index:        110;         /* below .nav-toggle (120) so toggle stays tappable */
  }

  /* JS toggles .open on both the toggle button and this menu */
  .nav-links.open {
    opacity:        1;
    pointer-events: auto;
  }

  /* Adjust experience badge position for small screens */
  .exp-tab {
    left:    14px;
    bottom: -20px;
    padding: 16px 20px;
  }
}


/* ============================================================
   REDUCED MOTION
   Respects the user's OS-level "reduce motion" preference.
   Disables all animations and transitions sitewide.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {

  /* Kill all transitions and animations */
  * {
    animation:  none !important;
    transition: none !important;
  }

  /* Show fade elements immediately — no slide-in effect */
  .fade {
    opacity:   1;
    transform: none;
  }

  /* Parallax background scrolling can cause motion sickness */
  .stats-band { background-attachment: scroll; }
}