/* =====================================================================
   SERVIZI · stile della pagina (restyling v3 · 30/09/2026)
   Striscia dei marchi, nastri di video e i tre marchi sono in css/style.css (usati anche in home).
   ===================================================================== */

/* ---------- Elenco dei servizi con anteprima della foto ----------
   Computer: passando sopra un servizio la foto a destra cambia.
   Tablet: cambia con il servizio che passa al centro dello schermo.
   Telefono: miniatura accanto a ogni servizio (la crea il kit). */
.elenco-servizi { display: grid; grid-template-columns: 1.3fr .7fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.elenco-servizi__vista { position: sticky; top: 120px; }
/* sotto le foto del kit c'è la prima foto: senza JS la vista non resta vuota */
.elenco-servizi .anteprima__vista { aspect-ratio: 4 / 5; border-radius: var(--arco); background: var(--sabbia-scura) url("../../images/team-piega-milena-1.webp") center / cover; }
.elenco-servizi li.is-attiva { padding-left: 14px; }
.elenco-servizi li.is-attiva .elenco__nome { color: var(--bronzo-testo); }
@media (hover: hover) {
  .elenco-servizi .elenco:hover li:not(.is-attiva) .elenco__nome { opacity: .45; }
}
.elenco-servizi .anteprima__mini { width: 52px; height: 66px; border-radius: 999px 999px 3px 3px; background-position: center; }

/* ---------- I tre marchi ---------- */
.marchi-testo { max-width: 52ch; color: var(--testo-2); }

@media (max-width: 767px) {
  .elenco-servizi { grid-template-columns: 1fr; }
  .elenco-servizi__vista { display: none; }
  .elenco-servizi li.is-attiva { padding-left: 0; }
}