/* Articoli, pagine di approfondimento e profilo. Estende site.css e usa la stessa scala. */

/* ---------- Testata elenco ---------- */

.testata-articoli { padding: clamp(36px, 6vw, 84px) var(--gutter) clamp(22px, 3vw, 34px); }
.testata-articoli h1 {
  margin: 0 0 14px;
  font: 400 var(--fs-h1)/1.08 var(--serif);
  letter-spacing: -0.025em;
}
.testata-articoli .sottotitolo { margin: 0; font-size: var(--fs-lead); line-height: 1.55; max-width: 36em; color: var(--body); }

/* ---------- Filtri per tag ---------- */

.filtri-categoria { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 var(--gutter) 26px; }
.filtro-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--body);
  font: 500 var(--fs-ui)/1.2 var(--sans);
  cursor: pointer;
}
.filtro-pill:hover { border-color: rgba(27,31,29,.35); color: var(--ink); }
.filtro-pill .conteggio { font-size: 0.75rem; color: var(--faint); }
.filtro-pill.attivo { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.filtro-pill.attivo .conteggio { color: rgba(255,255,255,.7); }

/* ---------- Righe elenco articoli ---------- */

.elenco-articoli { padding: 0 var(--gutter) 30px; }
.riga-articolo-full {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
  color: inherit;
}
.riga-articolo-full[hidden] { display: none; }
.elenco-articoli .riga-articolo-full:last-child { border-bottom: 1px solid var(--line); }
.riga-articolo-full .meta-articolo { display: flex; gap: 12px; align-items: center; font-size: var(--fs-meta); color: var(--faint); flex-wrap: wrap; }
.riga-articolo-full .titolo-articolo { margin: 0 0 6px; font: 400 var(--fs-h4)/1.3 var(--serif); color: var(--ink); transition: color .18s; }
.riga-articolo-full .estratto { margin: 0; font-size: var(--fs-ui); line-height: 1.6; color: var(--body); max-width: 56em; }
.riga-articolo-full .freccia { display: none; }
.riga-articolo-full:hover .titolo-articolo { color: var(--green-dark); }

.riga-articolo-full .piede-riga { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 12px; }
.riga-articolo-full .piede-riga .tag-articolo { margin: 0; }
.riga-articolo-full .minuti { font-size: var(--fs-meta); color: var(--faint); }
.riga-articolo-full .titolo-articolo .segno-video { vertical-align: 0.15em; }
@media (min-width: 720px) {
  .riga-articolo-full { grid-template-columns: minmax(0, 1fr) 30px; align-items: start; gap: 28px; padding: 28px 0; }
  .riga-articolo-full .estratto { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .riga-articolo-full .freccia { display: block; text-align: right; padding-top: 4px; color: var(--faint); }
}
@media (max-width: 719px) {
  .filtri-categoria { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 20px; }
  .filtri-categoria::-webkit-scrollbar { display: none; }
  .filtro-pill { flex: 0 0 auto; padding: 7px 12px; font-size: var(--fs-meta); }
  .riga-articolo-full .titolo-articolo { font-size: 1.3125rem; }
  .riga-articolo-full .estratto { font-size: var(--fs-body); }
}

/* ---------- Breadcrumb ---------- */

.breadcrumb { padding: 20px var(--gutter) 0; font-size: var(--fs-meta); color: var(--faint); display: flex; gap: 8px; flex-wrap: wrap; }
.breadcrumb a { color: var(--faint); }
.breadcrumb a:hover { color: var(--green-dark); }

/* ---------- Testata articolo e pagina ---------- */

.testata-articolo, .testata-pagina { padding: 18px var(--gutter) clamp(22px, 4vw, 36px); }
.testata-articolo h1, .testata-pagina h1 {
  margin: 0 0 18px;
  max-width: 20em;
  font: 400 var(--fs-h1)/1.1 var(--serif);
  letter-spacing: -0.025em;
}
.sottotitolo-pagina { margin: 0 0 20px; max-width: 38em; font-size: var(--fs-lead); line-height: 1.55; color: var(--body); }

.byline { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--fs-meta); color: var(--faint); }
.byline > *:not(:last-child)::after { content: '·'; margin-left: 14px; color: rgba(27,31,29,.3); }
.byline a { color: var(--ink); }
.tag-testata { margin-top: 16px; }
.tag-testata li { padding: 0; }
.tag-testata li a { display: block; padding: 7px 11px; }
.tag-testata li:hover { background: rgba(27,31,29,.1); }

.testata-pagina.con-foto { display: grid; gap: 28px; }
.foto-profilo { margin: 0; border-radius: var(--radius-card); overflow: hidden; background: var(--sand); }
.foto-profilo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 25%; }
@media (min-width: 900px) {
  .testata-pagina.con-foto { grid-template-columns: minmax(0, 1fr) 380px; gap: 60px; align-items: end; }
  .foto-profilo img { aspect-ratio: 9 / 10; }
}

