/*
 * CGTV Carousel v2 — skeleton + Swiper theming.
 *
 * Scope prefix: .cgtv-carousel-v2 — non inquina il CSS netube esistente.
 * Il contenuto delle tile riusa le classi `.dbys_carosello_film*`, `.dbys-film-title`
 * ecc. già stilate dal tema, quindi a tile-livello il look è IDENTICO al vecchio.
 *
 * Tematizzazione Swiper: pochi override sopra swiper-bundle.min.css già enqueued.
 */

/* =====================================================================
 * Globale: blocca il "back navigation gesture" di Chrome desktop quando
 * l'utente fa two-finger swipe orizzontale (trackpad) al bordo del
 * carosello. Va su html perché Chrome propaga il gesto al root document
 * quando il trackpad swipe va oltre i limiti del carosello.
 * ===================================================================== */
html {
    overscroll-behavior-x: none;
}

/* =====================================================================
 * Container e sezione
 * ===================================================================== */
.cgtv-carousel-v2 {
    position: relative;
    width: 100%;
    margin: 0 0 16px 0;
    color: #fff;
    /* content-visibility rimosso: causava "shift" visibile dopo che
     * Swiper idrato sostituisce il contain-intrinsic-size (stimato) con
     * la height reale del Swiper, che è diversa → tutto il layout sotto
     * riflow + potenziale shift orizzontale se la scrollbar viene/va.
     *
     * Tradeoff: perdiamo il "skip render below-the-fold" (vantaggio small
     * su first-paint), ma il layout è completamente stabile.
     * Le ottimizzazioni lazy-hydrate restano (IntersectionObserver in JS). */
}

/* Riduci (non azzerare) lo spacing del row WPBakery genitore del carosello v2.
 * WPBakery default applica padding-bottom ~35px ai .vc_row → sommato al
 * margin 16px del nostro container fa troppo. 20px e' un compromesso che
 * lascia respiro tra caroselli senza buchi enormi.
 * Browser support :has() ~95% (Chrome 105+, FF 121+, Safari 15.4+).
 * Se il browser non supporta :has() lo spacing resta come default WPBakery. */
.vc_row:has(.cgtv-carousel-v2) {
    margin-bottom: 0 !important;
    padding-bottom: 40px !important;
}

/* Il titolo del carosello usa markup legacy .dbys-carosello-title →
 * stile ereditato da netube-child/style.css + DBY_OwlCarousel/owl.carousel.dby.css
 * (Source Serif Pro, barretta rossa #FF0E1F ::before, link "Scopri di più ›"
 * in section-title-link).
 *
 * Allineamento orizzontale: il titolo deve partire alla stessa x dei poster.
 * Lo __swiper ha padding: 30px 48px (desktop), quindi card iniziano a 48px.
 * Il titolo legacy partirebbe a 0 → shift visivo a sinistra rispetto ai poster.
 * Applichiamo lo stesso padding-left al .dbys-carosello-title, scoped SOLO
 * dentro .cgtv-carousel-v2 per non rompere il titolo del vecchio Owl. */
