/* ===================================
   DreamWorks Channel - Main Stylesheet
   Mobile-First Responsive Design
   =================================== */

/* Loading Screen Styles */
.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.5s ease-out;
}

.loading-screen.fade-out {
    opacity: 0;
}

.loading-content {
    text-align: center;
}

.loading-logo-container {
    margin-bottom: 30px;
}

.loading-logo {
    width: 120px;
    height: 120px;
}

.loading-percentage {
    font-family: "futura-pt", sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #2C3E7D;
    letter-spacing: 2px;
}

/* Prevent scrolling while loading */
body.loading {
    overflow: hidden;
}

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    overflow-x: hidden; /* Prevent horizontal scroll on entire page */
    /* Removed scroll-behavior: smooth; to let Lenis handle it */
}

/* Lenis smooth scroll styles */
html.lenis {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

.lenis.lenis-scrolling iframe {
    pointer-events: none;
}

body {
    font-family: "futura-pt", sans-serif;
    font-weight: 400;
    line-height: 1.6;
    color: #333;
    background-color: #fff;
    overflow-x: hidden;
    min-height: calc(100vh + 40vw + 100px);
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: "futura-pt-bold", sans-serif;
    font-weight: 700;
    line-height: 1.2;
}

.section-title {
    font-size: 2.5rem;
    color: #333;
    text-align: center;
    margin-bottom: 2rem;
    text-transform: none;
    font-weight: 700;
}

/* Layout Container */
.main-content {
    min-height: 100vh;
    position: relative;
    background: #fff;
}

/* Top Gradient Overlay */
.top-gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 10vh;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.6) 20%, rgba(0, 0, 0, 0.35) 40%, rgba(0, 0, 0, 0.15) 70%, rgba(0, 0, 0, 0) 100%);
    z-index: 1000;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 2rem;
}

.top-logo {
    height: 50%;
    width: auto;
}

/* Country Selector Dropdown */
.country-selector {
    position: absolute;
    left: 15%;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: auto;
}

.country-button {
    background: #fff;
    border: 3px solid #FFD700;
    border-radius: 25px;
    padding: 0.5rem 1.5rem;
    font-family: "futura-pt-bold", sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: #4A5D92;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    min-width: 100px;
}

.country-button:hover,
.country-button.active {
    background: linear-gradient(135deg, #4A5D92 0%, #6B8BC7 100%);
    color: #fff;
    box-shadow: 0 0 15px rgba(107, 139, 199, 0.5);
}

.dropdown-arrow {
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

.country-button.active .dropdown-arrow {
    transform: rotate(180deg);
}

.country-dropdown {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    background: #fff;
    border: 3px solid #FFD700;
    border-radius: 15px;
    padding: 1rem;
    min-width: 200px;
    display: none;
    z-index: 1001;
}

.country-dropdown.show {
    display: block;
}

.country-option {
    display: block;
    padding: 0.5rem 0;
    color: #4A5D92;
    text-decoration: underline;
    font-family: "futura-pt-bold", sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    cursor: pointer;
    transition: color 0.3s ease;
}

.country-option:hover {
    color: #6B8BC7;
}

/* Territory Selector Sidebar - Hidden for now */
.territory-selector {
    display: none;
}

.territory-selector-header {
    padding: 2rem 1rem;
    text-align: center;
}

.sidebar-logo {
    width: 100%;
    max-width: 144px; /* 20% increase from 120px (120px × 1.2 = 144px) */
    height: auto;
}

.territory-nav {
    padding: 0;
}

.territory-list {
    list-style: none;
}

.territory-list li {
    padding: 0.75rem 1.5rem;
    color: #333;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
    border-bottom: 1px solid #f0f0f0;
}

.territory-list li:hover {
    background-color: #E8F4FD;
    color: #2B7FD9;
}

.territory-list li.active {
    background-color: #2B7FD9;
    color: #fff;
}

/* Hero Section */
.hero-section {
    position: relative;
    /* Use aspect ratio to maintain consistent proportions */
    width: 100%;
    /* Reverted to original cinematic aspect ratio */
    aspect-ratio: 2.35 / 1;
    min-height: 50vh; /* Ensure minimum video height */
    max-height: 90vh; /* Prevent it from being too tall on narrow screens */
    overflow: visible;
    background: #000;
    margin: 0;
    padding: 0;
}

/* Hero Video */
.hero-video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* Extend video container 30% below hero section */
    height: 130%;
    z-index: 1;
}

.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Adjust video positioning to show more content */
    object-position: center top;
}

/* Hero Fallback Image */
.hero-fallback-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    z-index: 1; /* Below dragon overlay */
    display: none; /* Hidden by default, shown by JavaScript when video fails */
}

/* Show fallback when JavaScript detects video failure */
.hero-fallback-image.show {
    display: block;
}

/* Dragon Overlay Container */
.dragon-overlay-container {
    position: absolute;
    /* Position relative to hero section height - moved 55% lower total */
    bottom: -75%; /* Dragon extends below video */
    left: 0; /* Align with container boundaries */
    width: 100%; /* Stay within container boundaries */
    /* Dragon aspect ratio: 4000/1630 = 2.45 */
    height: calc(100vw * 0.4075);
    /* Removed max-height to prevent clipping */
    z-index: 2;
    pointer-events: none;
}

.dragon-overlay {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom;
}

/* Hero Text Overlay */
.hero-text-overlay {
    position: absolute;
    /* Center vertically within dragon overlay, moved down 10% */
    top: 60%;
    /* Center horizontally and constrain like where-to-watch */
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 100%;
    max-width: 1200px;
    padding: 0 2rem;
    display: flex;
    justify-content: flex-end;
    z-index: 3;
    color: #fff;
    text-align: left;
}

/* Dragon Images Container - spans full dragon overlay area */
.hero-dragons-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    /* Ensure it covers the full dragon overlay dimensions */
}

