/* ----------------------------------------- */
/* WIDEPORCH — vasi su misura */
/* quattro fasi a zig-zag, limiti in elenco, conti in due colonne */
/* ----------------------------------------- */

.sm-testa { padding: 112px 0 26px; text-align: center }
.sm-testa .sottotitolo { color: var(--oro); margin-bottom: 10px }
.sm-testa h1 { font-size: 2.9rem; line-height: 1.14; margin: 0 auto; max-width: 20ch }
.sm-testa .guida { margin: 16px auto 0; max-width: 62ch; font-size: 1.5rem; line-height: 1.8; opacity: .84 }

.sm-fasi { padding: 20px 0 10px }
.fase { display: grid; gap: 0; margin-bottom: 26px }
.fase-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover }
.fase-testo { padding: 22px var(--container-margin) 0 }
.fase-testo .passo {
    color: var(--arancio);
    font-size: 1.2rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.fase-testo h2 { font-size: 2.4rem; margin-bottom: 10px }
.fase-testo p { font-size: 1.55rem; line-height: 1.85; opacity: .86; max-width: 54ch }

.sm-limiti { background: var(--fondo-alt); margin-top: 26px; padding: 40px 0 44px }
.limiti-lista { display: grid; gap: 2px; margin-top: 22px; background: #12253d }
.limiti-lista li {
    background: var(--fondo-alt);
    display: grid;
    gap: 2px 24px;
    padding: 16px 0;
}
.limiti-lista .voce { font-size: 1.6rem; font-weight: 600 }
.limiti-lista .valore { color: var(--oro); font-size: 1.5rem; letter-spacing: .04em }
.limiti-lista .spiega { font-size: 1.4rem; line-height: 1.7; opacity: .74 }
.limiti-coda { margin-top: 22px; font-size: 1.45rem; line-height: 1.8; opacity: .8; max-width: 78ch }

.sm-conti { display: grid; gap: 26px; padding: 44px 0 10px }
.conti-colonna h2 { margin-bottom: 14px }
.conti-colonna p { font-size: 1.55rem; line-height: 1.85; margin-bottom: 14px; opacity: .86 }
.conti-riquadro { border: 1px solid var(--bordo-grigio); padding: 24px 22px 26px }
.conti-riquadro h3 { font-size: 2.0rem; margin-bottom: 12px; color: var(--oro) }
.conti-riquadro p { font-size: 1.45rem; line-height: 1.8; margin-bottom: 12px; opacity: .88 }
.conti-riquadro a { text-decoration: underline }
.conti-riquadro a:hover { color: var(--arancio) }
.riquadro-piccolo { font-size: 1.35rem !important; opacity: .68 !important; margin-bottom: 0 !important }

@media only screen and (min-width: 768px) {
    .sm-testa { padding: 156px 0 34px }
    .sm-testa h1 { font-size: 4.2rem }
    .sm-fasi { padding: 36px 0 10px }
    .fase { grid-template-columns: 1fr 1fr; align-items: center; margin-bottom: 8px }
    .fase.girata .fase-foto { order: 2 }
    .fase-foto img { aspect-ratio: 4 / 3; height: 100% }
    .fase-testo { padding: 0 8% }
    .fase-testo h2 { font-size: 3.0rem }
    .sm-limiti { margin-top: 48px; padding: 64px 0 68px }
    .limiti-lista li { grid-template-columns: 240px 160px 1fr; align-items: baseline; padding: 18px 0 }
    .sm-conti { grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: start; padding: 64px 0 10px }
}