/* =========================================================
   AP AGRO - VIDEOS V3
========================================================= */


.apagro-videos-section {

    background:
        #f3f5ef;

}


.apagro-videos-heading {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        50px;

    margin-bottom:
        48px;

}


.apagro-videos-heading h2 {

    max-width:
        760px;

    margin:
        0;

    color:
        #0b3520;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(
            40px,
            4vw,
            60px
        );

    line-height:
        1.04;

    letter-spacing:
        -2px;

}


.apagro-videos-heading > p {

    max-width:
        380px;

    margin:
        0;

    color:
        #69756d;

    line-height:
        1.7;

}


/* GRID */

.apagro-videos-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

    gap:
        20px;

}


/* CARD */

.apagro-video-card {

    min-width:
        0;

    overflow:
        hidden;

    border:
        1px solid
        rgba(
            14,
            60,
            34,
            .08
        );

    border-radius:
        8px;

    background:
        white;

    box-shadow:
        0
        12px
        40px
        rgba(
            13,
            56,
            32,
            .05
        );

    transition:
        transform
        .25s
        ease,
        box-shadow
        .25s
        ease;

}


.apagro-video-card:hover {

    transform:
        translateY(
            -5px
        );

    box-shadow:
        0
        22px
        55px
        rgba(
            13,
            56,
            32,
            .12
        );

}


/* DESTAQUE */

.apagro-video-card.apagro-video-destaque {

    grid-column:
        span
        2;

}


/* CAPA */

.apagro-video-cover {

    position:
        relative;

    width:
        100%;

    aspect-ratio:
        16 / 9;

    display:
        block;

    overflow:
        hidden;

    padding:
        0;

    border:
        0;

    background:

        linear-gradient(
            135deg,
            #0c3921,
            #247135
        );

    background-size:
        cover;

    background-position:
        center;

    cursor:
        pointer;

}


.apagro-video-overlay {

    position:
        absolute;

    inset:
        0;

    background:

        linear-gradient(

            180deg,

            rgba(
                4,
                24,
                13,
                .03
            )
            15%,

            rgba(
                4,
                24,
                13,
                .15
            )
            55%,

            rgba(
                4,
                24,
                13,
                .72
            )
            100%

        );

    transition:
        background
        .25s
        ease;

}


.apagro-video-cover:hover
.apagro-video-overlay {

    background:

        linear-gradient(

            180deg,

            rgba(
                4,
                24,
                13,
                .03
            ),

            rgba(
                4,
                24,
                13,
                .30
            )
            55%,

            rgba(
                4,
                24,
                13,
                .80
            )
            100%

        );

}


/* CATEGORIA */

.apagro-video-category {

    position:
        absolute;

    z-index:
        3;

    left:
        18px;

    top:
        18px;

    padding:
        7px
        10px;

    border-radius:
        30px;

    background:
        rgba(
            6,
            38,
            21,
            .82
        );

    color:
        white;

    backdrop-filter:
        blur(
            8px
        );

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        1.3px;

    text-transform:
        uppercase;

}


/* DESTAQUE BADGE */

.apagro-video-featured {

    position:
        absolute;

    z-index:
        3;

    right:
        18px;

    top:
        18px;

    padding:
        7px
        10px;

    border-radius:
        30px;

    background:
        #39e80b;

    color:
        #0b3520;

    font-size:
        8px;

    font-weight:
        900;

    letter-spacing:
        1.2px;

}


/* PLAY */

.apagro-video-play {

    position:
        absolute;

    z-index:
        4;

    left:
        50%;

    top:
        50%;

    width:
        72px;

    height:
        72px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .65
        );

    border-radius:
        50%;

    background:
        rgba(
            255,
            255,
            255,
            .94
        );

    color:
        #0d3b22;

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

    transition:
        transform
        .25s
        ease,
        background
        .25s
        ease;

}


.apagro-video-play span {

    margin-left:
        4px;

    font-size:
        23px;

}


.apagro-video-cover:hover
.apagro-video-play {

    background:
        #3aeb0c;

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

}


/* TEXTO ASSISTIR */

.apagro-video-watch {

    position:
        absolute;

    z-index:
        3;

    left:
        18px;

    bottom:
        17px;

    color:
        white;

    font-size:
        12px;

    font-weight:
        700;

}


/* CONTEUDO */

.apagro-video-copy {

    padding:
        23px;

}


.apagro-video-copy h3 {

    margin:
        0;

    color:
        #0c3821;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        22px;

    line-height:
        1.2;

}


.apagro-video-copy p {

    display:
        -webkit-box;

    overflow:
        hidden;

    margin:
        12px
        0
        0;

    color:
        #68756d;

    font-size:
        13px;

    line-height:
        1.65;

    -webkit-line-clamp:
        4;

    -webkit-box-orient:
        vertical;

}


.apagro-video-link {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    margin-top:
        18px;

    padding:
        0;

    border:
        0;

    background:
        transparent;

    color:
        #176f34;

    font-weight:
        800;

    cursor:
        pointer;

}


.apagro-video-link span {

    transition:
        transform
        .2s
        ease;

}


.apagro-video-link:hover span {

    transform:
        translateX(
            4px
        );

}


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

@media (
    max-width:
        1050px
) {

    .apagro-videos-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

    }

}


/* =========================================================
   CELULAR
========================================================= */

@media (
    max-width:
        700px
) {

    .apagro-videos-heading {

        display:
            block;

        margin-bottom:
            28px;

    }


    .apagro-videos-heading h2 {

        font-size:
            36px;

        letter-spacing:
            -1.3px;

    }


    .apagro-videos-heading > p {

        max-width:
            none;

        margin-top:
            16px;

        font-size:
            14px;

    }


    .apagro-videos-grid {

        grid-template-columns:
            1fr;

        gap:
            17px;

    }


    .apagro-video-card.apagro-video-destaque {

        grid-column:
            auto;

    }


    .apagro-video-play {

        width:
            62px;

        height:
            62px;

    }


    .apagro-video-play span {

        font-size:
            20px;

    }


    .apagro-video-category {

        left:
            12px;

        top:
            12px;

    }


    .apagro-video-featured {

        right:
            12px;

        top:
            12px;

    }


    .apagro-video-watch {

        left:
            14px;

        bottom:
            12px;

    }


    .apagro-video-copy {

        padding:
            19px;

    }


    .apagro-video-copy h3 {

        font-size:
            20px;

    }


    .apagro-video-copy p {

        -webkit-line-clamp:
            3;

    }

}