.hero-dragon {
    position: absolute;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

/* Individual Dragon Positioning */
.dragon-1 {
    /* Hiccup on Toothless - Large, center-left */
    width: clamp(347.236875px, 43.40460938vw, 694.473750px);
    height: auto;
    left: 20%;
    top: 40%;
    transform: translate3d(0, 0, 0) rotate(-5deg);
    will-change: transform;
    z-index: 2;
}

.dragon-2 {
    /* Dragon Buddy - Large, above dragon-1 */
    width: clamp(228.69px, 27.4428vw, 2217.38px);
    height: auto;
    left: 20%;
    top: 10%;
    transform: translate3d(0, 0, 0) rotate(-10deg);
    will-change: transform;
    z-index: 1;
}

.dragon-3 {
    /* Dragon TV Buddy - Small, bottom left */
    width: clamp(88.2px, 11.025vw, 198.45px);
    height: auto;
    left: 10%;
    bottom: 10%;
    transform: translate3d(0, 0, 0) rotate(-10deg);
    will-change: transform;
}

.dragon-4 {
    /* Dragon TV Buddy - Large, top right */
    width: clamp(220px, 22vw, 1650px);
    height: auto;
    right: 5%;
    top: 10%;
    transform: translate3d(0, 0, 0) rotate(15deg);
    will-change: transform;
}

.dragon-5 {
    /* Dragon TV Buddy - Medium, left of dragon-2 */
    width: clamp(140px, 16vw, 280px);
    height: auto;
    left: 5%;
    top: 15%;
    transform: translate3d(0, 0, 0) rotate(-12deg);
    will-change: transform;
}

.hero-text-content {
    position: relative;
    z-index: 2;
    max-width: 600px;
    text-align: left;
}

.hero-main-title {
    font-family: "futura-pt-bold", sans-serif;
    font-weight: 700;
    /* Base/fallback size - smallest for unknown viewports (25% reduced) */
    font-size: clamp(0.675rem, 2.25vw, 2.14rem);
    margin-bottom: 0.75rem;
    line-height: 1.0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
    white-space: nowrap;
}

.hero-description {
    font-family: "futura-pt", sans-serif;
    font-weight: 400;
    /* Base/fallback size - smallest for unknown viewports (25% reduced) */
    font-size: clamp(0.506rem, 1.406vw, 1.181rem);
    line-height: 1.25;
    margin: 0;
    text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.4);
}

/* Hero Content - Now outside hero section */
.hero-content {
    position: absolute;
    top: calc(100vh - 40%);
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 3rem;
    text-align: center;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(2px);
}

.hero-logo-container {
    margin-bottom: 1rem;
}

.hero-logo {
    width: 336px; /* 20% increase from 280px (280px × 1.2 = 336px) */
    height: auto;
}

.hero-text {
    max-width: 800px;
}

#hero-title {
    font-size: 1.25rem;
    color: #fff;
    font-weight: 400;
    line-height: 1.6;
}

/* Characters Section */
.characters-section {
    background: #fff;
    padding: 4rem 0;
}

#characters-title {
    color: #294696;
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    margin-bottom: 50px; /* Increased to 50px (30px + 20px) for even more space */
}

.characters-grid {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Masonry Grid - Desktop */
.character-card {
    position: relative;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.3s ease;
    margin-bottom: 4px;
}

.character-card[class*="large-pos"]:hover {
    transform: scale(1.02);
    z-index: 10;
}

.character-card:focus {
    outline: none;
    transform: scale(1.02);
    z-index: 10;
}

.character-card img {
    width: 100%;
    height: auto;
    display: block;
}

/* Where to Watch Section */
.watch-section {
    background: #2B7FD9;
    padding: 0;
    display: flex;
    align-items: stretch;
    min-height: 400px;
    position: relative;
}

.watch-content {
    flex: 1;
    padding: 4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#watch-title {
    color: #fff;
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    text-align: left;
}

.watch-description {
    color: #fff;
    font-size: 1rem;
    margin-bottom: 3rem;
    opacity: 0.9;
    max-width: 600px;
}

.territory-info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Territory Dropdown Buttons */
.territory-button {
    background: #1E5FA5;
    color: #fff;
    padding: 1rem 2rem;
    border: none;
    border-radius: 4px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.3s ease;
    max-width: 400px;
}

.territory-button:hover {
    background: #164577;
}

.territory-button::after {
    content: '▼';
    font-size: 0.8rem;
    margin-left: 1rem;
}

/* Channel Info Box */
.channel-info {
    background: #FFD700;
    color: #333;
    padding: 2rem;
    margin-top: 1rem;
    border-radius: 4px;
    max-width: 400px;
}

.channel-info h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.channel-logos {
    display: flex;
    gap: 2rem;
    align-items: center;
    flex-wrap: wrap;
}

.channel-logos img {
    height: 40px;
    width: auto;
}

.watch-character {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 300px;
    height: 100%;
    display: flex;
    align-items: flex-end;
}

.watch-character img {
    width: 100%;
    height: auto;
    max-height: 90%;
    object-fit: contain;
    object-position: bottom left;
}

/* Activities Section */
.activities-section {
    background: #fff;
    padding: 4rem 0;
}

#activities-title {
    color: #294696;
    font-size: clamp(2.5rem, 5vw, 3.5rem); /* Now matches characters title responsive sizing */
    margin-bottom: 3rem;
}

.activities-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 2rem;
}

.activity-card {
    background: #fff;
    border: 3px solid #FFD700; /* Yellow border */
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    aspect-ratio: 1;
}

.activity-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.activity-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Activities Button */
.activities-button {
    text-align: center;
    margin-top: 2rem;
}

.more-activities-btn {
    background: #2B7FD9;
    color: #fff;
    padding: 0.75rem 2rem;
    border: none;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.3s ease;
}

.more-activities-btn:hover {
    background: #1E5FA5;
}

/* Footer */
.main-footer {
    background: #2B7FD9;
    color: #fff;
    padding: 3rem 0;
    text-align: center;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.footer-logo {
    width: 200px;
    height: auto;
    margin-bottom: 1.5rem;
}

.copyright {
    font-size: 0.875rem;
    opacity: 0.8;
}

/* Character Modal */
.character-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 2000;
    justify-content: center;
    align-items: center;
}

.modal-content {
    background: #fff;
    border-radius: 12px;
    max-width: 90%;
    max-height: 90vh;
    overflow: hidden;
    position: relative;
}

.modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 2rem;
    color: #333;
    cursor: pointer;
    z-index: 10;
}

.modal-body {
    padding: 2rem;
}

