/* ============================================================
   2. VIDEO GRID FIXES
   ============================================================ */

/* Fix for LARGE Single-Column Videos (Cinematic Motion, etc.) */
.responsive-iframe-wrapper {
    width: 100% !important;
    position: relative !important;
    padding-bottom: 56.25% !important; 
    height: 0 !important;
    margin: 0 auto !important;
}

.responsive-iframe-wrapper iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

/* Fix for TWO-COLUMN Videos (Mega Sale) */
/* This ensures they fill the green container width */
.my-animation-page .two-column .video-wrapper {
    position: relative !important;
    width: calc(100% - 10px) !important; /* Fills width with tiny 5px margin */
    margin: 0 auto !important;
    padding-bottom: 56.25% !important; 
    height: 0 !important;
    background-color: #000;
    border-radius: 10px;
    overflow: hidden;
}

.my-animation-page .two-column .video-wrapper iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

/* Tighten spacing for the Mega Sale row */
.my-animation-page .two-column .grid-item {
    padding-top: 5px !important;
    padding-bottom: 20px !important;
}

/* ============================================================
   3. TABLET & MOBILE NUDGES
   ============================================================ */
@media screen and (max-width: 600px) {
    .my-animation-page .two-column .video-wrapper {
        width: 98% !important; /* Almost full width on mobile */
    }
}

@media screen and (min-width: 601px) and (max-width: 1024px) {
    #video5_container, #video6_container {
        margin-left: 2% !important;
        max-width: 520px !important;
    }
}



/* 1. Ensure the heading section has space below it on mobile */
.border-l-4 {
    margin-bottom: 20px !important;
}

/* 2. Fix the overlap on mobile while keeping it tight on desktop */
@media (min-width: 1025px) {
    /* Only on laptop, we pull the video up slightly for that tight look */
    .grid-item.relative, .grid-row.relative {
        top: -40px !important; 
    }
}

