/* Medyca — i profili dei medici (13.10.2026): /dr-cristina-lenzi, /dr-lucia-stella, /prof-riccardo-sarzani e ogni medico che si aggiunge
   (le sezioni di src/components/profilo/). Lo scheletro è lo stesso per tutti: apertura navy con nome, qualifica e foto in cornice; il testo con
   i due bottoni; i due elenchi. Quello che cambia da un medico all'altro sta nel suo yaml, non qui (il ritaglio della foto: `fuoco`).
   Stesso linguaggio di stile.css: variabili, raggio 24px, pillole, filetti var(--filo), nessuna ombra nuova, nessun colore nuovo. */

/* ---------- 1. Apertura del profilo: l'apertura B della home, senza le due cifre ---------- */
/* La qualifica (un h2) fa da sottotitolo con la classe .attacco della home. La foto è quella del medico, col suo sfondo:
   cambia il taglio nella cornice, non la foto. Il taglio lo dice il yaml del medico (`apertura.foto.fuoco`, due percentuali: il punto
   della foto che resta dentro; la pagina lo passa come --fuoco). Per Lenzi, foto orizzontale (3:2) in una cornice verticale, è
   55% 40%: il viso, a destra del centro, e la pillola «Medyca» restano dentro a ogni larghezza; per i ritratti in piedi di Stella e
   Sarzani è 50% 14%: il viso sta nella metà alta e il taglio parte dall'alto, così capelli e viso restano dentro. Senza `fuoco` vale
   50% 20%. */
:is(.apertura--profilo .tondo img):where([data-sezione^="profilo/"], [data-sezione^="profilo/"] *) { object-position: var(--fuoco, 50% 20%); }

/* telefono: la qualifica è il secondo livello del titolo, come il «seguito» a due livelli: sta vicina al nome */
@media (max-width: 37.49em) { :is(.apertura--profilo .attacco):where([data-sezione^="profilo/"], [data-sezione^="profilo/"] *) { margin-top: 1rem; } }

/* tablet: foto a sinistra, qualifica a destra a metà altezza della foto (nella home sotto la qualifica ci sono le cifre) */
@media (min-width: 37.5em) and (max-width: 63.99em) {
  :is(.apertura--profilo .apertura-griglia):where([data-sezione^="profilo/"], [data-sezione^="profilo/"] *) { grid-template-areas: "titolo titolo" "foto testo"; grid-template-rows: auto 1fr; }
  :is(.apertura--profilo .attacco):where([data-sezione^="profilo/"], [data-sezione^="profilo/"] *) { align-self: center; }
}

/* desktop: nome e qualifica a sinistra, a metà altezza della foto (non appiccicati in alto con un vuoto sotto); la foto a destra,
   appoggiata in basso come in home */
@media (min-width: 64em) {
  :is(.apertura--profilo .apertura-griglia):where([data-sezione^="profilo/"], [data-sezione^="profilo/"] *) { grid-template-areas: ". foto" "titolo foto" "testo foto" ". foto"; grid-template-rows: 1fr auto auto 1fr; }
  :is(.apertura--profilo .attacco):where([data-sezione^="profilo/"], [data-sezione^="profilo/"] *) { margin-top: 1.25rem; }
}

/* ---------- 2. Il testo e l'invito (i due bottoni) ---------- */
/* telefono e tablet: i capoversi, poi i due bottoni uno sotto l'altro (larghi quanto la colonna del testo); da 52em larghi uguali
   (quanto il più largo), a sinistra come il testo */
:is(.profilo-griglia):where([data-sezione^="profilo/"], [data-sezione^="profilo/"] *) { display: grid; gap: 2.5rem; }
:is(.profilo-invito):where([data-sezione^="profilo/"], [data-sezione^="profilo/"] *) { display: grid; gap: 1rem; max-width: var(--colonna); }
@media (min-width: 52em) { :is(.profilo-invito):where([data-sezione^="profilo/"], [data-sezione^="profilo/"] *) { width: fit-content; max-width: 100%; } }
/* desktop: i capoversi a sinistra (40rem); a destra la scheda azzurra con i due bottoni, larga quanto la foto dell'apertura (24rem)
   così i due bordi destri si allineano, e ferma in vista mentre si legge (sticky, come il titolo di /menopausa). Dentro la scheda
   i bottoni hanno meno margine ai lati (1rem): «Leggi il blog della Dr.ssa Lenzi» sta su una riga, come «Scopri gli ormoni bioidentici» */
@media (min-width: 64em) {
  :is(.profilo-griglia):where([data-sezione^="profilo/"], [data-sezione^="profilo/"] *) { grid-template-columns: minmax(0, var(--colonna)) 24rem; justify-content: space-between; column-gap: 5rem; align-items: start; }
  :is(.profilo-invito):where([data-sezione^="profilo/"], [data-sezione^="profilo/"] *) { position: sticky; top: 2rem; width: auto; max-width: none; padding: 2rem; border-radius: var(--raggio-grande); background: var(--cielo); }
  :is(.profilo-invito .bottone):where([data-sezione^="profilo/"], [data-sezione^="profilo/"] *) { min-width: 0; padding-inline: 1rem; }
}

/* ---------- 3. I due elenchi: righe con filetto, uno sotto l'altro fino a 64em, poi due colonne ---------- */
/* ogni voce è una riga con il filetto sotto, come le righe delle fisarmoniche ma senza «+»; il titolo è un h3 con lo
   stile dei titoli di sezione: barretta rossa sopra */
:is(.profilo-liste):where([data-sezione^="profilo/"], [data-sezione^="profilo/"] *) { display: grid; gap: 4rem; }
:is(.profilo-lista):where([data-sezione^="profilo/"], [data-sezione^="profilo/"] *) { max-width: var(--colonna); }
:is(.profilo-righe):where([data-sezione^="profilo/"], [data-sezione^="profilo/"] *) { margin-top: 1.5rem; border-top: 1px solid var(--filo); }
:is(.profilo-righe li):where([data-sezione^="profilo/"], [data-sezione^="profilo/"] *) { padding-block: .875rem; border-bottom: 1px solid var(--filo); text-wrap: pretty; }
/* le sigle e le parole composte corte (GLP-1, NT-proBNP, normale-alta, keto–salt) non vanno a capo a metà */
:is(.unito):where([data-sezione^="profilo/"], [data-sezione^="profilo/"] *) { white-space: nowrap; }
/* a desktop il titolo di una colonna può andare a capo e quello dell'altra no («Esperienza clinica e riconoscimenti» va su due
   righe, «Formazione e specializzazione» su una): con la griglia secondaria (subgrid) i titoli stanno su una fascia comune e le
   righe dei due elenchi partono alla stessa altezza */
@media (min-width: 64em) {
  :is(.profilo-liste):where([data-sezione^="profilo/"], [data-sezione^="profilo/"] *) { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; column-gap: 5rem; align-items: start; }
  :is(.profilo-lista):where([data-sezione^="profilo/"], [data-sezione^="profilo/"] *) { max-width: none; display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; }
}