/* trapianto-quando-non-ha-senso.v1.css
   Vero INCI – per-page skin
   bump: viTq30 (light-lock + TOC + cleanup dark auto)
*/

/* =========================================================
   Scope + tokens
   ========================================================= */
.vi-hair-page{
  --hair-accent: var(--vi-green-strong, #10b981);
  --hair-ink: var(--vi-ink, #0b1b14);
  --hair-muted: rgba(11, 27, 20, .72);
  --hair-border: rgba(15, 23, 42, .10);
  --hair-card: rgba(255,255,255,.92);
  --hair-shadow: 0 10px 24px rgba(0,0,0,.06);
}

/* =========================================================
   Light lock (sospende dark automatico del sistema per questa pagina)
   ========================================================= */
:is(body.vi-page-trapianto-qnhs, body.vi-page-trapianto_qnhs){
  color-scheme: light;
}

:is(body.vi-page-trapianto-qnhs, body.vi-page-trapianto_qnhs) .vi-hair-page{
  color: var(--hair-ink);
}

:is(body.vi-page-trapianto-qnhs, body.vi-page-trapianto_qnhs) .vi-hair-page p,
:is(body.vi-page-trapianto-qnhs, body.vi-page-trapianto_qnhs) .vi-hair-page li,
:is(body.vi-page-trapianto-qnhs, body.vi-page-trapianto_qnhs) .vi-hair-page summary,
:is(body.vi-page-trapianto-qnhs, body.vi-page-trapianto_qnhs) .vi-hair-page small{
  color: var(--hair-ink);
}

/* =========================================================
   Layout base
   ========================================================= */
.vi-hair-page{
  max-width: 980px;
  margin: 0 auto;
  padding: clamp(16px, 2.4vw, 28px);
}
.vi-hair-page .page-body{
  margin-top: 14px;
}
.vi-hair-page .page-body > section{
  margin-top: clamp(16px, 2.2vw, 22px);
  padding: 14px 14px 10px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.55);
}
.vi-hair-page .page-body > section h2{
  margin-top: 0;
  letter-spacing: -0.01em;
}
.vi-hair-page h1{
  line-height: 1.10;
  letter-spacing: -0.02em;
}
.vi-hair-page h2,
.vi-hair-page h3{
  scroll-margin-top: 96px;
}
.vi-hair-page p{ color: var(--hair-ink); }
.vi-hair-page p + ul,
.vi-hair-page p + ol{ margin-top: 8px; }

/* =========================================================
   HERO (card + hard reset layout)
   ========================================================= */
.vi-hair-page .vi-hair-hero{
  margin: 12px 0 14px;
  padding: clamp(16px, 2.5vw, 26px);
  border-radius: 18px;
  border: 1px solid rgba(16,185,129,.20);
  background: linear-gradient(180deg, rgba(16,185,129,.08), rgba(16,185,129,.02) 55%, transparent);
  box-shadow: var(--hair-shadow);
}

/* HARD RESET: se qualche CSS globale prova a fare grid/flex sul wrapper/inner, lo spegniamo qui */
:is(body.vi-page-trapianto-qnhs, body.vi-page-trapianto_qnhs) header.vi-hair-hero{
  display: block !important;
}
:is(body.vi-page-trapianto-qnhs, body.vi-page-trapianto_qnhs) header.vi-hair-hero .vi-hair-hero-inner{
  display: block !important;
  width: 100%;
  max-width: 100%;
}

/* =========================================================
   HERO GRID: desktop 50/50, mobile stack
   ========================================================= */
.vi-hair-page .qnhs-hero-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

@media (min-width: 980px){
  .vi-hair-page .qnhs-hero-grid{
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.vi-hair-page .qnhs-hero-left,
.vi-hair-page .qnhs-hero-right{
  min-width: 0;
}

/* Left column */
.vi-hair-page .vi-hair-warning{
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(16,185,129,.22);
  background: rgba(16,185,129,.06);
  color: rgba(11,27,20,.86);
  font-size: .98rem;
}

.vi-hair-page .qnhs-hero-highlights ul{
  margin: 10px 0 0;
  padding-left: 18px;
}
.vi-hair-page .qnhs-hero-highlights li{ margin: 6px 0; }

.vi-hair-page .lead{
  margin-top: 12px;
  color: rgba(11,27,20,.78);
  font-size: 1.06rem;
  line-height: 1.55;
}

/* Meta chips */
.vi-hair-page .qnhs-hero-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.vi-hair-page .chip{
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: .86rem;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.92);
  color: rgba(11,27,20,.86);
}
.vi-hair-page .chip-link{
  text-decoration: none;
  border-color: rgba(10,122,63,.28);
}

/* Share */
.vi-hair-page .vi-share-wrap{ margin-top: 10px; }
.vi-hair-page .vi-share-title{
  font-size: .92rem;
  font-weight: 700;
  opacity: .85;
  margin: 0 0 8px;
}
.vi-hair-page .vi-share{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.vi-hair-page .vi-share-btn{
  appearance: none;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.92);
  color: rgba(11,27,20,.88);
  border-radius: 999px;
  padding: 7px 11px;
  font-size: .86rem;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}
.vi-hair-page .vi-share-btn:hover,
.vi-hair-page .vi-share-btn:focus-visible{
  border-color: rgba(10,122,63,.45);
  background: rgba(10,122,63,.10);
  color: rgba(11,27,20,.96);
  outline: none;
}
.vi-hair-page .vi-share-wrap--bottom{
  margin: 18px 0 6px;
  padding-top: 10px;
  border-top: 1px dashed rgba(0,0,0,.10);
}

/* Checklist box */
.vi-hair-page .qnhs-hero-check{
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 14px;
  background: rgba(255,255,255,.72);
}
.vi-hair-page .qnhs-hero-check ul{
  margin: 8px 0 0;
  padding-left: 18px;
}
.vi-hair-page .qnhs-hero-check li{ margin: 6px 0; }
.vi-hair-page .qnhs-hero-check-note{ margin: 8px 0 0; }

/* Right column: figure + side card */
.vi-hair-page .qnhs-hero-right{
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-self: start;
}
.vi-hair-page .vi-hair-hero-figure{
  order: 1;
  margin: 0;
  float: none;
  border-radius: 16px;
  border: 1px solid var(--hair-border);
  background: rgba(255,255,255,.70);
  padding: 10px;
}
.vi-hair-page .vi-hair-hero-figure img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

.vi-hair-page .qnhs-hero-side{
  order: 2;
  margin: 0;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.92);
  border-radius: 14px;
  padding: 12px 12px 10px;
  color: var(--hair-ink);
}
.vi-hair-page .qnhs-hero-side-head{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
}
.vi-hair-page .qnhs-side-thumb{
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(10,122,63,.22);
  background: linear-gradient(180deg, rgba(10,122,63,.18), rgba(10,122,63,.08));
  box-shadow: 0 6px 14px rgba(0,0,0,.06);
  flex: 0 0 auto;
}
.vi-hair-page .qnhs-hero-side-title{
  font-weight: 800;
  font-size: .92rem;
  color: rgba(11,27,20,.90);
}
.vi-hair-page .qnhs-hero-side-links{
  list-style: none;
  padding: 0;
  margin: 0;
}
.vi-hair-page .qnhs-hero-side-links li{
  padding: 8px 2px;
  border-top: 1px dashed rgba(0,0,0,.10);
}
.vi-hair-page .qnhs-hero-side-links li:first-child{
  border-top: 0;
  padding-top: 2px;
}
.vi-hair-page .qnhs-hero-side-links a{
  font-weight: 700;
  text-decoration: none;
  color: var(--hair-accent);
}
.vi-hair-page .qnhs-hero-side-desc{
  margin-top: 2px;
  font-size: .86rem;
  color: rgba(11,27,20,.74);
  line-height: 1.35;
}

/* TOC box (riempie il “vuoto” sotto a destra) */
.vi-hair-page .vi-hair-toc{
  order: 3;
  margin: 0;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.92);
  border-radius: 14px;
  padding: 12px 12px 10px;
  box-shadow: 0 8px 18px rgba(0,0,0,.04);
}
.vi-hair-page .vi-hair-toc h3{
  margin: 0 0 8px;
  font-weight: 800;
  font-size: .95rem;
  color: rgba(11,27,20,.90);
}
.vi-hair-page .vi-hair-toc ul{
  margin: 0;
  padding-left: 18px;
}
.vi-hair-page .vi-hair-toc li{ margin: 6px 0; }
.vi-hair-page .vi-hair-toc a{
  text-decoration: none;
  font-weight: 700;
  color: var(--hair-accent);
}
.vi-hair-page .vi-hair-toc a:hover,
.vi-hair-page .vi-hair-toc a:focus-visible{
  text-decoration: underline;
  outline: none;
}
.vi-hair-page .vi-hair-toc-actions{
  margin-top: 10px;
}

