/* ═══════════════════════════════════════════════════════════════
   MOBILE / RESPONSIVE STYLES — AK Commissions
   Loaded after all page <style> blocks to take cascade priority.
   Breakpoints: 900px (tablet/hamburger), 768px (mobile), 480px (small phone)
   ═══════════════════════════════════════════════════════════════ */

/* ── Shared section padding ───────────────────────────────────── */
@media (max-width: 768px) {
  .levels-sec, .ceu-sec, .docs-sec, .apply-sec, .faq-sec,
  .why-sec, .tracks-sec, .journey-sec, .news-sec, .cta-strip,
  .intro-sec, .contact-sec, .contact-section, .feature-sec, .about-hero-sec,
  .mission-sec, .board-sec, .history-sec, .verify-sec,
  .ethics-sec, .page-sec, .sec, .subscribe-sec,
  .upcoming-sec, .minutes-sec { padding: 56px 20px !important; }

  .sec-wrap { padding: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   HERO — HOME PAGE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .hero { min-height: 100svh; }
  .hero-photo { background-position: center top !important; }
  .hero-content { padding: 100px 20px 120px !important; }
  .hero h1 { font-size: clamp(28px, 8vw, 42px) !important; }
  .hero-sub { font-size: 15px !important; }
  .hero-ctas { flex-direction: column; gap: 10px !important; }
  .hero-ctas a { width: 100%; justify-content: center; text-align: center; }
  .hero-stats { gap: 20px !important; flex-wrap: wrap; }
  .hero-stat-div { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   PAGE HERO — TRACK PAGES
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .page-hero { height: 60vh !important; min-height: 420px !important; }
  .page-hero-photo { background-position: center top !important; }
  .page-hero-content { padding: 0 20px !important; }
  .page-hero h1 { font-size: clamp(26px, 7vw, 40px) !important; }
  .page-hero-sub { font-size: 14px !important; }
  .hero-ctas { flex-direction: column; gap: 10px !important; }
  .hero-ctas a { width: 100%; justify-content: center; text-align: center; }
}

/* ═══════════════════════════════════════════════════════════════
   INDEX — PATHS GRID (4 col → 2 col → 1 col)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .paths-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
  .paths-grid { grid-template-columns: 1fr !important; }
}

/* ═══════════════════════════════════════════════════════════════
   INDEX — TRACKS GRID (3 col → 1 col)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .tracks-grid { grid-template-columns: 1fr !important; }
}

/* ═══════════════════════════════════════════════════════════════
   INDEX — JOURNEY STEPS (3 col → 1 col)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .journey-steps { grid-template-columns: 1fr !important; gap: 24px !important; }
  .journey-steps::before { display: none !important; }
  .journey-step { padding: 20px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   INDEX — WHY GRID (2 col → 1 col, image below)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .why-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .why-image-col { order: -1; }
  .why-float-badge { bottom: -12px !important; right: 12px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   INDEX — NEWS GRID (3 col → 1 col)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .news-grid { grid-template-columns: 1fr !important; }
}

/* ═══════════════════════════════════════════════════════════════
   TRACK PAGES — CREDENTIAL LEVELS GRID
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .levels-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
  .levels-grid { grid-template-columns: 1fr !important; }
}

/* ═══════════════════════════════════════════════════════════════
   TRACK PAGES — PATHWAY ROW (wraps to multiple lines on mobile,
   no horizontal scroller)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .pathway-row {
    flex-wrap: wrap !important;
    row-gap: 10px !important;
    margin: 24px 0 40px !important;
  }
  .pathway-node { font-size: 11px !important; padding: 6px 12px !important; }
  .pathway-divider { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   TRACK PAGES — CEU GRID (2 col → 1 col)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .ceu-grid { grid-template-columns: 1fr !important; }
}

/* ═══════════════════════════════════════════════════════════════
   TRACK PAGES — DOCS GRID (2 col → 1 col)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .docs-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   TRACK PAGES — APPLICATION STEPS ROW (6 col → 3 col → 1 col)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .steps-row { grid-template-columns: repeat(3, 1fr) !important; }
  .steps-row::before { display: none !important; }
}
@media (max-width: 600px) {
  .steps-row { grid-template-columns: 1fr !important; gap: 20px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   TRACK PAGES — APPLY CTA STRIP (side-by-side → stacked)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .apply-cta-strip { flex-direction: column !important; align-items: flex-start !important; }
  .apply-cta-btns { width: 100%; }
  .apply-cta-btns a { flex: 1; justify-content: center; text-align: center; }
}

/* ═══════════════════════════════════════════════════════════════
   CONTACT PAGE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .contact-inner { grid-template-columns: 1fr !important; gap: 32px !important; }
  .form-row { grid-template-columns: 1fr !important; }

  /* Grid/flex items default to min-width:auto, which lets unbreakable
     content (like a long email address) force the item wider than its
     1fr track — since body has overflow-x:hidden, that overflow gets
     silently clipped on the right instead of scrolling. min-width:0
     lets these actually shrink to the viewport. */
  .info-panel, .form-panel { min-width: 0 !important; }
  .contact-card { padding: 16px 18px !important; }
  .contact-card-body { min-width: 0 !important; }
  .contact-card-value { overflow-wrap: break-word !important; }
  .form-panel { padding: 28px 22px !important; }
  .form-submit-row { flex-direction: column !important; align-items: stretch !important; gap: 14px !important; }
  .form-note { max-width: none !important; }
  .btn-submit { justify-content: center !important; }
}

/* ═══════════════════════════════════════════════════════════════
   ABOUT PAGE — hero, sections, commissioner grid, modal, timeline
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .comm-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 768px) {
  .comm-grid { grid-template-columns: 1fr !important; gap: 16px !important; }

  .hero-inner {
    grid-template-columns: 1fr !important;
    padding: 100px 20px 60px !important;
    gap: 32px !important;
  }

  /* Executive Staff banner — collapse 2-col grid so cards don't overflow horizontally */
  .leadership-banner { grid-template-columns: 1fr !important; padding: 24px 20px !important; gap: 16px !important; }
  .staff-card { padding: 18px 16px !important; gap: 14px !important; }

  /* Commissioner bio modal — stack image above body instead of side-by-side.
     Capped well under full-viewport height so it reads as a modal (backdrop
     still visible around it) instead of a full takeover. */
  .card-backdrop { padding: 16px !important; }
  .card-modal { flex-direction: column !important; max-height: 76svh !important; }
  .card-modal-img {
    width: 100% !important; height: 220px !important;
    /* "top center" was tuned for the tall desktop column crop; on a short,
       wide mobile strip that framing cuts off most of the face. Centering
       keeps eyes/nose/mouth in frame instead of just forehead/hair. */
    object-position: center !important;
  }
  .card-modal-body {
    padding: 18px 18px !important;
    /* Without this, a scrollable flex child won't shrink below its content
       size, so the modal grows past max-height and gets visually clipped
       by .card-modal's overflow:hidden instead of scrolling. */
    min-height: 0 !important;
  }
  .card-modal-name { font-size: 20px !important; margin-bottom: 3px !important; }
  .card-modal-sub { margin-bottom: 10px !important; }
  .card-modal-badge { margin-bottom: 14px !important; }
  .card-modal-rule { margin-bottom: 14px !important; }
  .card-modal-bio { font-size: 13px !important; line-height: 1.65 !important; }
  .card-modal-close { top: 12px !important; right: 12px !important; }

  /* History timeline — the desktop version is a pinned "scrollytelling"
     panel: a 350vh-tall track with a sticky viewport-height box, where JS
     swaps stages in place as you scroll. On a small screen that collapses
     everything into one cramped, overlapping box. Instead, let every stage
     stack in normal document flow and fade in as it's scrolled to — same
     .reveal pattern used everywhere else on the site. See the mobile branch
     in the timeline JS (about.html) that drives this with IntersectionObserver. */
  .timeline-sec-wrapper { height: auto !important; border-top: none !important; }
  .timeline-sticky-panel {
    position: static !important;
    height: auto !important;
    display: block !important;
    padding: 48px 0 !important;
  }
  .tl-skip-btn, .tl-step-counter, .tl-progress-wrap, .tl-scroll-hint { display: none !important; }

  /* Intro stage — just the title/intro text; the two fact cards
     (44 Years Serving Alaska / 3 Active Cert Tracks) are dropped on mobile */
  .tl-intro-grid { grid-template-columns: 1fr !important; max-width: 100% !important; padding: 0 20px !important; }
  .tl-intro-right { display: none !important; }

  /* Drop the decorative spine, stack year above card */
  .tl-stage { position: static !important; padding: 0 20px 56px !important; }
  .tl-entry-grid { grid-template-columns: 1fr !important; max-width: 100% !important; }
  .tl-spine-col { display: none !important; }
  .tl-year-col { text-align: left !important; padding-right: 0 !important; margin-bottom: 16px !important; }
  .tl-card-col { padding-left: 0 !important; }
}

