/* Medyca — /approfondimenti e le tre pagine dei passi (13.10.2026, rifatto il 17.10.2026)
   I pezzi che stile.css non ha, nello stesso linguaggio: variabili, raggi 8/24, filetti var(--filo), pillole, niente ombre
   (salvo quella della foto dell'apertura), nessun colore nuovo. La card dell'articolo e la card del passo stanno in stile.css
   (blocchi «card articolo», «design minore» e «i tre passi»): le usano anche le pagine dei passi e la home.
   1. apertura di /approfondimenti con il banner · 2. in evidenza (design minore) e i tre passi (design maggiore) · 3. la chiusura ·
   4. le pagine dei passi: apertura, filtri per tema, in fondo i tre passi con quello della pagina segnato */

/* dalle vecchie àncore dei passi (/approfondimenti#capire-cosa-succede, nei link che qualcuno ha ancora) si salta, non si scorre:
   lo scorrimento morbido confonde chi legge (deciso il 14.10.2026). Il badge del numero esce di 25px sopra la scheda: il margine
   del salto lo tiene a vista */
.tappe .tappa { scroll-margin-top: calc(1rem + 25px); }

/* ---------- 1. Apertura: navy come la home (.apertura--b), col banner in cornice bianca ---------- */
.apertura--guida .guida-griglia { display: grid; }
/* il titolo è lungo e senza virgola: tutto in .h1-grande. «ormoni bioidentici» è larga 9,5em: sotto i 400px il corpo cala con la
   finestra, perché non resti «bioidentici» solo sull'ultima riga (a 390px resta 36px come nel sistema) */
