/* =========================================================
   CANCRIE MEDIA & INSIGHTS
   9:16 PREMIUM VIDEO CAROUSEL
========================================================= */

.media-section {
    --media-green: #7BAE00;
    --media-black: #111111;
    --media-muted: #666666;
    --media-card-radius: 26px;
    --media-gap: 28px;

    position: relative;
    width: 100%;
    padding: 100px 0 90px;
    background: #ffffff;
    overflow: hidden;
    isolation: isolate;
}


/* =========================================================
   SUBTLE BACKGROUND
========================================================= */

.media-section::before {
    content: "";
    position: absolute;
    width: 650px;
    height: 650px;
    top: -320px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;

    background: radial-gradient(
        circle,
        rgba(123, 174, 0, 0.09) 0%,
        rgba(123, 174, 0, 0.025) 45%,
        transparent 72%
    );

    pointer-events: none;
    z-index: -1;
}


/* =========================================================
   CONTAINER
========================================================= */

.media-section .container {
    width: 100%;
    max-width: 1450px;
    margin: 0 auto;
    position: relative;
}


/* =========================================================
   SECTION HEADING
========================================================= */

.media-section .section-heading {
    width: min(90%, 820px);
    margin: 0 auto 55px;
    text-align: center;
    position: relative;
    z-index: 5;
}


.media-section .section-tag,
.media-section .section-heading > span {
    display: inline-block;

    margin-bottom: 15px;

    color: var(--media-green);

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 2.5px;

    text-transform: uppercase;
}


.media-section .section-heading h2 {
    margin: 0 0 18px;

    color: var(--media-black);

    font-size: clamp(34px, 4vw, 52px);
    font-weight: 700;

    letter-spacing: -1.5px;
    line-height: 1.08;
}


.media-section .section-heading p {
    max-width: 680px;

    margin: 0 auto;

    color: var(--media-muted);

    font-size: 16px;

    line-height: 1.75;
}


/* =========================================================
   CAROUSEL
========================================================= */

.media-carousel {
    display: flex;

    align-items: center;

    gap: var(--media-gap);

    width: 100%;

    overflow-x: auto;
    overflow-y: visible;

    padding:
        35px
        max(50px, calc((100vw - 1200px) / 2))
        45px;

    scroll-behavior: smooth;

    scroll-snap-type: x mandatory;

    overscroll-behavior-x: contain;

    scrollbar-width: none;

    cursor: grab;

    -webkit-overflow-scrolling: touch;
}


.media-carousel::-webkit-scrollbar {
    display: none;
}


/* Drag state */

.media-carousel.dragging {
    cursor: grabbing;
    scroll-behavior: auto;
    scroll-snap-type: none;
}


/* =========================================================
   MEDIA CARD
========================================================= */

.media-card {
    flex: 0 0 270px;

    aspect-ratio: 9 / 16;

    position: relative;

    overflow: hidden;

    border-radius: var(--media-card-radius);

    scroll-snap-align: center;

    cursor: pointer;

    background: #151515;

    opacity: 0.88;

    transform: scale(0.92);

    transition:
        transform 0.45s cubic-bezier(.22,.61,.36,1),
        opacity 0.4s ease,
        box-shadow 0.45s ease,
        filter 0.45s ease;

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.10),
        0 3px 10px rgba(0, 0, 0, 0.06);

    isolation: isolate;

    user-select: none;

    -webkit-user-select: none;
}


/* =========================================================
   CARD IMAGE
========================================================= */

.media-card > img {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    pointer-events: none;

    transform: scale(1.001);

    transition:
        transform 0.9s cubic-bezier(.22,.61,.36,1),
        filter 0.6s ease;
}


/* =========================================================
   IMAGE DARK OVERLAY
========================================================= */

.media-card .overlay {
    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:
        linear-gradient(
            to bottom,

            rgba(0,0,0,0.10) 0%,

            rgba(0,0,0,0.02) 25%,

            rgba(0,0,0,0.05) 45%,

            rgba(0,0,0,0.38) 70%,

            rgba(0,0,0,0.88) 100%
        );

    transition: background 0.45s ease;
}


/* =========================================================
   ACTIVE CARD
========================================================= */

.media-card.active {
    opacity: 1;

    z-index: 10;

    box-shadow:
        0 0 0 1px rgba(123,174,0,0.28),
        0 22px 60px rgba(0,0,0,0.18),
        0 12px 35px rgba(123,174,0,0.14);
}


/* =========================================================
   CARD HOVER
========================================================= */

@media (hover: hover) {

    .media-card:hover {
        opacity: 1;

        box-shadow:
            0 0 0 1px rgba(123,174,0,0.40),
            0 25px 70px rgba(0,0,0,0.22),
            0 12px 45px rgba(123,174,0,0.18);
    }


    .media-card:hover > img {
        transform: scale(1.08);

        filter:
            brightness(0.88)
            saturate(1.05);
    }


    .media-card:hover .overlay {
        background:
            linear-gradient(
                to bottom,

                rgba(0,0,0,0.12),

                rgba(0,0,0,0.06) 40%,

                rgba(0,0,0,0.48) 72%,

                rgba(0,0,0,0.92) 100%
            );
    }

}


