/* ============================================================
   ESS – Elementor Fullscreen Section Slider  v1.0.0
   Ispirato a Criterion Collection
   ============================================================ */

/* ── Blocco scroll pagina mentre lo slider è attivo ────── */
html.ess-locked {
    overflow: hidden !important;
}

/* ── Contenitore principale ─────────────────────────────── */
.ess-slider {
    position: relative;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    height: 100vh;
    height: 100dvh; /* usa viewport dinamico su mobile (barra URL) */
    overflow: hidden;
    background: #000;
    -webkit-user-select: none;
    user-select: none;
    touch-action: none;
}

/* Rimuove padding dall'eventuale colonna Elementor parent */
.elementor-widget-ess_fullscreen_slider {
    width: 100vw !important;
    max-width: 100vw !important;
}

.elementor-widget-ess_fullscreen_slider > .elementor-widget-container {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 0 !important;
}

/* ── Wrapper slides ─────────────────────────────────────── */
.ess-slides-wrap {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: 100%;
    overflow-x: clip; /* clip non crea scroll context (non rompe scroll-snap) */
}

/* ── Singola slide ──────────────────────────────────────── */
.ess-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /* Default: tutte le slide sotto la prima */
    transform: translateY(100%);
}

.ess-slide.is-active {
    transform: translateY(0);
}

.ess-slide.is-above {
    transform: translateY(-100%);
}

/* ── Contenuto centrato verticalmente ───────────────────── */
.ess-slide__content {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 40px;
    box-sizing: border-box;
}

/* I template Elementor devono poter arrivare a filo slide senza il gutter base di 40px. */
.ess-slide__content:has(> .elementor) {
    padding: 0;
}
/* Quando contiene un layout split: testo centrato verticalmente, allineato a sinistra */
.ess-slide__content:has(.ess-slide__post--split) {
    align-items: center;
    justify-content: flex-start;
}

.ess-slide__inner {
    max-width: 820px;
    width: 100%;
}

/* ── Preset Post del blog ───────────────────────────────── */
.ess-post__cat {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
    margin: 0 0 14px;
}
.ess-post__date {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.55);
    margin: 12px 0 0;
}
.ess-post__excerpt {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

/* ── Layout split: testo sinistra (centrato vert.) + bottone assoluto ── */
.ess-slide__post--split {
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}
.ess-slide__post--split .ess-post__text-block {
    text-align: center;
    box-sizing: border-box;
    width: 100%;
}
.ess-slide__post--split .ess-post__text-block .ess-post__excerpt {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
}

/* Bottone posizionato in modo assoluto in basso al centro della slide */
.ess-post__btn-absolute {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 3;
    pointer-events: auto;
}

/* ── Bottone invertito ──────────────────────────────────── */
.ess-slide__btn--inverted {
    background-color: #ffffff !important;
    color: #111111 !important;
    border-color: #ffffff !important;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.ess-slide__btn--inverted:hover {
    background-color: transparent !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
}

/* ── Template Elementor: occupa tutta la slide ──────────── */
.ess-slide__content > .elementor {
    width: 100%;
    min-height: 100%;
}

/* ── Titolo (modalità custom) ───────────────────────────── */
.ess-slide__title {
    font-size: clamp(2rem, 5vw, 4.2rem);
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #fff;
    margin: 0 0 20px;
    padding: 0;
}

/* ── Sottotitolo ────────────────────────────────────────── */
.ess-slide__subtitle {
    font-size: clamp(0.9rem, 1.6vw, 1.15rem);
    color: rgba(255,255,255,0.8);
    line-height: 1.65;
    margin: 0 0 36px;
    padding: 0;
}

/* ── Pulsante – stile Criterion ─────────────────────────── */
.ess-slide__btn {
    display: inline-block;
    padding: 11px 28px;
    border: 1px solid #fff;
    color: #fff;
    background: transparent;
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: lowercase;
    transition: background-color 0.22s ease, color 0.22s ease, border-color 0.22s ease;
    cursor: pointer;
}
.ess-slide__btn:hover,
.ess-slide__btn:focus {
    background-color: #fff;
    color: #000;
}

/* ── Placeholder template (editor) ─────────────────────── */
.ess-tpl-placeholder {
    color: rgba(255,255,255,0.5);
    font-size: 13px;
    text-align: center;
}

/* ============================================================
   PUNTI NAVIGAZIONE
   ============================================================ */
.ess-pagination {
    position: absolute;
    display: flex;
    gap: 10px;
    z-index: 10;
    pointer-events: auto;
}

/* ── Orientamento ── */
.ess-pagination--column { flex-direction: column; }
.ess-pagination--row    { flex-direction: row;    }

/* ── Posizioni ── */
.ess-pagination--bottom-left {
    bottom: 36px;
    left: 32px;
}
.ess-pagination--bottom-center {
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
}
.ess-pagination--bottom-right {
    bottom: 36px;
    right: 32px;
}
.ess-pagination--left-center {
    left: 32px;
    top: 50%;
    transform: translateY(-50%);
}
.ess-pagination--right-center {
    right: 32px;
    top: 50%;
    transform: translateY(-50%);
}

/* Le classi legacy (left/center/right) → stesso comportamento di bottom-* */
.ess-pagination--left   { bottom: 36px; left: 32px; }
.ess-pagination--center { bottom: 28px; left: 50%; transform: translateX(-50%); }
.ess-pagination--right  { bottom: 36px; right: 32px; }

.ess-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.35);
    border: none;
    padding: 0;
    cursor: pointer;
    outline: none;
    transition: background-color 0.3s ease, transform 0.3s ease;
    flex-shrink: 0;
}
.ess-dot.is-active {
    background: #fff;
    transform: scale(1.3);
}
.ess-dot:hover {
    background: rgba(255,255,255,0.7);
}

