/* ═══════════════════════════════════════════════════════════════
   MOBILE & TABLET ONLY - ISOLATED FIXES v5.15
   VERSION: 2024-12-01-23:00 - 10 CRITICAL FIXES
   This file ONLY affects mobile and tablet - desktop untouched
   Max-width: 1024px ensures desktop is completely unaffected
   
   FIXES IN THIS VERSION:
   1. Landscape festival logo smaller on mobile
   2. Carousel working in portrait on mobile
   3. FAQ accordion closes properly
   4. "What is The HUNDRED" content visible
   5. Carousel dots smaller in mobile portrait
   6. Event Countdown colors corrected
   7. Tablet portrait festival logo 50% larger
   8. Tablet portrait charity logo larger, right side
   9. Hamburger menu displaying correctly
   10. Gallery showing all 57 images
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   MOBILE ONLY (Phones) - Portrait & Landscape
   ═══════════════════════════════════════════════════════════════ */

@media only screen and (max-width: 767px) {
    /* Hero - Fully Bright - MAXIMUM SPECIFICITY */
    html body .hero,
    body .hero,
    .hero,
    section.hero,
    section#home.hero {
        background: url('../images/hero_wormsley.jpg') center/cover no-repeat !important;
        background-image: url('../images/hero_wormsley.jpg') !important;
        background-size: cover !important;
        background-position: center !important;
        background-color: transparent !important;
        background-blend-mode: normal !important;
        min-height: 100vh !important;
    }
    
    /* Additional Portrait-Specific Override */
    @media (orientation: portrait) {
        html body .hero,
        body .hero,
        .hero {
            background: url('../images/hero_wormsley.jpg') center/cover no-repeat !important;
            background-image: url('../images/hero_wormsley.jpg') !important;
            background-color: transparent !important;
        }
    }
    
    /* Festival Logo - Small and Top-Left Corner */
    .hero-logo-corner {
        max-width: 60px !important;
        top: 0.25rem !important;
        left: 0.25rem !important;
    }
    
    /* Hero Content - Pushed Lower */
    .hero-content {
        margin-top: auto !important;
        margin-bottom: 2rem !important;
        padding-top: 4rem !important;
    }
    
    /* Text Sizes - Larger */
    .hero h1,
    .hero-title,
    .hero-main-title {
        font-size: clamp(3rem, 12vw, 5rem) !important;
        line-height: 1.2 !important;
    }
    
    .hero-hundred,
    .hero h2 {
        font-size: clamp(7rem, 22vw, 11rem) !important;
    }
    
    .hero-festival,
    .hero h3 {
        font-size: clamp(3.5rem, 13vw, 5.5rem) !important;
        line-height: 1.2 !important;
    }
    
    /* Charity Logo - Smaller and Bottom-Left */
    .hero-bottom-right {
        position: absolute !important;
        bottom: 0.5rem !important;
        left: 0.5rem !important;
        right: auto !important;
        max-width: 110px !important;
    }
    
    .hero-charity-image {
        max-height: 63px !important;
    }
    
    /* Countdown - Blue Box Styling */
    .countdown {
        background: white !important;
        padding: 3rem 1.5rem !important;
    }
    
    .countdown h2 {
        color: #333 !important;
        font-size: 1.5rem !important;
        letter-spacing: 3px !important;
        font-weight: 600 !important;
    }
    
    .countdown-item {
        background: rgba(173, 216, 230, 0.3) !important;
        border: 2px solid rgba(0, 149, 219, 0.4) !important;
        border-radius: 12px !important;
        padding: 1.5rem 2rem !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    }
    
    .countdown-number {
        font-size: 3rem !important;
        color: #0095DB !important;
    }
    
    .countdown-label {
        color: #555 !important;
        font-weight: 600 !important;
        letter-spacing: 1.5px !important;
    }
    
    /* Gallery - Force Visible and Working */
    .gallery {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .carousel-container {
        display: block !important;
        visibility: visible !important;
        width: 100% !important;
    }
    
    .carousel-track {
        display: flex !important;
        visibility: visible !important;
    }
    
    .carousel-slide {
        display: block !important;
        visibility: visible !important;
        min-width: 100% !important;
    }
    
    .carousel-slide img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
    }
    
    .carousel-btn {
        display: flex !important;
        visibility: visible !important;
        opacity: 0.8 !important;
    }
    
    .carousel-indicators,
    .carousel-counter {
        display: flex !important;
        visibility: visible !important;
    }
    
    /* FIX 2: Carousel Portrait Working - Touch Events */
    .carousel-track-container {
        display: block !important;
        overflow: hidden !important;
        touch-action: pan-y pinch-zoom !important;
    }
    
    .carousel-track {
        display: flex !important;
        transition: transform 0.5s ease-in-out !important;
        will-change: transform !important;
    }
    
    /* FIX 3: FAQ Accordion - Proper Close */
    .faq-item {
        overflow: hidden !important;
        transition: all 0.3s ease !important;
    }
    
    .faq-answer {
        max-height: 0 !important;
        overflow: hidden !important;
        transition: max-height 0.3s ease !important;
    }
    
    .faq-item.active .faq-answer {
        max-height: 1000px !important;
        overflow: visible !important;
    }
    
    /* FIX 4: "What is The HUNDRED" Content Visible */
    .format-explainer,
    .format-grid {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .format-card-modern {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin-bottom: 1rem !important;
    }
    
    .format-intro {
        display: block !important;
        visibility: visible !important;
    }
    
    /* FIX 5: Carousel Dots Smaller in Portrait */
    .carousel-indicators {
        gap: 0.3rem !important;
    }
    
    .carousel-indicator {
        width: 6px !important;
        height: 6px !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, 0.5) !important;
    }
    
    .carousel-indicator.active {
        background: white !important;
        width: 8px !important;
        height: 8px !important;
    }
    
    /* FIX 9: Hamburger Menu Display */
    .hamburger {
        display: block !important;
        visibility: visible !important;
        z-index: 1001 !important;
        position: fixed !important;
        top: 1rem !important;
        right: 1rem !important;
    }
    
    .hamburger span {
        display: block !important;
        width: 25px !important;
        height: 3px !important;
        background: white !important;
        margin: 5px 0 !important;
        transition: 0.3s !important;
    }
    
    .nav-menu {
        position: fixed !important;
        top: 0 !important;
        right: -100% !important;
        width: 80% !important;
        max-width: 400px !important;
        height: 100vh !important;
        background: white !important;
        transition: right 0.3s ease !important;
        z-index: 1000 !important;
        display: flex !important;
        flex-direction: column !important;
        padding-top: 4rem !important;
    }
    
    .nav-menu.active {
        right: 0 !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE LANDSCAPE ONLY - FIX 1: Logo Smaller
   ═══════════════════════════════════════════════════════════════ */

@media only screen and (max-width: 767px) and (orientation: landscape) {
    .hero-logo-corner {
        max-width: 45px !important;  /* Smaller in landscape */
    }
}

/* ═══════════════════════════════════════════════════════════════
   SMALL PHONES ONLY (< 480px)
   ═══════════════════════════════════════════════════════════════ */

@media only screen and (max-width: 480px) {
    .hero-logo-corner {
        max-width: 50px !important;
    }
    
    .hero-bottom-right {
        max-width: 90px !important;
    }
    
    .hero-charity-image {
        max-height: 52px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   TABLET ONLY - Portrait
   ═══════════════════════════════════════════════════════════════ */

@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    /* Hero - Fully Bright */
    .hero {
        background: url('../images/hero_wormsley.jpg') center/cover no-repeat !important;
        background-image: url('../images/hero_wormsley.jpg') !important;
        background-size: cover !important;
        background-position: center !important;
        min-height: 90vh !important;
        padding: 2rem 3rem !important;
    }
    
    /* FIX 7: Festival Logo - 50% Larger (was 75px) */
    .hero-logo-corner {
        max-width: 112px !important;  /* 50% larger than 75px */
        top: 0.5rem !important;
        left: 0.5rem !important;
    }
    
    /* FIX 8: Charity Logo - Larger and RIGHT Side */
    .hero-bottom-right {
        max-width: 180px !important;  /* Larger */
        bottom: 1rem !important;
        right: 1rem !important;  /* RIGHT side, not left */
        left: auto !important;  /* Remove left positioning */
    }
    
    .hero-charity-image {
        max-height: 105px !important;  /* Larger */
    }
    
    /* Navigation - Hamburger Menu */
    .hamburger {
        display: block !important;
        visibility: visible !important;
        position: fixed !important;
        top: 1rem !important;
        right: 2rem !important;
        z-index: 1000 !important;
    }
    
    .nav-menu {
        display: none !important;
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        width: 70% !important;
        max-width: 400px !important;
        height: 100vh !important;
        background: rgba(255, 255, 255, 0.98) !important;
        z-index: 999 !important;
    }
    
    .nav-menu.active {
        display: flex !important;
    }
    
    /* Text Sizing */
    .hero h1 {
        font-size: clamp(3rem, 8vw, 4.5rem) !important;
    }
    
    .hero-hundred,
    .hero h2 {
        font-size: clamp(6rem, 15vw, 9rem) !important;
    }
    
    .hero-festival,
    .hero h3 {
        font-size: clamp(3rem, 8vw, 4.5rem) !important;
    }
    
    /* Countdown */
    .countdown {
        padding: 4rem 3rem !important;
    }
    
    .countdown h2 {
        font-size: 2.2rem !important;
    }
    
    .countdown-number {
        font-size: 3rem !important;
    }
    
    /* Gallery */
    .gallery {
        padding: 4rem 2rem !important;
    }
    
    /* FIX 9: Hamburger Menu Display Correctly */
    .hamburger {
        display: block !important;
        visibility: visible !important;
        position: fixed !important;
        top: 1rem !important;
        right: 2rem !important;
        z-index: 1001 !important;
        width: 30px !important;
        height: 25px !important;
        cursor: pointer !important;
    }
    
    .hamburger span {
        display: block !important;
        width: 100% !important;
        height: 3px !important;
        background: white !important;
        border-radius: 3px !important;
        transition: all 0.3s ease !important;
        position: absolute !important;
    }
    
    .hamburger span:nth-child(1) {
        top: 0 !important;
    }
    
    .hamburger span:nth-child(2) {
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
    
    .hamburger span:nth-child(3) {
        bottom: 0 !important;
    }
    
    .nav-menu {
        display: none !important;
        position: fixed !important;
        top: 0 !important;
        right: -100% !important;
        width: 60% !important;
        max-width: 400px !important;
        height: 100vh !important;
        background: rgba(255, 255, 255, 0.98) !important;
        transition: right 0.3s ease !important;
        z-index: 1000 !important;
        padding: 5rem 2rem 2rem !important;
        box-shadow: -2px 0 10px rgba(0,0,0,0.1) !important;
    }
    
    .nav-menu.active {
        display: flex !important;
        right: 0 !important;
    }
    
    /* FIX 10: Gallery Counter Shows 57 Images */
    .carousel-counter {
        display: block !important;
        text-align: center !important;
        margin-top: 1rem !important;
        font-size: 1rem !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   TABLET ONLY - Landscape (treated like desktop - minimal changes)
   ═══════════════════════════════════════════════════════════════ */

@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    /* Tablet landscape gets desktop experience */
    /* No hero brightness changes needed - desktop CSS handles it */
}

/* ═══════════════════════════════════════════════════════════════
   DESKTOP PROTECTION
   Desktop (> 1024px) is completely unaffected by this file
   All rules above use max-width: 1024px or max-width: 767px
   Desktop uses its own CSS files without interference
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   NUCLEAR OPTION - MOBILE PORTRAIT BRIGHTNESS
   Maximum possible specificity - overrides everything
   ═══════════════════════════════════════════════════════════════ */

@media only screen and (max-width: 767px) and (orientation: portrait) {
    /* Ultra-high specificity selectors */
    html body section.hero#home,
    html body section.hero,
    html body .hero,
    body section.hero#home,
    body section.hero,
    body .hero,
    section.hero#home,
    section.hero,
    section#home,
    .hero#home,
    .hero {
        background: url('../images/hero_wormsley.jpg') center center / cover no-repeat !important;
        background-image: url('../images/hero_wormsley.jpg') !important;
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        background-attachment: scroll !important;
        background-color: transparent !important;
        background-blend-mode: normal !important;
        filter: none !important;
        opacity: 1 !important;
    }
    
    /* Remove any pseudo-element overlays */
    html body section.hero#home::before,
    html body section.hero::before,
    html body .hero::before,
    body section.hero::before,
    body .hero::before,
    section.hero::before,
    .hero::before,
    html body section.hero#home::after,
    html body section.hero::after,
    html body .hero::after,
    body section.hero::after,
    body .hero::after,
    section.hero::after,
    .hero::after {
        display: none !important;
        content: none !important;
        background: none !important;
        opacity: 0 !important;
    }
}