/* =========================================================
   PLAY BUTTON
========================================================= */

.play-btn {
    position: absolute;

    top: 50%;
    left: 50%;

    transform:
        translate(-50%, -50%)
        scale(0.94);

    width: 74px;
    height: 74px;

    border-radius: 50%;

    display: flex;

    align-items: center;
    justify-content: center;

    z-index: 8;

    background:
        rgba(255, 255, 255, 0.14);

    border:
        1px solid
        rgba(255,255,255,0.40);

    backdrop-filter: blur(16px);

    -webkit-backdrop-filter: blur(16px);

    box-shadow:
        0 12px 35px rgba(0,0,0,0.25),
        inset 0 1px 0 rgba(255,255,255,0.20);

    transition:
        transform 0.35s cubic-bezier(.22,.61,.36,1),
        background 0.35s ease,
        box-shadow 0.35s ease;
}


.play-btn svg {
    width: 30px;
    height: 30px;

    margin-left: 4px;

    pointer-events: none;

    filter:
        drop-shadow(
            0 2px 4px rgba(0,0,0,0.20)
        );
}


/* Play hover */

@media (hover: hover) {

    .media-card:hover .play-btn {
        background: var(--media-green);

        transform:
            translate(-50%, -50%)
            scale(1.12);

        box-shadow:
            0 12px 35px rgba(0,0,0,0.25),
            0 0 30px rgba(123,174,0,0.35);
    }

}


/* =========================================================
   BOTTOM INFORMATION
========================================================= */

.media-info {
    position: absolute;

    left: 22px;
    right: 22px;
    bottom: 22px;

    z-index: 10;

    color: #ffffff;

    transform: translateY(0);

    transition:
        transform 0.4s ease;
}


/* =========================================================
   TOP ROW INSIDE CARD
========================================================= */

.media-top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    margin-bottom: 13px;
}


/* =========================================================
   BADGES
========================================================= */

.badge {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: fit-content;

    padding: 7px 13px;

    border-radius: 100px;

    color: #ffffff;

    font-size: 11px;

    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.3px;

    border:
        1px solid
        rgba(255,255,255,0.20);

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);

    box-shadow:
        0 4px 14px rgba(0,0,0,0.12);
}


/* YouTube */

.badge.youtube {
    background:
        rgba(220, 0, 0, 0.82);
}


/* Instagram */

.badge.insta {
    background:
        linear-gradient(
            135deg,
            rgba(131,58,180,.92),
            rgba(225,48,108,.92),
            rgba(252,175,69,.92)
        );
}


/* =========================================================
   NEW / FEATURED TAG
========================================================= */

.new-tag {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 7px 12px;

    border-radius: 100px;

    background:
        rgba(123,174,0,0.92);

    color: #ffffff;

    font-size: 10px;

    font-weight: 800;

    line-height: 1;

    letter-spacing: 0.8px;

    text-transform: uppercase;

    box-shadow:
        0 5px 18px rgba(123,174,0,0.24);
}


/* =========================================================
   CARD TITLE
========================================================= */

.media-info h3 {
    margin:
        0
        0
        9px;

    color: #ffffff;

    font-size: 21px;

    font-weight: 650;

    line-height: 1.22;

    letter-spacing: -0.3px;

    text-shadow:
        0 2px 12px rgba(0,0,0,0.25);
}


/* =========================================================
   VIDEO META
========================================================= */

.video-meta {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 7px;

    color:
        rgba(255,255,255,0.78);

    font-size: 12px;

    line-height: 1.4;
}


/* =========================================================
   NAVIGATION BUTTONS
========================================================= */