.cgtv-carousel-v2 .dbys-carosello-title {
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
    margin-bottom: 0;
}
.cgtv-carousel-v2 .dbys-carosello-title h3.section-title,
.cgtv-carousel-v2 .dbys-carosello-title h3.section-title-link {
    margin: 0;
}
@media (max-width: 599px) {
    .cgtv-carousel-v2 .dbys-carosello-title {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* =====================================================================
 * Skeleton (mostrato prima dell'idratazione)
 *   - grid CSS native per non dipendere da Swiper finché il JS non è pronto
 *   - 6 tile grigio scuro con pulsazione soft
 * ===================================================================== */
/* Skeleton grid: colonne matchano slidesPerView Swiper per view+breakpoint.
 * Verticale:   desktop 6, tablet 4, mobile 2
 * Orizzontale: desktop 4, tablet 2, mobile 1
 * Extra tile oltre il max del breakpoint vengono nascosti via :nth-child
 * per ridurre DOM visibile e matchare il layout post-hydrate. */
.cgtv-carousel-v2__skel {
    display: grid;
    gap: 10px;
    width: 100%;
    /* Allinea layout con Swiper (.__swiper ha padding: 12px 16px).
     * Senza questo padding, lo skeleton parte da x=0 mentre Swiper dopo boot
     * parte da x=16px → shift orizzontale visibile alla transizione. */
    padding: 12px 16px;
    box-sizing: border-box;
}
/* Gap allineato a Swiper spaceBetween per breakpoint:
 *   <600px  : Swiper spaceBetween 8 (vedi breakpoints in JS)
 *   600+    : Swiper spaceBetween 10 (gia' default sopra) */
@media (max-width: 599px) {
    .cgtv-carousel-v2__skel {
        padding: 8px 16px;  /* mobile: meno padding, matcha layout pagina */
        gap: 8px;            /* match Swiper spaceBetween mobile */
    }
}

/* Breakpoint IDENTICI a quelli Swiper (buildSwiperConfig in JS):
 *   orizzontale: 0→1 card, 600→2 card, 1000→4 card
 *   verticale:   0→2 card, 600→4 card, 1000→6 card
 * Se skel e Swiper differiscono anche di 1px, su viewport al confine
 * (es. iPad mini 744px) utente vede N skel poi N+1 card → mismatch. */

/* Verticale */
.cgtv-carousel-v2__skel--verticale {
    grid-template-columns: repeat(6, 1fr);
}
@media (max-width: 999px) {
    .cgtv-carousel-v2__skel--verticale { grid-template-columns: repeat(4, 1fr); }
    .cgtv-carousel-v2__skel--verticale .cgtv-carousel-v2__skel-tile:nth-child(n+5) { display: none; }
}
@media (max-width: 599px) {
    .cgtv-carousel-v2__skel--verticale { grid-template-columns: repeat(2, 1fr); }
    .cgtv-carousel-v2__skel--verticale .cgtv-carousel-v2__skel-tile:nth-child(n+3) { display: none; }
}

/* Orizzontale */
.cgtv-carousel-v2__skel--orizzontale {
    grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 999px) {
    .cgtv-carousel-v2__skel--orizzontale { grid-template-columns: repeat(2, 1fr); }
    .cgtv-carousel-v2__skel--orizzontale .cgtv-carousel-v2__skel-tile:nth-child(n+3) { display: none; }
}
@media (max-width: 599px) {
    .cgtv-carousel-v2__skel--orizzontale { grid-template-columns: 1fr; }
    .cgtv-carousel-v2__skel--orizzontale .cgtv-carousel-v2__skel-tile:nth-child(n+2) { display: none; }
}

.cgtv-carousel-v2__skel-tile {
    /* Grigi più chiari per essere visibili su sfondo nero netube.
     * Base #252525 (dark grey), highlight #3a3a3a (mid grey) = contrasto
     * leggibile ma non abbagliante. Pattern Netflix/Disney+. */
    background: linear-gradient(90deg, #252525 0%, #3a3a3a 50%, #252525 100%);
    background-size: 200% 100%;
    border-radius: 6px;
    animation: cgtv-skel-pulse 1.6s ease-in-out infinite;
}
.cgtv-carousel-v2__skel-tile--verticale {
    aspect-ratio: 2 / 3;
}
.cgtv-carousel-v2__skel-tile--orizzontale {
    aspect-ratio: 16 / 9;
}

@keyframes cgtv-skel-pulse {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .cgtv-carousel-v2__skel-tile {
        animation: none;
        background: #2d2d2d;
    }
}

/* Error/empty state */
.cgtv-carousel-v2--error::after {
    content: "Carosello non disponibile.";
    display: block;
    color: #a7a7a7;
    font-size: 13px;
    padding: 20px 4px;
}
.cgtv-carousel-v2--empty .cgtv-carousel-v2__skel {
    display: none;
}

/* Swiper montato → lo skeleton sparisce subito, il carosello appare con
 * img (che caricano progressivamente, con preload rel=preload per le top
 * above-the-fold + loading=lazy per le altre).
 * NO opacity hiding: evita il "flicker" di img che sparisce e riappare. */
.cgtv-carousel-v2--ready .cgtv-carousel-v2__skel { display: none; }

/* =====================================================================
 * Swiper container tematizzato
 * ===================================================================== */
.cgtv-carousel-v2__swiper {
    position: relative;
    /* Padding verticale: minimo per ombra/hover ma compatto (titolo vicino).
     * Padding orizzontale 16px: aderente al bordo come il resto della pagina.
     * NB: card hover (scale 1.06) puo' essere clippata sui lati estremi,
     * tradeoff accettato per massimizzare l'area visibile delle tile. */
    padding: 12px 16px;
    /* IMPORTANTE: override della classe `.swiper` (overflow:hidden default).
     * !important necessario perché swiper-bundle.min.css ha specificity simile
     * e vince per ultimo caricato. */
    overflow: visible !important;
    /* Blocca la "back navigation gesture" di Chrome / Safari (desktop e
     * mobile): quando lo swipe orizzontale arriva al bordo del carosello,
     * il browser di default lo interpreta come gesto history-back.
     *  - overscroll-behavior-x: contain → solo se l'elemento ha overflow
     *    scroll/auto/hidden, qui non si applica (overflow:visible).
     *  - touch-action: pan-y → dice al browser di processare solo il pan
     *    verticale come gesture nativa; lo swipe orizzontale viene lasciato
     *    al pointerdown/move handler di Swiper, niente back navigation. */
    overscroll-behavior-x: contain;
    touch-action: pan-y;
}

/* Stesso trattamento sul wrapper interno (è quello che ha davvero
 * overflow gestito da Swiper). overscroll-behavior-x funziona qui
 * perche' è elemento scrollable. */
.cgtv-carousel-v2__swiper .swiper-wrapper {
    overscroll-behavior-x: contain;
    touch-action: pan-y;
}
@media (max-width: 599px) {
    .cgtv-carousel-v2__swiper { padding: 8px 16px; }
}

/* Swiper internals: tutti i container intermedi devono avere overflow visible
 * per permettere alla card al hover di uscire oltre i bordi. */
.cgtv-carousel-v2__swiper .swiper-wrapper {
    overflow: visible;
}
.cgtv-carousel-v2__slide,
.cgtv-carousel-v2__swiper .swiper-slide {
    height: auto;
    overflow: visible;
    /* Baseline z-index così :hover può portare lo slide sopra i vicini */
    position: relative;
    z-index: 1;
    transition: z-index 0s linear 0s;
}

/* PIXEL PERFECT / ZERO CLS:
 * L'aspect-ratio sul slide stesso dice al browser quanto alto deve essere
 * PRIMA che l'img carichi e prima che Swiper calcoli. Layout stabile dal
 * primo paint. Fondamentale per Core Web Vitals (CLS).
 *
 * Nota: lo Swiper è inizializzato con modificatore classe
 * cgtv-carousel-v2__swiper--{verticale|orizzontale} (JS line 225). */
.cgtv-carousel-v2__swiper--verticale .swiper-slide {
    aspect-ratio: 2 / 3;
}
.cgtv-carousel-v2__swiper--orizzontale .swiper-slide {
    aspect-ratio: 16 / 9;
}
/* Hover sullo SLIDE (parent dell'<a>): alziamo lo z-index del contenitore
 * stesso, altrimenti qualsiasi stacking context del vicino (transform,
 * opacity, z-index) può sovrastare. */
.cgtv-carousel-v2__swiper .swiper-slide:hover,
.cgtv-carousel-v2__swiper .swiper-slide:focus-within {
    z-index: 30;
}

/* =====================================================================
 * Navigation arrows — Netflix pure mood:
 *   - Pulsante alto solo quanto l'area poster (esclude padding verticale
 *     del __swiper usato per hover card): top:30px bottom:30px matcha il
 *     padding 30px del container.
 *   - Background: GRADIENTE laterale nero → trasparente, applicato sul
 *     bottone stesso (non full width del carosello, solo ~60px dal bordo).
 *   - Pillola rossa al centro come "call-to-action" del click.
 * ===================================================================== */
/* Design minimal Apple/Jony Ive style:
 *   - Nessun gradiente di sfondo
 *   - Nessuna pillola colorata
 *   - Solo cerchio sottile semi-trasparente con chevron
 *   - Hover: cerchio leggermente piu' opaco, chevron piu' luminoso
 *   - Visibile sempre (no hover-only) ma molto discreto
 *   - Posizionato CENTRATO verticalmente, sporge leggermente all'esterno
 *     del carosello cosi' non oscura le card
 * ===================================================================== */
.cgtv-carousel-v2__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease, background 200ms ease, transform 200ms ease;
}
.cgtv-carousel-v2__nav--prev {
    /* Posizionato leggermente fuori dal padding del carosello (16px) per non
     * sovrapporsi alle card. Sporge a sinistra di -4px dal bordo del padding. */
    left: -4px;
}
.cgtv-carousel-v2__nav--next {
    right: -4px;
}

/* Chevron SVG via mask-image: linea sottile bianca, no fill */
.cgtv-carousel-v2__nav::after {
    content: '';
    width: 14px;
    height: 14px;
    background: rgba(255, 255, 255, 0.85);
    transition: background 200ms ease;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>") no-repeat center / contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>") no-repeat center / contain;
}
.cgtv-carousel-v2__nav--prev::after {
    transform: scaleX(-1);
}

/* Visibilita': fade-in al hover del carosello (non sempre visibili) */
.cgtv-carousel-v2__swiper:hover .cgtv-carousel-v2__nav,
.cgtv-carousel-v2__swiper:focus-within .cgtv-carousel-v2__nav {
    opacity: 1;
    pointer-events: auto;
}

/* Hover bottone: leggermente piu' opaco + chevron pieno bianco */
.cgtv-carousel-v2__nav:hover {
    background: rgba(255, 255, 255, 0.18);
    transform: translateY(-50%) scale(1.08);
}
.cgtv-carousel-v2__nav:hover::after {
    background: #fff;
}
.cgtv-carousel-v2__nav--disabled,
.cgtv-carousel-v2__nav--hidden {
    opacity: 0 !important;
    pointer-events: none;
}

@media (max-width: 767px) {
    .cgtv-carousel-v2__nav { display: none; }
}


/* =====================================================================
 * 6. Tile — namespace dedicato .cgtv-v2-* per ISOLARE dal CSS del vecchio
 *    carosello Owl/DBY.
 *
 *    Perché: il vecchio CSS `.dbys_carosello_film-image::after` imposta un
 *    gradient scuro in basso che copre le icone support. Invece di
 *    combattere con !important ogni singola regola parassita, ho adottato
 *    un namespace pulito: zero ereditarietà, stilo solo quello che serve.
 * ===================================================================== */

.cgtv-v2-tile {
    display: block;
    width: 100%;
    position: relative;
    text-decoration: none;
    color: inherit;
    /* Hover Netflix/Apple-style: snappy, ~180ms con ease-out deciso.
     * Curva (0.16, 1, 0.3, 1) = "easeOutExpo" smooth ma reattiva. */
    transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1),
                z-index 0s linear 0s;
    will-change: transform;
}
.cgtv-v2-tile:hover,
.cgtv-v2-tile:focus {
    text-decoration: none;
    outline: none;
}

.cgtv-v2-poster {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    background: #141414;
    transform: translateZ(0);
    transition: box-shadow 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

.cgtv-v2-tile--vert  .cgtv-v2-poster { aspect-ratio: 2 / 3; }
.cgtv-v2-tile--horiz .cgtv-v2-poster { aspect-ratio: 16 / 9; }

.cgtv-v2-poster__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
    margin: 0;
    padding: 0;
}

/* Hover: la card intera si rialza (translateY) + scale soft 1.08, portata
 * in primo piano (z-index alto) così copre le due slide vicine. L'immagine
 * NON scala da sola: tutto si muove insieme compatto (icone + badge + img).
 *
 * Note: `contain: paint` è stato rimosso dal tile perché clippava shadow
 * e transform fuori dai bordi. Lo Swiper slide ha `overflow: visible` (già
 * impostato sul container __swiper) per permettere alla card rialzata di
 * uscire oltre i bordi del carosello. */
@media (hover: hover) {
    .cgtv-v2-tile:hover {
        z-index: 20;
        transform: translateY(-10px) scale(1.06);
    }
    .cgtv-v2-tile:hover .cgtv-v2-poster {
        box-shadow:
            0 16px 40px rgba(0, 0, 0, 0.75),
            0 0 0 2px rgba(220, 13, 29, 0.9);
    }
}

/* Swiper preloader custom colorato CGTV */
.cgtv-v2-poster .swiper-lazy-preloader {
    width: 28px;
    height: 28px;
    border-width: 2px;
    border-color: #dc0d1d;
    border-top-color: transparent;
}

/* -------- BADGE corner-ribbon diagonale (stile "etichetta applicata") --------
 * Il nastro va da sinistra in basso verso destra in alto (rotate -45deg),
 * ancorato all'angolo TOP-LEFT del poster. Il poster ha overflow:hidden
 * quindi le estremità del nastro che escono dal bordo vengono clippate,
 * lasciando un effetto "ribbon" pulito. */
.cgtv-v2-badge {
    position: absolute;
    top: 16px;
    left: -36px;         /* spinge il nastro in diagonale fuori dal bordo sx */
    z-index: 3;
    width: 140px;
    text-align: center;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 5px 0;
    line-height: 1;
    color: #fff;
    background: linear-gradient(135deg, #ff0e1f 0%, #dc0d1d 50%, #a8081a 100%);
    transform: rotate(-45deg);
    transform-origin: center;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.12) inset;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
    pointer-events: none;
}
/* Piccole "code" che simulano la piegatura del nastro sul retro */
.cgtv-v2-badge::before,
.cgtv-v2-badge::after {
    content: '';
    position: absolute;
    bottom: -5px;
    width: 0;
    height: 0;
    border-style: solid;
}
.cgtv-v2-badge::before {
    left: 8px;
    border-width: 0 5px 5px 0;
    border-color: transparent #7a050e transparent transparent;
}
.cgtv-v2-badge::after {
    right: 8px;
    border-width: 0 0 5px 5px;
    border-color: transparent transparent transparent #7a050e;
}
.cgtv-v2-badge--esclusiva {
    background: linear-gradient(135deg, #ffd75c 0%, #f7b500 50%, #c78900 100%);
    color: #1a1a1a;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
}
.cgtv-v2-badge--esclusiva::before { border-color: transparent #8a5f00 transparent transparent; }
.cgtv-v2-badge--esclusiva::after  { border-color: transparent transparent transparent #8a5f00; }

.cgtv-v2-badge--abbonamento {
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 50%, #0a0a0a 100%);
    color: #fff;
    text-shadow: none;
}
.cgtv-v2-badge--abbonamento::before { border-color: transparent #000 transparent transparent; }
.cgtv-v2-badge--abbonamento::after  { border-color: transparent transparent transparent #000; }

/* -------- SUPPORT ICONS (SVOD / noleggio) in basso -------- */
.cgtv-v2-ico {
    position: absolute;
    bottom: 8px;
    width: 22px;
    height: 22px;
    max-width: 22px;
    max-height: 22px;
    z-index: 4;
    margin: 0;
    padding: 0;
    border: 0;
    object-fit: contain;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
}
.cgtv-v2-ico--svod     { left: 8px; right: auto; }
.cgtv-v2-ico--noleggio { right: 8px; left: auto; }

@media (max-width: 767px) {
    .cgtv-v2-ico { width: 18px; height: 18px; }
}

/* -------- TITOLO film sotto la poster (solo verticale) -------- */
.cgtv-v2-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    margin: 8px 0 0;
    padding: 0 2px;
    color: #fff;
    overflow: hidden;
}

/* Noscript */
.cgtv-carousel-v2__noscript {
    padding: 20px;
    color: #a7a7a7;
    font-size: 14px;
    text-align: center;
    background: rgba(255,255,255,0.03);
    border-radius: 4px;
}