/* ==========================================================================
   Gwendalina Beauty — trattamenti.css
   Stili di pagina per /trattamenti/: indice grande, gruppi di trattamenti,
   griglia benefici/indicazioni, nota informativa. Token e componenti
   condivisi vivono in global.css (docs/DESIGN-SYSTEM.md).
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Indice ancore, variante grande (due voci: Viso / Corpo)
   -------------------------------------------------------------------------- */

.anchor-nav--large ul { gap: clamp(2rem, 6vw, 5rem); }

/* Altezza risultante ≈ 3.7rem (mobile) – 4.3rem (desktop): target touch ≥ 44px */
.anchor-nav--large a {
  display: inline-flex;
  align-items: baseline;
  padding-block: 1.1rem;
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.anchor-nav--large a::after { bottom: .8rem; }

.anchor-nav__count {
  margin-inline-start: .55rem;
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--color-text-muted);
  transform: translateY(-.55em);
  transition: color var(--dur-fast) var(--ease-out);
}

.anchor-nav--large a:hover .anchor-nav__count,
.anchor-nav--large a:focus-visible .anchor-nav__count { color: var(--color-text); }


/* --------------------------------------------------------------------------
   2. Gruppi di trattamenti (Viso / Corpo)
   -------------------------------------------------------------------------- */

.treatment-group .section__header { margin-bottom: clamp(3.5rem, 9vw, 8rem); }

/* Tra 992 e 1200px il limite 56ch di .section__header (global.css §16) prevale su
   .section__header--split { max-width: none } e comprime la griglia: qui la riapriamo. */
@media (min-width: 992px) {
  .treatment-group .section__header--split { max-width: none; }
}

.treatment-group__list > .treatment + .treatment { margin-top: var(--section-spacing-sm); }

/* Ancore: sotto l'header fisso (scroll-padding globale) e sotto l'indice sticky */
.treatment-group,
.treatment { scroll-margin-top: var(--space-3); }

@media (min-width: 992px) {
  .treatment-group,
  .treatment { scroll-margin-top: calc(4.5rem + var(--space-2)); } /* ≈ altezza .anchor-nav--large */

  /* Tra un articolo e l'altro il gruppo respira un po' di più */
  .treatment-group__list > .treatment + .treatment { margin-top: calc(var(--section-spacing-sm) * 1.25); }
}

/* Eyebrow numerato con filetto: "Viso · 01" */
.treatment__eyebrow {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.treatment__eyebrow::before {
  content: "";
  flex: none;
  width: 2rem;
  height: 1px;
  background-color: var(--color-line-strong);
  transition: width var(--dur) var(--ease-out);
}

@media (hover: hover) {
  .treatment:hover .treatment__eyebrow::before { width: 3rem; }
}

/* Testo descrittivo: misura da lettura anche quando la colonna è larga (mobile) */
.treatment .editorial-split__body > p:not(.eyebrow) { max-width: 46ch; }


/* --------------------------------------------------------------------------
   3. Benefici / Indicazioni
   -------------------------------------------------------------------------- */

.treatment__facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4) var(--space-4); /* colonna testo stretta (5/12): gap contenuto */
  margin-top: var(--space-4);
}

@media (min-width: 600px) {
  .treatment__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.treatment__facts .eyebrow { margin-bottom: var(--space-1); }

.treatment__facts .list-plain {
  font-size: .9rem;
  line-height: 1.45;
}

.treatment__facts .list-plain > li { padding: .7rem 0; }

.treatment__facts .list-plain > li:first-child { border-top: 1px solid var(--color-line); }


/* --------------------------------------------------------------------------
   4. Azioni dell'articolo
   -------------------------------------------------------------------------- */

/* Il link "Prenota" affiancato al bottone: target ≥ 44px, underline vicina al testo */
.treatment .actions > .link-underline {
  padding-block: .8rem;
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: .02em;
  line-height: 1.4;
}

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


/* --------------------------------------------------------------------------
   5. Nota informativa
   -------------------------------------------------------------------------- */

.treatment-disclaimer {
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  border-top: 1px solid var(--color-line);
}

.treatment-disclaimer p {
  max-width: 62ch;
  margin-inline: auto;
  line-height: 1.7;
  text-align: center;
}


/* --------------------------------------------------------------------------
   6. Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .treatment__eyebrow::before,
  .anchor-nav__count { transition: none; }

  .treatment:hover .treatment__eyebrow::before { width: 2rem; }
}