@media (max-width: 1024px) {
    /* On mobile, we force them to sit normally so they don't overlap headings */
    .grid-item.relative, .grid-row.relative {
        top: 0 !important;
        margin-top: 10px !important;
    }
    
    /* Ensure the video grid doesn't have huge "ghost padding" */
    .image-grid {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    
    /* Make the headings slightly more compact on phones */
    .border-l-4 h2 {
        font-size: 1.2rem !important;
        line-height: 1.2 !important;
    }
}



/* --- FINAL HEADING-TO-VIDEO ALIGNMENT --- */

/* 1. Reset the "Climbing" videos - This stops them from drifting */
.grid-item.relative, .grid-row.relative {
    top: 0 !important; 
    margin-top: 0 !important;
}

/* 2. GLUE the heading to the video below it */
.border-l-4 {
    /* This controls the gap between the text and the video start */
    margin-bottom: 10px !important; 
}

/* 3. DESKTOP: Space out the different groups so they don't feel crowded */
@media (min-width: 1025px) {
    .border-l-4 {
        /* This creates the space ABOVE the heading for the previous video */
        margin-top: 100px !important; 
    }
    /* Special case for the very first heading on the page */
    div:first-of-type > .border-l-4 {
        margin-top: 40px !important;
    }
}

/* 4. MOBILE: Space out the groups for phones */
@media (max-width: 1024px) {
    .border-l-4 {
        margin-top: 60px !important; 
        margin-bottom: 8px !important;
    }
    
    .border-l-4 h2 {
        font-size: 1.2rem !important;
    }
}


/* --- BRANDED ASSETS ALIGNMENT FIX --- */

/* Force the grid-row to behave like the single-column grid-items */
.grid-row.relative {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
}

@media (min-width: 1025px) {
    /* This "pulls" the two-column row up to meet the heading on desktop */
    .grid-row.relative.lg\:top-\[-70px\] {
        top: -70px !important;
        margin-top: 0 !important;
    }
}

@media (max-width: 1024px) {
    /* Ensures it sits flush on mobile without gaps */
    .grid-row.relative {
        top: 0 !important;
        margin-top: 0 !important;
    }
}


/* --- THE ULTIMATE BRANDED ASSETS GAP CLOSER --- */

@media (max-width: 1024px) {
    /* Targets the specific row inside the two-column section */
    .two-column .grid-row.relative {
        margin-top: -30px !important; /* Pulls the grid up toward the heading */
        top: 0 !important;
    }

    /* Removes any padding from the section container */
    .image-grid.two-column {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    /* Ensures the heading doesn't have a giant bottom margin */
    .border-l-4 {
        margin-bottom: 5px !important;
    }
}


/* --- MOBILE STACKING & SPACING FIX --- */

@media (max-width: 1024px) {
    /* 1. Force the Branded Assets to be full width when stacked */
    .flex-col .grid-item {
        width: 100% !important;
        margin-bottom: 20px !important; /* Space between the two stacked videos */
    }

    /* 2. Fix the Heading alignment so it sits ON TOP of the first video */
    .border-l-4 {
        margin-top: 50px !important; /* Space away from video above */
        margin-bottom: 10px !important; /* Glue to video below */
    }

    /* 3. Ensure the container expands to fit the stacked videos */
    .image-grid.two-column {
        height: auto !important;
        display: block !important;
    }
}




/* --- SURGICAL FIX FOR BRANDED ASSETS MOBILE --- */

@media (max-width: 1024px) {
    /* 1. Force the side-by-side videos to stack (1 column) */
    .grid-row.relative {
        display: flex !important;
        flex-direction: column !important;
        top: 0 !important;
    }

    /* 2. Make each video fill the full width of the phone */
    .grid-row.relative .grid-item {
        width: 100% !important;
        max-width: 100% !important;
        padding: 10px 0 !important; /* Adds space between the stacked videos */
    }

    /* 3. Close the gap between the Heading and these specific videos */
    .two-column .grid-row.relative {
        margin-top: -20px !important; 
    }
}


/* --- TIGHTEN BRANDED ASSETS MOBILE GAPS --- */

@media (max-width: 1024px) {
    /* 1. Bring the first video closer to the Heading */
    .two-column .grid-row.relative {
        margin-top: -15px !important; /* Pulls the first video UP toward heading */
    }

    /* 2. Reduce the gap BETWEEN the two stacked videos */
    .two-column .grid-item {
        padding-top: 0 !important;
        padding-bottom: 5px !important; /* Reduces the floor under each video */
        margin-bottom: 0 !important;
    }

    /* 3. Adjust the captions to be closer to their videos */
    .two-column .text-center.py-4 {
        padding-top: 10px !important;
        padding-bottom: 15px !important; /* Space before the next video starts */
    }
}



/* --- BRANDED ASSETS: UNIFIED LAPTOP & MOBILE FIX --- */

/* LAPTOP FIX: Matches box heights and tightens captions */
#branded-1, #branded-2 {
    padding-bottom: 10px !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
}

.caption-move {
    margin-top: -12px !important;
    padding-top: 5px !important;
}

/* --- BRANDED ASSETS: UNIFIED LAPTOP & MOBILE FIX --- */

/* LAPTOP VIEW: Match heights & tighten text */
#branded-1, #branded-2 {
    padding-bottom: 10px !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
}

.caption-move {
    margin-top: -12px !important;
    padding-top: 5px !important;
}


/* MOBILE & TABLET VIEW: (max-width: 1024px) */
@media (max-width: 1024px) {
    /* 1. Lift group toward heading */
    .two-column .grid-row.relative {
        margin-top: -80px !important; 
        top: 0 !important;
    }

    /* 2. Gap between Video 1 and Video 2 */
    #branded-1 {
        margin-bottom: 25px !important; 
        padding-bottom: 0 !important;
    }

    /* 3. Bumper for the section below */
    #branded-2 {
        margin-top: 0 !important;
        padding-top: 0 !important;
        margin-bottom: 50px !important; 
    }

    /* 4. Keep captions glued to frames */
    #branded-1 .caption-move, 
    #branded-2 .caption-move {
        margin-top: -15px !important;
        padding-bottom: 5px !important;
    }
}




/* --- CLEAN GRID STABILITY --- */

/* 1. Ensure the frames are rounded and the cursor is a hand */
.video-wrapper, 
.responsive-iframe-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 12px; /* Matches your grid style */
    cursor: pointer !important;
}

/* 2. A Simple Darken on Hover */
/* This makes the video "recede" slightly so the title stands out */
.video-wrapper::before, 
.responsive-iframe-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
    pointer-events: none;
}

.grid-item:hover .video-wrapper::before,
.grid-item:hover .responsive-iframe-wrapper::before {
    opacity: 1;
}