/* Media + — i2t3 component styles
 * Richer media (vs. the Bootstrap "media"): aspect-ratio selector, video
 * controls/loop/autoplay, poster image, overlay and an optional caption.
 * Only local image/video files are used (no third-party embeds).
 */

.i2t3-media-plus__figure { margin: 0; }
.i2t3-media-plus__frame { position: relative; overflow: hidden; border-radius: .5rem; }
.i2t3-media-plus__frame img,
.i2t3-media-plus__video { width: 100%; height: 100%; object-fit: cover; }

.i2t3-media-plus.has-overlay .i2t3-media-plus__frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .35);
    pointer-events: none;
}

.i2t3-media-plus__caption {
    margin-top: .5rem;
    font-size: .9rem;
    color: var(--i2t3-text-muted, #6c757d);
}

/* Centered, pulsing play button overlay (ported from Karma .play-button-lg /
 * .pulseAnim). Click starts the video and removes the button (script.js).
 */
.i2t3-media-plus__playbtn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 90px;
    height: 90px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: #f8f9fa;
    color: #212529;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .2s ease, color .2s ease;
}

.i2t3-media-plus__playbtn:hover,
.i2t3-media-plus__playbtn:focus-visible {
    background-color: var(--bs-primary, #0d6efd);
    color: #fff;
}

/* CSS-only play triangle */
.i2t3-media-plus__playicon {
    display: block;
    width: 0;
    height: 0;
    margin-left: 6px;
    border-style: solid;
    border-width: 14px 0 14px 22px;
    border-color: transparent transparent transparent currentColor;
}

/* Pulsing ring (Karma pulseAnim) */
.i2t3-media-plus__playbtn::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-color: inherit;
    z-index: -1;
    animation: i2t3-media-plus-pulse 1.5s ease-out 1s infinite;
}

@keyframes i2t3-media-plus-pulse {
    from { transform: scale(1); opacity: 1; }
    to { transform: scale(1.4); opacity: 0; }
}