/* =========================================
   1. TESTIMONIAL SECTION
   Background, glow, badge and padding
   are handled by the global WLA classes.
========================================= */

.video-section {
    width: 100%;
    max-width: 100%;
    text-align: center;
}


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

.video-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;

    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}


/* =========================================
   3. VIDEO CARD
========================================= */

.video-box {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    aspect-ratio: 3 / 2;
    box-sizing: border-box;
    padding: 30px;
    cursor: pointer;
}

.video-box:hover {
    z-index: 2;
}


/* =========================================
   4. LOTTIE THUMBNAIL
========================================= */

.video-thumb {
    position: absolute;
    inset: 0;

    display: block;
    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: center;

    z-index: 2;
}


/* =========================================
   5. VIDEO PLAYER
========================================= */

.video-player {
    position: absolute;
    inset: 0;

    display: none;
    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    object-fit: cover;
    object-position: center;

    z-index: 3;
}


/* =========================================
   6. TAP-TO-PLAY BUTTON
   Reuses the global .wla-button style.
   Only the position and text animation
   are specific to this video section.
========================================= */

.video-section .weblodge-agency-video-appreciation-tap-to-view {
    display: none;
    position: absolute;
    top: 85%;
    left: 50%;
    z-index: 10;
    transform: translate(-50%, -50%);
    width: fit-content;
    max-width: calc(100% - 20px);
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
}

.video-section .weblodge-agency-video-appreciation-tap-to-view .wla-button__text {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    white-space: nowrap;
}

.video-section .weblodge-agency-video-appreciation-tap-to-view:active {
    transform: translate(-50%, -50%) scale(0.97);
}


/* =========================================
   7. TABLET
========================================= */

@media (max-width: 1024px) {

    .video-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

    .video-section .weblodge-agency-video-appreciation-tap-to-view {
        display: inline-flex;
    }
}


/* =========================================
   8. MOBILE
   One video per row.
========================================= */

@media (max-width: 767px) {

    .video-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 15px;
        align-content: start;
        align-items: start;
        justify-items: stretch;
    }

    .video-box {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        aspect-ratio: 3 / 2;
        margin: 0;
        padding: 0;
        align-self: start;
    }

    .video-thumb,
    .video-player {
        width: 100%;
        height: 100%;
        min-width: 0;
        max-width: 100%;
        max-height: 100%;
    }

    .video-section .weblodge-agency-video-appreciation-tap-to-view {
        display: inline-flex;
        max-width: calc(100% - 20px);
        padding-left: 14px;
        padding-right: 14px;
    }
}