/* ═══════════════════════════════════════════════════════════════
   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, .feature-sec, .about-hero-sec,
  .mission-sec, .board-sec, .history-sec, .verify-sec,
  .ethics-sec, .page-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 (scrollable on mobile)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .pathway-row {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    padding-bottom: 12px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
}

/* ═══════════════════════════════════════════════════════════════
   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; }
}

/* ═══════════════════════════════════════════════════════════════
   ABOUT PAGE — grids and board layouts
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .about-intro-grid,
  .mission-grid,
  .comm-grid,
  .history-grid { grid-template-columns: 1fr !important; gap: 32px !important; }

  .comm-member-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
  .comm-member-grid { grid-template-columns: 1fr !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 — form layouts
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .register-grid,
  .login-grid,
  .auth-grid { grid-template-columns: 1fr !important; }
  .auth-aside { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   VERIFY PAGE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .verify-card { padding: 28px 20px !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 {
    min-height: 44px;
  }
  input, select, textarea { font-size: 16px !important; } /* prevents iOS zoom */
}