/* Media — i2t3 component styles */

.i2t3-media-section {
    --i2t3-media-accent: var(--bs-primary, #0d6efd);
    --i2t3-media-accent-rgb: var(--bs-primary-rgb, 13, 110, 253);
    position: relative;
}

/* Poster / video stage (16:9 ratio box) */
.i2t3-media-section .media-teaser {
    overflow: hidden;
}
.i2t3-media-section .media-teaser__image {
    position: relative;
    height: 100%;
    width: 100%;
}
.i2t3-media-section .media-teaser__image img,
.i2t3-media-section .media-teaser video,
.i2t3-media-section .media-teaser iframe {
    display: block;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

/* Hidden inline video, revealed on play. */
.i2t3-media-section .media-teaser__video {
    position: absolute;
    inset: 0;
}
.i2t3-media-section .media-teaser__video[hidden] {
    display: none;
}

/* Brand-color wash over the poster (i2t3_media_overlay).
 * Faithful to Bootstrap ns-media: primary color at opacity 0.2,
 * not a neutral black tint. */
.i2t3-media-section.has-overlay .media-teaser__image::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(var(--i2t3-media-accent-rgb), 1);
    opacity: 0.2;
    pointer-events: none;
    z-index: 1;
}

/* Centered play button: 80x80 white circle with primary-color icon. */
.i2t3-media-section .media-teaser__play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 80px;
    width: 80px;
    border-radius: 50%;
    background-color: #fff;
    color: var(--i2t3-media-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    text-decoration: none;
    transition: all ease-in-out 0.3s;
    z-index: 2;
}
.i2t3-media-section .media-teaser__play-icon svg {
    width: 1em;
    height: 1em;
}

/* Pulsing ring around the play button. */
.i2t3-media-section .media-teaser__play-icon::after {
    content: "";
    position: absolute;
    height: 80px;
    width: 80px;
    border-radius: 50%;
    background-color: #fff;
    animation: i2t3-media-pulse 2s linear infinite;
    z-index: -1;
}

@keyframes i2t3-media-pulse {
    0% {
        transform: scale(1);
        opacity: 0;
    }
    40% {
        opacity: 0.5;
        transform: scale(1.2);
    }
    100% {
        transform: scale(1.4);
        opacity: 0;
    }
}

/* Active state: poster + button hidden, inline video revealed. */
.i2t3-media-section .media-teaser.is-playing .media-teaser__image,
.i2t3-media-section .media-teaser.is-playing .media-teaser__play-icon {
    display: none;
}
.i2t3-media-section .media-teaser.is-playing .media-teaser__image::before {
    display: none;
}