/* =========================================
   RESPONSIVE STYLES — TABLET
   Adjustments for tablet-width screens
   (768px to 1024px). Reduces column counts
   and adjusts spacing for medium screens.
========================================= */

@media (max-width: 1024px) {
    /* Navigation gap reduced */
    .nav-list {
        gap: var(--space-md);
    }

    /* Programs grid becomes 2 columns */
    .programs-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Classes grid becomes 2 columns */
    .classes-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Instructors preview becomes 2 columns */
    .instructors-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 600px;
    }

    /* Instructors full grid becomes 2 columns */
    .instructors-full-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Footer becomes 2 columns */
    .footer-inner {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-xl);
    }

    .footer-brand {
        grid-column: 1 / -1;
    }

    /* Why Nivora features stack tighter */
    .why-feature {
        gap: var(--space-lg);
    }

    /* Program options become 2x2 */
    .program-options {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Contact form rows stack */
    .form-row {
        grid-template-columns: 1fr;
    }

    /* Membership grid stays 3 but tighter */
    .membership-grid {
        gap: var(--space-sm);
    }

    .membership-plan {
        padding: var(--space-md);
    }

    .membership-plan.featured {
        transform: scale(1.03);
    }
}

/* =========================================
   RESPONSIVE STYLES — MOBILE
   Adjustments for mobile-width screens
   (below 768px). Switches to hamburger
   navigation, single-column layouts, and
   mobile-optimized schedule cards.
========================================= */