.slider-btn {
    position: absolute;

    top: 56%;

    transform: translateY(-50%);

    width: 54px;
    height: 54px;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 0;

    border:
        1px solid
        rgba(0,0,0,0.07);

    border-radius: 50%;

    background:
        rgba(255,255,255,0.92);

    color: #171717;

    font-size: 20px;

    cursor: pointer;

    z-index: 50;

    box-shadow:
        0 12px 35px rgba(0,0,0,0.14);

    backdrop-filter: blur(14px);

    -webkit-backdrop-filter: blur(14px);

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.slider-btn:hover {
    background:
        var(--media-green);

    color:
        #ffffff;

    transform:
        translateY(-50%)
        scale(1.08);

    box-shadow:
        0 12px 35px
        rgba(123,174,0,0.28);
        
}


.slider-btn.prev {
    left: 10px;
}


.slider-btn.next {
    right: 10px;
}


/* =========================================================
   VIEW ALL BUTTON AREA
========================================================= */

.media-btn {
    width: 100%;

    margin-top: 42px;

    text-align: center;
}


.btn-video {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 52px;

    padding:
        0
        30px;

    border-radius:
        100px;

    background:
        var(--media-green);

    color:
        #ffffff;

    font-size:
        14px;

    font-weight:
        650;

    text-decoration:
        none;

    box-shadow:
        0 10px 30px
        rgba(123,174,0,0.18);

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;
}


.btn-video:hover {
    background:
        #111111;

    color:
        #ffffff;

    transform:
        translateY(-3px);

    box-shadow:
        0 14px 35px
        rgba(0,0,0,0.18);
}


/* =========================================================
   VIDEO MODAL
========================================================= */

.video-modal {
    position: fixed;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 30px;

    background:
        rgba(5,5,5,0.91);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    z-index: 999999;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}


/* Support either JS class name */

.video-modal.show,
.video-modal.active {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}


/* =========================================================
   VIDEO BOX
========================================================= */

.video-box {
    position: relative;

    width:
        min(390px, 85vw);

    max-height:
        88vh;

    aspect-ratio:
        9 / 16;

    background:
        #000000;

    border-radius:
        24px;

    box-shadow:
        0 30px 100px
        rgba(0,0,0,0.55);
}


.video-box iframe {
    display: block;

    width: 100%;

    height: 100%;

    border: 0;

    border-radius:
        inherit;

    background:
        #000000;
}


/* =========================================================
   MODAL CLOSE BUTTON
========================================================= */

.close-video {
    position: absolute;

    top: -18px;

    right: -18px;

    width: 44px;
    height: 44px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0;

    border: none;

    border-radius: 50%;

    background:
        #ffffff;

    color:
        #111111;

    font-size:
        29px;

    line-height:
        1;

    cursor:
        pointer;

    z-index:
        5;

    box-shadow:
        0 8px 25px
        rgba(0,0,0,0.30);

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        color 0.25s ease;
}


.close-video:hover {
    background:
        var(--media-green);

    color:
        #ffffff;

    transform:
        rotate(90deg);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {

    .media-section {
        padding:
            85px
            0
            75px;
    }


    .media-carousel {
        gap:
            22px;

        padding:
            30px
            45px
            40px;
    }


    .media-card {
        flex-basis:
            245px;
    }


    .slider-btn {
        width:
            48px;

        height:
            48px;
    }


    .slider-btn.prev {
        left:
            15px;
    }


    .slider-btn.next {
        right:
            15px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .media-section {
        padding:
            70px
            0
            60px;
    }


    .media-section .section-heading {
        width:
            calc(100% - 40px);

        margin-bottom:
            35px;
    }


    .media-section .section-heading h2 {
        font-size:
            34px;

        letter-spacing:
            -1px;
    }


    .media-section .section-heading p {
        font-size:
            14px;

        line-height:
            1.65;
    }


    .media-carousel {
        gap:
            18px;

        padding:
            25px
            20px
            35px;
    }


    .media-card {
        flex:
            0 0
            215px;

        border-radius:
            22px;
    }


    .media-info {
        left:
            17px;

        right:
            17px;

        bottom:
            18px;
    }


    .media-info h3 {
        font-size:
            18px;
    }


    .play-btn {
        width:
            62px;

        height:
            62px;
    }


    .play-btn svg {
        width:
            25px;

        height:
            25px;
    }


    .badge {
        padding:
            6px
            11px;

        font-size:
            10px;
    }


    .new-tag {
        padding:
            6px
            10px;

        font-size:
            9px;
    }


    .slider-btn {
        display:
            none;
    }


    .media-btn {
        margin-top:
            30px;
    }


    .btn-video {
        min-height:
            48px;

        padding:
            0
            25px;

        font-size:
            13px;
    }


    .video-modal {
        padding:
            20px;
    }


    .video-box {
        width:
            min(350px, 82vw);
    }


    .close-video {
        top:
            -15px;

        right:
            -10px;

        width:
            40px;

        height:
            40px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .media-section {
        padding-top:
            60px;
    }


    .media-section .section-heading h2 {
        font-size:
            30px;
    }


    .media-carousel {
        padding-left:
            18px;

        padding-right:
            18px;
    }


    .media-card {
        flex-basis:
            min(74vw, 240px);
    }

}


/* =========================================================
   REDUCED MOTION ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .media-carousel {
        scroll-behavior:
            auto;
    }


    .media-card,
    .media-card > img,
    .play-btn,
    .slider-btn,
    .btn-video,
    .video-modal {
        transition:
            none;
    }

}


.media-carousel{

    overflow-x:auto;

    overflow-y:hidden;

    -webkit-overflow-scrolling:touch;

    touch-action:pan-x;

}


.media-card{

    text-decoration:none;

    color:inherit;

}

.play-btn::before,
.play-btn::after{

    content:none !important;

    display:none !important;

}