/* Mobile spacing */
@media (max-width: 979px){
  .vi-hair-page .qnhs-hero-right{ margin-top: 12px; }
}

/* =========================================================
   Meta box (2 colonne)
   ========================================================= */
.vi-hair-page .vi-hair-meta{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px 14px;
  margin: 12px 0 6px;
  padding: 14px 14px 12px;
  border-radius: 16px;
  border: 1px solid var(--hair-border);
  background: var(--hair-card);
  box-shadow: 0 8px 18px rgba(0,0,0,.04);
  color: var(--hair-ink);
}
.vi-hair-page .vi-hair-meta-card{
  padding: 12px 12px 10px;
  border-radius: 14px;
  border: 1px dashed rgba(15, 23, 42, .14);
  background: rgba(255,255,255,.70);
}
.vi-hair-page .vi-hair-meta .label{
  margin: 0 0 6px;
  font-size: .88rem;
  color: rgba(11,27,20,.70);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.vi-hair-page .vi-hair-meta .role,
.vi-hair-page .vi-hair-meta .note{
  margin: 0;
  color: rgba(11,27,20,.80);
  line-height: 1.55;
}

/* =========================================================
   Mini-nav “pill”
   ========================================================= */
.vi-hair-page .vi-hair-nav{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 14px 0 18px;
  padding: 10px 0 14px;
}
@media (min-width: 900px){
  .vi-hair-page .vi-hair-nav{ justify-content: flex-start; }
}
.vi-hair-page .vi-hair-nav a{
  display: inline-flex;
  align-items: center;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.96);
  color: rgba(11,27,20,.92);
  text-decoration: none;
  font-size: .95rem;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.vi-hair-page .vi-hair-nav a:hover,
.vi-hair-page .vi-hair-nav a:focus-visible{
  background: rgba(10,122,63,.16);
  border-color: rgba(10,122,63,.45);
  color: rgba(11,27,20,.96);
  transform: translateY(-1px);
  outline: none;
}

/* =========================================================
   Note / Summary
   ========================================================= */
.vi-hair-page .vi-note-summary,
.vi-hair-page .vi-note{
  border-radius: 16px;
  border: 1px solid rgba(16,185,129,.20);
  background: rgba(16,185,129,.06);
  padding: 14px 14px 12px;
}
.vi-hair-page .vi-note-summary h2{ margin-top: 0; }

/* =========================================================
   FAQ (details/summary)
   ========================================================= */
.vi-hair-page .vi-hair-faq details{
  border-radius: 14px;
  border: 1px solid var(--hair-border);
  background: rgba(255,255,255,.75);
  padding: 0;
  overflow: hidden;
  margin-top: 10px;
}
.vi-hair-page .vi-hair-faq summary{
  cursor: pointer;
  padding: 12px 14px;
  font-weight: 650;
  list-style: none;
  color: var(--hair-ink);
}
.vi-hair-page .vi-hair-faq summary::-webkit-details-marker{ display:none; }
.vi-hair-page .vi-hair-faq details[open] summary{
  background: rgba(16,185,129,.06);
  border-bottom: 1px solid rgba(16,185,129,.18);
}
.vi-hair-page .vi-hair-faq details > *:not(summary){
  padding: 12px 14px 14px;
  color: rgba(11,27,20,.84);
}

/* =========================================================
   Fonti
   ========================================================= */
.vi-hair-page .vi-hair-sources{
  margin: 10px 0 0;
  padding-left: 1.2rem;
}
.vi-hair-page .vi-hair-sources li{ margin: 6px 0; }

/* =========================================================
   Partner banner
   ========================================================= */
:is(body.vi-page-trapianto-qnhs, body.vi-page-trapianto_qnhs) .partner-spot{
  margin: 16px auto 0;
  padding: 12px 14px 10px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
  background: linear-gradient(180deg, rgba(10,122,63,.08), rgba(10,122,63,.03));
  width: min(100%, 920px);
  display: flex;
  flex-direction: column;
  align-items: center;
}
:is(body.vi-page-trapianto-qnhs, body.vi-page-trapianto_qnhs) .partner-spot .partner-link{
  display: block;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
}
:is(body.vi-page-trapianto-qnhs, body.vi-page-trapianto_qnhs) .partner-spot img{
  display: block;
  width: 100%;
  height: auto;
}
:is(body.vi-page-trapianto-qnhs, body.vi-page-trapianto_qnhs) .partner-spot .partner-note{
  margin: 8px auto 0;
  max-width: 62ch;
  text-align: center;
  font-size: .90rem;
  line-height: 1.35;
  color: rgba(11,27,20,.86);
}

/* =========================================================
   Sticky CTA: solo mobile + spazio di sicurezza
   ========================================================= */
@media (max-width: 767.98px) {
  :is(body.vi-page-trapianto_qnhs, body.vi-page-trapianto-qnhs){ padding-bottom: 84px; }

  :is(body.vi-page-trapianto_qnhs, body.vi-page-trapianto-qnhs) .vi-hair-cta-sticky{
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 50;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,.10);
    background: rgba(255,255,255,.88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 14px 40px rgba(0,0,0,.14);
  }
}
@media (min-width: 768px) {
  :is(body.vi-page-trapianto_qnhs, body.vi-page-trapianto-qnhs) .vi-hair-cta-sticky{ display: none; }
}

/* =========================================================
   Responsive: meta 1 col su mobile
   ========================================================= */
@media (max-width: 880px){
  .vi-hair-page .vi-hair-meta{ grid-template-columns: 1fr; }
}

/* =========================================================
   Dark mode (manuale, pronto per futuro)
   Attivalo solo aggiungendo: <html class="vi-allow vi-dark">
   ========================================================= */
html.vi-dark :is(body.vi-page-trapianto-qnhs, body.vi-page-trapianto_qnhs) .vi-hair-page{
  --hair-border: rgba(255,255,255,.14);
  --hair-card: rgba(17, 24, 39, .65);
  --hair-shadow: 0 10px 26px rgba(0,0,0,.35);
  --hair-muted: rgba(235, 245, 240, .75);
  --hair-ink: rgba(235, 245, 240, .92);
}

html.vi-dark .vi-hair-page .page-body > section{
  background: rgba(0,0,0,.18);
  border-color: rgba(255,255,255,.10);
}

html.vi-dark .vi-hair-page .qnhs-hero-side,
html.vi-dark .vi-hair-page .vi-hair-toc,
html.vi-dark .vi-hair-page .vi-hair-meta-card{
  background: rgba(0,0,0,.22);
  border-color: rgba(255,255,255,.12);
}

html.vi-dark .vi-hair-page .qnhs-hero-side-title{ color: rgba(255,255,255,.90); }
html.vi-dark .vi-hair-page .qnhs-hero-side-desc{ color: rgba(255,255,255,.78); }

html.vi-dark .vi-hair-page .vi-share-btn{
  background: rgba(0,0,0,.22);
  border-color: rgba(255,255,255,.12);
  color: rgba(255,255,255,.86);
}
html.vi-dark .vi-hair-page .vi-share-btn:hover,
html.vi-dark .vi-hair-page .vi-share-btn:focus-visible{
  background: rgba(10,122,63,.26);
  border-color: rgba(10,122,63,.60);
  color: rgba(255,255,255,.96);
}

html.vi-dark :is(body.vi-page-trapianto-qnhs, body.vi-page-trapianto_qnhs) .partner-spot .partner-note{
  color: rgba(255,255,255,.82);
}