/* Medyca — /team-medico (13.10.2026): i pezzi che stile.css non ha.
   Stesso linguaggio delle altre pagine: variabili del sistema, raggi 8/24, filetti var(--filo), niente colori nuovi,
   niente ombre tranne quella della cornice dell'apertura. Telefono per primo; da 37.5em (600px) la testa del medico
   sta accanto alla foto, da 64em (1024px) il medico è una riga larga: foto e testo, mai una colonna stretta. */

/* ---------- 1. Apertura: navy da bordo a bordo, bassa (titolo + logo con la tagline in cornice bianca) ---------- */
:is(.squadra-apertura):where([data-sezione^="team-medico/"], [data-sezione^="team-medico/"] *) { position: relative; overflow: hidden; padding-block: 2.5rem 3rem; background: var(--navy); color: #fff; }
:is(.squadra-apertura):where([data-sezione^="team-medico/"], [data-sezione^="team-medico/"] *)::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .06;
  background: url("/loghi/medyca-croce-filigrana-bianca.svg") no-repeat right -9rem top -3rem / 30rem auto;
}
:is(.squadra-apertura .contenitore):where([data-sezione^="team-medico/"], [data-sezione^="team-medico/"] *) { position: relative; z-index: 1; }
/* la barretta rossa sopra il titolo, come nell'apertura della home */
:is(.squadra-apertura .h1):where([data-sezione^="team-medico/"], [data-sezione^="team-medico/"] *)::before { content: ""; display: block; width: 2.5rem; height: 4px; margin-bottom: 1.25rem; border-radius: 2px; background: var(--rosso); }
/* sotto i 360px il titolo a 36px andrebbe su quattro righe, la prima di una parola sola («Ti»): un po' più piccolo, due righe */
@media (max-width: 22.5em) { :is(.squadra-apertura .h1-grande):where([data-sezione^="team-medico/"], [data-sezione^="team-medico/"] *) { font-size: 1.875rem; } }
/* il logo ha il fondo trasparente e le lettere navy, sul navy sparirebbe: cornice bianca a 24px, con l'ombra della foto dell'apertura */
:is(.squadra-logo):where([data-sezione^="team-medico/"], [data-sezione^="team-medico/"] *) { width: 100%; max-width: 26rem; margin-top: 1.75rem; padding: 1.25rem 1.5rem; border-radius: var(--raggio-grande); background: #fff; box-shadow: 0 20px 44px rgba(8, 20, 44, .3); }
:is(.squadra-logo img):where([data-sezione^="team-medico/"], [data-sezione^="team-medico/"] *) { width: 100%; height: auto; }
@media (min-width: 64em) {
  :is(.squadra-apertura):where([data-sezione^="team-medico/"], [data-sezione^="team-medico/"] *) { padding-block: 4.5rem; }
  :is(.squadra-apertura):where([data-sezione^="team-medico/"], [data-sezione^="team-medico/"] *)::after { background-position: right -6rem top -8rem; background-size: 46rem auto; }
  :is(.squadra-apertura .h1):where([data-sezione^="team-medico/"], [data-sezione^="team-medico/"] *)::before { width: 3.5rem; height: 5px; margin-bottom: 1.75rem; }
  :is(.squadra-apertura-griglia):where([data-sezione^="team-medico/"], [data-sezione^="team-medico/"] *) { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 4rem; align-items: center; }
  :is(.squadra-logo):where([data-sezione^="team-medico/"], [data-sezione^="team-medico/"] *) { justify-self: end; max-width: 28rem; margin-top: 0; padding: 1.75rem 2rem; }
}

/* ---------- 2. Il filetto fra il capoverso d'apertura e la scheda di Lenzi ---------- */
:is(.filetto):where([data-sezione^="team-medico/"], [data-sezione^="team-medico/"] *) { height: 0; margin: 2.5rem 0; border: 0; border-top: 1px solid var(--filo); }
@media (min-width: 64em) { :is(.filetto):where([data-sezione^="team-medico/"], [data-sezione^="team-medico/"] *) { margin-block: 3.5rem; } }

/* ---------- 3. Il medico: un oggetto solo, foto, nome, qualifica, biografia intera, link al profilo ---------- */
/* telefono: tutto in colonna, nell'ordine foto, nome, qualifica, biografia, link */
:is(.medico):where([data-sezione^="team-medico/"], [data-sezione^="team-medico/"] *) { display: grid; grid-template-columns: minmax(0, 1fr); }
:is(.medico-foto):where([data-sezione^="team-medico/"], [data-sezione^="team-medico/"] *) { aspect-ratio: 3 / 4; }
:is(.medico-foto img):where([data-sezione^="team-medico/"], [data-sezione^="team-medico/"] *) { object-position: 50% 10%; }
/* il punto della foto che resta in vista, per chi ha un viso che non sta in alto (le altre foto: 50% 10%; i due specialisti, più sotto) */
:is(.medico--lenzi .medico-foto img):where([data-sezione^="team-medico/"], [data-sezione^="team-medico/"] *) { object-position: 50% 40%; }
:is(.medico-testa):where([data-sezione^="team-medico/"], [data-sezione^="team-medico/"] *) { margin-top: 1.75rem; }
/* il nome sta a metà fra h3 e h2 (20 · 23,5 · 26px): sopra la qualifica, sotto il titolo di sezione */
:is(.medico-nome):where([data-sezione^="team-medico/"], [data-sezione^="team-medico/"] *) { font-size: calc((var(--h3) + var(--h2)) / 2); line-height: 1.3; font-weight: 700; }
/* il nome di Lenzi è un link: senza sottolineatura, bersaglio alto 48px senza spostare niente */
:is(.medico-nome a):where([data-sezione^="team-medico/"], [data-sezione^="team-medico/"] *) { display: inline-flex; align-items: center; min-height: 48px; margin-block: -.6875rem; text-decoration: none; }
@media (hover: hover) { :is(.medico-nome a:hover):where([data-sezione^="team-medico/"], [data-sezione^="team-medico/"] *) { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .22em; } }
:is(.medico-qualifica):where([data-sezione^="team-medico/"], [data-sezione^="team-medico/"] *) { margin-top: .5rem; font-weight: 600; }
/* «Direttore medico»: l'etichetta del ruolo, raggio 8px come le etichette del sistema */
:is(.medico-ruolo):where([data-sezione^="team-medico/"], [data-sezione^="team-medico/"] *) { display: inline-block; margin-top: 1rem; padding: .25rem .75rem; border-radius: var(--raggio); background: var(--cielo); font-size: var(--piccolo); line-height: var(--piccolo-lh); font-weight: 700; }
:is(.medico-bio):where([data-sezione^="team-medico/"], [data-sezione^="team-medico/"] *) { margin-top: 1.5rem; }
:is(.medico-bio > * + *):where([data-sezione^="team-medico/"], [data-sezione^="team-medico/"] *) { margin-top: 1.25em; }
:is(.medico-link):where([data-sezione^="team-medico/"], [data-sezione^="team-medico/"] *) { margin-top: 2rem; }
/* il link al profilo sta sempre su una riga: su telefono etichetta a 16px e meno padding ai lati, così regge anche a 320px */
:is(.medico-link .bottone):where([data-sezione^="team-medico/"], [data-sezione^="team-medico/"] *) { padding-inline: 1.25rem; font-size: 1rem; white-space: nowrap; }
/* da 37.5em il link al profilo è largo quanto la sua etichetta, non quanto la colonna */
@media (min-width: 37.5em) { :is(.medico-link .bottone):where([data-sezione^="team-medico/"], [data-sezione^="team-medico/"] *) { display: inline-flex; width: auto; min-width: 0; padding-inline: 1.75rem; font-size: 1.0625rem; } }

/* i due specialisti, su telefono e tablet uno sotto l'altro, separati da un filetto */
:is(.medici):where([data-sezione^="team-medico/"], [data-sezione^="team-medico/"] *) { margin-top: 3.5rem; }
:is(.medici > .medico + .medico):where([data-sezione^="team-medico/"], [data-sezione^="team-medico/"] *) { margin-top: 3.5rem; padding-top: 3.5rem; border-top: 1px solid var(--filo); }
/* i medici del percorso, sotto il titolo della loro sezione: la stessa scheda degli altri medici */
:is(.medico-solo):where([data-sezione^="team-medico/"], [data-sezione^="team-medico/"] *) { margin-top: 3.5rem; }
/* più schede nella direzione o fra i medici del percorso: una sotto l'altra, con il filetto, come gli specialisti */
[data-sezione="team-medico/Direzione"] .medico + .medico, :is(.medico-solo > .medico + .medico):where([data-sezione^="team-medico/"], [data-sezione^="team-medico/"] *) { margin-top: 3.5rem; padding-top: 3.5rem; border-top: 1px solid var(--filo); }

/* da 37.5em: la foto a sinistra, nome e qualifica accanto; la biografia sotto, larga quanto una colonna di testo */
@media (min-width: 37.5em) and (max-width: 63.99em) {
  :is(.medico):where([data-sezione^="team-medico/"], [data-sezione^="team-medico/"] *) { grid-template-columns: minmax(11rem, min(20rem, 42%)) minmax(0, 1fr); grid-template-areas: "foto testa" "bio bio" "link link"; column-gap: 2rem; align-items: center; }
  :is(.medico-foto):where([data-sezione^="team-medico/"], [data-sezione^="team-medico/"] *) { grid-area: foto; aspect-ratio: 3 / 4; }
  :is(.medico-testa):where([data-sezione^="team-medico/"], [data-sezione^="team-medico/"] *) { grid-area: testa; margin-top: 0; }
  :is(.medico-bio):where([data-sezione^="team-medico/"], [data-sezione^="team-medico/"] *) { grid-area: bio; max-width: var(--colonna); margin-top: 2rem; }
  :is(.medico-link):where([data-sezione^="team-medico/"], [data-sezione^="team-medico/"] *) { grid-area: link; }
}

/* da 64em la scheda è una riga larga, come il «coppia» di /menopausa: 4 colonne di foto (in formato 2:3, alta quanto il testo) e 8 di
   testo (mai oltre 40rem). Non dipende da chi è il medico: vale per ogni scheda della sua lista, una lista per sezione.
   La direzione (team-direzione): il testo a sinistra, la foto a destra, il link al profilo sotto la biografia. */
@media (min-width: 64em) {
  [data-sezione="team-medico/Direzione"] .medico { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); grid-template-areas: "testa foto" "bio foto" "link foto"; grid-template-rows: auto auto 1fr; column-gap: 4rem; align-items: start; align-content: start; }
  [data-sezione="team-medico/Direzione"] .medico-foto { grid-area: foto; aspect-ratio: 2 / 3; }
  [data-sezione="team-medico/Direzione"] .medico-testa { grid-area: testa; max-width: var(--colonna); margin-top: 0; }
  [data-sezione="team-medico/Direzione"] .medico-bio { grid-area: bio; max-width: var(--colonna); margin-top: 1.5rem; }
  [data-sezione="team-medico/Direzione"] .medico-link { grid-area: link; margin-top: 2rem; }

  /* I medici del percorso (team-medici-del-percorso): la stessa riga larga con la foto a sinistra: sta sotto il titolo e il capoverso della
     sezione, che sono nelle stesse 4 + 8 colonne (.coppia), e così i bordi stanno in asse. Il link al profilo, se la scheda ce l'ha, sta
     sotto la biografia. */
  :is(.medico-solo):where([data-sezione^="team-medico/"], [data-sezione^="team-medico/"] *) { margin-top: 4rem; }
  :is(.medico-solo > .medico):where([data-sezione^="team-medico/"], [data-sezione^="team-medico/"] *) { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); grid-template-areas: "foto testa" "foto bio"; grid-template-rows: auto 1fr; column-gap: 4rem; align-items: start; align-content: start; }
  :is(.medico-solo > .medico:has(.medico-link)):where([data-sezione^="team-medico/"], [data-sezione^="team-medico/"] *) { grid-template-areas: "foto testa" "foto bio" "foto link"; grid-template-rows: auto auto 1fr; }
  :is(.medico-solo .medico-foto):where([data-sezione^="team-medico/"], [data-sezione^="team-medico/"] *) { grid-area: foto; aspect-ratio: 2 / 3; }
  :is(.medico-solo .medico-testa):where([data-sezione^="team-medico/"], [data-sezione^="team-medico/"] *) { grid-area: testa; max-width: var(--colonna); margin-top: 0; }
  :is(.medico-solo .medico-bio):where([data-sezione^="team-medico/"], [data-sezione^="team-medico/"] *) { grid-area: bio; max-width: var(--colonna); margin-top: 1.5rem; }
  :is(.medico-solo .medico-link):where([data-sezione^="team-medico/"], [data-sezione^="team-medico/"] *) { grid-area: link; margin-top: 2rem; }

  /* Gli specialisti (team-specialisti): schede affiancate, due colonne uguali come i due servizi della home. Foto in alto (5:4, testa e spalle),
     poi nome, qualifica, biografia larga quanto la colonna, il link in fondo: i link stanno alla stessa altezza. */
  :is(.medici):where([data-sezione^="team-medico/"], [data-sezione^="team-medico/"] *) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 4rem; margin-top: 4rem; }
  :is(.medici > .medico):where([data-sezione^="team-medico/"], [data-sezione^="team-medico/"] *), :is(.medici > .medico + .medico):where([data-sezione^="team-medico/"], [data-sezione^="team-medico/"] *) { margin-top: 0; padding-top: 0; border-top: 0; grid-template-columns: minmax(0, 1fr); grid-template-areas: "foto" "testa" "bio" "link"; grid-template-rows: auto auto 1fr auto; }
  :is(.medici .medico-foto):where([data-sezione^="team-medico/"], [data-sezione^="team-medico/"] *) { grid-area: foto; aspect-ratio: 5 / 4; }
  :is(.medici .medico--sarzani .medico-foto img):where([data-sezione^="team-medico/"], [data-sezione^="team-medico/"] *) { object-position: 50% 7%; }
  :is(.medici .medico--stella .medico-foto img):where([data-sezione^="team-medico/"], [data-sezione^="team-medico/"] *) { object-position: 50% 12%; }
  :is(.medici .medico-testa):where([data-sezione^="team-medico/"], [data-sezione^="team-medico/"] *) { grid-area: testa; margin-top: 1.75rem; }
  :is(.medici .medico-bio):where([data-sezione^="team-medico/"], [data-sezione^="team-medico/"] *) { grid-area: bio; margin-top: 1.5rem; }
  :is(.medici .medico-link):where([data-sezione^="team-medico/"], [data-sezione^="team-medico/"] *) { grid-area: link; align-self: end; margin-top: 2rem; }
}

/* ---------- 4. Dalla prima visita: i due bottoni stanno affiancati quando c'è la larghezza ---------- */
@media (min-width: 64em) { :is(.prima-visita .coppia-corpo):where([data-sezione^="team-medico/"], [data-sezione^="team-medico/"] *) { max-width: none; } :is(.prima-visita .coppia-corpo > p):where([data-sezione^="team-medico/"], [data-sezione^="team-medico/"] *) { max-width: var(--colonna); } }