/* ========================================
   RESPONSIVE STYLES
   ======================================== */

/* Scroll offset for fixed navigation */
[id] {
    scroll-margin-top: var(--nav-height);
}

/* Tablet: 768px - 1023px */
@media (max-width: 1023px) {
    .hero__title {
        font-size: var(--font-size-4xl);
    }

    .hero__stats {
        gap: var(--space-8);
    }

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

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

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

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

    .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 500px;
    }

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

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

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

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

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

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

/* Mobile: < 768px */
@media (max-width: 767px) {
    :root {
        --nav-height: 60px;
    }

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

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

    .section__title {
        font-size: var(--font-size-3xl);
    }

    .section__subtitle {
        font-size: var(--font-size-base);
    }

    /* Nav - Mobile */
    .nav__links {
        display: none;
        position: absolute;
        top: var(--nav-height);
        left: 0;
        right: 0;
        background: rgba(15, 23, 42, 0.98);
        backdrop-filter: var(--glass-blur);
        flex-direction: column;
        padding: var(--space-4);
        border-bottom: 1px solid var(--color-border);
    }

    .nav__links.is-open {
        display: flex;
    }

    .nav__link {
        padding: var(--space-3) var(--space-4);
        width: 100%;
    }

    .nav__cta {
        margin-left: 0;
        margin-top: var(--space-2);
        width: 100%;
    }

    .nav__cta .btn {
        width: 100%;
    }

    .nav__mobile-btn {
        display: block;
    }

    /* Hero - Mobile */
    .hero {
        min-height: auto;
        padding-top: calc(var(--nav-height) + var(--space-8));
        padding-bottom: var(--space-8);
    }

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

    .hero__title {
        font-size: var(--font-size-3xl);
    }

    .hero__subtitle {
        font-size: var(--font-size-base);
    }

    .hero__ctas {
        flex-direction: column;
        align-items: center;
    }

    .hero__ctas .btn {
        width: 100%;
        max-width: 320px;
    }

    .hero__stats {
        flex-direction: column;
        gap: var(--space-6);
        align-items: center;
    }

    .countdown {
        gap: var(--space-3);
    }

    .countdown__number {
        font-size: var(--font-size-3xl);
    }

    .countdown__item {
        min-width: 55px;
    }

    /* Grids - Mobile */
    .benefits-grid,
    .instructors-grid,
    .testimonials-grid,
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }

    /* Instructor - Center on mobile */
    .instructors-grid {
        max-width: 400px;
        margin: 0 auto;
    }

    /* Pricing - Mobile */
    .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }

    .pricing-card {
        padding: var(--space-6);
    }

    .pricing-card__amount {
        font-size: var(--font-size-4xl);
    }

    /* Tabs - Mobile */
    .tabs__list {
        flex-wrap: nowrap;
    }

    .tabs__btn {
        font-size: var(--font-size-xs);
        padding: var(--space-2) var(--space-3);
    }

    /* Accordion */
    .accordion__trigger {
        font-size: var(--font-size-base);
        padding: var(--space-4) var(--space-4);
    }

    .accordion__content {
        padding: 0 var(--space-4) var(--space-4);
    }

    /* Footer */
    .footer__grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .footer__bottom {
        flex-direction: column;
        gap: var(--space-2);
        text-align: center;
    }

    /* CTA Final */
    .cta-final__title {
        font-size: var(--font-size-3xl);
    }

    .cta-final__buttons {
        flex-direction: column;
        align-items: center;
    }

    .cta-final__buttons .btn {
        width: 100%;
        max-width: 320px;
    }

    /* Floating CTA */
    .floating-cta {
        bottom: var(--space-4);
        right: var(--space-4);
    }

    /* Compare Table */
    .compare-table {
        font-size: var(--font-size-xs);
    }

    .compare-table th,
    .compare-table td {
        padding: var(--space-3);
    }

    /* Glass Card */
    .glass-card {
        padding: var(--space-6);
    }

    /* Stat */
    .stat__number {
        font-size: var(--font-size-3xl);
    }

    /* Gift grid */
    .gift-grid {
        grid-template-columns: 1fr;
    }

    .gift-card {
        padding: var(--space-4);
    }

    /* Vibe Working section - mobile overrides for inline styles */
    .vw-info-card {
        padding: var(--space-6);
    }

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

    /* Tabs scroll hint */
    .tabs {
        position: relative;
    }

    .tabs::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 40px;
        height: 48px;
        background: linear-gradient(to right, transparent, var(--color-bg-alt));
        pointer-events: none;
        z-index: 1;
    }
}

/* Large Desktop: > 1440px */
@media (min-width: 1441px) {
    .container {
        max-width: 1320px;
    }

    .hero__title {
        font-size: var(--font-size-6xl);
    }
}