/**
 * Video Remotion no lugar da imagem destacada (single).
 *
 * O bloco vive dentro de .post-featured-image, entao ja herda o
 * border-radius, a sombra e o margin-bottom do hero. Aqui so cuidamos do
 * player em si e do botao de som.
 */

.jmv-post-video {
    position: relative;
    display: block;
    line-height: 0; /* remove o espaco fantasma abaixo de elementos inline */
    background: #000;
}

.jmv-post-video__player {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 16 / 9; /* segura o layout antes do metadata carregar */
    object-fit: cover;
    background: #000;
}

/* O hero tem `:hover img { transform: scale(1.03) }`. Num video isso da
   sensacao de instabilidade durante a reproducao — mantemos parado. */
.post-featured-image:hover .jmv-post-video__player {
    transform: none;
}

/* Botao de som
   -------------------------------------------------------------------- */

.jmv-post-video__sound {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 2; /* acima do ::before do hero */

    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;

    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;

    transition: background 0.25s ease, transform 0.25s ease;
}

.jmv-post-video__sound:hover,
.jmv-post-video__sound:focus-visible {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(1.08);
}

.jmv-post-video__sound:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Estado "com som": o botao fica destacado para deixar claro que o audio
   esta ligado naquele player. */
.jmv-post-video[data-sound-on="true"] .jmv-post-video__sound {
    background: var(--cor-primaria, #c1121f);
}

/* Fallback: se o autoplay for bloqueado pelo navegador, o JS marca o bloco
   e mostramos um play grande sobre o poster, para o clique ser obvio. */
.jmv-post-video__play {
    position: absolute;
    inset: 0;
    z-index: 2;

    display: none;
    align-items: center;
    justify-content: center;

    border: none;
    padding: 0;
    background: rgba(0, 0, 0, 0.25);
    color: #fff;
    font-size: 3.5rem;
    cursor: pointer;
}

.jmv-post-video[data-autoplay-blocked="true"] .jmv-post-video__play {
    display: flex;
}

/* Enquanto o autoplay estiver bloqueado, o botao de som nao faz sentido:
   o proprio play ja vai ligar o video. */
.jmv-post-video[data-autoplay-blocked="true"] .jmv-post-video__sound {
    display: none;
}

@media (max-width: 768px) {
    .jmv-post-video__sound {
        right: 12px;
        bottom: 12px;
        width: 40px;
        height: 40px;
    }
}

/* Quem pediu menos animacao no sistema nao deve receber um video em loop
   comecando sozinho. Mostramos o poster e os controles nativos. */
@media (prefers-reduced-motion: reduce) {
    .jmv-post-video__player {
        /* controles nativos sao ligados pelo JS neste caso */
    }
}