/* ── Dot attivo con carattere (morfosi in lettera) ───────── */

/* Tutti i dot: predisponi pseudo-element */
.ess-pagination--char-active .ess-dot {
    position: relative;
    overflow: visible;
    /* Transizione smooth del cerchio che sfuma */
    transition: background-color 0.4s ease, transform 0.4s ease;
}

/* Carattere nascosto su tutti i dot (pronto ad apparire) */
.ess-pagination--char-active .ess-dot::before {
    content: var(--ess-dot-char, 'C');
    position: absolute;
    top: 50%;
    left: 50%;
    /* Partenza: leggermente più piccolo e trasparente */
    transform: translate(-50%, -50%) scale(0.7);
    opacity: 0;
    /* 2.5× la dimensione del dot per renderla visibile e proporzionata */
    font-size: var(--ess-dot-char-size, 20px) !important;
    line-height: 1;
    white-space: nowrap;
    color: var(--ess-dot-char-color, #fff);
    font-family: var(--ess-dot-char-font, inherit);
    pointer-events: none;
    /* Soft ease-out: niente overshoot */
    transition: opacity 0.35s ease-out,
                transform 0.35s ease-out;
}

/* Dot ATTIVO: il cerchio sfuma senza scalare (evita compensazioni) */
.ess-pagination--char-active .ess-dot.is-active {
    background: transparent !important;
}

/* Carattere ATTIVO: appare con fade + leggero scale-up */
.ess-pagination--char-active .ess-dot.is-active::before {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* ============================================================
   FRECCE NAVIGAZIONE
   ============================================================ */
.ess-arrows {
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 10;
}
.ess-arrow {
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255,255,255,0.4);
    background: transparent;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.22s ease, border-color 0.22s ease;
    padding: 10px;
    box-sizing: border-box;
}
.ess-arrow:hover {
    background: rgba(255,255,255,0.15);
    border-color: #fff;
}
.ess-arrow svg {
    width: 20px;
    height: 20px;
    display: block;
}

/* ============================================================
   SCROLL HINT – chevron animato (come Criterion)
   ============================================================ */
.ess-scroll-hint {
    position: absolute;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    opacity: 1;
    color: var(--ess-hint-color, #ffffff); /* eredita il colore a tutti i figli */
    animation: ess-bounce 2.2s ease-in-out infinite;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: opacity 0.4s;
}
/* Nascosto solo quando il footer ha coperto lo slider */
.ess-slider.ess-hint-hidden .ess-scroll-hint {
    opacity: 0;
    pointer-events: none;
}

.ess-scroll-hint svg {
    display: block;
    width: var(--ess-hint-size, 24px);
    height: var(--ess-hint-size, 24px);
    /* Nessun fill/stroke globale: ogni SVG usa i propri attributi inline
       per non sovrascrivere le icone Font Awesome renderizzate come SVG */
}
/* Font Awesome e icone libreria Elementor */
.ess-scroll-hint i,
.ess-scroll-hint .eicon {
    display: block;
    font-size: var(--ess-hint-size, 24px);
    color: var(--ess-hint-color, #ffffff);
    line-height: 1;
}
/* SVG uploadati (icone custom SVG Elementor) */
.ess-scroll-hint img {
    display: block;
    width: var(--ess-hint-size, 24px);
    height: var(--ess-hint-size, 24px);
    filter: brightness(0) invert(1);
}
/* Senza animazione rimbalzo */
.ess-hint-static.ess-scroll-hint {
    animation: none;
}

@keyframes ess-bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%       { transform: translateX(-50%) translateY(7px); }
}

/* ============================================================
   ANTEPRIMA EDITOR ELEMENTOR
   Mostra tutte le slide visibili e impilate (non animate)
   ============================================================ */
.elementor-editor-active .ess-slider {
    height: auto;
    overflow: visible;
    overflow-x: clip;
}
.elementor-editor-active .ess-slides-wrap {
    height: auto;
}
.elementor-editor-active .ess-slide {
    position: relative;
    transform: none !important;
    transition: none !important;
    height: 100vh;
    height: 100dvh;
    margin-bottom: 3px;
    display: block;
}
.elementor-editor-active .ess-slide.is-above,
.elementor-editor-active .ess-slide:not(.is-active) {
    /* visibili in editor */
    opacity: 1;
}

/* ============================================================
   MODALITÀ SCROLL SNAP
   ============================================================ */

/* Classe aggiunta da JS sull'<html> in snap mode */
html.ess-snap-active {
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth; /* anima lo snap su Windows/desktop (iOS lo ignora, usa il suo momentum) */
}

/* Container slider: diventa trasparente al flusso */
.ess-slider[data-mode="snap"] {
    height: auto;
    overflow: visible;
    overflow-x: clip;
    background: transparent;
    touch-action: auto; /* scroll nativo */
}

.ess-slider[data-mode="snap"] .ess-slides-wrap {
    height: auto;
    position: relative;
}

/* Ogni slide: sezione nel flusso verticale */
.ess-slider[data-mode="snap"] .ess-slide {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    transform: none !important;
    transition: none !important;
    scroll-snap-align: start;
    will-change: auto;
}

/* Dots: fixed sul viewport fin dall'inizio */
.ess-slider[data-mode="snap"] .ess-pagination {
    position: fixed;
    z-index: 100;
}

/* Scroll hint e frecce non servono in snap mode */
.ess-slider[data-mode="snap"] .ess-arrows {
    display: none !important;
}

/* In snap mode il hint è fixed (il container è in flow normale) */
.ess-slider[data-mode="snap"] .ess-scroll-hint {
    position: fixed;
    bottom: 22px;
    left: 50%;
}

/* ============================================================
   RESPONSIVE – Mobile
   ============================================================ */
@media (max-width: 768px) {

    /* ── Contenuto slide: padding ridotto ── */
    .ess-slide__content {
        padding: 60px 24px 24px;
    }

    /* ── Titolo: dimensione scalata ── */
    .ess-slide__title {
        font-size: clamp(1.6rem, 8vw, 2.8rem);
        margin-bottom: 14px;
        letter-spacing: -0.01em;
    }

    /* ── Sottotitolo ── */
    .ess-slide__subtitle {
        font-size: clamp(0.85rem, 3.5vw, 1rem);
        margin-bottom: 24px;
        line-height: 1.55;
    }

    /* ── Pulsante: full-width su mobile ── */
    .ess-slide__btn {
        display: block;
        width: 100%;
        max-width: 280px;
        margin: 0 auto;
        text-align: center;
        padding: 13px 20px;
    }

    /* ── Frecce: nascoste su mobile ── */
    .ess-arrows { display: none !important; }

    /* ── Dots: margini ridotti ── */
    .ess-pagination--bottom-left,
    .ess-pagination--left   { bottom: 20px; left: 20px; }
    .ess-pagination--bottom-right,
    .ess-pagination--right  { bottom: 20px; right: 20px; }
    .ess-pagination--bottom-center,
    .ess-pagination--center { bottom: 20px; }
    .ess-pagination--left-center  { left: 14px; }
    .ess-pagination--right-center { right: 14px; }

    /* ── Post: categoria, data ── */
    .ess-post__cat  { font-size: 0.65rem; margin-bottom: 10px; }
    .ess-post__date { font-size: 0.75rem; }
    .ess-post__excerpt { max-width: 100%; }

    /* ── Layout split su mobile: occupa tutta la larghezza con padding ridotto ── */
    .ess-slide__post--split {
        max-width: 100% !important;
        padding-left: 24px !important;
    }
    .ess-slide__post--split .ess-post__text-block {
        max-width: 100%;
    }

    /* ── Bottone assoluto su mobile: margini laterali ── */
    .ess-post__btn-absolute {
        left: 24px;
        right: 24px;
        text-align: center;
    }
    /* Il bottone nel layout absolute non deve diventare full-width */
    .ess-post__btn-absolute .ess-slide__btn {
        display: inline-block;
        width: auto;
        max-width: 280px;
    }

    /* ── Scroll hint: leggermente più piccolo ── */
    .ess-scroll-hint {
        --ess-hint-size: 22px;
        bottom: 16px;
    }
}

@media (max-width: 480px) {

    .ess-slide__content {
        padding: 60px 18px 18px;
    }

    .ess-slide__title {
        font-size: clamp(1.4rem, 9vw, 2.2rem);
    }

    .ess-slide__btn {
        max-width: 100%;
        font-size: 0.75rem;
        padding: 12px 16px;
    }
    .ess-post__btn-absolute .ess-slide__btn {
        max-width: 260px;
    }

    .ess-pagination--left-center  { left: 10px; }
    .ess-pagination--right-center { right: 10px; }
    .ess-dot {
        width: 6px;
        height: 6px;
    }

    .ess-slide__post--split {
        padding-left: 18px !important;
    }

    .ess-post__btn-absolute {
        left: 18px;
        right: 18px;
    }
}