/* =========================================================
   VIDEO SECTION
   ========================================================= */

.apri-video-section {
    padding: 35px 0 25px;

    background: white;
}


.video-container {
    width: min(
        calc(100% - 40px),
        var(--apri-container)
    );

    margin: 0 auto;
}


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

.section-heading {
    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 18px;
}


.section-kicker {
    display: block;

    color: var(--apri-primary);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1px;

    margin-bottom: 5px;
}


.section-heading h2 {
    margin:0;

    font-size:32px;

    font-weight:750;

    color:#0f172a;

    letter-spacing:-.5px;
}


.section-heading p {
    color: var(--apri-text-muted);

    font-size: 14px;

    margin-top: 6px;
}


/* =========================================================
   NAVIGATION BUTTON
========================================================= */

.video-navigation {

    position:absolute;

    top:50%;

    left:-22px;

    right:-22px;

    transform:translateY(-50%);

    display:flex;

    justify-content:space-between;

    z-index:20;

    pointer-events:none;

}

.video-navigation .video-nav-button {

    pointer-events:auto;

}



.video-nav-button {

    width:44px;

    height:44px;

    border-radius:50%;

    border:1px solid #e5e7eb;

    background:white;

    color:#075ca8;

    font-size:26px;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    box-shadow:
    0 4px 12px rgba(0,0,0,.12);

    pointer-events:auto;

    transition:.25s;

}


.video-nav-button:hover {
    background: var(--apri-primary);

    color: white;

    border-color: var(--apri-primary);
}


.video-nav-button:disabled {
    opacity: 0.35;

    cursor: not-allowed;
}


/* =========================================================
   SLIDER
   ========================================================= */

.video-slider-wrapper {
    width:100%;
    position:relative;
    overflow:visible;
}

.video-slider {
    display: flex;

    gap: 18px;

    overflow-x: auto;

    scroll-behavior: smooth;

    scrollbar-width: none;

    padding-bottom: 5px;
}


.video-slider::-webkit-scrollbar {
    display: none;
}


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

.video-card {
    flex: 0 0 calc(
        (100% - 48px) / 7
    );

    min-width: 0;

    background: white;

    border: 1px solid var(--apri-border);

    border-radius: 8px;

    overflow: hidden;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.video-card:hover {
    transform: translateY(-3px);

    box-shadow: var(--apri-shadow);
}


/* =========================================================
   THUMBNAIL
   ========================================================= */

.video-thumbnail {
    width: 100%;

    aspect-ratio: 16 / 9;

    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #075ca8,
            #0a78d0
        );
}


.video-placeholder {
    width: 100%;
    height: 100%;

    display: flex;

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

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

    font-size: 18px;

    font-weight: 700;

    letter-spacing: 1px;
}


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

.video-play {
    position: absolute;

    left: 50%;
    top: 50%;

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

    width: 52px;
    height: 52px;

    border-radius: 50%;

    border: 0;

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

    color: var(--apri-primary);

    font-size: 18px;

    padding-left: 3px;

    cursor: pointer;

    display: flex;

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

    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.18);

    transition:
        transform 0.2s ease;
}


.video-play:hover {
    transform:
        translate(-50%, -50%)
        scale(1.08);
}


/* =========================================================
   CONTENT
   ========================================================= */

.video-content {
     padding:12px 15px 12px;

}


.video-content h3 {
    color: #111827;

    font-size: 15px;

    line-height: 1.35;

    font-weight: 600;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;
}


.video-content p {
    color: var(--apri-text-muted);

    font-size: 12px;

    margin-top: 5px;

    display: -webkit-box;

    -webkit-line-clamp: 1;

    -webkit-box-orient: vertical;

    overflow: hidden;
}


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

@media (max-width: 1000px) {

    .video-card {
        flex-basis: calc(
            (100% - 32px) / 5
        );
    }

}


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

@media (max-width: 700px) {

    .apri-video-section {
        padding-top: 35px;
    }


    .video-container {
        width: calc(100% - 24px);
    }


    .section-heading {
        align-items: center;
    }


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


    .section-heading p {
        font-size: 13px;
    }


    .video-card {
        flex-basis: calc(
            (100% - 16px) / 4
        );
    }


    .video-nav-button {
        width: 38px;
        height: 38px;
    }

}


/* =========================================================
   HP
   ========================================================= */

@media (max-width: 480px) {

    .section-heading {
        align-items: flex-end;
    }


    .section-heading p {
        max-width: 270px;
    }


    .video-card {
        flex-basis: 82%;
    }


    .video-content h3 {
        font-size: 14px;
    }

}

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


.video-modal {

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.75);

    display:none;

    align-items:center;

    justify-content:center;

    z-index:99999;

}



.video-modal.active {

    display:flex;

}



.video-modal-content {

    width:min(
        900px,
        90%
    );

    aspect-ratio:16/9;

    background:#000;

    position:relative;

    border-radius:12px;

    overflow:hidden;

}



.video-modal iframe {

    width:100%;

    height:100%;

}



.video-modal-close {

    position:absolute;

    right:12px;

    top:10px;

    z-index:2;

    width:35px;

    height:35px;

    border:none;

    border-radius:50%;

    background:white;

    font-size:22px;

    cursor:pointer;

}

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

#videoModal .btn-close {

    position:absolute;

    top:15px;

    right:15px;

    z-index:9999;

    width:32px;

    height:32px;

    opacity:1;

    background-color:white;

    border-radius:50%;

}

#videoModal .modal-content {

    position:relative;

    overflow:hidden;

}

/* =====================================================
   VIDEO MODAL ABOVE NAVBAR
===================================================== */

#videoModal {
    z-index: 11000;
}


.modal-backdrop {
    z-index:10900;
}


#videoModal .modal-content {

    position:relative;

}


#videoModal .btn-close {

    position:relative;

    z-index:11001;

}