/**
 * advantages.css
 * "Vantaggi - Quello che ti porti a casa dopo una giornata"
 * Sfondo fotografico scuro (stesso trattamento della hero), testo bianco,
 * grid di 4 vantaggi. Mobile-first: 1 colonna, poi 2, poi 4 da desktop.
 */

.advantages {
    position: relative;
    color: var(--color-text-on-dark);
    background-color: var(--color-dark);
    background-image:
        linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.4) 45%, rgba(0,0,0,0.65) 100%),
        var(--advantages-bg-image);
    background-size: cover;
    background-position: center;
    padding-block: 130px; /* sezione più alta, come richiesto */
}

.advantages__intro {
    text-align: center;
    max-width: 720px;
    margin-inline: auto;
}

.advantages__intro .eyebrow {
    color: rgba(255, 255, 255, 0.7);
}

.advantages__title {
    margin-top: var(--space-1);
    color: var(--color-white);
    text-transform: uppercase;
    font-size: clamp(1.6rem, 4.5vw, 2.4rem);
    line-height: 1.15;
}

.advantages__lead {
    margin-top: var(--space-3);
    color: var(--color-text-on-dark-muted);
    font-size: 1.05rem;
    line-height: 1.55;
}

/* --- Grid vantaggi --- */
.advantages__grid {
    margin-top: var(--space-6);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
    text-align: center;
}

.advantages__icon {
    width: 40px;
    height: 40px;
    margin-inline: auto;
    color: var(--color-white);
}

.advantages__icon svg {
    width: 100%;
    height: 100%;
}

.advantages__item-title {
    margin-top: var(--space-2);
    color: var(--color-white);
    text-transform: uppercase;
    font-size: 1.05rem;
    line-height: 1.25;
    font-weight: 700;
}

.advantages__item-desc {
    margin-top: var(--space-2);
    color: var(--color-text-on-dark-muted);
    font-size: 0.92rem;
    max-width: 32ch;
    margin-inline: auto;
}

/* --- CTA finale --- */
.advantages__cta {
    margin-top: var(--space-6);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.advantages__cta .link-arrow {
    color: var(--color-white);
}

@media (min-width: 640px) {
    .advantages__grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1100px) {
    .advantages__grid {
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: var(--space-4);
    }
}