/* ==========================================================================
   Responsive Stylesheet — Mobile, Tablet, Desktop
   ========================================================================== */

/* ---------- Large Desktop (1200px+) ---------- */
@media (min-width: 1200px) {
    .container {
        padding: 0 var(--space-xl);
    }
}

/* ---------- Desktop to Tablet (max-width: 992px) ---------- */
@media (max-width: 992px) {
    .header__nav {
        gap: var(--space-md);
        font-size: 0.85rem;
    }

    .hero__title {
        font-size: 2.2rem;
    }

    h1 { font-size: 2.2rem; }
    h2 { font-size: 1.6rem; }
}

/* ---------- Tablet (max-width: 768px) ---------- */
@media (max-width: 768px) {
    :root {
        --space-3xl: 3rem;
        --space-2xl: 2rem;
    }

    body {
        padding-bottom: 72px; /* Space for mobile sticky CTA */
    }

    .header__inner {
        flex-wrap: wrap;
        gap: var(--space-sm);
    }

    .header__nav {
        display: none;
    }

    .header__cta {
        display: none;
    }

    .header__logo {
        font-size: 1.3rem;
    }

    .hero__title {
        font-size: 1.75rem;
    }

    .hero__subtitle {
        font-size: 1rem;
    }

    .hero__cta {
        flex-direction: column;
        align-items: stretch;
    }

    .hero__cta .btn {
        width: 100%;
    }

    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.15rem; }

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

    .mobile-cta {
        display: flex;
    }

    .author-box {
        flex-direction: column;
        text-align: center;
    }
}

/* ---------- Small Mobile (max-width: 480px) ---------- */
@media (max-width: 480px) {
    .container {
        padding: 0 var(--space-md);
    }

    .hero {
        padding: var(--space-2xl) 0 var(--space-xl);
    }

    .hero__title {
        font-size: 1.5rem;
    }

    .btn {
        font-size: 0.82rem;
        padding: 0.6rem 1rem;
    }

    .mobile-cta .btn {
        font-size: 0.68rem;
        padding: 0.65rem 0.3rem;
    }

    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.35rem; }
}

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

/* ---------- High Contrast / Dark Mode ---------- */
@media (prefers-color-scheme: light) {
    /* Kept dark by design — this site is intentionally dark themed */
}/* Keep the guide navigation available on small screens. */
@media (max-width:768px) {
 header .header__inner { flex-wrap:wrap; height:auto; }
 header .header__nav { display:flex; flex-wrap:wrap; width:100%; gap:.65rem; font-size:.85rem; }
}