/* ============================================================
   STORIA WIDGET (testo repeater + immagine sticky)
   - Desktop: 2 colonne flex, immagine sticky con align-self:start
     così resta dell'altezza naturale (non si stretcha) e la sticky
     scorre dentro il flex-row alto N*100vh.
   - Mobile: classe .hcs-storia--mobile aggiunta via JS sotto
     il breakpoint configurato → swiper attivo, immagine sopra.
   ============================================================ */

.hcs-storia {
    width: 100%;
}

.hcs-storia__inner {
    display: flex;
    align-items: flex-start;
}

.hcs-storia--image-left .hcs-storia__inner {
    flex-direction: row;
}

.hcs-storia--image-right .hcs-storia__inner {
    flex-direction: row-reverse;
}

.hcs-storia__image {
    flex: 0 0 40%;
    align-self: flex-start; /* fondamentale: niente stretch, altrimenti la sticky non ha "spazio" dove scorrere */
    min-width: 0;
    /* Altezza viewport piena: l'immagine NON deve dipendere dall'aspect
       ratio della sorgente (richiesta esplicita). Quando sticky è attivo,
       togliamo l'offset dal viewport con il custom property emesso inline
       dal widget, così l'immagine fitta esattamente l'area visibile sotto
       il top sticky. Default 0 se la variabile non è settata (sticky off). */
    height: calc(100vh - var(--hcs-sticky-top, 0px));
    /* relative per ancorare l'overlay .hcs-storia__nav al bottom */
    position: relative;
}

/* Il 'top' è emesso INLINE da StoriaWidget.php in render() (non via
   control 'selectors'), così la sticky funziona sempre — anche quando
   il CSS post-specifico di Elementor è obsoleto in cache o non ancora
   rigenerato. position:sticky senza top non si attiva, quindi inline
   è la garanzia. La mobile rule più sotto usa !important per battere
   l'inline e disattivare lo sticky nel layout swiper. */
.hcs-storia--sticky .hcs-storia__image {
    position: sticky;
}

.hcs-storia__image img {
    display: block;
    width: 100%;
    height: 100%;       /* riempie il container 100vh */
    object-fit: cover;  /* cover per non distorcere l'immagine */
    max-width: 100%;
}

/* Stack di immagini per-slide: ogni slide del repeater ha la sua immagine,
   tutte sovrapposte absolute, solo l'attiva con opacity:1. La classe
   .is-active viene swappata da storia.js (setupImageSwap) in base alla
   slide in centro al viewport. La prima slide è is-active dal server per
   evitare flicker prima che lo script monti. */
.hcs-storia__image-stack {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hcs-storia__image-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.6s ease;
    will-change: opacity;
}

.hcs-storia__image-slide.is-active {
    opacity: 1;
}

.hcs-storia__text-col {
    flex: 1 1 auto;
    min-width: 0;
}

/* Wrapper: su desktop è una semplice colonna verticale.
   !important per battere il default flex-direction:row di Swiper. */
.hcs-storia__items {
    overflow: visible;
    width: 100%;
}

.hcs-storia__wrapper {
    display: flex;
    flex-direction: column !important; /* batte il default flex-direction:row di Swiper */
    width: 100%;
    transform: none;
    /* NB: niente !important su transform/transition. Su mobile Swiper
       le setta via inline style; un !important esterno le bloccherebbe. */
}