/* Mobile Styles */
@media (max-width: 767px) {
    .hero-section {
        /* Reduced height to match mockup proportions */
        max-height: 55vh;
        margin-top: 0;
        padding-top: 0;
        position: relative;
        top: 0;
    }
    
    .hero-video-container {
        margin-top: 0;
        padding-top: 0;
        top: 0;
    }

    .dragon-overlay-container {
        /* Adjusted position on mobile with mobile dragon image */
        bottom: -50%;
        /* Mobile dragon aspect ratio: 2250/2090 = 1.08 */
        height: calc(100vw * 0.929);
    }

    .hero-text-overlay {
        /* Position text on left side for mobile */
        top: calc(50% + 10px);
        left: 0;
        transform: translateY(-50%);
        width: 100%;
        max-width: 100%;
        padding: 0;
        justify-content: flex-start;
    }
    
    .hero-text-content {
        max-width: 60%;
        margin-left: 30px;
        text-align: left;
    }

    /* Use mobile-specific fallback image */
    .hero-fallback-image {
        content: url("../images/backgrounds/hero-fallback-mobile.jpg");
    }

    /* Use mobile-specific dragon image */
    .dragon-overlay {
        content: url("../images/backgrounds/Dragon-Section-Blocks-02.png");
    }

    /* Mobile-specific dragon positioning */
    .dragon-1 {
        left: 60%;  /* Moved 40% to the right from original 20% */
    }

    .dragon-3 {
        bottom: 20%;  /* Moved up 10% from original 10% */
    }

    /* Hide dragons 2-5 on mobile - show only dragon-1 */
    .dragon-2,
    .dragon-3,
    .dragon-4,
    .dragon-5 {
        display: none;
    }

    /* Mobile header layout - country selector left, logo right */
    .top-gradient-overlay {
        height: 6vh; /* Reduced from 10vh to move elements closer to top */
        justify-content: flex-end;
        align-items: center;
        padding: 0 1rem;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1000;
    }
    
    .top-logo {
        height: 65.625%; /* 25% increase from mobile baseline (52.5% × 1.25) */
        width: auto;
        position: relative;
        top: 5px;  /* Move down 5px from default position */
    }
    
    /* Mobile country selector optimization */
    .country-selector {
        position: absolute;
        left: 1rem;
        top: 50%;
        transform: translateY(calc(-50% + 10px));  /* Moved down 10px from center */
        text-align: left;
    }

    .country-button {
        min-width: 81px;        /* 10% smaller: 90px × 0.9 */
        padding: 0.50625rem 1.0125rem;  /* 10% smaller: 0.5625rem × 0.9, 1.125rem × 0.9 */
        font-size: 0.6075rem;   /* 10% smaller: 0.675rem × 0.9 */
        /* Compact mobile sizing - 32.5% total reduction (25% + 10%) */
    }

    .country-dropdown {
        left: 0;
        transform: none;
        min-width: 200px;
        max-width: 90vw;
    }

    /* Mobile-specific adjustments - larger text as shown in mockup */
    /* Mobile: Larger for readability on small screens (25% reduced) */
    .hero-main-title {
        font-size: clamp(1.2rem, 4.125vw, 3.375rem);
        margin-bottom: 0.5rem;
        line-height: 1.1;
    }

    .hero-description {
        font-size: clamp(0.825rem, 2.4vw, 1.875rem);
        line-height: 1.2;
    }

    /* Text scaling handled by base clamp() - no override needed */

    .section-title {
        font-size: 1.75rem;
    }

    .characters-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 4px;
        padding: 0 1rem;
    }

    .watch-section {
        flex-direction: column;
    }

    .watch-character {
        position: relative;
        width: 100%;
        height: 200px;
        order: -1;
    }

    .watch-content {
        padding: 2rem;
    }

    .activities-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        padding: 0 1rem;
    }

}

/* Small Tablet Styles (768px-959px) */
@media (min-width: 768px) and (max-width: 959px) {
    .characters-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 4px;
    }

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

    .hero-section {
        max-height: 80vh;
    }

    .dragon-overlay-container {
        bottom: -63%;
    }

    .hero-text-content {
        max-width: min(60vw, 450px);
    }
}

/* Large Tablet Styles (960px-1023px) */
@media (min-width: 960px) and (max-width: 1023px) {
    .characters-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 4px;
    }

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

    .hero-section {
        max-height: 80vh;
    }

    .hero-text-content {
        max-width: min(70vw, 550px);
    }
}

/* Small Desktop Styles (1024px-1199px) */
@media (min-width: 1024px) and (max-width: 1199px) {
    /* Territory Sidebar remains hidden */
    .territory-selector {
        display: none;
    }

    /* Remove sidebar margin from main content */
    .main-content {
        margin-left: 0;
    }

    /* Masonry grid for characters */
    .characters-grid {
        column-count: 4;
        column-gap: 4px;
    }

    .character-card {
        break-inside: avoid;
    }

    .watch-content {
        padding-left: 350px; /* Space for Po character */
    }
}

/* Medium Desktop Styles (1200px-1599px) */
@media (min-width: 1200px) and (max-width: 1599px) {
    /* Territory Sidebar remains hidden */
    .territory-selector {
        display: none;
    }

    /* Remove sidebar margin from main content */
    .main-content {
        margin-left: 0;
    }

    /* Masonry grid for characters */
    .characters-grid {
        column-count: 4;
        column-gap: 4px;
    }

    .character-card {
        break-inside: avoid;
    }

    .watch-content {
        padding-left: 350px; /* Space for Po character */
    }
}

/* Large Desktop Styles (1600px+) */
@media (min-width: 1600px) {
    /* Territory Sidebar remains hidden */
    .territory-selector {
        display: none;
    }

    /* Remove sidebar margin from main content */
    .main-content {
        margin-left: 0;
    }

    /* Masonry grid for characters */
    .characters-grid {
        column-count: 4;
        column-gap: 4px;
    }

    .character-card {
        break-inside: avoid;
    }

    .watch-content {
        padding-left: 350px; /* Space for Po character */
    }
    
    /* Large desktop font sizes - largest (25% reduced) */
    .hero-main-title {
        font-size: clamp(1.2rem, 3.375vw, 3rem);
    }

    .hero-description {
        font-size: clamp(0.9rem, 2.25vw, 1.875rem);
    }
}

/* Hero Text Responsive Sizing - Clean Progression */
/* Tablet (768px-1023px) - Medium sizes (25% reduced) */
@media (min-width: 768px) and (max-width: 1023px) {
    .hero-main-title {
        font-size: clamp(0.9rem, 3vw, 2.4rem);
    }
    .hero-description {
        font-size: clamp(0.675rem, 1.875vw, 1.5rem);
    }
}

/* Desktop (1024px-1599px) - Larger sizes (25% reduced) */
@media (min-width: 1024px) and (max-width: 1599px) {
    .hero-main-title {
        font-size: clamp(1.05rem, 3.15vw, 2.7rem);
    }
    .hero-description {
        font-size: clamp(0.75rem, 2.1vw, 1.65rem);
    }
}

/* Dragon positioning fix for desktop range 1024px-1125px */
@media (min-width: 1024px) and (max-width: 1125px) {
    .dragon-overlay-container {
        /* Move dragon up to cover video edge */
        bottom: -65%;
    }
}

/* Dragon positioning fix for 990px-1023px (tablet upper range) */
@media (min-width: 990px) and (max-width: 1023px) {
    .dragon-overlay-container {
        /* Adjust dragon position for tablet upper range to maintain 11.625% overlay */
        bottom: -60%;
    }
}

/* Mid Desktop - 1350px breakpoint */
@media (min-width: 1350px) {
    .hero-section {
        max-height: 85vh;
    }
    
    .dragon-overlay-container {
        bottom: -77%;
    }
    
    .hero-text-content {
        max-width: min(600px, 45vw);
    }
    
    /* Text scaling handled by base clamp() - no override needed */
}

/* Large Desktop */
@media (min-width: 1440px) {
    .characters-grid {
        max-width: 1400px;
    }

    .hero-logo {
        width: 420px; /* 20% increase from 350px (350px × 1.2 = 420px) */
    }

    #hero-title {
        font-size: 1.5rem;
        max-width: 900px;
    }
    
    .hero-section {
        max-height: 90vh;
    }
    
    .dragon-overlay-container {
        bottom: -80%;
    }
}