.apertura--guida .h1-grande { font-size: min(var(--h1-grande), calc((100vw - 2 * var(--margine)) / 9.6)); }
.guida-foto { margin-top: 1.75rem; border: 4px solid #fff; border-radius: var(--raggio-grande); background: #fff; overflow: hidden; box-shadow: 0 20px 44px rgba(8, 20, 44, .3); }
.guida-foto img { width: 100%; height: auto; }   /* il banner intero (1,9:1), mai tagliato */
.guida-dati { margin-top: 1.25rem; }
.guida-dati strong { font-weight: 700; }

/* tablet: titolo su tutta la riga, poi il banner a sinistra e il testo a destra, come in home */
@media (min-width: 37.5em) and (max-width: 63.99em) {
  .apertura--guida .guida-griglia { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 2.5rem; grid-template-areas: "titolo titolo" "foto testo" "foto dati"; grid-template-rows: auto 1fr auto; align-items: center; }
  .apertura--guida .h1 { grid-area: titolo; }
  .guida-foto { grid-area: foto; margin-top: 2rem; }
  .apertura--guida .attacco { grid-area: testo; align-self: end; margin-top: 2rem; }
  .guida-dati { grid-area: dati; align-self: start; }
}
/* desktop: testo a sinistra, banner a destra */
@media (min-width: 64em) {
  .apertura--guida { padding-bottom: 5rem; }
  .apertura--guida .h1-grande { font-size: var(--h1-grande); }
  .apertura--guida .guida-griglia { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 4rem; grid-template-areas: "titolo foto" "testo foto" "dati foto"; grid-template-rows: auto auto 1fr; align-items: start; }
  .apertura--guida .h1 { grid-area: titolo; }
  .guida-foto { grid-area: foto; align-self: center; margin-top: 0; border-width: 6px; box-shadow: 0 28px 60px rgba(8, 20, 44, .32); }
  .apertura--guida .attacco { grid-area: testo; }
  .guida-dati { grid-area: dati; max-width: 34rem; margin-top: 1.5rem; }
}

/* ---------- 2. In evidenza e i tre passi ---------- */
/* /approfondimenti tiene solo la struttura di alto livello (deciso il 17.10.2026). In cima i tre articoli da cui partire,
   poi i tre passi del percorso: ognuno porta alla sua pagina, dove sta l'elenco completo con i filtri per tema. Il peso è sui tre passi,
   che sono la cosa da cliccare (deciso il 18.10.2026): i tre in evidenza sono card piccole (miniatura, tema, titolo), i tre passi il pezzo
   grosso della pagina (le due cose stanno in stile.css: «design minore» e «i tre passi»). */
.guida-gruppo .h2 { max-width: 40rem; }
.guida-gruppo .anteprime { margin-top: 2rem; }
.guida-gruppo .attacco + .tappe { margin-top: 2rem; }
@media (min-width: 64em) {
  .guida-gruppo .anteprime { margin-top: 2.5rem; }
  .guida-gruppo .attacco + .tappe { margin-top: 3rem; }
}

/* ---------- 3. La chiusura: il titolo e i due bottoni ---------- */
.guida-chiusura .lungo-invito { display: grid; gap: 1rem; margin-top: 0; }
.guida-chiusura .lungo-invito .bottone { width: 100%; min-width: 0; }

/* ---------- 4. Le pagine dei passi ---------- */
/* Le pagine dei passi (17.10.2026). Apertura navy bassa, come /contact (titolo e poco altro):
   «Passo n di 3», il titolo del passo e la riga d'introduzione che /approfondimenti ha già; poi, su bianco, i filtri per tema
   e la griglia delle card; in fondo i tre passi (quello della pagina è «Sei qui») e il ritorno ad /approfondimenti. La croce del
   logo la mette la regola generale di stile.css (section.su-navy::after). */
.passo-apertura { position: relative; overflow: hidden; padding-block: 2.5rem 3rem; background: var(--navy); color: #fff; }
.passo-apertura .contenitore { position: relative; z-index: 1; }
.passo-numero { font-size: 1rem; line-height: 1.3; font-weight: 700; }
/* la barretta rossa sopra il titolo, come nelle altre aperture: qui sta sopra «Passo n di 3» */
.passo-numero::before { content: ""; display: block; width: 2.5rem; height: 4px; margin-bottom: 1.25rem; border-radius: 2px; background: var(--rosso); }
.passo-apertura .h1 { margin-top: .875rem; }
.passo-apertura .attacco { max-width: 36rem; margin-top: 1rem; }
@media (min-width: 52em) { .passo-apertura .h1 { margin-top: 1rem; } }
@media (min-width: 64em) {
  .passo-apertura { padding-block: 4rem 4.5rem; }
  .passo-numero::before { width: 3.5rem; height: 5px; margin-bottom: 1.75rem; border-radius: 3px; }
  .passo-apertura .attacco { margin-top: 1.25rem; }
}

.passo-elenco { padding-block: 2.5rem var(--sezione); }
@media (min-width: 64em) { .passo-elenco { padding-top: 3.5rem; } }

/* I filtri per tema: pillole, a scelta multipla (con più temi accesi si vedono gli articoli che ne hanno almeno uno). Il bottone
   acceso è pieno navy; «Tutti» è acceso quando nessun tema lo è. Senza JavaScript la barra resta nascosta (attributo hidden) e
   si vedono tutte le card. Il numero a destra dice quante card si vedono (aria-live). */
.filtri { margin-bottom: 1.75rem; }
.filtri-testa { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.filtri-titolo { font-size: 1rem; line-height: 1.3; font-weight: 700; }
.filtri-conta { font-size: var(--piccolo); line-height: 1.3; font-weight: 600; text-align: right; }
.filtri-pillole { display: flex; flex-wrap: wrap; gap: .5rem; }
.filtro {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 1.125rem; border: 1.5px solid var(--navy); border-radius: 999px;
  background: var(--bianco); color: var(--navy); font: 700 1rem/1.2 var(--font); text-align: left; cursor: pointer;
}
.filtro[aria-pressed="true"] { background: var(--navy); color: #fff; }
@media (hover: hover) {
  .filtro:hover { background: var(--cielo); }
  .filtro[aria-pressed="true"]:hover { background: var(--navy-scuro); }
}
@media (min-width: 64em) { .filtri { margin-bottom: 2.25rem; } .filtri-pillole { gap: .75rem; } }

/* in fondo: i tre passi (il componente di stile.css, con quello della pagina segnato «Sei qui») e il ritorno ad /approfondimenti.
   Il vecchio «passo successivo» da solo nella metà destra, con il bottone sospeso al centro, non stava in piedi sul primo e
   sull'ultimo passo (deciso il 18.10.2026): così i tre ci sono sempre, in qualunque pagina, e il bottone sta sul bordo sinistro della griglia. */
.passo-fondo .h2 + .tappe { margin-top: 2rem; }
@media (min-width: 64em) { .passo-fondo .h2 + .tappe { margin-top: 3rem; } }

/* ---------- Tutti gli articoli, con il filtro per passo (deciso il 21.10.2026) ----------
   Dopo «Cosa stai cercando?» tutti gli articoli veri, nelle card delle pagine dei passi. Il filtro è diverso dalle pillole dei temi
   delle pagine dei passi, per non sovrapporsi: un comando a segmenti, una pista azzurra con le
   quattro scelte dentro, quella accesa piena di navy, e il numero del passo nel suo cerchio come nelle card dei passi. Una scelta alla
   volta. Da telefono le scelte stanno due per riga; da 64em su una riga sola, accanto al conteggio. */
.guida-tutti-capo { display: grid; gap: 1rem; margin-top: 1.75rem; }
.passi-filtro { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: var(--raggio-grande); background: var(--cielo); }
.passi-filtro[hidden] { display: none; }
/* in inglese le voci sono più lunghe: a telefono una per riga, così nessuna va su tre righe */
@media (max-width: 29.99em) { :lang(en) .passi-filtro { grid-template-columns: minmax(0, 1fr); } }
/* sui telefoni più stretti anche in italiano: «Capire cosa succede» altrimenti va su tre righe */
@media (max-width: 22.49em) { .passi-filtro { grid-template-columns: minmax(0, 1fr); } }
.passi-filtro button {
  display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; padding: .5rem .75rem;
  border: 0; border-radius: calc(var(--raggio-grande) - 4px); background: transparent; color: var(--navy);
  font: 700 .9375rem/1.25 var(--font); text-align: center; cursor: pointer;
}
.passi-filtro button[aria-pressed="true"] { background: var(--navy); color: #fff; }
.passi-filtro button:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
@media (hover: hover) { .passi-filtro button[aria-pressed="false"]:hover { background: var(--bianco); } }
.passi-filtro-n { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--bianco); color: var(--rosso); font-size: .875rem; line-height: 1; font-weight: 800; box-shadow: 0 0 0 1.5px var(--rosso); }
.passi-conta { font-weight: 700; }
.guida-tutti .anteprime { margin-top: 1.5rem; }
@media (min-width: 64em) {
  .guida-tutti-capo { grid-template-columns: auto 1fr; align-items: center; column-gap: 2rem; margin-top: 2.25rem; }
  .passi-filtro { grid-template-columns: repeat(4, auto); border-radius: 999px; }
  .passi-filtro button { border-radius: 999px; padding-inline: 1.25rem; }
  .passi-conta { justify-self: end; }
  .guida-tutti .anteprime { margin-top: 2rem; }
}