.hcs-storia__item {
    width: 100% !important;
    height: auto !important;
    flex-shrink: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Wrapper interno: contiene h2 + testo alla loro altezza naturale.
   È QUESTO il target del fade-up (NON l'item esterno, che ha
   min-height:100vh e farebbe scattare il trigger troppo presto).
   Resta block e viene centrato dal flex dell'item parent. */

/* Stato iniziale per il fade-up: gemello della regola globale
   .e-con.fade-up > * { opacity: 0 } definita in src/css/style.css.
   Il resto dell'animazione è gestito da gsap.fromTo (vedi storia.js
   setupFade), allineato a quanto fa src/js/index.js per i container. */
.hcs-storia__item-inner.fade-up {
    opacity: 0;
}

.hcs-storia__title {
    margin: 0 0 1.6rem;
}

.hcs-storia__text {
    margin: 0;
}

.hcs-storia__text > *:first-child {
    margin-top: 0;
}

.hcs-storia__text > *:last-child {
    margin-bottom: 0;
}

/* Pagination: nascosta su desktop, mostrata solo in mobile */
.hcs-storia__pagination {
    display: none;
}

/* Progress bar: overlay orizzontale al bottom dell'immagine sticky.
   Visibile solo su desktop (nascosta in mobile dalla regola sotto).
   Il fill è guidato dal custom property --progress (0→1) settato da
   storia.js via ScrollTrigger, usando transform:scaleX per evitare
   layout reflow. */
.hcs-storia__progress {
    position: absolute;
    inset: auto 0 0 0;
    height: 6px;
    background: rgba(0, 0, 0, 0.15);
    overflow: hidden;
    z-index: 2;
    opacity: 1;
    transition: opacity 0.45s ease;
}

/* Fade out di progress + hint a fine scroll: la classe is-complete
   viene aggiunta sul ROOT da storia.js quando progress >= 0.97. */
.hcs-storia.is-complete .hcs-storia__progress {
    opacity: 0;
    pointer-events: none;
}

/* SCROLL HINT — pillola con testo + mouse outline con rotella animata.
   Stesso pattern del widget orizzontale. */
.hcs-storia__scroll-hint {
    position: absolute;
    bottom: 4rem;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.6rem;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    border-radius: 999px;
    font-size: 1.3rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 600;
    z-index: 3;
    pointer-events: none;
    transition: opacity 0.45s ease, transform 0.45s ease;
    will-change: opacity, transform;
}

.hcs-storia__scroll-hint-icon {
    width: 1.8rem;
    height: 3rem;
}

/* Pallino "rotella" che scende dall'alto e svanisce in basso,
   ciclo continuo a 1.6s. transform-box: fill-box per referire il
   translate al bounding del pallino, non al viewBox della SVG. */
.hcs-storia__scroll-hint-dot {
    transform-box: fill-box;
    transform-origin: center;
    animation: hcs-storia-wheel 1.6s ease-in-out infinite;
}

@keyframes hcs-storia-wheel {
    0%   { transform: translateY(0);    opacity: 0; }
    25%  { transform: translateY(2px);  opacity: 1; }
    75%  { transform: translateY(12px); opacity: 1; }
    100% { transform: translateY(14px); opacity: 0; }
}

.hcs-storia.is-complete .hcs-storia__scroll-hint {
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
}

.hcs-storia__progress-fill {
    width: 100%;
    height: 100%;
    background: var(--e-global-color-bc1c632, #000);
    transform-origin: left center;
    transform: scaleX(var(--progress, 0));
    transition: transform 0.08s linear;
    will-change: transform;
}

/* Nav prev/next: overlay al bottom del container immagine.
   Mostrata solo in mobile (lo swiper si attiva lì); su desktop sticky
   non c'è swiper quindi non serve. Posizionata absolute così appoggia
   sull'angolo basso dell'immagine senza rubarle spazio nel flusso. */
.hcs-storia__nav {
    display: none;
}

.hcs-storia--mobile .hcs-storia__nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.2rem;
    position: absolute;
    inset: auto 0 0 0;
    padding: 1.2rem;
    z-index: 2;
}

/* I bottoni sono semplici wrapper della SVG: la SVG include già
   il cerchio di background e la freccia, quindi niente bg/border
   sul <button> (oltretutto il reset globale li azzera). */
.hcs-storia__prev,
.hcs-storia__next {
    width: 8.5rem;
    height: 8.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.hcs-storia__prev svg,
.hcs-storia__next svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Prev: stessa SVG di next ma flippata orizzontalmente → freccia a sinistra */
.hcs-storia__prev svg {
    transform: scaleX(-1);
}

.hcs-storia__prev:hover,
.hcs-storia__next:hover {
    transform: scale(1.05);
}

/* Stato disabilitato: Swiper aggiunge .swiper-button-disabled sull'elemento
   anche quando passato come prevEl/nextEl custom. */
.hcs-storia__prev.swiper-button-disabled,
.hcs-storia__next.swiper-button-disabled {
    opacity: 0.3;
    pointer-events: none;
    cursor: not-allowed;
}

/* ============================================================
   MOBILE (classe attivata da storia.js sotto breakpoint)
   ============================================================ */

.hcs-storia--mobile .hcs-storia__inner {
    flex-direction: column !important;
    gap: 2.4rem;
    align-items: stretch;
}

.hcs-storia--mobile .hcs-storia__image {
    flex: 0 0 auto;
    width: 100%;
    /* su mobile annulliamo i 100vh del desktop; max-height arriva
       dal control 'mobile_image_max_height' del widget */
    height: auto !important;
    align-self: auto;
    /* relative (NON static) per restare positioning context dell'overlay
       .hcs-storia__nav che è absolute; sticky desktop comunque disattivato. */
    position: relative !important;
    top: auto !important;
}

/* In mobile l'immagine ha altezza FISSA (non aspect ratio naturale):
   tutte le slide devono apparire della stessa altezza. Il valore di
   default 320px è allineato al control 'mobile_image_max_height' del
   widget, che emette inline una regola più specifica per override
   dinamico dal pannello Elementor. */
.hcs-storia--mobile .hcs-storia__image img {
    height: 320px;
    width: 100%;
    object-fit: cover;
}

/* In mobile lo stack non può essere absolute (il parent non ha più 100vh
   sticky): rendiamo lo stack un blocco normale, mostriamo solo la slide
   attiva via display, le altre fuori dal flow. La sync con la slide
   swiper è gestita da storia.js (vedi setupImageSwap). */
.hcs-storia--mobile .hcs-storia__image-stack {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
}

.hcs-storia--mobile .hcs-storia__image-slide {
    position: relative;
    inset: auto;
    display: none;
    opacity: 1;
    transition: none;
}

.hcs-storia--mobile .hcs-storia__image-slide.is-active {
    display: block;
}

.hcs-storia--mobile .hcs-storia__text-col {
    width: 100%;
}

.hcs-storia--mobile .hcs-storia__items {
    overflow: hidden;
    width: 100%;
}

.hcs-storia--mobile .hcs-storia__wrapper {
    flex-direction: row !important;
    gap: 0 !important;
    /* NB: niente !important su transform/transition — sono gestite inline da Swiper */
    transform: none;
    transition: transform 0.3s ease;
}

.hcs-storia--mobile .hcs-storia__item {
    min-height: 0;
    justify-content: flex-start;
}

/* Su mobile lo swiper gestisce visibilità: neutralizza il fade-up.
   gsap.fromTo applica anche stili inline (opacity/transform) quando
   scatta il trigger: con !important li bypassiamo per garantire che
   gli slide del carousel siano sempre visibili. */
.hcs-storia--mobile .hcs-storia__item-inner.fade-up {
    opacity: 1 !important;
    transform: none !important;
}

.hcs-storia--mobile .hcs-storia__pagination {
    display: block;
    position: relative;
    margin-top: 1.6rem;
    text-align: center;
}

/* Progress bar + hint nascosti in mobile: lì lo swiper gestisce la
   navigazione discreta (slide), il concetto di "progress continuo"
   e l'invito a scrollare via rotella non si applicano. */
.hcs-storia--mobile .hcs-storia__progress,
.hcs-storia--mobile .hcs-storia__scroll-hint {
    display: none;
}