/*
Theme Name: Twenty Twenty-Five Child
Template:   twentytwentyfive
*/



/*
 * VOD Catalog — Estilo WowTube / Trending
 * Archivo: vod-catalog.css
 * Versión: 2.0.1
 *
 * INSTALACIÓN:
 *   1. Sube este archivo a: wp-content/themes/TU-TEMA/vod-catalog.css
 *   2. Encólalo desde functions.php (ver snippet al final del archivo)
 *   — O bien —
 *   Pega el contenido en Apariencia → Personalizar → CSS adicional
 *
 * FUENTES REQUERIDAS (ya incluidas vía @import):
 *   Syne (títulos) + Open Sans (cuerpo) — Google Fonts
 */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=Open+Sans:ital,wght@0,300;0,400;0,600;1,400&display=swap');

/* ════════════════════════════════════════════
   VARIABLES
════════════════════════════════════════════ */
:root {
    --vod-bg:          #0d0d12;
    --vod-card-bg:     #16161f;
    --vod-accent:      #e8c44a;   /* dorado WowTube */
    --vod-accent2:     #c8392b;   /* rojo precio */
    --vod-text:        #e8e8f0;
    --vod-muted:       #8888a0;
    --vod-border:      rgba(255,255,255,.07);
    --vod-font-head:   'Syne', sans-serif;
    --vod-font-body:   'Open Sans', sans-serif;
    --vod-radius:      6px;
    --vod-tr:          .22s ease;
    --vod-per-row:     10;         /* videos por fila  */
    --vod-visible:     4;          /* visibles sin scroll */
    --vod-gap:         10px;
    --vod-pad:         40px;       /* padding lateral */
}

/* ════════════════════════════════════════════
   RESET ZONA CATÁLOGO
════════════════════════════════════════════ */
.vod-catalog-wrap *,
.vod-catalog-wrap *::before,
.vod-catalog-wrap *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.vod-catalog-wrap {
    background: var(--vod-bg);
    color: var(--vod-text);
    font-family: var(--vod-font-body);
    min-height: 100vh;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding-bottom: 80px;
    overflow-x: hidden;
}

/* ════════════════════════════════════════════
   HERO + PARALLAX
════════════════════════════════════════════ */
.vod-hero {
    position: relative;
    height: 360px;
    overflow: hidden;
    background: var(--vod-bg);
}

/* Capa con imagen o gradiente + efecto parallax */
.vod-hero__parallax {
    position: absolute;
    inset: -70px 0;
    will-change: transform;
    /* Si hay imagen definida con --hero-bg se usa; si no, gradiente */
    background:
        var(--hero-bg, none),
        linear-gradient(160deg, #0d0d12 0%, #1a0a22 40%, #0a1220 100%);
    background-size: cover;
    background-position: center;
    background-image:
        radial-gradient(ellipse 80% 60% at 72% 38%, rgba(232,196,74,.07) 0%, transparent 68%),
        radial-gradient(ellipse 50% 80% at 18% 62%, rgba(200,57,43,.05) 0%, transparent 65%);
}

/* Líneas decorativas */
.vod-hero__deco {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 48%;
    pointer-events: none;
    overflow: hidden;
}

.vod-hero__deco-line {
    display: block;
    position: absolute;
    height: 1px;
    width: 75%;
    right: 0;
    background: linear-gradient(to right, transparent, rgba(232,196,74,.14), transparent);
}

/* Degradado inferior para fundir con el fondo */
.vod-hero__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom, rgba(13,13,18,.25) 0%, rgba(13,13,18,.88) 78%, var(--vod-bg) 100%);
}

/* Contenido del hero */
.vod-hero__content {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 0 var(--vod-pad) 42px;
    max-width: 720px;
    display: flex;
    flex-direction: column;
    gap: 11px;
    z-index: 2;
}

/* Pill etiqueta */
.vod-hero__tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--vod-accent);
    color: #000;
    font-family: var(--vod-font-head);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 4px 14px;
    border-radius: 20px;
    width: fit-content;
}

/* Título principal H1 */
.vod-hero__title {
    font-family: var(--vod-font-head);
    font-size: clamp(1.6rem, 3.5vw, 2.6rem);
    font-weight: 800;
    line-height: 1.05;
    color: #fff;
    text-shadow: 0 2px 32px rgba(0,0,0,.65);
    letter-spacing: -.01em;
}

/* Subtítulo */
.vod-hero__subtitle {
    font-size: .9rem;
    color: rgba(255,255,255,.6);
    font-weight: 300;
    line-height: 1.7;
    max-width: 560px;
}

/* Hint para admins */
.vod-hero__edit-hint {
    font-size: .68rem;
    color: var(--vod-accent);
    opacity: .6;
    display: flex;
    align-items: center;
    gap: 5px;
}

