/* ============================================================
   mobile.css — shared mobile layer for all four pages
   Loaded AFTER each page's <style> block so it can override.
   ============================================================ */

/* Hide hamburger on desktop */
.mobile-toggle { display: none; }

/* Hide drawer-only CTA on desktop */
.drawer-cta { display: none; }

@media (max-width: 820px) {

  /* ---------- NAV: hamburger drawer ---------- */
  .nav {
    display: flex !important;
    grid-template-columns: none !important;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px !important;
    position: sticky; top: 0;
    z-index: 60;
  }
  .nav .nav-cta { display: none !important; }
  .nav .nav-links {
    display: none;
    position: fixed;
    top: 60px;
    left: 0; right: 0;
    flex-direction: column !important;
    gap: 0 !important;
    background: var(--paper);
    padding: 12px 20px 24px;
    border-bottom: 1px solid var(--rule);
    box-shadow: 0 16px 40px -12px rgba(0,0,0,.22);
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    justify-content: flex-start !important;
  }
  .nav .nav-links.is-open { display: flex; }
  .nav .nav-links a {
    padding: 16px 0 !important;
    font-size: 17px !important;
    font-weight: 500;
    border-bottom: 1px solid var(--rule);
    width: 100%;
    text-align: left;
  }
  .nav .nav-links a:last-child { border-bottom: none; }
  .nav .nav-links a.active::after,
  .nav .nav-links a:hover::after { display: none !important; }

  .nav .drawer-cta {
    display: inline-flex !important;
    align-items: center;
    justify-content: space-between;
    background: var(--ink);
    color: var(--paper);
    padding: 16px 22px !important;
    border-radius: 999px;
    font-weight: 600;
    font-size: 16px !important;
    margin-top: 18px;
    border: none !important;
  }

  .mobile-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 42px; height: 42px;
    background: var(--ink);
    color: var(--paper);
    border-radius: 50%;
    font-size: 18px;
    line-height: 1;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
  }
  .mobile-toggle[aria-expanded="true"] { background: var(--accent); color: var(--ink); }

  /* ---------- HORIZONTAL PADDING TIGHTEN ---------- */
  .hero, .section, section[class],
  .marquee, .footer,
  .pod, .pod-section, .about, .topics, .speak-cta,
  .books-section, .teaser, .audio-card,
  .channels, .form-section, .social,
  .talks, .formats, .quote-section, .inquire-section,
  .forbes-section, .booking-cta {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Sections vertical breathing room */
  .hero { padding-top: 56px !important; padding-bottom: 56px !important; }
  .section, section[class] { padding-top: 56px !important; padding-bottom: 56px !important; }

  /* ---------- TYPE: keep clamps usable ---------- */
  h1 { font-size: clamp(40px, 11vw, 72px) !important; }
  h1.hero-title { font-size: clamp(44px, 12vw, 88px) !important; }

  /* ---------- GRIDS: force single column ---------- */
  .hero, .hero-grid, .hero-sub,
  .pod-grid, .books-grid, .speak-cta .inner,
  .about-grid, .topics-grid,
  .inside-grid, .buy-grid, .audio-grid,
  .chapters, .press-grid, .retailers,
  .teaser-grid,
  .channels-grid, .social-grid, .form-grid,
  .hero-foot, .talk, .formats, .quote-grid, .inquire-grid,
  .logos-grid, .forbes-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* Footer: 1 column, stack everything */
  .footer { padding: 56px 20px 28px !important; }
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
    padding-bottom: 36px !important;
  }
  .footer-brand {
    font-size: 44px !important;
    line-height: .9;
  }
  .footer-bottom {
    flex-direction: column !important;
    gap: 14px !important;
    align-items: flex-start !important;
    text-align: left !important;
    padding-top: 24px !important;
  }

  /* Remove the right borders that look weird stacked */
  .topic, .format, .talk, .quote,
  .client-logo, .channel, .social-card,
  .chapter, .press-card, .retailer,
  .stat { border-right: none !important; }

  /* Stats: full-width on mobile */
  .stat:nth-child(even) { padding-left: 0 !important; }

  /* ---------- HERO PORTRAIT / KEY IMAGES ---------- */
  .hero-portrait { max-width: 100%; aspect-ratio: 4/5; }
  .pod-art { max-width: 100%; aspect-ratio: 1/1; }
  .book-feature, .book-cover { max-width: 360px; margin: 0 auto; }
  .teaser-cover { max-width: 220px; margin: 0 auto; }

  /* ---------- TEASER ---------- */
  .teaser { padding: 48px 20px !important; }
  .teaser-cta { align-items: flex-start !important; }
  .teaser-meta { flex-wrap: wrap; gap: 14px !important; font-size: 10px !important; }

  /* ---------- BUTTONS / TOUCH TARGETS ---------- */
  .btn, .nav-cta, .pod-launch, .submit-btn,
  button[class] { min-height: 44px; font-size: 15px; }

  /* ---------- FORM: prevent iOS zoom + better stacking ---------- */
  .form-card { padding: 28px 22px !important; }
  .form-row { grid-template-columns: 1fr !important; gap: 18px !important; }
  input, textarea, select { font-size: 16px !important; }
  .submit-btn { width: 100%; justify-content: center; }

  /* ---------- MARQUEE: faster on mobile ---------- */
  .marquee { padding: 14px 0 !important; }
  .marquee-track { animation-duration: 28s !important; }

  /* ---------- KICKER + CRUMB ---------- */
  .kicker, .crumb { font-size: 11px !important; flex-wrap: wrap; }

  /* ---------- AUDIO PLAYER ---------- */
  .audio-player { padding: 24px !important; }
  .play-btn { width: 52px !important; height: 52px !important; }

  /* ---------- PODCAST CHIPS ---------- */
  .pod-platforms .chip { font-size: 13px; padding: 10px 14px; }

  /* ---------- BOOKS HERO ACTIONS ---------- */
  .hero-actions { flex-direction: column; gap: 12px; align-items: stretch; }
  .hero-actions .btn { width: 100%; justify-content: center; }
}

/* Smaller phones: extra polish */
@media (max-width: 420px) {
  h1 { font-size: clamp(36px, 11.5vw, 56px) !important; }
  .footer-brand { font-size: 36px !important; }
  .nav { padding: 12px 16px !important; }
  .hero, .section, section[class] { padding-left: 16px !important; padding-right: 16px !important; }
  .form-card { padding: 22px 18px !important; }
}