/* Extra Large Desktop - 2000px+ */
@media (min-width: 2000px) {
    .hero-section {
        max-height: 100vh; /* Allow full height on very large screens */
    }
    
    .dragon-overlay-container {
        bottom: -83%;
        /* Only apply max-height at very large screens */
        max-height: 70vh;
    }
    
    .hero-text-content {
        max-width: min(700px, 35vw);
    }
}

/* =====================================================
   CHARACTERS SECTION
   ===================================================== */

.characters-section {
    padding: 0px 20px 60px 20px;
    margin-top: max(35vh, 350px); /* Ensures minimum 350px spacing regardless of viewport height */
    background-color: transparent;
    position: relative;
    z-index: 5;
}

/* Mobile override for character section positioning */
@media (max-width: 767px) {
    .characters-section {
        padding: 30px 20px 60px 20px;
        margin-top: 20vh; /* Restored to v1.6 value - dragons extend naturally via overflow: visible */
        background-color: #ffffff;
        position: relative;
        z-index: 5;
    }
    
    #characters-title {
        font-size: clamp(1.386rem, 2.772vw, 2.4255rem); /* 5% increase from 50% reduced size */
        margin-bottom: 12.5px; /* Proportionally reduced spacing (50% of 25px) */
    }

    #activities-title {
        font-size: clamp(1.386rem, 2.772vw, 2.4255rem); /* Same mobile sizing as characters title */
        margin-bottom: 12.5px; /* Consistent spacing with characters title */
    }
}

/* Responsive character section positioning to avoid dragon overlap */
@media (min-width: 1350px) {
    .characters-section {
        margin-top: max(45vh, 450px); /* Ensures minimum 450px spacing on large screens */
    }
}

@media (min-width: 2000px) {
    .characters-section {
        margin-top: max(55vh, 550px); /* Ensures minimum 550px spacing on ultra-wide screens */
    }
}

@media (min-width: 2700px) {
    .characters-section {
        margin-top: max(60vh, 600px); /* Ensures minimum 600px spacing on extra-wide displays */
    }
}

.characters-container {
    max-width: 1400px;
    margin: 0 auto;
}

.characters-title {
    font-family: "futura-pt-bold", sans-serif;
    font-weight: 700;
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    color: #294696;
    text-align: center;
    margin-top: 0px; /* No top margin */
    margin-bottom: 10px; /* Further reduced from 20px to 10px */
}

/* Base Character Grid - Mobile First (3 columns) */
.characters-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 10px;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

/* Mobile Layout - Updated to display all 15 characters (5 large + 10 small) */
@media (max-width: 1023px) {
    .characters-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr); /* 4 columns for proper layout */
        grid-template-rows: repeat(8, 1fr); /* 8 rows to accommodate all characters */
        gap: 10px;
        max-width: 437.5px;
        margin: 0 auto; /* Center the grid */
    }
    
    /* Ensure character images are centered within their grid cells */
    .character-card {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px; /* Reduced from 20px for sharper mobile look */
    }
    
    /* LARGE CHARACTERS (2x2 each) - All display as large on mobile */

    /* Large Position 1 (King Julien) - TOP LEFT */
    .character-card.large-pos-1 {
        grid-column: 1 / 3;
        grid-row: 1 / 3;
    }

    /* Large Position 2 (Boss Baby) - MIDDLE LEFT */
    .character-card.large-pos-2 {
        grid-column: 1 / 3;
        grid-row: 3 / 5;
    }

    /* Large Position 3 (Po) - MIDDLE RIGHT */
    .character-card.large-pos-3 {
        grid-column: 3 / 5;
        grid-row: 4 / 6;
    }

    /* Large Position 4 (Toothless) - BOTTOM LEFT */
    .character-card.large-pos-4 {
        grid-column: 1 / 3;
        grid-row: 6 / 8;
    }

    /* Large Position 5 (Gabby) - BOTTOM RIGHT */
    .character-card.large-pos-5 {
        grid-column: 3 / 5;
        grid-row: 7 / 9;
    }

    /* SMALL CHARACTERS (1x1 each) - Fixed positioning to avoid overlaps */

    /* Top right area */
    .character-card.small-pos-1 { grid-column: 3 / 4; grid-row: 1 / 2; }
    .character-card.small-pos-2 { grid-column: 3 / 4; grid-row: 2 / 3; }
    .character-card.small-pos-3 { grid-column: 4 / 5; grid-row: 2 / 3; }

    /* Middle row */
    .character-card.small-pos-4 { grid-column: 3 / 4; grid-row: 3 / 4; }
    .character-card.small-pos-5 { grid-column: 4 / 5; grid-row: 3 / 4; }

    /* Under Large 2 (Boss Baby) */
    .character-card.small-pos-6 { grid-column: 1 / 2; grid-row: 5 / 6; }
    .character-card.small-pos-7 { grid-column: 2 / 3; grid-row: 5 / 6; }

    /* Between Large 3 (Po) and Large 5 (Gabby) */
    .character-card.small-pos-8 { grid-column: 3 / 4; grid-row: 6 / 7; }
    .character-card.small-pos-9 { grid-column: 4 / 5; grid-row: 6 / 7; }

    /* Under Large 4 (Toothless) */
    .character-card.small-pos-10 { grid-column: 2 / 3; grid-row: 8 / 9; }
}

/* Character Card Base Styles */
.character-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    cursor: default;
    transition: all 0.3s ease;
    aspect-ratio: 1 / 1; /* Square by default */
}

