/* Fascia iniziale (titolo, sottotitolo, testo): stile condiviso in custom.css (PAGE HERO) */

/* descrizione un po' più piccola che nelle altre pagine (16px): qui il testo è più lungo.
   Su telefono resta quella di custom.css (14px) */
@media (min-width: 768px) {
    .page-hero-lead {
        font-size: 15px;
    }
}

/* descrizione più stretta e righe bilanciate: tre righe di lunghezza simile invece di
   due piene e una corta (su telefono va a capo secondo lo schermo) */
.page-hero-lead {
    max-width: 600px;
    text-wrap: balance;
}


/* =========================================
   STAGE: immagine statica, card che scorrono sopra
   Stesso meccanismo di page-convenzioni.css: l'immagine è "fixed" e ritagliata
   ai bordi dello stage con clip-path, la fascia finale la copre.
   ========================================= */

.page-stage {
    --header-h: 70px;
    position: relative;
    clip-path: inset(0);
}

/* la foto deborda di 2px sopra (sotto l'header) e arriva all'altezza massima dello schermo (lvh) sotto:
   con densità di pixel non intere (es. 2,625 sui telefoni) o quando la barra degli indirizzi si nasconde
   restava ogni tanto una riga di 1px scoperta durante lo scorrimento. Il clip-path dello stage taglia l'eccesso */
.page-stage-bg {
    position: fixed;
    top: calc(var(--header-h) - 2px);
    left: 0;
    right: 0;
    height: calc(100vh - var(--header-h) + 4px);
    height: calc(100lvh - var(--header-h) + 4px);
    z-index: 0;
    background-color: #0A744F;          /* fallback se manca l'immagine */
    background-image: var(--hero-image);
    background-size: cover;
    background-position: center;
    pointer-events: none;
}


/* =========================================
   CARD DEI SERVIZI
   Stesso aspetto delle card di Convenzioni (angoli 12px, ombra marcata sopra la foto,
   titolo scuro con separatore grigio), ma con il logo in alto al posto della foto.
   ========================================= */

.servizi-cards {
    position: relative;
    z-index: 2;
    padding: clamp(60px, 14vh, 170px) 0;
}

.servizi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
}

.servizio-card-wrap {
    display: flex;
}

.servizio-card {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    padding: 28px 22px 26px;
    border-radius: 12px;
    background: #fff;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), 0 12px 28px rgba(0, 0, 0, 0.14);
    transition: transform .25s ease, box-shadow .25s ease;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    will-change: transform;
}

/* hover letto sul contenitore fermo: la card non tremola sul bordo (come in Convenzioni) */
.servizio-card-wrap:hover > .servizio-card {
    transform: translate3d(0, -6px, 0);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.1), 0 24px 48px rgba(0, 0, 0, 0.22);
}

/* area del logo: altezza fissa, così i titoli restano allineati tra le card */
.servizio-card-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 96px;
    margin-bottom: 18px;
}

.servizio-card-logo img {
    display: block;
    max-width: 80%;
    max-height: 100%;
    object-fit: contain;
}

/* segnaposto finché non c'è il logo: sigla in un cerchio verde chiaro */
.servizio-card-sigla {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: rgba(10, 116, 79, 0.1);
    color: var(--cisl-green);
    font-weight: 800;
    font-size: 15px;
    letter-spacing: .04em;
}

.servizio-card h3 {
    margin: 0 0 14px;
    color: #1d2026;
    font-size: 21px;
    line-height: 1.25;
    transition: color .2s ease;
}

.servizio-card h3::after {
    content: "";
    display: block;
    width: 48px;
    height: 2px;
    margin: 12px auto 0;
    border-radius: 2px;
    background: #cdd2d8;
}

.servizio-card:hover h3 {
    color: var(--cisl-green-dark);
}

/* il titolo è il link della card: senza queste regole prende il colore dei link del tema
   (rosso all'hover). Eredita il colore del titolo, che all'hover della card diventa verde */
.servizio-card-link,
.servizio-card-link:hover,
.servizio-card-link:focus {
    color: inherit;
    text-decoration: none;
}

/* focus da tastiera visibile su tutta la card (il link la copre con stretched-link) */
.servizio-card-link:focus-visible {
    outline: none;
}
.servizio-card:has(.servizio-card-link:focus-visible) {
    outline: 2px solid var(--cisl-green);
    outline-offset: 3px;
}

.servizio-card p {
    margin: 0;
    color: #5a616b;
    font-size: 15px;
    line-height: 1.6;
    text-wrap: pretty;
}


/* =========================================
   FASCIA FINALE (copre l'immagine in fondo)
   Testo e bottone dalle classi della home (home-chi-*, btn-home)
   ========================================= */

.servizi-cta-section {
    position: relative;
    z-index: 2;
    padding: 70px 0;
    border-radius: 28px 28px 0 0;
    background: #fff;
    box-shadow: 0 -12px 40px rgba(15, 50, 35, 0.18);
}

.servizi-cta {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.servizi-cta-section .servizi-cta .home-chi-title {
    margin-left: auto;
    margin-right: auto;
    max-width: none;
}

.servizi-cta .home-chi-text {
    margin: 0 auto 28px;
}


/* =========================================
   RESPONSIVE
   ========================================= */

@media (max-width: 1199.98px) {
    .servizi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 991.98px) {
    .page-stage { --header-h: 64px; }
    .servizi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
    .servizi-cta-section { padding: 56px 0; }
}

@media (max-width: 767.98px) {
    .page-stage-bg { background-position: 70% center; }

    /* schermi piccoli: titolo e descrizione delle card un po' più piccoli */
    .servizio-card h3 { font-size: 19px; }
    .servizio-card p { font-size: 14px; }
}

@media (max-width: 575.98px) {
    .servizi-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .servizio-card { padding: 24px 20px 22px; }
    .servizio-card h3 { font-size: 18px; }
}


/* =========================================
   ANIMAZIONI DI INGRESSO (AOS): stessa curva di Convenzioni
   ========================================= */

.servizi-cards [data-aos][data-aos],
.servizi-cta-section [data-aos][data-aos] {
    transition-duration: 1.6s;
    transition-timing-function: cubic-bezier(.22, .61, .36, 1);
    will-change: transform, opacity;
}

.servizi-cards [data-aos="fade-up"],
.servizi-cta-section [data-aos="fade-up"] { transform: translate3d(0, 40px, 0); }


@media (prefers-reduced-motion: reduce) {
    .servizio-card,
    .servizio-card h3 {
        transition: none;
    }

    .servizi-cards [data-aos][data-aos],
    .servizi-cta-section [data-aos][data-aos] {
        transform: none;
        transition-duration: .3s;
    }

    .servizio-card-wrap:hover > .servizio-card {
        transform: none;
    }
}