/* zone_servite.css - 📍 "Zone in cui lavoriamo" (zone_servite.php). STM Comunica, novembre 2026 */

.zone-servite { max-width: 1200px; margin: 0 auto 90px; padding: 0 40px; box-sizing: border-box; scroll-margin-top: 100px; }
.zone-servite h2 { font-size: 28px; font-weight: 800; color: #ffffff; margin: 0 0 12px; }
.zs-intro { color: #94a3b8; font-size: 16px; line-height: 1.6; margin: 0 0 25px; max-width: 760px; }
.zs-griglia { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.zs-griglia li { margin: 0; padding: 0; }
.zs-card {
    display: flex; flex-direction: column; gap: 6px; height: 100%; box-sizing: border-box;
    padding: 20px 20px 18px; text-decoration: none; background: #111827;
    border: 1px solid rgba(255,255,255,0.06); border-radius: 14px;
    transition: transform 0.2s, border-color 0.2s;
}
.zs-card:hover, .zs-card:focus-visible { transform: translateY(-4px); border-color: rgba(248,181,92,0.5); }
.zs-citta { color: #F8B55C; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; }
.zs-titolo { color: #ffffff; font-size: 17px; font-weight: 700; line-height: 1.3; }
.zs-frase { color: #94a3b8; font-size: 14px; line-height: 1.5; }
.zs-vai { margin-top: auto; padding-top: 8px; color: #cbd5e1; font-size: 13px; font-weight: 700; }
.zs-card:hover .zs-vai { color: #F8B55C; }

@media (max-width: 768px) {
    .zone-servite { padding: 0 20px; margin-bottom: 60px; }
    .zone-servite h2 { font-size: 24px; }
    .zs-griglia { grid-template-columns: 1fr; gap: 12px; }
}