@media (max-width: 767px) {
    /* Typography scales down */
    h1 {
        font-size: clamp(2rem, 8vw, 2.75rem);
    }
    h2 {
        font-size: clamp(1.625rem, 6vw, 2.25rem);
    }
    h3 {
        font-size: 1.375rem;
    }

    /* Container padding reduced */
    .container,
    .container-narrow {
        padding: 0 var(--space-md);
    }

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

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

    /* =========================================
         HEADER & NAVIGATION
         Hide desktop nav, show hamburger
    ========================================= */
    .main-nav {
        display: none;
    }

    .btn-book-header {
        display: none;
    }

    .hamburger {
        display: flex;
    }

    .header-inner {
        padding: 1rem var(--space-md);
    }

    /* =========================================
         HERO
         Reduce padding and font sizes
    ========================================= */
    .hero {
        min-height: 90vh;
    }

    .hero-content {
        padding: 0 var(--space-md);
    }

    .hero .hero-subtitle {
        font-size: 1.0625rem;
    }

    .hero-cta-group {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-cta-group .btn {
        width: 100%;
    }

    .hero-scroll {
        display: none;
    }

    /* =========================================
         TRUST STRIP
         2x2 grid on mobile
    ========================================= */
    .trust-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-md);
    }

    /* =========================================
         INTRO SECTION
         Stack to single column
    ========================================= */
    .intro-grid {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
        padding: 0 var(--space-md);
    }

    .intro-image {
        aspect-ratio: 16/10;
    }

    /* =========================================
         PROGRAMS GRID
         Single column on mobile
    ========================================= */
    .programs-grid {
        grid-template-columns: 1fr;
        padding: 0 var(--space-md);
    }

    /* =========================================
         WHY NIVORA
         Stack to single column
    ========================================= */
    .why-feature {
        grid-template-columns: 1fr;
        gap: var(--space-md);
        padding: 0 var(--space-md);
        margin-bottom: var(--space-2xl);
    }

    .why-feature:nth-child(even) .why-feature-image {
        order: 0;
    }

    .why-feature-image {
        aspect-ratio: 16/10;
    }

    /* =========================================
         CLASSES GRID
         Single column on mobile
    ========================================= */
    .classes-grid {
        grid-template-columns: 1fr;
        padding: 0 var(--space-md);
    }

    /* =========================================
         INSTRUCTORS PREVIEW
         Single column on mobile
    ========================================= */
    .instructors-grid {
        grid-template-columns: 1fr;
        max-width: 360px;
        padding: 0 var(--space-md);
    }

    /* =========================================
         TESTIMONIALS
         Smaller text on mobile
    ========================================= */
    .testimonial-quote {
        font-size: 1.375rem;
    }

    /* =========================================
         FINAL CTA
         Reduced height
    ========================================= */
    .final-cta {
        min-height: 420px;
    }

    /* =========================================
         PAGE HERO
         Reduced padding
    ========================================= */
    .page-hero {
        padding: 7rem 0 var(--space-2xl);
    }

    /* =========================================
         ABOUT STORY
         Stack to single column
    ========================================= */
    .about-story-grid {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
        padding: 0 var(--space-md);
    }

    .about-story-image {
        aspect-ratio: 16/12;
    }

    /* =========================================
         PHILOSOPHY
         Single column
    ========================================= */
    .philosophy-grid {
        grid-template-columns: 1fr;
        padding: 0 var(--space-md);
        gap: var(--space-md);
    }

    /* =========================================
         PROGRAM DETAIL
         Stack to single column
    ========================================= */
    .program-detail {
        grid-template-columns: 1fr;
        gap: var(--space-md);
        padding: 0 var(--space-md);
        margin-bottom: var(--space-3xl);
    }

    .program-detail:nth-child(even) .program-detail-image {
        order: 0;
    }

    .program-detail-image {
        aspect-ratio: 16/10;
    }

    /* =========================================
         SCHEDULE
         Hide desktop table, show mobile cards
    ========================================= */
    .schedule-table {
        display: none;
    }

    .schedule-cards {
        display: block;
    }

    .schedule-filters {
        flex-direction: column;
        align-items: stretch;
        padding: 0 var(--space-md);
    }

    .filter-group {
        width: 100%;
    }

    .filter-select {
        width: 100%;
    }

    /* =========================================
         INSTRUCTORS FULL GRID
         Single column on mobile
    ========================================= */
    .instructors-full-grid {
        grid-template-columns: 1fr;
        padding: 0 var(--space-md);
        gap: var(--space-md);
    }

    /* =========================================
         MEMBERSHIP
         Single column, remove scale on featured
    ========================================= */
    .membership-grid {
        grid-template-columns: 1fr;
        padding: 0 var(--space-md);
        max-width: 400px;
    }

    .membership-plan {
        padding: var(--space-lg);
    }

    .membership-plan.featured {
        transform: none;
    }

    .membership-plan.featured:hover {
        transform: translateY(-4px);
    }

    /* =========================================
         CONTACT
         Stack to single column
    ========================================= */
    .contact-grid {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
        padding: 0 var(--space-md);
    }

    .contact-form-wrap {
        padding: var(--space-md);
    }

    /* =========================================
         BOOKING
         Adjustments
    ========================================= */
    .booking-form {
        padding: var(--space-lg);
    }

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

    /* =========================================
         FOOTER
         Stack columns
    ========================================= */
    .footer-inner {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
        padding: 0 var(--space-md);
    }

    .footer-brand {
        grid-column: 1;
    }

    /* =========================================
         STICKY CTA
         Show on mobile
    ========================================= */
    .sticky-cta {
        display: block;
    }

    /* Add bottom padding so content isn't hidden behind sticky CTA */
    body {
        padding-bottom: 70px;
    }

    /* =========================================
         FAQ
         Adjustments
    ========================================= */
    .faq-question {
        font-size: 1.0625rem;
    }

    /* =========================================
         BREATHING WIDGET
         Smaller circle
    ========================================= */
    .breathing-circle-wrap {
        width: 160px;
        height: 160px;
    }

    .breathing-circle {
        width: 100px;
        height: 100px;
    }
}

/* =========================================
   RESPONSIVE STYLES — SMALL MOBILE
   Very small screens (below 375px).
   Further reduces spacing and font sizes.
========================================= */

@media (max-width: 374px) {
    .container,
    .container-narrow {
        padding: 0 var(--space-sm);
    }

    .header-inner {
        padding: 0.75rem var(--space-sm);
    }

    .logo-text {
        font-size: 1.25rem;
    }

    .logo-mark {
        width: 32px;
        height: 32px;
        font-size: 1.125rem;
    }

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

    .btn {
        padding: 0.75rem 1.5rem;
        font-size: 0.8125rem;
    }
}

/* =========================================
   PRINT STYLES
   Clean print output for users who want
   to print pages (e.g. the schedule).
========================================= */

@media print {
    .site-header,
    .mobile-nav,
    .mobile-overlay,
    .sticky-cta,
    .hamburger,
    .footer-social,
    .hero-scroll {
        display: none !important;
    }

    body {
        background: white;
        color: black;
    }

    .section {
        padding: 1rem 0;
    }
}