/*
 * Override locali del Top Slider ADV di categoria.
 *
 * NB: questo file NON fa parte del pacchetto frontend `source.partnerscout`
 * (da cui viene rigenerato dist/css/main.css): sta solo nel tema e viene
 * accodato DOPO main.css in app/theme-enqueue.php. Il task Grunt `copy:assets`
 * non lo rimuove, quindi sopravvive al build.
 *
 * Principio: non altera il layout desktop esistente; interviene solo dove
 * servono le nuove funzionalita' (immagine mobile, slide cliccabile,
 * posizione testo desktop/mobile) e per correggere la resa su mobile.
 */

/* ── Slide interamente cliccabile ─────────────────────────────────────────
   Anchor "stretched" che copre tutta la slide. Il contenuto lascia passare
   i click verso il link, mentre CTA e altri link restano cliccabili. */
.c-product-hero__slide--linked {
    cursor: pointer;
}

.c-product-hero__stretched {
    position: absolute;
    inset: 0;
    z-index: 1;
    font-size: 0;
    text-indent: -9999px;
}

.c-product-hero__slide--linked .c-product-hero__content {
    pointer-events: none;
}

.c-product-hero__slide--linked .c-product-hero__content a,
.c-product-hero__slide--linked .c-product-hero__content button {
    pointer-events: auto;
}

/* ── Posizione testo — DESKTOP (>= 768px) ─────────────────────────────────
   Scoped al desktop: su mobile la posizione e' gestita separatamente sotto.
   Default (nessuna classe) = layout attuale (centro-sinistra). */
@media (min-width: 768px) {
    .c-product-hero__slide--pos-top-left .c-product-hero__content {
        top: 14%;
        bottom: auto;
        transform: none;
    }

    .c-product-hero__slide--pos-center-left .c-product-hero__content {
        top: 50%;
        bottom: auto;
        transform: translateY(-50%);
    }

    .c-product-hero__slide--pos-bottom-left .c-product-hero__content {
        top: auto;
        bottom: 12%;
        transform: none;
    }

    .c-product-hero__slide--pos-center-center .c-product-hero__content {
        top: 50%;
        bottom: auto;
        transform: translateY(-50%);
        text-align: center;
    }

    .c-product-hero__slide--pos-center-center .c-product-hero__subtitle {
        margin-left: auto;
        margin-right: auto;
    }
}

/* ── MOBILE (<= 767px) ────────────────────────────────────────────────────
   Immagine dedicata + posizione testo indipendente dal desktop.
   I valori tengono conto dell'header sticky (in alto) e dei cursori dello
   slider (in basso) per non finirci sotto. */
@media (max-width: 767px) {

    /* Immagine dedicata mobile: se presente (--slide-bg-mobile) sostituisce la
       desktop; altrimenti resta quella desktop. */
    .c-product-hero__slide[style*="--slide-bg-mobile"] {
        background-image: var(--slide-bg-mobile) !important;
        background-position: center center;
    }

    /* Alto-sinistra: spinto sotto l'header per non finirci nascosto. */
    .c-product-hero__slide--posm-top-left .c-product-hero__content {
        top: 210px;
        bottom: auto;
        transform: none;
    }

    .c-product-hero__slide--posm-center-left .c-product-hero__content {
        top: 50%;
        bottom: auto;
        transform: translateY(-50%);
    }

    /* Basso-sinistra: sollevato sopra i cursori dello slider (~80px dal fondo)
       cosi' la CTA non ci finisce sotto. */
    .c-product-hero__slide--posm-bottom-left .c-product-hero__content {
        top: auto;
        bottom: 120px;
        transform: none;
    }

    .c-product-hero__slide--posm-center-center .c-product-hero__content {
        top: 50%;
        bottom: auto;
        transform: translateY(-50%);
        text-align: center;
    }

    .c-product-hero__slide--posm-center-center .c-product-hero__subtitle {
        margin-left: auto;
        margin-right: auto;
    }
}