/* ============================================================
   Images and Videos Gallery
   ============================================================ */

.gtea-widget-images-videos-gallery {
    position: relative;

    /* ── Tabs nav ── */
    .gtea-widget-images-videos-gallery__tabs {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    /* ── Tabs: horizontal scroll modifier ── */
    .gtea-widget-images-videos-gallery__tabs--scroll {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ── Tab button ── */
    .gtea-widget-images-videos-gallery__tab {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        cursor: pointer;
        background: none;
        border: none;
        padding: 0.5rem 1rem;
        text-align: left;
        transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    }

    /* ── Tab image ── */
    .gtea-widget-images-videos-gallery__tab-image {
        display: block;
        max-width: 100%;
        height: auto;
        object-fit: cover;
    }

    /* ── Tab texts ── */
    .gtea-widget-images-videos-gallery__tab-left-text,
    .gtea-widget-images-videos-gallery__tab-right-text {
        display: inline-block;
    }

    /* ── Gallery panels wrapper ── */
    .gtea-widget-images-videos-gallery__galleries {
        width: 100%;
    }

    /* ── Gallery panel ── */
    .gtea-widget-images-videos-gallery__gallery {
        width: 100%;
    }

    /* ── Masonry grid (flex columns) ── */
    .gtea-widget-images-videos-gallery__grid {
        width: 100%;
        /* display/gap set via inline style from PHP */
    }

    /* ── Individual column wrapper ── */
    .gtea-widget-images-videos-gallery__grid-col {
        /* flex:1; min-width:0; flex-direction:column; row-gap — set inline */
    }

    /* ── Grid item ── */
    .gtea-widget-images-videos-gallery__grid-item {
        display: block;
        overflow: hidden;
    }

    /* ── Image resource (a or div wrapper) ── */
    .gtea-widget-images-videos-gallery__resource-image {
        display: block;
        overflow: hidden;
        position: relative;

        img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    /* ── Video resource (a or div wrapper) ── */
    .gtea-widget-images-videos-gallery__resource-video {
        display: block;
        position: relative;
        overflow: hidden;
        cursor: pointer;

        img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            pointer-events: none;
        }

        /* ── Inline embed modifier (Branch D: no lightGallery, no placeholder) ── */
        &.gtea-widget-images-videos-gallery__resource-video--inline {
            cursor: default;

            iframe,
            video {
                display: block;
                width: 100%;
                height: 100%;
                border: none;
            }
        }

        /* ── Toggle state: after JS swaps placeholder → embed (Branch C) ── */
        &:not([data-ivg-video-toggle]) {
            iframe,
            video {
                display: block;
                width: 100%;
                height: 100%;
                border: none;
            }
        }
    }

    /* ── Video play icon overlay ── */
    .gtea-widget-images-videos-gallery__video-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, 0.55);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
        transition: background-color 0.2s ease;

        svg {
            width: 45%;
            height: 45%;
            fill: #fff;
            margin-left: 3px;
            display: block;
        }
    }

    .gtea-widget-images-videos-gallery__grid-item:hover
    .gtea-widget-images-videos-gallery__video-icon {
        background-color: rgba(0, 0, 0, 0.8);
    }
}

/* ============================================================
   lightGallery — video poster fix
   lg-video.css only sets z-index on .lg-video-poster; the img
   renders at its natural size and can distort inside the sized
   .lg-video-cont. Override so the poster covers the container
   while preserving its own aspect ratio (object-fit: cover).
   ============================================================ */
.lg-outer .lg-video-poster {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}