/* =====================================================
   MasalSaatim.com — Mobile Responsive CSS
   Breakpoints: 480, 640, 768, 1024, 1280
   ===================================================== */

/* ─── Breakpoint Reference
   xs:  < 480px  (small phones)
   sm:  480-639px (phones)
   md:  640-767px (large phones, small tablets)
   lg:  768-1023px (tablets)
   xl:  1024-1279px (small desktops/large tablets)
   2xl: 1280px+ (desktops)
─── */

/* ─── Small Phone Adjustments ─── */
@media (max-width: 480px) {
    :root { --nav-height: 56px; }

    .container { padding: 0 var(--space-3); }

    .hero { min-height: 70vh; }
    .hero-title { font-size: 1.75rem; }
    .hero-subtitle { font-size: 0.9rem; }
    .hero-cta { flex-direction: column; align-items: stretch; }
    .hero-cta .btn { text-align: center; }

    .section { padding: var(--space-8) 0; }

    .daily-story-banner { padding: var(--space-5); }
    .daily-story-image { width: 100%; height: 200px; border-radius: var(--radius-lg); }

    .story-grid { grid-template-columns: 1fr; gap: var(--space-4); }

    .btn-xl { padding: 0.875rem 1.5rem; font-size: 0.95rem; }

    .footer-grid { grid-template-columns: 1fr; }
    .footer { padding: var(--space-8) 0 var(--space-6); }

    .modal { margin: var(--space-3); max-height: 95vh; }
    .modal-body { padding: var(--space-4); }

    .pagination { gap: var(--space-1); }
    .page-btn { min-width: 36px; height: 36px; font-size: 0.8rem; }

    .toast-container { bottom: var(--space-3); right: var(--space-3); left: var(--space-3); }
    .toast { min-width: unset; }

    h1 { font-size: 1.6rem; }
    h2 { font-size: 1.3rem; }
    h3 { font-size: 1.1rem; }
}

/* ─── Phone Adjustments ─── */
@media (max-width: 639px) {
    .section-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .age-tabs { gap: var(--space-2); }
    .age-tab { min-width: 70px; padding: var(--space-2) var(--space-3); }
    .age-tab-emoji { font-size: 1.2rem; }

    .story-card-body { padding: var(--space-3); }
    .story-card-title { font-size: 0.95rem; }

    /* Stack chapter nav on mobile */
    .chapter-nav { flex-direction: column; align-items: stretch; }
    .chapter-nav-btn { max-width: 100%; }
    .chapter-nav-btn.next { margin-left: 0; }

    /* Story actions stack */
    .story-actions-bar { justify-content: center; }

    /* Reading toolbar - compact */
    .reading-toolbar { overflow-x: auto; flex-wrap: nowrap; }
    .reading-toolbar-group { flex-shrink: 0; }
}

/* ─── Tablet Adjustments ─── */
@media (min-width: 640px) and (max-width: 1023px) {
    .story-grid { grid-template-columns: repeat(2, 1fr); }

    .daily-story-banner {
        grid-template-columns: 1fr;
    }

    .daily-story-image {
        width: 100%;
        max-height: 300px;
        border-radius: var(--radius-lg);
    }

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

/* ─── Large Tablet / Small Desktop ─── */
@media (min-width: 768px) and (max-width: 1023px) {
    .nav-links { display: flex; }
    .nav-hamburger { display: none; }

    .story-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ─── Desktop ─── */
@media (min-width: 1024px) {
    .story-grid { grid-template-columns: repeat(4, 1fr); }

    .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
}

/* ─── Touch Improvements ─── */
@media (hover: none) {
    /* Remove hover effects that feel wrong on touch */
    .story-card:hover { transform: none; }
    .btn:hover:not(:disabled) { transform: none; }
    .category-pill:hover { transform: none; }
    .age-tab:hover { transform: none; }

    /* Better tap targets */
    .nav-link { padding: var(--space-3) var(--space-4); }
    .footer-link { padding: var(--space-2) 0; }
    .chapter-list-item { padding: var(--space-4); }
}

/* ─── Print Styles ─── */
@media print {
    .nav,
    .reading-toolbar,
    .reading-sidebar,
    .story-actions-bar,
    .chapter-nav,
    .footer,
    .toast-container,
    .similar-stories,
    .membership-wall,
    .breadcrumb { display: none !important; }

    body {
        background: white;
        color: black;
        font-size: 12pt;
    }

    .story-body {
        font-size: 11pt;
        line-height: 1.6;
        max-width: 100%;
    }

    .story-title-reading { font-size: 18pt; }

    a { text-decoration: none; color: black; }

    .story-cover-wrap { max-height: 400px; }
}

/* ─── Reduced Motion ─── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }

    .hero-particle { animation: none; }
    .skeleton { animation: none; background: var(--bg-secondary); }
}

/* ─── High Contrast ─── */
@media (prefers-contrast: high) {
    :root {
        --border-color: currentColor;
    }

    .btn-primary { background: #000; color: #fff; border: 2px solid #fff; }
    .story-card { border: 2px solid var(--text-primary); }
    .form-control { border: 2px solid var(--text-primary); }
}

/* ─── Landscape phone ─── */
@media (max-width: 768px) and (orientation: landscape) {
    .hero { min-height: 100vw; }
    :root { --nav-height: 48px; }

    .reading-toolbar { position: relative; top: 0; }
}