/* ===== TABLET (768px and below) ===== */
@media (max-width: 768px) {
    .hamburger { display: flex; }

    .nav-menu {
        position: absolute;
        left: 0; right: 0;
        top: 72px;
        z-index: 110;
        flex-direction: column;
        width: 100%;
        max-width: 380px;
        margin: 0 auto;
        text-align: left;
        gap: 6px;
        padding: 18px;
        background: transparent;
        border-radius: 0 0 16px 16px;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-16px) scaleY(0.96);
        transform-origin: top center;
        transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
        pointer-events: none;
    }
    .nav-menu.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scaleY(1);
        pointer-events: auto;
        background: linear-gradient(160deg, #0F1A3F 0%, #16234f 55%, #0F1A3F 100%);
        -webkit-box-shadow: 0 18px 40px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.08);
        box-shadow: 0 18px 40px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.08);
        border: 1px solid rgba(255,255,255,0.14);
    }
    .nav-menu li {
        padding: 0;
        margin: 0;
        opacity: 0;
        transform: translateY(-10px);
        transition: opacity 0.35s ease, transform 0.35s ease;
    }
    .nav-menu.active li {
        opacity: 1;
        transform: translateY(0);
    }
    .nav-menu.active li:nth-child(1){transition-delay:0.05s}
    .nav-menu.active li:nth-child(2){transition-delay:0.10s}
    .nav-menu.active li:nth-child(3){transition-delay:0.15s}
    .nav-menu.active li:nth-child(4){transition-delay:0.20s}
    .nav-menu.active li:nth-child(5){transition-delay:0.25s}
    .nav-menu.active li:nth-child(6){transition-delay:0.30s}
    .nav-menu.active li:nth-child(7){transition-delay:0.35s}

    /* Menu links become attractive cards */
    .nav-menu .nav-link {
        display: flex;align-items:center;gap:12px;
        padding: 13px 16px;
        border-radius: 12px;
        color: #fff;
        font-weight: 500;
        border: 1px solid transparent;
        transition: all var(--transition-fast);
    }
    .nav-menu .nav-link:hover,
    .nav-menu .nav-link.active {
        color: var(--accent-color);
        background: linear-gradient(135deg, rgba(212,175,55,0.18), rgba(255,255,255,0.06));
        border-color: rgba(212,175,55,0.45);
        transform: translateX(6px);
        padding-left: 22px;
    }
    .nav-link.active::after { display: none; }

    /* Donate button */
    .nav-menu .nav-donate {
        justify-content: center;
        margin-top: 4px;
        background: linear-gradient(135deg, var(--accent-color), #B8962E);
        color: var(--primary-color);
        font-weight: 700;
        border: none;
        box-shadow: 0 6px 18px rgba(212,175,55,0.4);
    }
    .nav-menu .nav-donate:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 24px rgba(212,175,55,0.55);
        padding-left: 16px;
        border: none;
    }

    /* Navbar cart button (now inside mobile dropdown menu) */
    .nav-menu .nav-cart { margin: 0; justify-content: center; }
    .nav-menu li:last-child { padding: 0; }

    .utility-bar { display: none; }

    /* Section Headers */
    .sec-head { flex-direction: column; align-items: flex-start; }
    .sec-head--center { align-items: center; }

    /* Featured Episodes */
    .fe-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }

    /* Explore */
    .explore-wrap { grid-template-columns: 1fr; gap: 40px; }
    .explore-text h2 { font-size: 32px; }

    /* Authors - no changes needed, marquee works at all sizes */

    /* Glimpse */
    .glimpse-split { grid-template-columns: 1fr; gap: 40px; }
    .glimpse-reverse { direction: ltr; }
    .glimpse-media { max-width: 340px; margin: 0 auto; aspect-ratio: 4/5; }

    /* Latest Episodes */
    .latest-row { grid-template-columns: 32px 48px 1fr auto 36px; gap: 10px; padding: 12px 14px; }
    .latest-row-img { width: 48px; height: 48px; }
    .latest-row-info h4 { font-size: 13px; }

    /* Booker */
    .booker-wrap { grid-template-columns: 1fr; gap: 40px; text-align: center; }
    .booker-cover { max-width: 240px; margin: 0 auto; }

    /* Why Book Matters */
    .why-wrap { grid-template-columns: 1fr; gap: 40px; }
    .why-quote { order: -1; }

    /* Digital/Platforms */
    .platforms-row { gap: 14px; }
    .plat-card { padding: 24px 28px; }

    /* Shop */
    .shop-row { grid-template-columns: repeat(2, 1fr); gap: 14px; }

    /* Quote */
    .sec-quote { padding: 48px 0; }
    .quote-text { font-size: 22px; }
    .quote-mark { font-size: 70px; }

    /* Journal */
    .journal-row { grid-template-columns: 1fr; }
    .journal-card--featured { grid-row: auto; }

    /* Newsletter */
    .newsletter-form { flex-direction: column; }

    /* Follow */
    .follow-wrap { grid-template-columns: 1fr; gap: 32px; text-align: center; }
    .follow-links { grid-template-columns: 1fr 1fr; }

    /* CTA */
    .sec-cta h2 { font-size: 28px; }
    .cta-btns { flex-direction: column; align-items: center; }

    /* Footer */
    .footer-content { grid-template-columns: repeat(2, 1fr); }

    /* Page Hero */
    .page-hero h1 { font-size: var(--text-3xl); }

    /* About Page */
    .about-hero h1 { font-size: var(--text-3xl); }
    .about-split { grid-template-columns: 1fr; gap: 40px; }
    .about-split-media { max-width: 340px; margin: 0 auto; }
    .about-split-badge { bottom: -12px; right: -8px; padding: 16px 20px; }
    .about-split-badge-num { font-size: 24px; }
    .about-host-stats { justify-content: center; }
    .about-mission-grid { grid-template-columns: repeat(2, 1fr); }
    .about-authors-grid { grid-template-columns: repeat(2, 1fr); }
    .about-why-wrap { grid-template-columns: 1fr; gap: 40px; }
    .about-why-visual { order: -1; }
    .about-why-jahan-wrap { grid-template-columns: 1fr; gap: 40px; }
    .about-why-jahan-media { max-width: 420px; margin: 0 auto; }

    /* Breadcrumb */
    .breadcrumb { margin: 0 0 16px; }
    .breadcrumb .breadcrumb-list { gap: 3px 8px; font-size: 11px; }
    .breadcrumb .breadcrumb-item a, .breadcrumb .breadcrumb-item span { font-size: 11px; }
    .breadcrumb .breadcrumb-separator { display: none; }

    /* Author Story */
    .story-hero { padding: 70px 0 60px; }
    .story-hero h1 { font-size: var(--text-3xl); }
    .story-article { padding: 40px 32px; }
    .story-article>h2 { font-size: 23px; }
    .story-article blockquote { padding: 22px 24px; font-size: 16px; }
    .story-facts { grid-template-columns: repeat(2, 1fr); }
}

