/*
 * Reprodução de mídia (áudio e vídeo) do acervo.
 * Markup: components/<pasta>/audio.php e .../video.php (padrão em components/default).
 *
 * Carregado pelo core (src/lib/html/head.php) logo depois do plyr.css e antes do CSS
 * do projeto, então o projeto sobrescreve o que precisar.
 *
 * .prm-media é o invólucro que o resumo de item mostra/esconde (é ele que recebe o id
 * esperado pelo swap_viewer()) e dentro do qual o Plyr monta o seu contêiner. Nada aqui
 * assume o layout da página (sem margem externa nem posicionamento fixo): vale tanto
 * numa coluna de altura fixa quanto no fluxo normal do documento.
 */

/* Cor de destaque dos controles: segue o tema (--bs-primary) e fica no :root para o
   projeto trocá-la no lugar de sempre, no próprio :root do CSS dele (que entra depois) —
   uma declaração direta num ancestral (ex.: .prm-media) venceria a herança do projeto. */
:root {
    --plyr-color-main: var(--bs-primary, #0d6efd);
}

.prm-media {
    width: 100%;
    max-width: 100%;
}

.prm-media .plyr {
    width: 100%;
    max-width: 100%;
}

/* Áudio: o Plyr é uma barra só; numa coluna larga ela estica demais. Centralizado com
   margin-inline (e não com flex no invólucro) porque o projeto troca o display do
   invólucro ao mostrar/esconder o representante. */
.prm-media-audio .plyr {
    max-width: 32rem;
    margin-inline: auto;
}

/* Vídeo: ocupa a largura da coluna, com cantos arredondados e o quadro sempre inteiro
   (contain), sem esticar nem cortar a imagem. */
.prm-media-video .plyr {
    background-color: var(--plyr-video-background, #000);
    border-radius: 0.5rem;
    overflow: hidden;
}

/* Em tela cheia o vídeo usa a janela inteira: sem cantos arredondados. */
.prm-media-video .plyr:fullscreen {
    border-radius: 0;
}

.prm-media-video video {
    object-fit: contain;
}

/* Sem Plyr (projeto que não vendorizou a biblioteca) valem os controles nativos. */
.prm-media audio,
.prm-media video {
    width: 100%;
    max-width: 100%;
}

/* Mídias externas incorporadas (YouTube, Vimeo, SoundCloud, Drive de mídia).
   O componente embedded_media gera .prm-embed (o alvo que o resumo mostra/
   esconde) e .prm-embed__inner, sempre flex. Assim o iframe fica centralizado
   na área disponível sem depender da classe nem do display que cada projeto
   aplica no alvo externo (o swap_viewer põe display:block inline). */
.prm-embed {
    width: 100%;
    height: 100%;
}

.prm-embed__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 0;
}

.prm-embed__inner > * {
    max-width: 100%;
}

.prm-embed__frame {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
}

/* ============================================================================
 * Indicador de mídia reproduzível nas miniaturas
 *
 * Uma miniatura de áudio/vídeo/link de player recebe um botão de play para não
 * parecer uma imagem comum. No browse o marcador é .prm-thumb-play (o template
 * padrão de image.php o desenha quando image::$playable é true); no resumo é o
 * data-type da própria miniatura + .prm-playable que o assets/js/media_thumbnails.js
 * acrescenta aos links de player. Nada depende de mudar os componentes do projeto.
 * ========================================================================== */

/* Contêiner do card de browse (components/{default,custom}/card.php). */
.card-img-browse {
    position: relative;
}

:has(> .prm-thumb-play) {
    position: relative;
}

.prm-thumb-play {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.12);
    pointer-events: none;
}

.prm-thumb-play__icon {
    width: clamp(2rem, 18%, 4rem);
    height: auto;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
    transition: transform 0.15s ease;
}

.card:hover .prm-thumb-play__icon {
    transform: scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
    .prm-thumb-play__icon {
        transition: none;
    }
}

/* Miniaturas do resumo (ul.viewer_preview_row > li.carousel-thumbnail-li). */
.carousel-thumbnail-li[data-type="mp3"],
.carousel-thumbnail-li[data-type="mp4"],
.carousel-thumbnail-li.prm-playable {
    position: relative;
}

.carousel-thumbnail-li[data-type="mp3"]::after,
.carousel-thumbnail-li[data-type="mp4"]::after,
.carousel-thumbnail-li.prm-playable::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    /* O li leva o padding lateral do .row; a imagem ocupa a largura interna. */
    left: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
    right: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
    z-index: 1;
    pointer-events: none;
    background-color: rgba(0, 0, 0, 0.12);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='28' fill='%23000' fill-opacity='.55' stroke='%23fff' stroke-opacity='.9' stroke-width='3'/%3E%3Cpath d='M26 20l20 12-20 12z' fill='%23fff'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 2.5rem auto;
}