/*
 * Block: CS Media Full
 */

section.cs-media-full {
    padding-inline: 0;
    padding-block: 0;
    width: 100%;
}

.cs-media-full__wrapper {
    width: 100%;
    max-width: 1540px;
    margin: 0 auto;
}

.cs-media-full__wrapper:has(.cs-media-full__image) {
    max-width: none;
}

.cs-media-full__media {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: min(56.25vw, calc(100dvh - var(--header-height)));
}

.cs-media-full__image,
.cs-media-full__poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cs-media-full__empty {
    text-align: center;
    color: var(--base-semi-dark);
    padding: 4.8rem 1.6rem;
    font-size: var(--text-l);
}

/* Poster fade-out when video is ready */
.cs-media-full__poster {
    position: relative;
    z-index: 2;
    transition: opacity 0.6s ease;
}

.cs-media-full__poster.is-hidden {
    opacity: 0;
    pointer-events: none;
}

/* Loading overlay */
.media-loading {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    animation: media-pulse 2s ease-in-out infinite;
    transition: opacity 0.4s ease;
}

/* Opaque variant: no poster image, masks Vimeo thumbnail flash */
.media-loading--opaque {
    background: var(--bg-light, #f0f0f0);
    animation: media-pulse-opaque 2s ease-in-out infinite;
}

@keyframes media-pulse {
    0%, 100% { background: rgba(0, 0, 0, 0.05); }
    50% { background: rgba(0, 0, 0, 0.25); }
}

@keyframes media-pulse-opaque {
    0%, 100% { background: #fff; }
    50% { background: #f8f8f8; }
}

.media-loading.is-hidden {
    opacity: 0;
    pointer-events: none;
}

/* Progress bar */
.media-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--bg-light);
    z-index: 4;
    opacity: 0;
    transition: opacity 0.35s ease;
}

/* Show progress bar once video is ready */
.cs-media-full__media.is-ready .media-progress {
    opacity: 1;
}

.media-progress__bar {
    height: 100%;
    width: 0;
    background: var(--primary, #fff);
    transition: width 0.25s linear;
}

/* Media controls (mute + fullscreen) */
.media-controls {
    position: absolute;
    right: var(--space-s);
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    transition: opacity 0.35s ease;
}

/* Always visible once video is ready */
.cs-media-full__media.is-ready .media-controls {
    opacity: 1;
}

.media-controls__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.8rem;
    height: 4.8rem;
    border-radius: 50%;
    border: none;
    background: rgb(20 20 20 / 30%);
    backdrop-filter: blur(12px);
    color: #fff;
    cursor: pointer;
    transition: var(--transition);
}

.media-controls__btn:hover {
    background: rgba(0, 0, 0, 0.6);
}

.media-controls__icon {
    width: 2rem;
    height: 2rem;
}

/* Fullscreen icon toggle */
.media-fullscreen-btn .media-controls__icon--exit-fs {
    display: none;
}

.media-fullscreen-btn.is-fullscreen .media-controls__icon--enter-fs {
    display: none;
}

.media-fullscreen-btn.is-fullscreen .media-controls__icon--exit-fs {
    display: block;
}

/* Mute icon toggle */
.media-mute-btn[data-muted="true"] .media-controls__icon--unmuted,
.media-mute-btn[data-muted="false"] .media-controls__icon--muted {
    display: none;
}

.media-mute-btn[data-muted="true"] .media-controls__icon--muted,
.media-mute-btn[data-muted="false"] .media-controls__icon--unmuted {
    display: block;
}

/* Hide controls mode */
.cs-media-full__media[data-hide-controls] .media-controls,
.cs-media-full__media[data-hide-controls] .media-progress {
    display: none;
}

/* Full-width when autoplay + no controls */
.cs-media-full__wrapper--full {
    max-width: none;
}