/* ═══════════════════════════════════════════════════════════════
   CTA STRIP — all pages
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .cta-strip { padding: 60px 20px !important; }
  .cta-btns { flex-direction: column; align-items: stretch; }
  .cta-btns a { justify-content: center; text-align: center; }
}

/* ═══════════════════════════════════════════════════════════════
   CHATBOT — full width on small screens
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  #chatbot-panel {
    right: 0 !important;
    left: 0 !important;
    bottom: 80px !important;
    width: 100% !important;
    border-radius: 18px 18px 0 0 !important;
  }
  #chatbot-btn { bottom: 16px !important; right: 16px !important; }
}

/* Register & login page layouts (.page, .brand-panel, .field-row-*) are
   handled by each page's own <style> block — see register.html and
   login.html's local @media rules. */

/* ═══════════════════════════════════════════════════════════════
   VERIFY PAGE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .verify-card { padding: 28px 20px !important; }
}
@media (max-width: 768px) {
  /* iOS Safari's address bar collapses after first scroll, so `100vh`
     on load is taller than what's actually visible — centered content
     in a min-height:100vh box can render partly below the fold. `svh`
     (small viewport height) always reflects the on-load, chrome-visible
     size instead. Kept as a mobile-only override (not a base rule
     rewrite) so browsers without svh support just keep the vh value
     already declared inline on .page-shell — same pattern as .hero. */
  .page-shell { min-height: calc(100svh - 66px) !important; }
}

/* ═══════════════════════════════════════════════════════════════
   MEETING UPDATES PAGE — added after this file's original mobile
   pass (meeting-updates.html shipped later), so its two grids/rows
   never got a breakpoint until now.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .minutes-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
  .minutes-grid { grid-template-columns: 1fr !important; }

  /* Date badge + topic side-by-side is fine at tablet width, but on a
     phone the fixed 68px badge + 24px gap + card padding leaves too
     little room for the topic/meta text to read comfortably — stack
     the badge above the body instead. */
  .upcoming-card { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; padding: 18px 20px !important; }
  .upcoming-date-badge { width: auto !important; height: auto !important; flex-direction: row !important; gap: 6px !important; padding: 4px 10px !important; border-radius: 8px !important; }
  .upcoming-date-badge .day { font-size: 15px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   GLOBAL UTILITY — touch-friendly tap targets
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .btn-gold, .btn-outline, .btn-terra, .btn-sage,
  .btn-gold-lg, .btn-outline-lg, .btn-ghost-nav, .btn-gold-nav,
  .policy-close, .policy-close-btn, .chat-close-btn, .chat-send {
    min-height: 44px;
    min-width: 44px;
  }
  input, select, textarea { font-size: 16px !important; } /* prevents iOS zoom */
}