/* ============================================================
   SITEBUILDER - Controles custom de video (HTML5 + YouTube)

   Barra inyectada por JS (assets/js/sb-video-youtube-autoplay.js) como
   hermano del <video>/<iframe> dentro de su contenedor real (.v01-frame,
   .media, .v03-media, .v04-card .media, .v05-media .media) -- ese
   contenedor YA es position:relative/absolute + overflow:hidden en las 5
   opciones (ver components.css .media y el CSS propio de cada opción), así
   que la barra no necesita ningún wrapper nuevo alrededor del video.

   container-type:inline-size en la barra misma: mide su propio ancho
   renderizado (el del video), no el viewport -- fundamental en
   video-option04, donde cada video mide ~1/3 del contenedor incluso en
   desktop (grid de 3 columnas, ver video-option04-desktop.css).
   ============================================================ */

.sb-video-has-controls {
    position: relative;
}

.sb-video-controls {
    container-type: inline-size;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: linear-gradient(to top, rgba(0, 0, 0, .75) 0%, rgba(0, 0, 0, .45) 60%, transparent 100%);
    flex-wrap: wrap;
}

.sb-vc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #fff;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color .15s ease, transform .1s ease;
}
.sb-vc-btn svg { width: 20px; height: 20px; }
.sb-vc-btn:hover { background: rgba(255, 255, 255, .18); }
.sb-vc-btn:active { transform: scale(.92); }
.sb-vc-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.sb-vc-time {
    color: #fff;
    font: 500 12px/1 var(--font-body, system-ui, sans-serif);
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 76px;
}

.sb-vc-progress,
.sb-vc-volume {
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .3);
    cursor: pointer;
}
.sb-vc-progress { flex: 1 1 80px; min-width: 60px; }
.sb-vc-volume { flex: 0 0 80px; }

.sb-vc-progress::-webkit-slider-thumb,
.sb-vc-volume::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    margin-top: -5px;
}
.sb-vc-progress::-moz-range-thumb,
.sb-vc-volume::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
}
.sb-vc-progress::-webkit-slider-runnable-track,
.sb-vc-volume::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 999px;
    background: transparent;
}
.sb-vc-progress::-moz-range-track,
.sb-vc-volume::-moz-range-track {
    height: 4px;
    border-radius: 999px;
    background: transparent;
}
.sb-vc-progress:focus-visible,
.sb-vc-volume:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* ---- Colapso responsive por ancho del contenedor real del video (no del
   viewport) -- ver comentario de container-type arriba. Orden de prioridad
   pedido: Play/Pause > Reiniciar > Mute > Volumen > Progreso/tiempo (nunca
   se oculta Play/Pause). flex-wrap arriba ya cubre, como red de seguridad,
   los navegadores sin soporte de container queries -- nunca genera scroll
   horizontal porque el contenedor padre ya tiene overflow:hidden. ---- */
@container (max-width: 459px) {
    .sb-vc-volume,
    .sb-vc-time { display: none; }
}
@container (max-width: 299px) {
    .sb-vc-progress { display: none; }
}

/* ---- video-option04: el badge de duración nativo (.v04-duration, mismo
   rincón inferior donde cae la barra) queda redundante con el tiempo que ya
   muestra la barra propia una vez que hay controles activos. ---- */
.sb-video-has-controls .v04-duration { display: none; }

/* ---- Hallazgo previo a este trabajo: .v03-media (a diferencia de las
   otras 4 opciones) no lleva la clase .media, así que no existía ninguna
   regla que dimensionara un <video> HTML5 ahí (sólo el iframe). Regla
   defensiva genérica -- no cambia nada donde ya funcionaba. ---- */
.video video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}