/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE — breakpoints, mobile nav switch, layout collapses
   ───────────────────────────────────────────────────────────────────────
   Breakpoints:  1560px  desktop nav → hamburger
                  960px  sidebars stack
                  720px  cards to single column
                  520px  small phone refinements
   NOTE: the 1560px value is mirrored in js/nav.js — change both together.
   ═══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════ ≤ 1559px ══════════════════════════════════
   The full desktop nav measures wide alongside the
   full logo block and the APPLY NOW button. Below 1560px it can no longer
   fit without clipping, so we switch to the hamburger + mobile panel rather
   than shrink the logo — the header's strongest element by design.
   APPLY NOW remains visible at every width. */
@media (max-width: 1559px) {
  #primary-nav,
  .nav-list {
    display: none;
  }
  .hamburger { display: inline-flex; }

  :root { --header-h: 88px; --header-h-compact: 68px; }
  .hdr-crest { width: 56px; height: 56px; }
  #site-header.is-compact .hdr-crest { width: 46px; height: 46px; }

  /* Keep APPLY NOW visible at all times, per the header spec */
  .hdr-actions .btn { padding: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); }
}

/* ══════════════════════════ ≤ 1024px ══════════════════════════════════*/
@media (max-width: 1024px) {
  /* Footer: 4 cols → 2. Brand spans the top, campuses stay together. */
  .footer-top { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--sp-4) var(--sp-5); }
  .footer-brand-col { grid-column: 1 / -1; }
  .footer-campus-col { grid-column: 1 / -1; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--sp-4); }
  .footer-campus-col .footer-col-title { grid-column: 1 / -1; margin-bottom: 0; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ══════════════════════════ ≤ 960px ═══════════════════════════════════*/
@media (max-width: 960px) {
  .layout-sidebar { grid-template-columns: 1fr; gap: var(--sp-5); }
  .side-nav { position: static; }

  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .hero { min-height: 460px; }
  .hero-content { padding-block: var(--sp-7); }
}

/* ══════════════════════════ ≤ 820px ═══════════════════════════════════*/
@media (max-width: 820px) {
  .utility-inner {
    justify-content: flex-start;
    gap: var(--sp-2) var(--sp-3);
    padding-block: var(--sp-2);
  }
  .utility-links-desktop {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 var(--sp-1);
  }
  .utility-link,
  .translate-btn {
    min-height: 30px;
    padding: .35rem .55rem;
    font-size: var(--fs-xs);
  }

  .doc-row {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
  }
  .doc-icon { display: none; }
  .doc-download { width: 100%; justify-content: center; }

  .enroll-inner { flex-direction: column; align-items: flex-start; }
}

/* ══════════════════════════ ≤ 720px ═══════════════════════════════════*/
@media (max-width: 720px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .form-grid { grid-template-columns: 1fr; }

  .section-head { flex-direction: column; align-items: flex-start; }

  .footer-top { grid-template-columns: 1fr; gap: var(--sp-5); }
  .footer-campus-col { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .footer-authorizer-line { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }

  .hero h1 { font-size: clamp(1.9rem, 1.4rem + 3vw, 2.6rem); }
  .hero-ctas .btn { flex: 1 1 100%; }

  .timeline::before { left: 8px; }
  .timeline li { grid-template-columns: 1fr; gap: var(--sp-2); padding-left: var(--sp-6); }
  .timeline-year { text-align: left; color: var(--gold-deep); }
  .timeline-body { padding-left: 0; }
  .timeline-body::before { left: calc(var(--sp-6) * -1 + 2px); }

  .event-item { gap: var(--sp-4); }

  .recognition-item { flex-direction: column; text-align: center; }
}

/* ══════════════════════════ ≤ 520px ═══════════════════════════════════*/
@media (max-width: 520px) {
  :root { --header-h: 76px; --header-h-compact: 64px; }

  /* Mobile header: crest + compact name; slogan hides to save height.
     The name MUST be allowed to wrap here — "HIGHER GROUND ACADEMY" on a
     single unbreakable line is wider than a 390px viewport and pushes the
     whole page into horizontal overflow. */
  .header-inner { gap: var(--sp-2); }
  .hdr-logo { gap: var(--sp-2); max-width: none; }
  .hdr-crest { width: 46px; height: 46px; }
  .hdr-name { font-size: 0.88rem; line-height: 1.02; white-space: normal; }
  .hdr-slogan { display: none; }

  /* APPLY NOW shortens to APPLY on the smallest screens */
  .btn-apply .btn-apply-long { display: none; }
  .btn-apply .btn-apply-short { display: inline; }
  .hdr-actions { gap: var(--sp-2); }
  .hdr-actions .btn { padding-inline: var(--sp-3); }
  .utility-sep { display: none; }
  .utility-links-desktop {
    flex: 1 1 100%;
    gap: var(--sp-1);
  }

  .card-body { padding: var(--sp-4); }
  .doc-row { padding: var(--sp-4); }

  .step-list li { padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-4); }
  .step-list li::before { position: static; margin-bottom: var(--sp-3); }

  .event-item { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
  .event-date { width: auto; display: flex; align-items: baseline; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); }

  .btn { width: 100%; }
  .btn-inline { width: auto; }
}

/* ══════════════════════ Large screens ≥ 1440px ════════════════════════*/
@media (min-width: 1440px) {
  :root { --header-h: 112px; }
  .hdr-crest { width: 72px; height: 72px; }
}

/* ══════════════════════ Landscape phones ══════════════════════════════*/
@media (max-height: 500px) and (orientation: landscape) {
  .hero { min-height: 420px; }
  #mobile-nav .mnav-brand { padding-block: var(--sp-4); }
  #mobile-nav .mnav-brand img { width: 56px; height: 56px; }
}