/* ================= SERVIZI ================= */
.services-grid{
    max-width:1100px;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:30px;
}
.service-card{
    background:var(--glass);
    padding:35px;
    border-radius:var(--radius);
    transition:.4s;
}
.service-card i{
    font-size:2rem;
    color:var(--accent);
    margin-bottom:15px;
}


.service-card:hover{
    transform:translateY(-12px);
    box-shadow:0 0 35px rgba(0,242,255,.25);
}

/* ================= SERVIZI CLICCABILI ================= */

.services-grid a.service-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;

    padding: 40px 30px;
    border-radius: var(--radius);

    background: var(--glass);
    backdrop-filter: var(--blur);

    text-decoration: none;
    color: var(--text-light);

    transition: transform .4s ease, box-shadow .4s ease, background .4s ease;
    position: relative;
    overflow: hidden;
}

#servizi .section-title {
    font-size: clamp(2.2rem, 4vw, 3rem);
    margin-bottom: 10px;
}

#servizi .section-subtitle {
    font-size: 1rem;
    opacity: 0.75;
    text-align: center;
    margin-bottom: 50px;
}


/* icona */
.services-grid a.service-card i {
    font-size: 2.6rem;
    color: var(--accent);
    transition: transform .4s ease;
}

/* titolo */
.services-grid a.service-card h3 {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
}

/* testo */
.services-grid a.service-card p {
    font-size: .95rem;
    opacity: .85;
    text-align: center;
}

/* overlay glow */
.services-grid a.service-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(0,242,255,0.15),
        transparent
    );
    opacity: 0;
    transition: opacity .4s ease;
}

/* hover */
.services-grid a.service-card:hover {
    transform: translateY(-14px) scale(1.03);
    box-shadow: 0 0 45px rgba(0,242,255,0.35);
}

.services-grid a.service-card:hover::before {
    opacity: 1;
}

.services-grid a.service-card:hover i {
    transform: scale(1.15) rotate(-3deg);
}

/* click feedback */
.services-grid a.service-card:active {
    transform: scale(.97);
}

/* mobile */
@media (max-width: 768px) {
    .services-grid a.service-card {
        padding: 30px 20px;
    }
}

/* ===== BLOCCO SERVIZI CON BACKGROUND SLIDER ===== */

#servizi {
    position: relative;
    overflow: hidden;
}

/* livello immagini */
#servizi::before {
    content: "";
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: opacity 1.2s ease, transform 6s ease;
    z-index: 0;
    transform: scale(1.05);
}

/* overlay scuro */
#servizi::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.65),
        rgba(0,0,0,0.85)
    );
    z-index: 1;
}

/* contenuto sopra */
#servizi > * {
    position: relative;
    z-index: 2;
}

/* ===== MIGLIORAMENTO VISIBILITÀ FOTO DA TELEFONO ===== */

/* Desktop e tablet */
#servizi {
    background-size: cover;
    background-position: center top; /* ANCORAGGIO IN ALTO */
}

/* Mobile: mostra più immagine possibile */
@media (max-width: 768px) {
    #servizi {
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }
}