/* Sequential alternating blue backgrounds */
.character-card:nth-child(4n+1) { background-color: #00c2eb; } /* Darkest blue */
.character-card:nth-child(4n+2) { background-color: #7cd7f2; } /* Medium-dark */
.character-card:nth-child(4n+3) { background-color: #a6e4f6; } /* Medium-light */
.character-card:nth-child(4n)   { background-color: #c4ecfa; } /* Lightest blue */

/* Large character cards are clickable */
.character-card[class*="large-pos"] {
    cursor: pointer;
}

.character-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

/* Drop shadow for large character cards */
.character-card[class*="large-pos"] {
    box-shadow: 7px 7px 7px rgba(0, 0, 0, 0.35);
}

/* Hover Effects - Only for large clickable cards */
.character-card[class*="large-pos"]:hover {
    background-color: #FFD700; /* Yellow background */
    transform: scale(1.02);
    z-index: 5;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* Ensure image doesn't scale on hover */
.character-card[class*="large-pos"]:hover .character-image {
    transform: none;
}


/* Desktop Layout - Masonry Style with CSS Grid */
@media (min-width: 1024px) {
    /* DreamWorks logo 20% larger on desktop */
    .top-logo {
        height: 60%; /* 20% increase from 50% (50% × 1.2 = 60%) */
    }

    .characters-section {
        padding: 100px 40px;
    }
    
    .characters-grid {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: repeat(5, 1fr);
        gap: clamp(10px, 1.5vw, 20px); /* Responsive gap that scales with viewport */
        max-width: min(90vw, 1200px); /* Responsive width: 90% of viewport up to 1200px max */
        margin: 0 auto;
    }
    
    /* All cards must maintain square aspect ratio */
    .character-card {
        aspect-ratio: 1 / 1;
    }
    
    /* Position-based grid layout - works with any character selection */
    
    /* Large Position 1 (2x2) - top left */
    .character-card.large-pos-1 {
        grid-column: 1 / 3;
        grid-row: 1 / 3;
    }
    
    /* Large Position 2 (2x2) - top right */
    .character-card.large-pos-2 {
        grid-column: 5 / 7;
        grid-row: 1 / 3;
    }
    
    /* Large Position 3 (2x2) - middle left */
    .character-card.large-pos-3 {
        grid-column: 1 / 3;
        grid-row: 3 / 5;
    }
    
    /* Large Position 4 (2x2) - bottom middle */
    .character-card.large-pos-4 {
        grid-column: 3 / 5;
        grid-row: 4 / 6;
    }
    
    /* Large Position 5 (2x2) - bottom right */
    .character-card.large-pos-5 {
        grid-column: 5 / 7;
        grid-row: 4 / 6;
    }
    
    /* Small Position 1 (1x1) - top row */
    .character-card.small-pos-1 {
        grid-column: 3 / 4;
        grid-row: 1 / 2;
    }
    
    /* Small Position 2 (1x1) - top row */
    .character-card.small-pos-2 {
        grid-column: 4 / 5;
        grid-row: 1 / 2;
    }
    
    /* Small Position 3 (1x1) - second row */
    .character-card.small-pos-3 {
        grid-column: 3 / 4;
        grid-row: 2 / 3;
    }
    
    /* Small Position 4 (1x1) - second row */
    .character-card.small-pos-4 {
        grid-column: 4 / 5;
        grid-row: 2 / 3;
    }
    
    /* Small Position 5 (1x1) - middle row */
    .character-card.small-pos-5 {
        grid-column: 3 / 4;
        grid-row: 3 / 4;
    }
    
    /* Small Position 6 (1x1) - middle row */
    .character-card.small-pos-6 {
        grid-column: 4 / 5;
        grid-row: 3 / 4;
    }
    
    /* Small Position 7 (1x1) - middle row */
    .character-card.small-pos-7 {
        grid-column: 5 / 6;
        grid-row: 3 / 4;
    }
    
    /* Small Position 8 (1x1) - middle row */
    .character-card.small-pos-8 {
        grid-column: 6 / 7;
        grid-row: 3 / 4;
    }
    
    /* Small Position 9 (1x1) - bottom left under Large Position 3 */
    .character-card.small-pos-9 {
        grid-column: 1 / 2;
        grid-row: 5 / 6;
    }
    
    /* Small Position 10 (1x1) - bottom left under Large Position 3 */
    .character-card.small-pos-10 {
        grid-column: 2 / 3;
        grid-row: 5 / 6;
    }
}

/* ===================================
   Character Modal Styles
   =================================== */

.character-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 2000;
    overflow: hidden;
}

.character-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    box-sizing: border-box;
    overflow-y: auto; /* Enable vertical scrolling when content exceeds viewport */
}

.character-modal-content {
    position: relative;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    background: linear-gradient(135deg, #04b7e6 0%, #294696 100%);
    border-radius: 20px;
    padding: 0;
    overflow: visible; /* Changed from hidden to allow scrolling in parent overlay */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    margin: auto; /* Ensure proper centering when scrolling */
}

.character-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 50px;
    height: 50px;
    background: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 2001;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    color: #4A5D92;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.character-modal-close:hover {
    background: #f0f0f0;
    transform: scale(1.1);
}

.close-icon {
    line-height: 1;
    margin-top: -2px;
}

.character-modal-body {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 500px;
}

.character-modal-image {
    flex: 4;
    background: #fff;
    padding: 10px;
    border-radius: 20px;
    margin: 14px 15px 5px 15px; /* Tighter bottom margin for reduced image-to-title spacing */
    overflow: hidden;
    min-height: 400px;
    position: relative;
}

.character-popup-image {
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    object-fit: cover;
    display: block;
    position: absolute;
    top: 10px;
    left: 10px;
    border-radius: 10px;
}

.character-modal-info {
    padding: 0.625rem 2rem 2rem 2rem; /* Further reduced top padding, properly increased bottom padding */
    color: #fff;
    text-align: center;
    flex-shrink: 0;
}

.character-modal-title {
    font-family: "futura-pt-bold", sans-serif;
    font-weight: 700;
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: 0.5rem; /* Reduced from 1rem for tighter title-to-description spacing */
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.character-modal-description {
    font-family: "futura-pt", sans-serif;
    font-weight: 400;
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    line-height: 1.4;
    color: #fff;
    max-width: 600px;
    margin: 0 auto;
    max-height: 200px;
    overflow-y: auto;
    padding-right: 10px;
}

/* Custom scrollbar for character description */
.character-modal-description::-webkit-scrollbar {
    width: 6px;
}

.character-modal-description::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.character-modal-description::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
}

.character-modal-description::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* Mobile Modal Styles */
@media (max-width: 767px) {
    .character-modal-overlay {
        padding: 1rem;
    }
    
    .character-modal-content {
        max-width: 95vw;
        max-height: 85vh;
        border-radius: 15px;
    }
    
    .character-modal-close {
        top: 10px;
        right: 10px;
        width: 40px;
        height: 40px;
        font-size: 1.25rem;
    }
    
    .character-modal-body {
        min-height: 400px;
    }
    
    .character-modal-image {
        margin: 10px 10px 5px 10px; /* Reduced bottom margin for consistent spacing */
        border-radius: 10px;
        min-height: 320px;
        position: relative;
        flex: 3;
    }
    
    .character-modal-info {
        padding: 1rem 1.5rem;
    }

    .character-modal-description {
        max-height: 150px;
    }
    
    .character-popup-image {
        display: block;
        position: absolute;
        width: calc(100% - 10px);
        height: calc(100% - 10px);
        top: 5px;
        left: 5px;
    }
}

/* Short Viewport Optimization - prevents text cutoff on short browser windows */
@media (max-height: 800px) {
    .character-modal-content {
        max-height: 80vh;
    }

    .character-modal-body {
        min-height: 400px;
    }

    .character-modal-image {
        min-height: 300px;
        flex: 3;
        margin: 12px 12px 7px 12px; /* Proportionally reduced bottom margin */
    }

    .character-modal-info {
        padding: 1rem 1.5rem; /* Reduced from 1.5rem 2rem */
    }

    .character-modal-description {
        max-height: 150px; /* Reduced from 200px */
    }
}

/* Very Short Viewport - Ensure full scrollability at extreme heights */
@media (max-height: 650px) {
    .character-modal-content {
        max-height: none; /* Remove height restriction to allow full content */
        margin: 2rem auto; /* Add vertical margin for scroll padding */
    }

    .character-modal-overlay {
        align-items: flex-start; /* Align to top instead of center for better scroll UX */
        padding-top: 2rem;
    }

    .character-modal-body {
        min-height: 350px;
    }

    .character-modal-image {
        min-height: 250px;
        flex: 2.5;
    }
}

/* Show modal when active */
.character-modal.show {
    display: block;
}

/* ===================================
   Where to Watch Section
   =================================== */

.where-to-watch-section {
    background: linear-gradient(90deg, #00BFFF 0%, #4169E1 100%);
    background-image: url('../images/backgrounds/WTW-Section-Desktop.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    aspect-ratio: 2.8 / 1;
    display: flex;
    align-items: center;
    padding: 0;
    position: relative;
    margin-top: 0;
    z-index: 100;
}

.where-to-watch-content {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 4rem 2rem;
    padding-top: 10rem; /* Final adjustment to match user specification */
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.where-to-watch-text {
    max-width: 600px;
    color: #fff;
    text-align: left;
}

.where-to-watch-logo {
    width: 339px; /* Another 10% increase (308px × 1.1 = 339px) */
    max-width: 100%;
    height: auto;
    margin-bottom: 1rem;
    display: block;
}

.where-to-watch-title {
    font-family: "futura-pt-bold", sans-serif;
    font-weight: 700;
    font-size: clamp(0.9rem, 3vw, 2.85rem);
    color: #fff;
    margin-bottom: 0.75rem;
    line-height: 1.0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}

.where-to-watch-description {
    font-family: "futura-pt", sans-serif;
    font-weight: 400;
    font-size: clamp(0.9rem, 2.5vw, 2.1rem);
    line-height: 1.25;
    color: #fff;
    text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.4);
}

/* Territory-specific styling: France & Belgium - 10% smaller description text */
body[data-region="france"] .where-to-watch-description,
body[data-region="belgium"] .where-to-watch-description {
    font-size: clamp(0.81rem, 2.25vw, 1.89rem);
}

/* Mobile Where to Watch Styles */
@media (max-width: 767px) {
    .where-to-watch-section {
        background-image: url('../images/backgrounds/WTW-Section-mobile.png');
        aspect-ratio: 2 / 1;
        background-position: center;
        background-size: cover;
        z-index: 100;
    }
    
    .where-to-watch-content {
        padding: 1rem 1rem 1rem 1rem;
        padding-top: 5.83rem; /* Proportional adjustment (10rem / 6.6rem × 3.85rem = 5.83rem) */
        justify-content: flex-end;
        text-align: left;
        align-items: center;
    }
    
    .where-to-watch-text {
        max-width: 50%;
        text-align: left;
        margin-right: 5%;
        line-height: 1.1;
        position: relative;
        top: -4vh;  /* Move up 4% of viewport height (reduced from -5vh) */
    }

    .where-to-watch-logo {
        width: 218px; /* Another 10% increase (198px × 1.1 = 218px) */
        margin-bottom: 0.75rem;
    }

    .where-to-watch-title {
        font-size: clamp(1.2rem, 4.125vw, 3.375rem);  /* Matched to hero-main-title */
        margin-bottom: 0.5rem;
        line-height: 1.0;
    }

    .where-to-watch-description {
        font-size: clamp(0.825rem, 2.4vw, 1.875rem);  /* Matched to hero-description */
        line-height: 1.2;
    }

    /* Mobile override for France & Belgium - 20% smaller */
    body[data-region="france"] .where-to-watch-description,
    body[data-region="belgium"] .where-to-watch-description {
        font-size: clamp(0.66rem, 1.92vw, 1.5rem);
    }

    /* Mobile override for France & Belgium - Background shifted right */
    body[data-region="france"] .where-to-watch-section,
    body[data-region="belgium"] .where-to-watch-section {
        background-position: 30% center;
    }
}

/* ===================================
   Territory Accordion Section
   =================================== */

.territory-accordion-section {
    background: #fff;
    padding: 0;
    position: relative;
}

.territory-accordion {
    width: 100%;
    margin: 0;
    padding: 0;
}

.accordion-item {
    border: none;
    margin-bottom: 2px;
}

.accordion-header {
    width: 100%;
    background: #002f6c;
    color: #fff;
    border: none;
    padding: 1.5rem 2rem;
    font-family: "futura-pt-bold", sans-serif;
    font-weight: 700;
    font-size: clamp(1.2rem, 2.5vw, 1.8rem);
    text-align: center;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    transition: all 0.3s ease;
    position: relative;
}

.accordion-header:hover {
    background: #5A6DA2;
}

.accordion-item.active .accordion-header {
    background: #FFD700;
    color: #4A5D92;
}

.accordion-title {
    font-size: inherit;
}

.accordion-arrow {
    font-size: 0.8em;
    transition: transform 0.3s ease;
}

.accordion-item.active .accordion-arrow {
    transform: rotate(180deg);
}

.accordion-content {
    display: none;
    background: #f5f5f5;
    padding: 3rem 2rem;
}

.accordion-item.active .accordion-content {
    display: block;
}

.affiliate-logos {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 2.5rem 4rem; /* row gap, column gap - increased for divider space */
    max-width: 1000px;
    margin: 0 auto;
}

.affiliate-item {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    position: relative;
    flex: 0 0 280px; /* Fixed width for consistent spacing */
}

/* Wider container for Contact Your Local Provider logo */
.affiliate-item:has(.affiliate-logo[alt="Contact Your Local Provider"]) {
    flex: 0 0 320px;
}

/* Centered dividers between items (not after every 3rd or last item) */
.affiliate-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -2rem;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #c0c0c0;
}

/* Remove dividers at end of each row based on screen size */
@media (min-width: 1024px) {
    /* 3 items per row on desktop - remove divider after every 3rd item */
    .affiliate-item:nth-child(3n)::after {
        display: none;
    }
}

.affiliate-link {
    display: inline-block;
    transition: all 0.3s ease;
    border-radius: 8px;
    padding: 0.5rem;
}

.affiliate-link:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    background: rgba(255, 215, 0, 0.1);
}

.affiliate-link:focus {
    outline: 3px solid #FFD700;
    outline-offset: 2px;
}

/* No hover effect for Contact Your Local Provider */
.affiliate-link:has(.affiliate-logo[alt="Contact Your Local Provider"]):hover {
    transform: none;
    box-shadow: none;
    background: none;
}

/* No focus outline for Contact Your Local Provider */
.affiliate-link:has(.affiliate-logo[alt="Contact Your Local Provider"]):focus {
    outline: none;
}

.affiliate-logo {
    max-width: 200px;
    max-height: 80px;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: all 0.3s ease;
}

/* Make Contact Your Local Provider logo 20% larger - force actual size */
.affiliate-logo[alt="Contact Your Local Provider"] {
    width: 240px !important;        /* Force actual width */
    height: auto !important;        /* Scale proportionally */
    max-width: none !important;     /* Override parent constraint */
    max-height: none !important;    /* Override parent constraint */
}

/* Make DreamWorks Channel logo 10% larger for MENA region */
.affiliate-logo[alt="DreamWorks Channel"] {
    width: 220px !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
}

.affiliate-channels {
    font-family: "futura-pt-bold", sans-serif;
    font-weight: 700;
    font-size: clamp(1rem, 2vw, 1.3rem);
    color: #4A5D92;
    margin: 0;
}

/* Tablet and Small Desktop - adjusted spacing */
@media (min-width: 768px) and (max-width: 1023px) {
    .affiliate-logos {
        gap: 2rem 3rem; /* Slightly smaller gap for tablet */
        max-width: 700px;
    }

    .affiliate-item {
        flex: 0 0 250px; /* Slightly smaller width for tablet */
    }

    /* Wider container for Contact Your Local Provider logo on tablet */
    .affiliate-item:has(.affiliate-logo[alt="Contact Your Local Provider"]) {
        flex: 0 0 300px;
    }

    /* Adjust divider position for smaller gap */
    .affiliate-item:not(:last-child)::after {
        right: -1.5rem;
    }

    /* 2 items per row on tablet - remove divider after every 2nd item */
    .affiliate-item:nth-child(2n)::after {
        display: none;
    }

    /* Narrow where-to-watch text for tablet range */
    .where-to-watch-text {
        max-width: 450px;
        color: #fff;
        text-align: left;
    }
}

/* Mobile Accordion Styles */
@media (max-width: 767px) {
    .territory-accordion {
        padding: 0;
    }
    
    .accordion-header {
        padding: 1rem 1.5rem;
        font-size: clamp(1rem, 4vw, 1.4rem);
        gap: 0.5rem;
    }
    
    .accordion-content {
        padding: 2rem 1rem;
    }
    
    .affiliate-logos {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2rem;
    }

    .affiliate-item {
        flex: none; /* Remove fixed width on mobile */
        width: 100%; /* Full width on mobile */
    }

    /* Remove vertical dividers on mobile */
    .affiliate-item:not(:last-child)::after {
        display: none;
    }

    /* Add horizontal dividers between items on mobile - 50% width, centered */
    .affiliate-item:not(:last-child) {
        padding-bottom: 2rem;
        position: relative;
    }

    .affiliate-item:not(:last-child)::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 50%;
        height: 3px;
        background: #c0c0c0;
    }
    
    .affiliate-link {
        padding: 0.25rem;
    }
    
    .affiliate-logo {
        max-width: 150px;
        max-height: 60px;
    }

    /* Make Contact Your Local Provider logo 20% larger on mobile - force actual size */
    .affiliate-logo[alt="Contact Your Local Provider"] {
        width: 180px !important;        /* Force actual width */
        height: auto !important;        /* Scale proportionally */
        max-width: none !important;     /* Override parent constraint */
        max-height: none !important;    /* Override parent constraint */
    }

    /* Make DreamWorks Channel logo 10% larger on mobile for MENA */
    .affiliate-logo[alt="DreamWorks Channel"] {
        width: 165px !important;
        height: auto !important;
        max-width: none !important;
        max-height: none !important;
    }

    .affiliate-channels {
        font-size: clamp(0.9rem, 3vw, 1.1rem);
    }
}

/* ===================================
   Activities Section
   =================================== */
.activities-section {
    padding: 4rem 0;
    background-color: #fff;
    margin-top: 0;
}

.activities-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.activities-title {
    font-family: "futura-pt-bold", sans-serif;
    font-weight: 700;
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    color: #294696;
    text-align: center;
    margin-bottom: 3rem;
}

/* Activities Grid */
.activities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

/* Activity Card */
.activity-card {
    position: relative;
    background: #fff;
    border: 3px solid #FFD700; /* Yellow border */
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    aspect-ratio: 3 / 4;
}

.activity-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.activity-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    position: relative;
}

.activity-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Activity Overlay */
.activity-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 215, 0, 0);
    padding: 1rem;
    transform: translateY(100%);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.activity-card:hover .activity-overlay {
    transform: translateY(0);
    background: rgba(255, 215, 0, 0.95);
}

