/* Widget del servizio — solo impaginazione.
   Colori, tipografia e spaziature arrivano dai controlli Elementor,
   così restano modificabili e agganciati ai global del kit. */

/* ── icona del servizio ───────────────────────────────────── */
.ehs-icona-servizio {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    line-height: 1;
}
.ehs-icona-servizio--cerchio { border-radius: 50%; }
.ehs-icona-servizio--ombra   { box-shadow: 0 4px 24px rgba(1, 93, 150, .1); }
.ehs-icona-servizio img      { display: block; }

/* Usata in grande come elemento decorativo, l'icona va contenuta: il glifo di
   Font Awesome è largo 1,25em, mentre Elementor mette min-width:0 su ogni
   widget dentro a un contenitore flex. Il widget si stringe, il disegno no, e
   il risultato esce dal margine della pagina. Qui il widget prende la
   larghezza vera del glifo e a cedere spazio è il testo accanto. */
.elementor-widget-ehs-icona {
    flex-shrink: 0;
    min-width: fit-content;
}

/* ── vantaggi ─────────────────────────────────────────────── */
.ehs-vantaggi {
    display: grid;
    /* --ehs-colonne arriva dal controllo Elementor; quando è su "si
       distribuiscono da sole" rimanda a --ehs-colonne-auto, che il widget
       calcola sul numero di schede e scrive sull'elemento. */
    grid-template-columns: repeat(var(--ehs-colonne, var(--ehs-colonne-auto, 3)), minmax(0, 1fr));
}
.ehs-vantaggio {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
    background-color: #fff;
}
.ehs-vantaggio__icona { line-height: 1; }
.ehs-vantaggio__titolo,
.ehs-vantaggio__testo { margin: 0; }

/* ── come funziona ────────────────────────────────────────── */
.ehs-passi {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: none;
}
.ehs-passo {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    min-width: 0;
}
.ehs-passo__numero {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid currentColor;
    border-radius: 50%;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    z-index: 1;
}
.ehs-passo__corpo { min-width: 0; padding-top: 4px; }
.ehs-passo__titolo,
.ehs-passo__testo { margin: 0; }
.ehs-passo__titolo + .ehs-passo__testo { margin-top: 6px; }

/* linea che collega i passaggi, quando sono incolonnati */
.ehs-passi:not(.ehs-passi--riga) .ehs-passo:not(:last-child)::after {
    content: "";
    position: absolute;
    left: calc(var(--numero, 52px) / 2);
    top: 52px;
    bottom: calc(-1 * var(--gap, 28px));
    width: 2px;
    opacity: .28;
}
.ehs-passi--riga {
    flex-direction: row;
    flex-wrap: wrap;
}
.ehs-passi--riga .ehs-passo {
    flex-direction: column;
    flex: 1 1 200px;
}

/* ── numeri ───────────────────────────────────────────────── */
.ehs-numeri {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}
.ehs-numero {
    flex: 1 1 160px;
    min-width: 0;
    padding-right: 24px;
}
.ehs-numero__valore,
.ehs-numero__etichetta { margin: 0; }
.ehs-numero__valore    { font-variant-numeric: tabular-nums; line-height: 1.05; }
.ehs-numero__etichetta { margin-top: 6px; }

/* ── domande frequenti ────────────────────────────────────── */
.ehs-faq {
    display: flex;
    flex-direction: column;
}
.ehs-faq__voce { overflow: hidden; }
.ehs-faq__domanda {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
    list-style: none;
    margin: 0;
}
.ehs-faq__domanda::-webkit-details-marker { display: none; }
.ehs-faq__domanda::after {
    content: "+";
    flex: 0 0 auto;
    font-size: 1.5em;
    line-height: 1;
    font-weight: 400;
    transition: transform .18s ease;
}
.ehs-faq__voce[open] .ehs-faq__domanda::after { transform: rotate(45deg); }
.ehs-faq__risposta { padding-top: 0 !important; }
.ehs-faq__domanda:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
    .ehs-faq__domanda::after { transition: none; }
}

/* ── mobile ───────────────────────────────────────────────── */
@media (max-width: 767px) {
    .ehs-numero {
        flex: 1 1 100%;
        padding-right: 0;
        border-right: 0 !important;
    }
    .ehs-passi:not(.ehs-passi--riga) .ehs-passo:not(:last-child)::after { display: none; }
}

/* ── colonna immagine assente ──────────────────────────────
   Quando un servizio non ha una foto, il widget immagine non stampa nulla
   ma la colonna resterebbe larga 470px, lasciando un vuoto a destra del
   testo. La si nasconde, e il testo si allarga fino a una misura leggibile. */
/* ── colonna rimasta vuota ────────────────────────────────
   Quando un campo immagine non è compilato Elementor non emette affatto il
   widget: resta un contenitore vuoto che però occupa la sua larghezza e apre
   un buco nella pagina. Si riconosce dal fatto che non contiene nulla. */
.e-con-inner > .e-con:not(:has(*)) { display: none; }

/* rimasto solo, il testo si allarga a una misura leggibile */
.e-con-inner:has(> .e-con:not(:has(*))) > .e-con:has(*) {
    width: min(100%, 860px) !important;
}

/* ── griglia delle card servizio ──────────────────────────
   La Loop Grid distribuisce le celle in righe di uguale altezza, ma la card
   dentro alla cella si ferma all'altezza del proprio contenuto: nella stessa
   riga i bordi finiscono a quote diverse. La card riempie la cella, e il link
   "Scopri di più" viene spinto a filo in basso, così le call to action stanno
   tutte sulla stessa linea. */
.elementor-loop-container > .e-loop-item > .e-con { height: 100%; }
.elementor-loop-container > .e-loop-item > .e-con > .elementor-widget:last-child {
    margin-top: auto;
}

/* Tutta la scheda è cliccabile. Il link resta uno solo — quello di "Scopri di
   più", che il cliente continua a vedere e a modificare dall'editor — e viene
   allargato fino a coprire la scheda. È preferibile a rendere link il
   contenitore: due link annidati sarebbero HTML non valido e il browser
   chiuderebbe il primo dove capita. */
.elementor-loop-container > .e-loop-item > .e-con {
    position: relative;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
/* Elementor posiziona i propri widget: senza questo l'area cliccabile si
   ancorerebbe al riquadro del link invece che alla scheda. */
.elementor-loop-container > .e-loop-item > .e-con > .elementor-widget,
.elementor-loop-container > .e-loop-item > .e-con > .elementor-widget > .elementor-widget-container,
.elementor-loop-container > .e-loop-item > .e-con > .e-con,
.elementor-loop-container > .e-loop-item > .e-con > .e-con > .elementor-widget {
    position: static;
}
.elementor-loop-container > .e-loop-item > .e-con .elementor-button::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}
.elementor-loop-container > .e-loop-item > .e-con:hover {
    box-shadow: 0 10px 30px rgba(1, 93, 150, .12);
    transform: translateY(-2px);
}
/* la scheda intera reagisce al fuoco da tastiera, non solo il link dentro */
.elementor-loop-container > .e-loop-item > .e-con:has(.elementor-button:focus-visible) {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .elementor-loop-container > .e-loop-item > .e-con { transition: none; }
    .elementor-loop-container > .e-loop-item > .e-con:hover { transform: none; }
}