/* ===== MOBILE (480px and below) ===== */
@media (max-width: 480px) {
    .container { padding: 0 var(--spacing-md); }

    .logo h1 { font-size: var(--text-lg); }
    .logo .tagline { font-size: 10px; }

    /* Buttons */
    .btn { padding: var(--spacing-sm) var(--spacing-md); font-size: var(--text-sm); }
    .btn-large { padding: 14px 28px; font-size: 14px; }

    /* Section Headers */
    .sec-head h2 { font-size: var(--text-2xl); }

    /* Featured Episodes */
    .fe-grid { grid-template-columns: 1fr; }
    .fe-card-img { aspect-ratio: 16/9; }

    /* Explore */
    .explore-text h2 { font-size: 28px; }
    .stat-num { font-size: 28px; }
    .stat-card { padding: 28px 20px; }
    .explore-feat { gap: 12px; }

    /* Authors - marquee adapts naturally */

    /* Glimpse */
    .glimpse-media { max-width: 100%; }
    .glimpse-content h2 { font-size: var(--text-2xl); }

    /* Latest Episodes */
    .latest-row { grid-template-columns: 40px 1fr 36px; gap: 8px; }
    .latest-row-img { display: none; }
    .latest-row-dur { display: none; }
    .latest-row-num { font-size: 12px; }
    .latest-row-info h4 { font-size: 13px; }

    /* Booker */
    .booker-body h2 { font-size: var(--text-2xl); }

    /* Why Book Matters */
    .why-text h2 { font-size: 24px; }
    .why-num { font-size: 22px; }
    .why-quote-card { padding: 32px 24px; }
    .why-quote-mark { font-size: 80px; }
    .why-quote-card blockquote { font-size: 17px; }

    /* Digital/Platforms */
    .plat-card { padding: 20px 22px; }
    .plat-card svg { width: 28px; height: 28px; }
    .plat-card h4 { font-size: 13px; }

    /* Shop */
    .shop-row { grid-template-columns: 1fr; }
    .shop-item-img { height: 180px; }

    /* Quote */
    .sec-quote { padding: 40px 0; }
    .quote-text { font-size: 20px; }
    .quote-mark { font-size: 60px; }

    /* Newsletter */
    .newsletter-inner h2 { font-size: 24px; }
    .newsletter-form { gap: 8px; }

    /* Follow */
    .follow-text h2 { font-size: 28px; }
    .follow-links { grid-template-columns: 1fr; }

    /* CTA */
    .sec-cta { padding: 64px 0; }
    .sec-cta h2, .cta-inner h2 { font-size: 24px; }
    .cta-inner p { font-size: 15px; }

    /* Footer */
    .footer-content { grid-template-columns: 1fr; }
    .footer-section { text-align: center; }

    /* Audio Player */
    .player-content { padding: var(--spacing-lg); }
    .player-info img { max-width: 200px; }

    /* Contact (Revamped) */
    .contact-split { grid-template-columns: 1fr; gap: 40px; }
    .contact-info { padding: 32px 24px; }
    .form-row { grid-template-columns: 1fr; }
    .faq-grid { grid-template-columns: repeat(2, 1fr); }

    /* Shop (Revamped) */
    .shop-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .shop-features-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }

    /* Filter Controls */
    .filter-controls { flex-direction: column; }
    .search-box, .filter-select { width: 100%; }

    /* Episode Item */
    .episode-item { gap: var(--spacing-md); }
    .episode-thumbnail { height: 200px; }
    .episode-details { padding: var(--spacing-md); }
    .episode-details h3 { font-size: var(--text-lg); }

    /* Products (Revamped) */
    .shop-grid { grid-template-columns: 1fr; }
    .shop-card-image { aspect-ratio: 16/9; }

    /* Shop Features */
    .shop-features-grid { grid-template-columns: 1fr; }

    /* Contact FAQ */
    .faq-grid { grid-template-columns: 1fr; }
    .faq-card { padding: 24px 20px; }

    /* About */
    .about-hero h1 { font-size: var(--text-2xl); }
    .about-hero-sub { font-size: 16px; }
    .about-split { gap: 32px; }
    .about-split-media { max-width: 100%; }
    .about-split-badge { bottom: -8px; right: 8px; padding: 12px 16px; }
    .about-split-badge-num { font-size: 20px; }
    .about-split-badge-lbl { font-size: 10px; }
    .about-host-stats { gap: 16px; }
    .about-stat-num { font-size: 22px; }
    .about-mission-grid { grid-template-columns: 1fr; }
    .about-mission-card { padding: 28px 20px; }
    .about-authors-grid { grid-template-columns: 1fr; }
    .about-author-avatar { height: 160px; }
    .about-why-quote { padding: 32px 24px; }
    .about-why-quote-mark { font-size: 80px; }
    .about-why-quote blockquote { font-size: 17px; }
    .about-why-jahan { padding: 64px 0; }
    .about-why-jahan-points { grid-template-columns: 1fr; }

    /* Author Story */
    .story-hero { padding: 56px 0 48px; }
    .story-hero h1 { font-size: var(--text-2xl); }
    .story-hero-sub { font-size: 16px; }
    .story-body { padding: 48px 0 60px; }
    .story-article { padding: 32px 22px; border-radius: 12px; }
    .story-article>p { font-size: 15px; line-height: 1.9; }
    .story-article>h2 { font-size: 20px; margin: 32px 0 12px; }
    .story-article blockquote { padding: 18px 18px; font-size: 15px; margin: 24px 0; }
    .story-facts { grid-template-columns: 1fr 1fr; gap: 10px; margin: 28px 0; }
    .story-fact { padding: 18px 12px; }
    .fact-num { font-size: 24px; }
    .story-back { flex-direction: column; align-items: stretch; }
    .story-back .btn { width: 100%; }

    /* Author Detail */
    .author-detail-hero { padding: 60px 0 40px; }
    .author-hero-avatar { width: 100px; height: 100px; }
    .author-hero-initial { font-size: 44px; }
    .author-detail-ep-dur { display: none; }
}