/* ==========================================================================
   COLOUR CRUSH - COMPREHENSIVE RESPONSIVE SYSTEM
   Ensures mobile excellence across all pages without changing design intent.
   ========================================================================== */

/* 1. TABLET & SMALL LAPTOP (Max 1024px) */
@media (max-width: 1024px) {
    .about-grid, 
    .services-grid, 
    .pricing-grid, 
    .why-grid, 
    .why-grid-cinematic, 
    .academy-grid-cinematic,
    .course-grid,
    .academy-cards-container,
    .academy-course-grid,
    .contact-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 2rem !important;
    }

    .about-text {
        margin-left: 0 !important;
    }
}

/* 2. MOBILE LANDSCAPE & TABLET PORTRAIT (Max 768px) */
@media (max-width: 768px) {
    /* Layout Foundation */
    section {
        padding: 4rem 0 !important;
    }

    .container, 
    .services-container, 
    .about-container, 
    .breadcrumb-container,
    .contact-container {
        padding: 0 1.2rem !important;
    }

    /* Grids to Single Column */
    .about-grid, 
    .services-grid, 
    .pricing-grid, 
    .why-grid, 
    .why-grid-cinematic, 
    .academy-grid-cinematic,
    .course-grid,
    .academy-cards-container,
    .academy-course-grid,
    .contact-grid,
    .vision-mission-grid,
    .story-grid,
    .about-stats {
        grid-template-columns: 1fr !important;
        gap: 2.5rem !important;
        padding: 0 1.2rem !important;
    }

    /* Hero Section */
    .hero-cinematic-title {
        font-size: clamp(2.2rem, 11vw, 3.5rem) !important;
        line-height: 1.1 !important;
        padding: 0 0.5rem !important;
        margin-bottom: 2rem !important;
    }

    .hero-cinematic-subtitle {
        font-size: 0.9rem !important;
        margin-bottom: 2.5rem !important;
        padding: 0 1rem !important;
        line-height: 1.6 !important;
        max-width: 100% !important;
    }

    .hero-cta-group {
        flex-direction: column !important;
        align-items: center !important;
        gap: 1rem !important;
        width: 100% !important;
        max-width: 280px !important;
        margin: 0 auto !important;
        display: flex !important;
    }

    .hero-cta-group .btn-feminine-luxury,
    .hero-cta-group .btn-primary,
    .hero-cta-group .btn-outline {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
        padding: 1.1rem 1.5rem !important;
        margin: 0 !important;
    }

    /* About Section */
    .about-visual {
        aspect-ratio: 1/1 !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        border-radius: 20px !important;
    }

    .about-text {
        padding: 2.5rem 1.2rem !important;
        text-align: center !important;
        margin-left: 0 !important;
        border-radius: 20px !important;
    }

    .stat-card {
        padding: 1.2rem !important;
        text-align: center;
        border-left: none !important;
        border-top: 3px solid var(--hot-pink) !important;
    }

    .stat-num {
        font-size: 1.8rem !important;
    }

    /* Services & Cards */
    .service-card {
        aspect-ratio: 4/5 !important;
    }

    .pricing-card {
        padding: 2rem 1.2rem !important;
    }

    .pricing-title {
        font-size: 1.6rem !important;
        text-align: center !important;
        word-wrap: break-word !important;
    }

    /* Gallery */
    .gallery-masonry {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.8rem !important;
        padding: 0 1rem !important;
    }

    /* Academy Cards (Premium Style) */
    .academy-card-ultra-premium {
        border-radius: 25px !important;
    }

    .academy-card-img-wrap {
        height: 220px !important;
    }

    .academy-card-body {
        padding: 2rem 1.2rem !important;
    }

    .academy-card-title {
        font-size: 2rem !important;
        line-height: 1.1 !important;
        margin-bottom: 1.2rem !important;
    }

    .academy-card-desc {
        font-size: 0.9rem !important;
        max-width: 100% !important;
        margin-bottom: 1.5rem !important;
    }

    .academy-card-footer {
        flex-direction: column !important;
        align-items: center !important;
        gap: 1rem !important;
        padding-top: 1.5rem !important;
        text-align: center;
    }

    .academy-card-footer .btn-feminine-luxury {
        width: 100% !important;
        text-align: center;
    }

    /* Contact Page */
    .contact-form-wrap {
        padding: 2rem 1.2rem !important;
    }

    /* Breadcrumbs */
    .breadcrumb-section {
        padding: 8rem 0 3rem !important;
    }

    .breadcrumb-title {
        font-size: 2.5rem !important;
    }

    /* Navbar */
    nav {
        padding: 0.8rem 1rem !important;
    }
    
    .nav-logo img {
        height: 45px !important;
    }

    /* Ambient Orbs */
    .glow-orb {
        width: 180px !important;
        height: 180px !important;
        filter: blur(50px) !important;
    }
}

/* 3. SMALL MOBILE (Max 480px) */
@media (max-width: 480px) {
    .hero-cinematic-title {
        font-size: 2.2rem !important;
    }

    .gallery-masonry {
        grid-template-columns: 1fr !important;
    }

    .pricing-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.2rem;
    }

    .section-h2, .about-h2, .section-h2-premium {
        font-size: 2rem !important;
    }
}

/* 4. OVERFLOW PREVENTION */
html, body {
    max-width: 100vw;
    overflow-x: hidden;
}

/* 5. MARQUEE RESPONSIVE */
@media (max-width: 768px) {
    .marquee-text {
        font-size: 0.95rem !important;
    }
    .marquee-strip {
        padding: 0.7rem 0 !important;
    }
}