.activity-text {
    font-family: "futura-pt-bold", sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    color: #4A5D92;
    text-transform: uppercase;
}

/* More Activities Button Container */
.activities-button-container {
    text-align: center;
    margin-top: 3rem;
}

.more-activities-button {
    background: #fff; /* White background */
    color: #294696; /* Blue text */
    border: 2px solid #294696; /* Blue border */
    border-radius: 30px;
    padding: 0.75rem 2.5rem;
    font-family: "futura-pt-bold", sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: none;
    text-decoration: none; /* Remove underline for anchor tag */
    display: inline-block; /* Maintain button-like display for anchor */
}

.more-activities-button:hover {
    background: #294696; /* Blue background on hover */
    color: #fff; /* White text on hover */
    transform: scale(1.05);
}

.more-activities-button:focus {
    outline: 3px solid #FFD700;
    outline-offset: 2px;
}

/* Desktop Activities Grid - 4 columns */
@media (min-width: 768px) {
    .activities-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 2.5rem;
    }
    
    .activities-section {
        padding: 5rem 0;
    }
}

/* Tablet - 2 columns */
@media (min-width: 481px) and (max-width: 767px) {
    .activities-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
}

/* Mobile - 2 columns */
@media (max-width: 480px) {
    .activities-section {
        padding: 3rem 0;
    }
    
    .activities-container {
        padding: 0 1rem;
    }
    
    .activities-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    .activities-title {
        margin-bottom: 2rem;
    }
    
    .activity-overlay {
        padding: 0.75rem;
    }
    
    .activity-text {
        font-size: 0.9rem;
    }
    
    .more-activities-button {
        font-size: 1rem;
        padding: 0.6rem 2rem;
    }
}

