/* ==========================================================================
   Gwendalina Beauty — servizi.css
   Stili specifici di /servizi/: hero, indice ancore, blocchi servizio, metodo.
   Token e componenti condivisi vivono in global.css (nessuna ridefinizione).
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Hero
   -------------------------------------------------------------------------- */

/* Sotto l'immagine hero il ritmo riprende dall'indice: niente doppio respiro. */
.page-hero--media { padding-bottom: clamp(2.5rem, 6vw, 5rem); }


/* --------------------------------------------------------------------------
   2. Indice ancore + blocchi servizio
   -------------------------------------------------------------------------- */

/* Il wrapper delimita lo sticky dell'indice: si sgancia quando finiscono i blocchi. */
.service-blocks { position: relative; }

/* Cinque blocchi consecutivi separati da una linea: spaziatura più contenuta
   della .section standard per non allontanare troppo un servizio dall'altro. */
.service-block.section { padding-block: clamp(4rem, 9vw, 8rem); }

/* Eyebrow numerato "01 — Nails": il numerale in serif dà il ritmo editoriale */
.service-block__index {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin-bottom: var(--space-3);
  white-space: nowrap;
}

.service-block__num {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 300;
  letter-spacing: 0;
  line-height: 1;
  color: var(--color-text);
  font-variant-numeric: lining-nums tabular-nums;
}

/* Il paragrafo descrittivo resta leggibile anche nella colonna a 5/12 */
.service-block .editorial-split__body > p:not(.eyebrow) { max-width: 46ch; }

/* Le voci della lista hanno un po' più d'aria e chiudono con una linea sopra */
.service-block .list-plain { border-top: 1px solid var(--color-line); }
.service-block .list-plain > li { padding-block: .875rem; }

/* "Richiedi informazioni" accanto al bottone: target touch ≥ 44px, sottolineatura vicina al testo */
.service-block .actions > .link-underline {
  padding-block: .8rem;
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: .02em;
  line-height: 1.4;
}

.service-block .actions > .link-underline::after { bottom: .65rem; }

@media (min-width: 992px) {
  /* Sotto l'indice sticky (~56px): l'ancora atterra con la linea divisoria visibile */
  .service-block { scroll-margin-top: 3.5rem; }

  /* Il testo dei blocchi non "reverse" guadagna un margine dal media */
  .service-block .editorial-split:not(.editorial-split--reverse) .editorial-split__body {
    padding-inline-start: clamp(0rem, 2vw, 2rem);
  }

  /* Nei blocchi "reverse" il testo si stacca dal bordo sinistro del container */
  .service-block .editorial-split--reverse .editorial-split__body {
    padding-inline-end: clamp(0rem, 2vw, 2rem);
  }
}

@media (min-width: 1200px) {
  /* Ritmo: sui blocchi pari il testo si allinea in basso rispetto al media */
  .service-block:nth-of-type(even) .editorial-split { align-items: end; }
  .service-block:nth-of-type(even) .editorial-split__body { padding-bottom: clamp(1rem, 4vw, 3.5rem); }
}

@media (max-width: 768px) {
  .service-block__num { font-size: 1.25rem; }
}


/* --------------------------------------------------------------------------
   3. Metodo (banda su superficie cream)
   -------------------------------------------------------------------------- */

.services-note__intro > * + * { margin-top: var(--space-3); }
.services-note__intro > .eyebrow + * { margin-top: 0; }
.services-note__intro > h2 { margin-bottom: var(--space-2); }
.services-note__intro > p:not(.eyebrow) { max-width: 58ch; }

/* Tre colonne tipografiche con filetto superiore: niente card, niente icone */
.services-note__principles { margin-top: clamp(3.5rem, 8vw, 6.5rem); }

.principle {
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-line-strong);
}

.principle > h3 {
  font-weight: 400;
  max-width: 14ch;
}

.principle > p {
  max-width: 34ch;
  margin-top: var(--space-2);
  font-size: .95rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

@media (max-width: 768px) {
  .services-note__principles { gap: var(--space-4); }
}


/* --------------------------------------------------------------------------
   4. Stampa e reduced motion
   -------------------------------------------------------------------------- */

@media print {
  .service-block.section { padding-block: var(--space-5); }
  .service-block { break-inside: avoid; }
}

/* Reduced motion: questa pagina non aggiunge transizioni né animazioni CSS.
   Il movimento è tutto negli attributi data-* gestiti da animations.js, che
   con prefers-reduced-motion mostra ogni elemento senza animarlo; le
   transizioni dei componenti condivisi sono già neutralizzate in global.css. */