.vod-hero__edit-hint a {
    color: var(--vod-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ════════════════════════════════════════════
   CABECERA DEL CATÁLOGO
════════════════════════════════════════════ */
.vod-catalog__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 32px var(--vod-pad) 22px;
}

.vod-catalog__header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Barra vertical dorada */
.vod-accent-bar {
    display: block;
    width: 3px;
    height: 22px;
    background: var(--vod-accent);
    border-radius: 2px;
    flex-shrink: 0;
}

.vod-catalog__title {
    font-family: var(--vod-font-head);
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
}

.vod-catalog__count {
    font-size: .78rem;
    color: var(--vod-muted);
    font-weight: 400;
    margin-left: 4px;
}

/* ════════════════════════════════════════════
   FILAS
════════════════════════════════════════════ */
.vod-rows {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Fila individual */
.vod-row {
    padding: 0 var(--vod-pad) 26px;
}

/* Cabecera de cada fila */
.vod-row__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.vod-row__label {
    font-family: var(--vod-font-head);
    font-size: .7rem;
    font-weight: 600;
    color: rgba(255,255,255,.3);
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* Flechas de navegación */
.vod-row__nav {
    display: flex;
    gap: 5px;
}

.vod-arrow {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.11);
    color: var(--vod-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--vod-tr), border-color var(--vod-tr), color var(--vod-tr);
    flex-shrink: 0;
}

.vod-arrow:hover {
    background: var(--vod-accent);
    border-color: var(--vod-accent);
    color: #000;
}

/* Separador entre filas */
.vod-row-sep {
    height: 1px;
    background: var(--vod-border);
    margin: 0 var(--vod-pad);
}

/* ════════════════════════════════════════════
   SCROLL CONTAINER
   Muestra exactamente --vod-visible tarjetas.
   Las demás se acceden con scroll horizontal.
════════════════════════════════════════════ */
.vod-scroll-outer {
    overflow: hidden;
    position: relative;
}

.vod-scroll-inner {
    overflow-x: auto;
    overflow-y: visible;
    cursor: grab;
    padding-bottom: 4px;
    scroll-behavior: smooth;
    scrollbar-width: none;                        /* Firefox */
    /* Degradado fade-out lateral derecho */
    -webkit-mask-image: linear-gradient(to right, black 82%, transparent 100%);
    mask-image:         linear-gradient(to right, black 82%, transparent 100%);
    max-width: 100%;
}

.vod-scroll-inner::-webkit-scrollbar { display: none; } /* Chrome/Safari */
.vod-scroll-inner:active { cursor: grabbing; }

/* ════════════════════════════════════════════
   GRID
   Cada tarjeta ocupa 1/visible del ancho visible.
   El grid se expande para acomodar las n-cards totales.

   Fórmula ancho tarjeta:
     card-w = (100% - (visible-1)*gap) / visible

   Fórmula ancho total del grid:
     grid-w = n-cards * card-w + (n-cards - 1) * gap
════════════════════════════════════════════ */
.vod-grid {
    display: grid;
    grid-auto-flow: column;

    /* Cada columna = 1/4 del contenedor menos gaps */
      grid-auto-columns: calc(
        (100% - 3 * var(--vod-gap)) / 4
    );

    gap: var(--vod-gap);

    /* Ancho total = n-cards tarjetas */
    width: calc(
    var(--n-cards, 10) * ((100% - 3 * var(--vod-gap)) / 4)
    + (var(--n-cards, 10) - 1) * var(--vod-gap)
);
}

/* ════════════════════════════════════════════
   TARJETA — aspect-ratio 16:9
════════════════════════════════════════════ */
.vod-card {
    position: relative;
    border-radius: var(--vod-radius);
    overflow: hidden;
    background: var(--vod-card-bg);
    aspect-ratio: 16 / 9;          /* ← 16:9 para tus thumbnails */
    cursor: pointer;
    transition: transform var(--vod-tr);
    flex-shrink: 0;
}

.vod-card:hover {
    transform: translateY(-5px) scale(1.04);
    z-index: 20;
}

/* Thumbnail */
.vod-card__thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.vod-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;       /* Rellena el 16:9 sin deformar */
    display: block;
    transition: filter var(--vod-tr);
}

.vod-card:hover .vod-card__thumb img {
    filter: brightness(.55);
}

/* Placeholder de color cuando no hay thumbnail */
.vod-card__placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1a0a2e 0%, #2d1b4e 100%);
}

/* Link invisible que cubre toda la tarjeta */
.vod-card__link {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: var(--vod-radius);
}

/* Corona (esquina superior izquierda) */
.vod-card__crown {
    position: absolute;
    top: 7px;
    left: 7px;
    z-index: 3;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--vod-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Badges (esquina superior derecha) */
.vod-card__badge {
    position: absolute;
    top: 7px;
    right: 7px;
    z-index: 3;
    font-family: var(--vod-font-head);
    font-size: .58rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
    letter-spacing: .03em;
}

.vod-card__badge--price {
    background: var(--vod-accent2);
    color: #fff;
}

.vod-card__badge--owned {
    background: #1a6e2e;
    color: #fff;
}

/* Número de orden (esquina inferior izquierda) */
.vod-card__num {
    position: absolute;
    bottom: -2px;
    left: -3px;
    z-index: 5;
    font-family: var(--vod-font-head);
    font-size: 3.4rem;
    font-weight: 800;
    line-height: 1;
    color: var(--vod-bg);
    -webkit-text-stroke: 2px rgba(255,255,255,.12);
    pointer-events: none;
    user-select: none;
}

/* Botón play (aparece en hover) */
.vod-card__play {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--vod-tr);
    pointer-events: none;
}