/* ===================================
   Footer Section
   =================================== */
.footer-section {
    background: linear-gradient(to left, #294696 0%, #04b7e6 100%);
    padding: 3rem 0;
    margin-top: 0;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.footer-logo-container {
    margin-bottom: 0;
}

.footer-logo {
    height: 80px;
    width: auto;
    filter: brightness(0) invert(1);
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1.5rem;
}

.footer-bottom-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    flex-wrap: nowrap;
}

.footer-legal-links {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0;
}

.legal-link {
    color: #fff;
    text-decoration: none;
    font-family: "futura-pt", sans-serif;
    font-weight: 400;
    font-size: 0.9rem;
    transition: opacity 0.3s;
}

.legal-link:hover {
    opacity: 0.8;
    text-decoration: underline;
}

.legal-separator {
    color: #fff;
    opacity: 0.5;
    margin: 0 0.5rem;
}

.footer-legal-disclaimer {
    color: #fff;
    font-family: "futura-pt", sans-serif;
    font-weight: 400;
    font-size: 0.7rem;
    line-height: 1.6;
    text-align: center;
    align-self: center;
    margin: 0 2rem;
    opacity: 0.9;
    max-width: 900px;
}

.footer-legal-disclaimer.hidden {
    display: none;
}

.footer-contact-email {
    color: #fff;
    font-family: "futura-pt", sans-serif;
    font-weight: 400;
    font-size: 0.85rem;
    line-height: 1.6;
    text-align: center;
    align-self: center;
    margin: 0.5rem 2rem 0 2rem;
    opacity: 0.95;
}

.footer-contact-email a {
    color: #fff;
    text-decoration: underline;
    transition: opacity 0.3s;
}

.footer-contact-email a:hover {
    opacity: 0.8;
}

.footer-contact-email.hidden {
    display: none;
}

.footer-copyright {
    color: #fff;
    font-family: "futura-pt", sans-serif;
    font-weight: 400;
    font-size: 0.9rem;
    line-height: 1.6;
    text-align: right;
}

.footer-copyright p {
    margin: 0;
}

/* Mobile Footer */
@media (max-width: 767px) {
    .footer-section {
        padding: 2rem 0;
    }
    
    .footer-container {
        flex-direction: column;
        text-align: center;
    }

    .footer-content {
        align-items: center;
    }

    .footer-bottom-row {
        flex-direction: column;
        gap: 1rem;
    }

    .footer-contact-email {
        font-size: 0.75rem;
        margin: 0.35rem 1rem 0 1rem;
    }

    .footer-logo-container {
        margin-bottom: 1.5rem;
    }
    
    .footer-logo {
        height: 120px;
    }
    
    .footer-legal-links {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .legal-separator {
        display: none;
    }

    .footer-legal-disclaimer {
        font-size: 0.65rem;
        margin: 0.75rem 1rem 1rem 1rem;
        line-height: 1.5;
    }

    .footer-copyright {
        font-size: 0.8rem;
        text-align: center;
    }
}

/* Large screens */
@media (min-width: 1200px) {
    .footer-logo {
        height: 100px;
    }
    
    .footer-copyright {
        font-size: 1rem;
    }
}


/* ===================================
   Exit Interstitial Modal
   =================================== */
.exit-interstitial {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
}

.exit-interstitial.active {
    display: flex;
    animation: fadeIn 0.3s ease;
}

.exit-overlay {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.exit-content {
    background: linear-gradient(135deg, #4A90E2 0%, #2C3E7D 100%);
    border-radius: 20px;
    max-width: 500px;
    width: 100%;
    padding: 40px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.4s ease;
}

.exit-header {
    text-align: center;
    margin-bottom: 30px;
}

.exit-logo {
    width: 150px;
    height: auto;
    filter: brightness(0) invert(1);
}

.exit-title {
    color: #fff;
    font-family: "futura-pt", sans-serif;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 20px;
    text-align: center;
}

.exit-message, .exit-reminder {
    color: #fff;
    font-family: "futura-pt", sans-serif;
    font-size: 1.1rem;
    line-height: 1.6;
    text-align: center;
    margin-bottom: 20px;
}

.exit-reminder {
    color: #fff;
    font-family: "futura-pt", sans-serif;
    font-size: 1.2rem;
    line-height: 1.6;
    text-align: center;
    margin-bottom: 20px;
    font-weight: 600;
    margin-top: 10px;
}

.exit-actions {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-top: 30px;
}

.exit-button {
    padding: 15px 40px;
    font-family: "futura-pt", sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.exit-button-back {
    background: #FFD700;
    color: #2C3E7D;
}

.exit-button-back:hover {
    background: #FFC700;
    transform: scale(1.05);
}

.exit-button-continue {
    background: transparent;
    color: #fff;
    border: 2px solid #fff;
}

.exit-button-continue:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.05);
}

/* Animations for exit modal */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Mobile responsive for exit modal */
@media (max-width: 767px) {
    .exit-content {
        padding: 30px 20px;
        margin: 20px;
    }
    
    .exit-logo {
        width: 120px;
    }
    
    .exit-title {
        font-size: 1.5rem;
    }
    
    .exit-message, .exit-reminder {
        font-size: 1rem;
    }
    
    .exit-actions {
        flex-direction: column;
    }
    
    .exit-button {
        width: 100%;
        padding: 12px 30px;
    }
}


/* Character card button styles - remove default button styling */
.character-card {
    border: none;
    outline: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    display: block;
}

.character-card:focus {
    outline: none;
}

.character-card[class*="large-pos"]:hover {
    transform: scale(1.02);
    transition: transform 0.2s ease;
}

.character-card .character-image {
    width: 100%;
    height: auto;
    display: block;
}


/* ===== COOKIE CONSENT BANNER STYLES ===== */

.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.95);
    color: white;
    z-index: 1000;
    padding: 20px;
    transform: translateY(100%);
    transition: transform 0.3s ease-in-out;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.cookie-banner.visible {
    transform: translateY(0);
}

.cookie-banner-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.cookie-banner-text {
    flex: 1;
    line-height: 1.5;
}

.cookie-banner-text p {
    margin: 0;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.9);
    font-family: 'futura-pt', Arial, sans-serif;
}

.cookie-banner-text a {
    color: #00bcd4;
    text-decoration: underline;
    transition: color 0.2s ease;
}

.cookie-banner-text a:hover {
    color: #26c6da;
    text-decoration: underline;
}

.cookie-banner-actions {
    flex-shrink: 0;
}

.cookie-banner-button {
    background: linear-gradient(135deg, #00bcd4 0%, #0097a7 100%);
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: 'futura-pt', Arial, sans-serif;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    min-width: 120px;
    box-shadow: 0 2px 10px rgba(0, 188, 212, 0.3);
}

.cookie-banner-button:hover {
    background: linear-gradient(135deg, #26c6da 0%, #00acc1 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(0, 188, 212, 0.4);
}

.cookie-banner-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 188, 212, 0.3);
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .cookie-banner {
        padding: 15px;
    }
    
    .cookie-banner-content {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
    
    .cookie-banner-text p {
        font-size: 0.9rem;
    }
    
    .cookie-banner-button {
        width: 100%;
        min-width: auto;
        padding: 14px 20px;
    }
}

/* Small mobile screens */
@media (max-width: 480px) {
    .cookie-banner {
        padding: 12px;
    }
    
    .cookie-banner-text p {
        font-size: 0.85rem;
        line-height: 1.4;
    }
    
    .cookie-banner-button {
        font-size: 0.85rem;
        padding: 12px 18px;
    }
}

/* High DPI screens */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .cookie-banner {
        backdrop-filter: blur(15px);
    }
}