.numeri-profilo {
  margin: 8px var(--gutter) 0;
  background: var(--green);
  border-radius: var(--radius-card);
  padding: clamp(22px, 3vw, 34px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 28px;
}
.numeri-profilo > div { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid rgba(27,31,29,.22); padding-top: 14px; }
.numeri-profilo .valore { font: 400 clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem)/1 var(--serif); color: var(--ink); }
.numeri-profilo .etichetta { font-size: var(--fs-meta); line-height: 1.4; color: rgba(27,31,29,.85); }
@media (min-width: 900px) { .numeri-profilo { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.in-breve { margin: 20px var(--gutter) 0; background: var(--green); border-radius: var(--radius-card); padding: clamp(22px, 2.6vw, 30px); }
.in-breve .etichetta-piccola { font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: rgba(27,31,29,.72); margin-bottom: 10px; }
.in-breve p { margin: 0; max-width: 46em; font-size: var(--fs-lead); line-height: 1.55; color: var(--ink); }

.copertina-articolo { margin: 26px var(--gutter) 0; border-radius: var(--radius-card); overflow: hidden; }
.copertina-articolo img { width: 100%; max-height: 480px; object-fit: cover; }

/* ---------- Corpo a due colonne ---------- */

.corpo-articolo {
  padding: clamp(24px, 3.5vw, 44px) var(--gutter) clamp(34px, 5vw, 60px);
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
@media (min-width: 1000px) {
  .corpo-articolo { grid-template-columns: minmax(0, 1fr) 300px; gap: 64px; align-items: start; }
}

.testo-articolo { font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.125rem); line-height: 1.75; color: var(--body); max-width: var(--misura); min-width: 0; }
.testo-articolo h2 { margin: 2.2em 0 0.6em; font: 400 var(--fs-h3)/1.22 var(--serif); letter-spacing: -0.015em; scroll-margin-top: 24px; }
.testo-articolo h2:first-child { margin-top: 0; }
.testo-articolo > p:first-child { font-size: var(--fs-lead); line-height: 1.6; color: var(--ink); }
.testo-articolo h3 { margin: 1.6em 0 0.4em; font: 500 var(--fs-h4)/1.3 var(--serif); }
.testo-articolo p { margin: 0 0 1.1em; }
.testo-articolo ul, .testo-articolo ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.testo-articolo li { margin-bottom: 0.45em; padding-left: 0.2em; }
.testo-articolo li::marker { color: var(--green-dark); }
.testo-articolo strong { color: var(--ink); font-weight: 600; }
.testo-articolo a { color: var(--green-dark); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.testo-articolo figure { margin: 1.6em 0; }
.testo-articolo figure img, .testo-articolo > p img { border-radius: 14px; }
.testo-articolo div:empty { display: none; }

.testo-articolo blockquote {
  margin: 1.8em 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--green);
  font: italic 400 var(--fs-h4)/1.5 var(--serif);
  color: var(--ink);
}

.video-responsive { position: relative; aspect-ratio: 16 / 9; margin: 1.6em 0; border-radius: 16px; overflow: hidden; background: var(--ink); }
.video-responsive iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Tabelle */
.tabella-scorrevole { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; margin: 0.6em 0 1.8em; border-radius: 14px; border: 1px solid var(--line); background: #fbfaf7; }
.testo-articolo table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: var(--fs-ui); line-height: 1.5; }
.testo-articolo caption { position: sticky; left: 0; max-width: calc(100vw - 2 * var(--gutter)); text-align: left; font-size: var(--fs-meta); color: var(--faint); padding: 14px 16px 4px; caption-side: top; }
.testo-articolo th, .testo-articolo td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.testo-articolo th { font-weight: 600; color: var(--ink); background: var(--cream-2); }
.testo-articolo td:first-child { color: var(--ink); font-weight: 500; }
.testo-articolo tr:last-child td { border-bottom: none; }
.testo-articolo td small { font-size: 0.8125rem; color: var(--faint); font-weight: 400; }
.testo-articolo td a { white-space: nowrap; }

.passo-numerato { display: flex; gap: 16px; margin: 22px 0; align-items: flex-start; }
.passo-numerato .numero { font-size: var(--fs-meta); color: var(--faint); flex: 0 0 32px; padding-top: 4px; }
.passo-numerato div:last-child p { margin: 0; }

/* ---------- Barra laterale ---------- */

.barra-laterale { display: flex; flex-direction: column; gap: 18px; }
.box-toc, .box-cta-blu { border-radius: 18px; padding: 22px; }
.box-toc { background: var(--cream-2); }
.box-toc .etichetta-piccola { font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); margin-bottom: 12px; }
.box-toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.box-toc a { font-size: var(--fs-ui); line-height: 1.4; color: var(--body); }
.box-toc a:hover { color: var(--green-dark); }

.box-cta-blu { background: var(--blue); }
.box-cta-blu p { margin: 0 0 16px; font: 400 var(--fs-h4)/1.35 var(--serif); color: var(--ink); }
.box-cta-blu .pillola { background: var(--ink); color: var(--cream); }
.box-cta-blu .pillola:hover { background: #333a36; color: var(--cream); }

@media (min-width: 1000px) {
  .barra-laterale { position: sticky; top: 104px; }
}

/* ---------- FAQ dentro l'articolo ---------- */

.blocco-faq-articolo { padding: 0; margin-top: 2.4em; }
.blocco-faq-articolo > h2 { margin: 0 0 18px; font: 400 var(--fs-h3)/1.22 var(--serif); }
.testo-articolo .faq summary { font-size: var(--fs-h4); }

/* ---------- Autore ---------- */

.blocco-autore { margin-top: 3em; padding-top: 28px; border-top: 1px solid var(--line); display: flex; gap: 18px; align-items: flex-start; }
.blocco-autore img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.blocco-autore .nome-autore { font: 400 var(--fs-h4)/1.3 var(--serif); color: var(--ink); margin-bottom: 4px; }
.blocco-autore p { margin: 0 0 8px; font-size: var(--fs-ui); line-height: 1.6; }

/* ---------- Continua a leggere ---------- */

.continua-leggere { padding: clamp(64px, 8vw, 112px) var(--gutter) clamp(40px, 6vw, 72px); }
.continua-leggere h2 { margin: 0 0 28px; font: 400 var(--fs-h3)/1.2 var(--serif); }
.griglia-correlati { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 720px) { .griglia-correlati { grid-template-columns: repeat(3, 1fr); } }
.card-correlato { display: flex; flex-direction: column; padding: 22px; border-radius: 18px; background: var(--cream-2); color: inherit; transition: background-color .2s; }
.card-correlato:hover { background: var(--sand); }
.card-correlato .titolo-articolo { margin: 0 0 8px; font: 400 var(--fs-h4)/1.3 var(--serif); color: var(--ink); }
.card-correlato .estratto { font-size: var(--fs-ui); line-height: 1.55; color: var(--body); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card-correlato .tag-articolo { margin-top: auto; padding-top: 14px; }
.card-correlato:hover .titolo-articolo { color: var(--green-dark); }

/* ---------- Pagine patologia con riquadri ---------- */

.testata-patologia {
  padding: 18px var(--gutter) clamp(22px, 3vw, 30px);
  display: grid; gap: 26px; align-items: end;
}
.testata-patologia .etichetta-piccola { display: block; font-size: var(--fs-meta); color: var(--faint); margin-bottom: 14px; }
.testata-patologia h1 { margin: 0 0 18px; font: 400 var(--fs-h1)/1.08 var(--serif); letter-spacing: -0.025em; max-width: 12em; }
.testata-patologia .sottotitolo-pagina { margin-bottom: 26px; }
.azioni-testata { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.azioni-testata .firma { font-size: var(--fs-meta); color: var(--faint); }
.foto-testata { margin: 0; border-radius: var(--radius-card); overflow: hidden; background: var(--sand); }
.foto-testata img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
@media (min-width: 960px) {
  .testata-patologia { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 56px; }
  .foto-testata img { aspect-ratio: 5 / 4; }
}
.riquadri-patologia, .riquadri-articoli { padding-bottom: 8px; }
.riquadri-patologia .card-foto, .riquadri-articoli .card-foto { min-height: 300px; }

/* ---------- Contatti ---------- */

.griglia-riquadri { padding: 0 calc(var(--gutter) - 6px) 10px; display: grid; gap: 14px; }
@media (min-width: 900px) { .griglia-riquadri { grid-template-columns: 1.25fr 1fr; } }
.numero-grande {
  display: inline-flex; align-items: baseline; gap: 12px; margin: 18px 0 6px;
  font: 400 clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem)/1 var(--serif); letter-spacing: -0.03em; color: var(--ink);
}
.numero-grande span { font-size: .45em; }
.numero-grande:hover { color: var(--green-dark); }
.riquadro-telefono .nota-card { margin-bottom: 18px; }
.lista-spunte { list-style: none; margin: auto 0 0; padding: 0; }
.lista-spunte li {
  position: relative; padding: 13px 0 13px 30px; border-top: 1px solid rgba(27,31,29,.22);
  font-size: var(--fs-ui); line-height: 1.45; color: var(--ink);
}
.lista-spunte li::before {
  content: ''; position: absolute; left: 2px; top: 18px; width: 12px; height: 7px;
  border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(-45deg);
}
.sezione-sedi { padding-top: clamp(40px, 5vw, 64px); }
.griglia-sedi { display: grid; gap: 14px; }
@media (min-width: 640px) { .griglia-sedi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .griglia-sedi { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card-sede { padding: 24px 24px 22px; border-radius: 18px; background: var(--cream-2); display: flex; flex-direction: column; }
.card-sede .tipo-sede { align-self: flex-start; padding: 6px 11px; border-radius: 999px; background: rgba(63,185,111,.18); color: var(--green-dark); font: 600 0.75rem/1.2 var(--sans); margin-bottom: 14px; }
.card-sede h3 { margin: 0 0 6px; font: 400 var(--fs-h4)/1.25 var(--serif); color: var(--ink); }
.card-sede .indirizzo-sede { margin: 0 0 18px; font-size: var(--fs-ui); line-height: 1.5; color: var(--body); }
.azioni-sede { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }

.riquadri-patologia .card.blu .titolo-card, .riquadri-articoli .card.blu .titolo-card { margin-bottom: 0; padding-bottom: 0; }
.riquadri-patologia .card.blu .testo-riquadro, .riquadri-articoli .card.blu .testo-riquadro { margin-top: 16px; }
.riquadri-articoli .card.verde .titolo-card { margin-bottom: auto; padding-bottom: 28px; }
.riquadri-articoli .lista-link { margin-bottom: 0; }
.riquadri-patologia .card.verde .titolo-card { margin-bottom: 24px; }
.riquadri-articoli + .filtri-categoria { padding-top: 22px; }

/* Percorso in quattro passi */
.percorso h2 { margin-bottom: 24px; }
.passi-percorso { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 720px) { .passi-percorso { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .passi-percorso { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.passi-percorso li { padding: 26px 24px; border-radius: var(--radius-card); min-height: 230px; display: flex; flex-direction: column; color: var(--ink); }
.passi-percorso li.verde { background: var(--green); }
.passi-percorso li.blu { background: var(--blue); }
.passi-percorso li.sabbia { background: var(--sand); }
.passi-percorso li.verde-scuro { background: var(--green-dark); color: var(--cream); }
.passi-percorso .numero { font: 400 clamp(2rem, 1.6rem + 1.4vw, 2.75rem)/1 var(--serif); margin-bottom: auto; padding-bottom: 28px; opacity: .9; }
.passi-percorso h3 { margin: 0 0 8px; font: 400 var(--fs-h4)/1.25 var(--serif); }
.passi-percorso p { margin: 0; font-size: var(--fs-ui); line-height: 1.55; opacity: .9; }
.foto-testata img { object-position: 50% 28%; }

/* Riquadri colorati inseriti dall'editor */
.testo-articolo .riquadro-verde, .testo-articolo .riquadro-azzurro, .testo-articolo .riquadro-sabbia {
  margin: 28px 0; padding: clamp(18px, 2.4vw, 28px) clamp(20px, 2.6vw, 32px); border-radius: 18px; color: var(--ink);
}
.testo-articolo .riquadro-verde { background: var(--green); }
.testo-articolo .riquadro-azzurro { background: var(--blue); }
.testo-articolo .riquadro-sabbia { background: var(--sand); }
.testo-articolo .riquadro-verde > :first-child, .testo-articolo .riquadro-azzurro > :first-child, .testo-articolo .riquadro-sabbia > :first-child { margin-top: 0; }
.testo-articolo .riquadro-verde > :last-child, .testo-articolo .riquadro-azzurro > :last-child, .testo-articolo .riquadro-sabbia > :last-child { margin-bottom: 0; }
.testo-articolo .riquadro-verde a, .testo-articolo .riquadro-azzurro a { color: var(--ink); text-decoration: underline; }
.testo-articolo img { max-width: 100%; height: auto; border-radius: 16px; }

/* Tabelle di confronto: su telefono diventano schede, senza scorrere */
@media (max-width: 679px) {
  .tabella-scorrevole:has(.tabella-schede) { overflow: visible; border: 0; background: none; border-radius: 0; }
  .testo-articolo table.tabella-schede { min-width: 0; display: block; }
  .tabella-schede caption { display: block; padding: 0 0 10px; position: static; }
  .tabella-schede thead, .tabella-schede tr.riga-intestazione { display: none; }
  .tabella-schede tbody { display: block; }
  .tabella-schede tr { display: block; background: var(--cream-2); border-radius: 16px; padding: 6px 18px; margin-bottom: 12px; }
  .testo-articolo .tabella-schede td { display: block; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .testo-articolo .tabella-schede tr td:last-child { border-bottom: 0; }
  .tabella-schede td[data-label]::before { content: attr(data-label); display: block; font: 600 0.8125rem/1.3 var(--sans); color: var(--faint); margin-bottom: 3px; }
  .testo-articolo .tabella-schede td:first-child { font: 400 var(--fs-h4)/1.3 var(--serif); padding-top: 14px; }
  .tabella-schede td:first-child::before { display: none; }
  .testo-articolo .tabella-schede td a { white-space: normal; }
}