.vod-card:hover .vod-card__play {
    opacity: 1;
}

.vod-card__play-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(232, 196, 74, .92);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .15s;
    pointer-events: auto;
}

.vod-card__play-btn:hover {
    transform: scale(1.12);
    background: var(--vod-accent);
}

/* Footer info (aparece en hover) */
.vod-card__footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
    padding: 22px 9px 9px;
    background: linear-gradient(to top, rgba(0,0,0,.94) 0%, transparent 100%);
    opacity: 0;
    transition: opacity var(--vod-tr);
}

.vod-card:hover .vod-card__footer {
    opacity: 1;
}

.vod-card__title {
    font-family: var(--vod-font-head);
    font-size: .72rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.vod-card__dur {
    font-size: .6rem;
    color: var(--vod-muted);
}

/* ════════════════════════════════════════════
   ESTADO VACÍO
════════════════════════════════════════════ */
.vod-empty {
    text-align: center;
    padding: 80px var(--vod-pad);
    color: var(--vod-muted);
    font-size: .95rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

.vod-btn {
    display: inline-block;
    background: var(--vod-accent);
    color: #000;
    font-family: var(--vod-font-head);
    font-weight: 700;
    font-size: .85rem;
    padding: .65rem 1.75rem;
    border-radius: 4px;
    text-decoration: none;
    transition: background .18s;
}

.vod-btn:hover {
    background: #f0cd5a;
    color: #000;
}

/* ════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════ */

/* Tablet: 3 visibles */
@media (max-width: 768px) {
    :root {
        --vod-visible: 3;
        --vod-pad: 24px;
    }
}

/* Móvil: 2 visibles, sin efecto hover-scale */
@media (max-width: 480px) {
    :root {
        --vod-visible: 2;
        --vod-pad: 16px;
    }

    .vod-card:hover {
        transform: none;
    }

    .vod-hero {
        height: 280px;
    }

    .vod-hero__title {
        font-size: 1.4rem;
    }

    .vod-catalog-wrap {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
max-width: 100%;
margin-left: 0;
margin-right: 0;
    }
}

/* ════════════════════════════════════════════
   COMPATIBILIDAD CON TEMAS POPULARES
════════════════════════════════════════════ */

/* Astra */
.ast-separate-container .vod-catalog-wrap,
.ast-page-builder-template .vod-catalog-wrap {
    margin-top: 0;
}

/* OceanWP / GeneratePress: evitar padding del content */
.archive.post-type-archive-video_vod #primary,
.archive.post-type-archive-video_vod .site-content {
    padding: 0 !important;
    max-width: 100% !important;
}

.archive.post-type-archive-video_vod .entry-content {
    margin: 0 !important;
    padding: 0 !important;
}

/*
════════════════════════════════════════════
SNIPPET PARA functions.php
(pega esto en functions.php de tu tema hijo)
════════════════════════════════════════════

add_action( 'wp_enqueue_scripts', function() {
    if ( is_post_type_archive( 'video_vod' ) ) {
        wp_enqueue_style(
            'vod-catalog',
            get_stylesheet_directory_uri() . '/vod-catalog.css',
            [],
            '2.0.0'
        );
    }
});

════════════════════════════════════════════
*/

.vod-scroll-outer {
    max-width: 100vw;
    overflow: hidden;
}

.vod-scroll-inner {
    max-width: 100vw;
}

.vod-grid {
    grid-auto-columns: calc((100vw - 80px - 3 * 10px) / 4);
    width: calc(var(--n-cards, 10) * ((100vw - 80px - 3 * 10px) / 4) + (var(--n-cards, 10) - 1) * 10px);
}


.vod-catalog-wrap .vod-scroll-outer {
    width: calc(100vw - 80px) !important;
    max-width: calc(100vw - 80px) !important;
}

.vod-catalog-wrap .vod-scroll-inner {
    width: 100% !important;
    max-width: 100% !important;
}

.vod-catalog-wrap .vod-grid {
    grid-auto-columns: calc((100vw - 80px - 30px) / 4) !important;
    width: calc(var(--n-cards, 10) * ((100vw - 80px - 30px) / 4) + (var(--n-cards, 10) - 1) * 10px) !important;
}

.vod-catalog-wrap .vod-card {
    width: calc((100vw - 80px - 30px) / 4) !important;
}


.vod-catalog-wrap .vod-scroll-outer,
.vod-catalog-wrap .vod-scroll-inner,
.vod-catalog-wrap .vod-grid,
.vod-catalog-wrap .vod-card {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.post-type-archive-video_vod h1,
.post-type-archive-video_vod .description {
    display: none !important;
}

html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
}