/* ============================================================ */
/*  AGENTIVE ACADEMY — MOBILE READABILITY LAYER (PLATFORM)      */
/*  Loaded LAST on platform pages. Activates on phones/tablets. */
/*  Safe, defensive overrides — no desktop changes.            */
/* ============================================================ */

/* ---- Tablet & phone (<=768px) ---- */
@media (max-width: 768px) {
  html, body { overflow-x: hidden; max-width: 100%; }

  /* Media never forces horizontal scroll */
  img, svg, video, canvas { max-width: 100%; height: auto; }
  iframe { max-width: 100%; }

  /* Wide grids collapse to a single readable column */
  .course-grid,
  .faq-grid,
  .testimonials-grid,
  .learn-grid,
  .audience-grid,
  .footer-top { grid-template-columns: 1fr !important; }

  /* Stat tiles: two-up on tablet */
  .stats-grid, .stat-grid { grid-template-columns: 1fr 1fr !important; }

  /* Data / content tables scroll horizontally instead of overflowing */
  table, .data-table {
    display: block; width: 100%; max-width: 100%;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }

  /* LMS shell padding tightened */
  .lms-main { padding: 16px !important; }

  /* Course detail two-column hero/body already collapse via page CSS;
     ensure purchase card is not stuck */
  .purchase-card, .course-sidebar { position: static !important; }
}

/* ---- Phone (<=480px) ---- */
@media (max-width: 480px) {
  .stats-grid, .stat-grid { grid-template-columns: 1fr !important; }
  .hero { padding: 116px 18px 64px !important; }
  .section, .cta-section { padding: 56px 18px !important; }
  .nav-inner { padding: 0 16px !important; gap: 12px !important; }
  .bundle-card { padding: 28px 18px !important; }
  .instructor-card { padding: 28px 18px !important; }
  .auth-card { padding: 28px 20px !important; }
  h1 { word-wrap: break-word; overflow-wrap: break-word; }
}

/* ============================================================ */
/*  MOBILE NAVIGATION (works with existing .nav-links markup)   */
/*  Paired with js/mobile-nav.js                                */
/* ============================================================ */

/* Floating sidebar toggle for LMS/admin pages (hidden on desktop) */
.aa-lms-burger { display: none; }
.aa-lms-backdrop { display: none; }

@media (max-width: 1024px) {
  /* Admin / LMS sidebar off-canvas toggle */
  .aa-lms-burger {
    position: fixed; top: 12px; left: 12px; z-index: 1300;
    width: 46px; height: 40px; display: flex; align-items: center; justify-content: center;
    background: var(--navy, #0A1628); color: var(--gold, #C9A84C);
    border: none; border-radius: 8px; font-size: 1.35rem; line-height: 1; cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,.3);
  }
  .aa-lms-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1250; }
  .aa-lms-backdrop.show { display: block; }
  .lms-sidebar { z-index: 1280 !important; }
  /* give admin content room for the floating burger */
  .lms-main { padding-top: 64px !important; }
}

@media (max-width: 768px) {
  /* Top-bar dropdown menu: reveal existing nav links when toggled */
  .nav .nav-links { display: none; }
  .nav.nav-open .nav-links {
    display: flex !important; flex-direction: column; align-items: stretch;
    position: absolute; top: 100%; left: 0; right: 0;
    background: rgba(10,22,40,.98); backdrop-filter: blur(10px);
    padding: 10px 16px 14px; gap: 2px; margin: 0; list-style: none;
    border-bottom: 1px solid rgba(201,168,76,.25);
    box-shadow: 0 12px 28px rgba(0,0,0,.35); z-index: 130;
  }
  .nav.nav-open .nav-links li { width: 100%; }
  .nav.nav-open .nav-links a,
  .nav.nav-open .nav-links .nav-link {
    display: block; width: 100%; padding: 12px 10px;
    color: #fff !important; font-size: .98rem; border-radius: 8px;
  }
  .nav.nav-open .nav-links a:hover { background: rgba(255,255,255,.08); }
  .nav-hamburger { display: flex !important; }
  /* save space in the dashboard top bar */
  #user-name-nav { display: none !important; }
}