/* ============================================================
   CF Widget — Product Videos
   ============================================================ */

.cw-product-videos {
    width: 100%;
}

.cw-videos-title {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 24px;
    line-height: 1.3;
}

/* ── Grid ───────────────────────────────────────────────── */

.cw-videos-grid {
    --cw-vids-cols-d: 3;
    --cw-vids-cols-t: 2;
    --cw-vids-cols-m: 1;
    display: grid;
    grid-template-columns: repeat(var(--cw-vids-cols-d), 1fr);
    gap: 16px;
}

@media (max-width: 768px) {
    .cw-videos-grid {
        grid-template-columns: repeat(var(--cw-vids-cols-t), 1fr);
    }
}

@media (max-width: 480px) {
    .cw-videos-grid {
        grid-template-columns: repeat(var(--cw-vids-cols-m), 1fr);
    }
}

/* ── Card ───────────────────────────────────────────────── */

.cw-video-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    background: #1a1a1a;
    outline: none;
    display: block;
    /* IMPORTANTE: width:100% explícito rompe el circular sizing.
       Sin esto, justify-self:center o margin:auto del control "Ancho
       máximo" hacen que el card intente dimensionarse a su contenido
       (.cw-video-thumb-wrap con width:100%), entrando en dependencia
       circular y resolviendo a width:0 → height:0 → card invisible. */
    width: 100%;
    box-sizing: border-box;
    /* min-width:0 permite que el card pueda encogerse por debajo de
       su tamaño intrínseco (default min-width:auto en grid items). */
    min-width: 0;
}

/* ── Thumbnail ──────────────────────────────────────────── */

/* El aspect-ratio se setea inline desde el render() según el control
   "Proporción del card". Aquí dejamos un fallback por si el inline
   style falla. El ancho lo define el grid (1fr por columna). */
.cw-video-thumb-wrap {
    aspect-ratio: 4 / 5;
    width: 100%;
    overflow: hidden;
    display: block;
}

.cw-video-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: brightness(0.75);
}

/* Estado "sin thumbnail" — usado en videos archivo_local sin imagen
   custom. Llena al 100% el .cw-video-thumb-wrap padre (que ya define
   el aspect-ratio) y deja que el border-radius del .cw-video-card
   recorte las esquinas via overflow:hidden. El gradiente es vertical
   (180deg) del gris medio al negro para imitar visualmente una
   thumbnail oscura sólida. */
.cw-video-thumb--empty {
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #3a3a3a 0%, #1a1a1a 100%);
    display: block;
}

/* ── Overlay play ───────────────────────────────────────── */

.cw-video-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.2);
}

.cw-video-play-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a1a1a;
    flex-shrink: 0;
}

.cw-video-play-btn svg {
    margin-left: 2px;
}

/* ── Layout "centered": play + título + duración apilados al medio ── */

.cw-video-overlay--centered {
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: rgba(0, 0, 0, 0.35);
}

.cw-video-overlay--centered .cw-video-label {
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    line-height: 1.4;
    max-width: 100%;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
    /* Sin truncate — dejar que el título wrapee en 2-3 líneas si hace falta */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.cw-video-overlay--centered .cw-video-duration {
    /* Anula el position:absolute del modo overlay y se vuelve un pill inline. */
    position: static;
    top: auto;
    right: auto;
    background: rgba(255, 255, 255, 0.18);
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 999px;
    line-height: 1.4;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* ── Footer (título) ────────────────────────────────────── */

.cw-video-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 28px 12px 10px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
}

.cw-video-label {
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 500;
    display: block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    line-height: 1.4;
}

/* ── Duración ───────────────────────────────────────────── */

.cw-video-duration {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.65);
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 500;
    padding: 2px 6px;
    border-radius: 4px;
    line-height: 1.5;
    pointer-events: none;
}

/* ── Modal de reproducción ──────────────────────────────── */

.cw-video-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cw-video-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
}

/* Reproductor en formato vertical reel/tiktok (9:16). El alto manda
   sobre el ancho: usamos min(90vh, 95vw * 16/9) para asegurar que el
   modal nunca se sale del viewport (ni en pantallas cortas tipo
   landscape ni en pantallas angostas tipo móvil portrait). El ancho
   se deriva automáticamente del aspect-ratio. */
.cw-video-modal__wrap {
    position: relative;
    aspect-ratio: 9 / 16;
    height: min( 90vh, calc( 95vw * 16 / 9 ) );
    z-index: 1;
}

.cw-video-modal__close {
    position: absolute;
    top: -40px;
    right: 0;
    background: transparent;
    border: none;
    color: #FFFFFF;
    font-size: 24px;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
    transition: opacity 200ms ease;
    opacity: 0.8;
}

.cw-video-modal__close:hover {
    opacity: 1;
}

/* El player hereda el aspect-ratio 9/16 desde el wrap padre. */
.cw-video-modal__player {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
}

/* object-fit: contain mantiene el aspect-ratio nativo del video — si el
   archivo es vertical (9:16) llena perfecto; si es horizontal o cuadrado
   se ajusta con letterboxing en vez de estirarse. Para iframes de YouTube
   / Vimeo object-fit no aplica pero el embed ya respeta su propio video. */
.cw-video-modal__player iframe,
.cw-video-modal__player video {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    object-fit: contain;
}