/* web-video.css — pagine video e collection su desktop (solo web, >=992px). */

@media (min-width: 992px) {


    /* pagina video: header web nascosto (resta solo l'indietro),
       video full-bleed dall'alto — niente padding-top */
    body.ty-video-open .ty-web-header {
        display: none !important;
    }
    body.ty-web .pageMob-video {
        padding-top: 0 !important;
    }

    /* ---------------- PAGINA COLLECTION (stile Prime Video) ----------------
       Hero full-bleed: trailer/backdrop a tutta larghezza dietro, gradiente
       da sinistra e dal basso, titolo/meta/descrizione/CTA in basso a
       sinistra sopra l'immagine; tab/episodi/correlati contenuti sotto. */
    body.ty-web .pageMob-collection {
        padding-top: 0 !important; /* l'hero passa sotto l'header trasparente */
    }
    body.ty-web .pageMob-collection .modal_popup_lc_content {
        max-width: none;
        margin: 0;
        padding: 0;
    }
    body.ty-web .pageMob-collection .page-back-btn {
        position: absolute;
        z-index: 6;
        top: 76px;
        left: 24px;
    }

    /* hero */
    body.ty-web .pageMob-collection .cardSerie {
        position: relative;
        display: block;
        min-height: 82vh;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
    body.ty-web .pageMob-collection #media_serie_header {
        position: absolute;
        inset: 0;
        padding: 0;
    }
    body.ty-web .pageMob-collection .backgroundImageSeries {
        position: absolute;
        inset: 0;
        height: 100%;
        padding: 0 !important; /* annulla il ratio 16:9 di embed-responsive */
    }
    body.ty-web .pageMob-collection .previewVideoTrailerCollection {
        position: absolute;
        inset: 0;
        background-size: cover;
        background-position: center 20%;
    }
    body.ty-web .pageMob-collection .previewVideoTrailerCollection .video-js {
        position: absolute !important;
        inset: 0;
        width: 100% !important;
        height: 100% !important;
        padding-top: 0 !important;
    }
    body.ty-web .pageMob-collection .previewVideoTrailerCollection video {
        object-fit: cover;
    }
    /* gradiente alla Prime: pesante a sinistra e in basso */
    body.ty-web .pageMob-collection #media_serie_header::after {
        content: '';
        position: absolute;
        inset: 0;
        background:
            linear-gradient(to right, rgba(5, 7, 16, .93) 18%, rgba(5, 7, 16, .55) 42%, transparent 68%),
            linear-gradient(to top, rgba(5, 7, 16, .95) 0%, transparent 42%);
        pointer-events: none;
    }
    /* bottoni volume/replay del trailer in basso a destra */
    body.ty-web .pageMob-collection #trailer_btns_box {
        position: absolute;
        right: 30px;
        bottom: 34px;
        z-index: 4;
    }

    /* colonna info sopra l'hero */
    body.ty-web .pageMob-collection #info_serie_header {
        position: relative;
        z-index: 3;
        max-width: 640px;
        min-height: 82vh;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 96px 24px 78px 48px;
    }
    /* riga azioni UNICA: Guarda ora + salva + share in linea */
    body.ty-web .pageMob-collection #htmlAccess {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 6px;
    }
    body.ty-web .pageMob-collection #htmlAccess > div {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        margin: 0 !important;
    }
    /* distanza UNIFORME fra tutti i bottoni: comanda solo il gap,
       i vecchi margini utility (mr-1/mb-1) vengono azzerati */
    body.ty-web .pageMob-collection #htmlAccess .button-primary,
    body.ty-web .pageMob-collection #htmlAccess .button-secondary,
    body.ty-web .pageMob-collection #htmlAccess .mr-1,
    body.ty-web .pageMob-collection #htmlAccess .mb-1,
    body.ty-web .pageMob-collection #htmlAccess .button-round {
        margin: 0 !important;
    }
    body.ty-web .pageMob-collection #titleSerieCollection {
        font-size: 46px;
        font-weight: 800;
        line-height: 1.05;
    }
    body.ty-web .pageMob-collection .collectionLogoTitle {
        max-height: 140px;
        max-width: 420px;
    }
    body.ty-web .pageMob-collection .htmlDescription {
        font-size: 15.5px;
        line-height: 1.55;
        opacity: .95;
    }
    /* CTA compatte (su mobile sono full-width) */
    body.ty-web .pageMob-collection #htmlAccess .button-primary,
    body.ty-web .pageMob-collection #htmlAccess .button-secondary,
    body.ty-web .pageMob-collection #htmlBundle .button-primary,
    body.ty-web .pageMob-collection #htmlBundle .button-secondary {
        width: auto !important;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 12px 26px;
        margin-right: 10px;
        border-radius: 10px;
        font-weight: 700;
    }

    /* sotto l'hero: tab + episodi/correlati a TUTTA larghezza, allineati a
       sinistra sullo stesso bordo (stesso padding per tab e contenuti) */
    body.ty-web .pageMob-collection .collection-tab-select,
    body.ty-web .pageMob-collection #video_episodes,
    body.ty-web .pageMob-collection #video_related_contents {
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        padding-left: 32px;
        padding-right: 32px;
    }
    body.ty-web .pageMob-collection .collection-tab-select {
        margin-top: 18px;
    }

    /* ---------------- PAGINA PROFILO (due colonne stile account) ----------
       Card utente sticky a sinistra, impostazioni a destra. Il margin va
       forzato: mobile.css mette margini laterali su .pageMob-profile. */
    body.ty-web .pageUserProfile {
        max-width: 1040px;
        margin: 0 auto !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
    body.ty-web .pageUserProfile > div {
        display: grid;
        grid-template-columns: 320px minmax(0, 1fr);
        gap: 0 40px;
        align-items: start;
    }
    body.ty-web .pageUserProfile .profile-user-card {
        grid-column: 1;
        position: sticky;
        top: 84px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 12px;
        background: rgba(128, 128, 128, .09);
        border: 1px solid rgba(128, 128, 128, .16);
        border-radius: 18px;
        padding: 30px 22px;
    }
    body.ty-web .pageUserProfile .profile-user-card .image-profile-general {
        width: 96px !important;
        height: 96px !important;
    }
    body.ty-web .pageUserProfile .profile-user-name {
        font-size: 19px;
        font-weight: 700;
    }
    body.ty-web .pageUserProfile .profile-settings,
    body.ty-web .pageUserProfile .settings-app-version {
        grid-column: 2;
    }
    /* utente non loggato (niente card): colonna unica centrata */
    body.ty-web .pageUserProfile > div:not(:has(.profile-user-card)) {
        grid-template-columns: minmax(0, 1fr);
        max-width: 560px;
        margin: 0 auto;
    }
    body.ty-web .pageUserProfile .profile-settings > p.gray {
        text-transform: uppercase;
        font-size: 12px;
        letter-spacing: .08em;
        margin: 22px 4px 10px;
    }
    body.ty-web .pageUserProfile .container-box-flex {
        border-radius: 12px;
        border: 1px solid rgba(128, 128, 128, .14);
        transition: background .15s ease;
    }
    body.ty-web .pageUserProfile .container-box-flex:hover {
        background: rgba(128, 128, 128, .14);
        cursor: pointer;
    }

    /* anche le pagine web (giftcard, payments, auth) centrate;
       il checkout NO: lo sfondo del canale su .premiumContents è full width */
    .pageMob-giftcard,
    .pageMob-giftcard_redeem,
    .pageMob-thankyou,
    .pageMob-payments {
        max-width: 980px;
        margin: 0 auto;
    }
    .pageMob-login,
    .pageMob-register,
    .pageMob-recover,
    .pageMob-mytv {
        max-width: 520px;
        margin: 0 auto;
    }
}