/* ================================================================= */
/* 1. HLAVNÍ NASTAVENÍ WRAPPERU A MÉDIÍ (Společné pro mobil i desktop) */
/* ================================================================= */

.video-wrapper {
    position: relative;
    width: 100%;
    max-width: 100%; /* Můžeš omezit, např. max-width: 600px; */
    aspect-ratio: 4 / 3; /* Nastaveno pro video ve formátu 4:3 */
    background-color: var(--evervoice-white);
    overflow: hidden;
}
.video-wrapper.half {width:50%;margin:48px auto;}

/* Překryvná vrstva (overlay) s náhledem */
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Obrázek i video vyplní celý prostor 4:3 a případně se oříznou */
.video-wrapper .cover-img,
.video-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    display: block;
}

.video-wrapper .cover-img {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.video-wrapper video {
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.2s ease;
}


/* ================================================================= */
/* 2. IKONA PLAY & MEDIA QUERIES (Rozdílné chování mobil vs desktop) */
/* ================================================================= */

/* Defaultní stav pro DESKTOP / hover zařízení */
.play-button {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    background-color: var(--evervoice-video-play-bg);
    border-radius: 50%;
    box-shadow: 0 4px 10px var(--evervoice-video-play-shadow);
    z-index: 3;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.play-button::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 55%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 14px 0 14px 24px;
    border-color: transparent transparent transparent var(--evervoice-video-play-icon);
}

.video-wrapper:hover .play-button {
    transform: translate(-50%, -50%) scale(1.1);
    background-color: var(--evervoice-video-play-bg-hover);
}

.video-wrapper .video-sound-toggle {
    display: none;
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 20;
    min-height: 36px;
    padding: 0 0.75rem;
    border-radius: 999px;
    background: var(--evervoice-video-sound-bg);
    color: var(--evervoice-video-sound-text);
    font-size: 0.875rem;
    line-height: 1;
}

.video-wrapper .video-sound-toggle:hover,
.video-wrapper .video-sound-toggle:focus {
    background: var(--evervoice-white);
    color: var(--evervoice-video-sound-text);
}

.video-sound-enabled .video-sound-toggle {
    display: none;
}

/* Touch / non-hover mobilní režim */
@media (max-width: 900px) and (hover: none), (max-width: 900px) and (pointer: coarse) {
    .play-button {
        display: none;
    }

    .video-wrapper .video-sound-toggle {
        display: inline-flex;
    }

    .video-sound-enabled .video-wrapper .video-sound-toggle {
        display: none;
    }
}


/* ================================================================= */
/* 3. STAVY PŘEPÍNANÉ JAVASCRIPTEM (Když se spustí přehrávání)       */
/* ================================================================= */

/* Skryje celý overlay (obrázek i ikonu play) */
.video-wrapper.is-playing .play-button {
    opacity: 0;
    visibility: hidden;
}

.video-wrapper.is-video-visible video {
    opacity: 1;
}