/* ==================================================================
   Componenti usati dalle pagine interne.
   ================================================================== */

.mt-s { margin-top: var(--sp-s); }
.su-chiaro { color: #F5ECE0; }

/* Hero delle pagine interne: piu' basso della home, il titolo e' la sola voce. */
.cover--media { min-height: 480px; }
.cover--media .hero__titolo { margin-bottom: 0; }

/* ------------------------------------------------------------------
   Capolettera del manifesto
   ------------------------------------------------------------------ */

.capolettera::first-letter {
  float: left;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 3.4em;
  line-height: 0.82;
  padding-right: 0.09em;
  color: var(--bordeaux);
}

/* ------------------------------------------------------------------
   Citazione
   ------------------------------------------------------------------ */

.citazione { margin: 0; }
.citazione p {
  color: var(--crema-su-scuro);
  font-style: italic;
  text-wrap: balance;
}
.citazione__firma {
  display: block;
  margin-top: var(--sp-s);
  font-family: var(--font-etichetta);
  font-size: var(--fs-piccolo);
  font-style: normal;
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  color: var(--oro-chiaro);
}

/* ------------------------------------------------------------------
   Servizio esteso: riga immagine + testo, alternata
   ------------------------------------------------------------------ */

.servizio-esteso {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--sp-m);
  padding-block: var(--sp-m);
  border-top: 1px solid var(--filetto);
}
.servizio-esteso:first-child { border-top: 0; padding-top: 0; }

.servizio-esteso__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-media);
}
.servizio-esteso__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-media) var(--easing);
}
.servizio-esteso:hover .servizio-esteso__media img { transform: scale(1.03); }

.servizio-esteso__testo h2 { margin-block: 8px var(--sp-xs); }

/* L'alternanza evita che cinque righe identiche leggano come una lista
   di card: la seconda e la quarta hanno l'immagine a destra. */
.servizio-esteso--invertito .servizio-esteso__media { order: 2; }

.passo__numero--chiaro { color: var(--oro-scuro); }

@media (max-width: 980px) {
  .servizio-esteso { grid-template-columns: 1fr; gap: var(--sp-s); }
  .servizio-esteso--invertito .servizio-esteso__media { order: 0; }
  .cover--media { min-height: 420px; }
}

@media (max-width: 620px) {
  .cover--media { min-height: 360px; }
  .capolettera::first-letter { font-size: 2.8em; }
}