/* ═══════════════════════════════════════
   SEZIONE SERVIZI
═══════════════════════════════════════ */

.services-section {
  background: var(--bg);
  padding: 56px 40px 64px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* label di sezione: stile in base.css → .section-label */

.services-text {
  /* minimo 27px = 3.50vw a 769px, cioè appena sopra il breakpoint:
     così il testo scala in modo continuo su tutto il desktop
     senza restare bloccato al minimo nella fascia tablet. */
  font-size: clamp(27px, 3.50vw, 70px);
  font-weight: 700;
  line-height: 1.10;
  color: var(--dark);
  text-align: right;
}

.services-text strong {
  font-weight: 700;
}

/* ── Voci di servizio: link con sottolineatura in hover ──
   La riga NON e' un text-decoration ma un background del link: le parole
   sono avvolte da .rv-w con overflow:hidden per l'animazione di apparizione,
   e quelle maschere taglierebbero un text-decoration. Il background invece
   lo dipinge il link stesso, sotto le parole, quindi non viene clippato.
   Cresce da sinistra: effetto tendina invece di dissolvenza. */
.service-link {
  color: inherit;
  text-decoration: none;
  /* Riga dello stesso colore del testo. Provato l'accent: su questo
     fondo (#c0ff72 su #f0f0f0) il contrasto e' 1,04:1, cioe' la riga
     sparisce. Nero: 15,9:1. */
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 0.045em;          /* spessore in em: scala col corpo */
  transition: background-size .4s cubic-bezier(0.22, 1, 0.36, 1);
}

.service-link:hover,
.service-link:focus-visible {
  background-size: 100% 0.045em;
}

/* Le ultime quattro voci condividono la destinazione. Su desktop sono
   un unico <a>, quindi si sottolineano insieme da sole. Nella lista
   mobile restano quattro elementi per stare una per riga: qui il :has()
   fa sottolineare tutto il gruppo quando il mouse e' su una qualsiasi. */
.services-list:has(.service-link--gruppo:hover) .service-link--gruppo,
.services-list:has(.service-link--gruppo:focus-visible) .service-link--gruppo {
  background-size: 100% 0.045em;
}

.services-sep {
  color: var(--mid);
  font-weight: 300;
  margin: 0 3px;
}

/* Mobile list — nascosta su desktop */
.services-list {
  display: none;
}