/* Vero INCI — Home CSS (autorevole, responsive, leggero)
   Scope: solo home (body.vi-home). */

:root{
  --vi-border: rgba(0,0,0,.10);
  --vi-soft: rgba(0,0,0,.03);
}

.vi-home main.container{
  max-width: 1100px;
}

/* HERO */
.vi-home main.container > header{
  text-align: center;
  margin: 1.2rem auto 1.6rem;
  padding: 1.25rem 1.1rem;
  border: 1px solid var(--vi-border);
  border-radius: 18px;
  background: var(--vi-soft);
}

.vi-home main.container > header .lead{
  max-width: 74ch;
  margin: .7rem auto 0;
  line-height: 1.65;
}

/* SEZIONI */
.vi-home main.container > section{
  max-width: 88ch;
  margin: 1.8rem auto;
}

.vi-home main.container > section h2{
  margin: 0 0 .6rem;
  line-height: 1.2;
}

.vi-home main.container > section p{
  line-height: 1.7;
}

.vi-home main.container > section ul,
.vi-home main.container > section ol{
  padding-left: 1.2rem;
}

.vi-home main.container > section li{
  margin: .38rem 0;
}

/* “Vai dritto…” come CTA (senza cambiare HTML) */
.vi-home main.container section[aria-labelledby="h2-start"] ul{
  list-style: none;
  padding-left: 0;
  display: grid;
  gap: .55rem;
  margin-top: .9rem;
}

@media (min-width: 720px){
  .vi-home main.container section[aria-labelledby="h2-start"] ul{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

.vi-home main.container section[aria-labelledby="h2-start"] li{
  margin: 0;
}

.vi-home main.container section[aria-labelledby="h2-start"] a{
  display: block;
  padding: .8rem .95rem;
  border: 1px solid var(--vi-border);
  border-radius: 16px;
  background: #fff;
  text-decoration: none;
  line-height: 1.35;
}

.vi-home main.container section[aria-labelledby="h2-start"] a:hover{
  background: var(--vi-soft);
}

/* Guide consigliate: un filo più leggibili */
.vi-home main.container section[aria-labelledby="h2-consigliati"] ul{
  margin-top: .8rem;
}

.vi-home main.container section[aria-labelledby="h2-consigliati"] li{
  padding: .65rem .8rem;
  border: 1px solid var(--vi-border);
  border-radius: 16px;
  background: #fff;
}

/* FAQ */
.vi-home main.container section[aria-labelledby="h2-faq"] details{
  margin: .7rem 0;
  padding: .8rem 1rem;
  border: 1px solid var(--vi-border);
  border-radius: 16px;
  background: #fff;
}

.vi-home main.container section[aria-labelledby="h2-faq"] summary{
  cursor: pointer;
  font-weight: 700;
}

.vi-home main.container section[aria-labelledby="h2-faq"] details[open]{
  background: var(--vi-soft);
}

.vi-home main.container section[aria-labelledby="h2-faq"] details p{
  margin: .65rem 0 0;
}

/* Nota aggiornamento */
.vi-home-updated{
  margin-top: 1rem;
  padding-top: .8rem;
  border-top: 1px dashed var(--vi-border);
  font-size: .95rem;
  opacity: .95;
}

/* Breadcrumb: compatta */
.vi-home .breadcrumb{
  margin-top: .9rem;
  margin-bottom: 1rem;
}

/* Mobile tighten */
@media (max-width: 420px){
  .vi-home main.container > header{
    padding: 1rem .9rem;
  }
  .vi-home main.container > section{
    margin: 1.4rem auto;
  }
}

/* Quick links: titolo + descrizione dentro la card */
.vi-home-quick a{
  display: block;
  padding: .85rem .95rem;
  border: 1px solid var(--vi-border);
  border-radius: 16px;
  background: #fff;
  text-decoration: none;
}
.vi-home-quick a:hover{ background: var(--vi-soft); }

.vi-home-quick-title{
  display: block;
  font-weight: 800;
  margin-bottom: .15rem;
}
.vi-home-quick-desc{
  display: block;
  opacity: .92;
  line-height: 1.45;
}

/* ===== Home polish (autorevolezza) ===== */

/* Un filo più ampia la colonna per desktop */
.vi-home main.container > section{
  max-width: 92ch;
}

/* Titoli più “decisi” */
.vi-home main.container > section h2{
  font-size: 1.2rem;
  letter-spacing: .01em;
}

@media (min-width: 900px){
  .vi-home main.container > section h2{
    font-size: 1.28rem;
  }
}

/* Quick cards: più CTA + focus accessibile */
.vi-home-quick a{
  transition: background .15s ease, transform .15s ease, border-color .15s ease;
  outline: none;
}
.vi-home-quick a:hover{
  transform: translateY(-1px);
  border-color: rgba(0,0,0,.18);
}
.vi-home-quick a:focus-visible{
  outline: 3px solid rgba(0,0,0,.25);
  outline-offset: 2px;
}

/* FAQ: freccia allineata e click più comodo */
.vi-home main.container section[aria-labelledby="h2-faq"] summary{
  list-style: none;
}
.vi-home main.container section[aria-labelledby="h2-faq"] summary::-webkit-details-marker{
  display: none;
}
.vi-home main.container section[aria-labelledby="h2-faq"] summary::before{
  content: "▸";
  display: inline-block;
  width: 1.2em;
  opacity: .8;
}
.vi-home main.container section[aria-labelledby="h2-faq"] details[open] summary::before{
  content: "▾";
}

/* Separazione morbida prima del banner adv (se presente) */
.vi-home .vi-sep{
  opacity: .35;
  margin: 2rem auto;
  max-width: 1100px;
}

/* ===== Fix layout: home troppo stretta ===== */
.vi-home main.container{
  width: min(1100px, calc(100% - 32px));
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}

@media (max-width: 480px){
  .vi-home main.container{
    width: calc(100% - 20px);
  }
}

/* ===== Layout: più largo senza allungare troppo le righe ===== */
@media (min-width: 900px){
  /* lascia respirare il layout */
  .vi-home main.container > section{
    max-width: 1100px;
  }

  /* ma i testi lunghi restano comodi da leggere */
  .vi-home main.container > section:not([aria-labelledby="h2-start"]):not([aria-labelledby="h2-faq"]):not([aria-labelledby="h2-consigliati"]) > p,
  .vi-home main.container > section:not([aria-labelledby="h2-start"]):not([aria-labelledby="h2-faq"]):not([aria-labelledby="h2-consigliati"]) > ul,
  .vi-home main.container > section:not([aria-labelledby="h2-start"]):not([aria-labelledby="h2-faq"]):not([aria-labelledby="h2-consigliati"]) > ol{
    max-width: 78ch;
  }

  /* un filo più “premium” la leggibilità */
  .vi-home main.container{
    font-size: 1.02rem;
  }
}

/* ===== Finishing: ritmo, gerarchia, compattezza ===== */

/* Hero: più “autorevole” */
.vi-home main.container > header{
  border-color: rgba(0,0,0,.14);
}
.vi-home main.container > header .page-title{
  font-size: 1.65rem;
  letter-spacing: .01em;
}
@media (min-width: 900px){
  .vi-home main.container > header .page-title{
    font-size: 1.85rem;
  }
}

/* Ritmo sezioni: un filo più di respiro */
.vi-home main.container > section{
  margin: 2.1rem auto;
}
@media (max-width: 480px){
  .vi-home main.container > section{
    margin: 1.6rem auto;
  }
}

/* Quick cards: testo leggermente più leggibile */
.vi-home-quick-desc{
  font-size: .98rem;
}

/* Guide consigliate: hover più chiaro */
.vi-home main.container section[aria-labelledby="h2-consigliati"] li{
  transition: background .15s ease, border-color .15s ease;
}
.vi-home main.container section[aria-labelledby="h2-consigliati"] li:hover{
  background: var(--vi-soft);
  border-color: rgba(0,0,0,.18);
}

/* FAQ: un filo più compatte */
.vi-home main.container section[aria-labelledby="h2-faq"] details{
  padding: .7rem .9rem;
}
.vi-home main.container section[aria-labelledby="h2-faq"] summary{
  font-weight: 800;
}

/* ===== Micro polish finale ===== */

/* Hero: più presenza, senza “sparare” */
.vi-home main.container > header{
  background: rgba(255,255,255,.9);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
.vi-home main.container > header .page-title{
  margin-bottom: .35rem;
}
.vi-home main.container > header .lead{
  opacity: .95;
}

/* Separatori soft tra sezioni “lunghe” */
.vi-home main.container > section[aria-labelledby="h2-fonti"],
.vi-home main.container > section[aria-labelledby="h2-consigliati"]{
  padding-top: .8rem;
  border-top: 1px solid rgba(0,0,0,.06);
}


/* ===== HOME: hard-center banner GHF (override robusto) ===== */
.vi-home .partner-spot.partner-ghf{
  /* centra il blocco anche se globalmente qualcuno forza layout strani */
  display: block;
  text-align: center;

  /* layout coerente con home container */
  width: min(1100px, calc(100% - 32px));
  margin: 1.2rem auto 2.2rem;
  padding: 0;

  /* riduce CLS: niente placeholder / content-visibility che “salta” */
  content-visibility: visible;
  contain: none;
}

@media (max-width: 480px){
  .vi-home .partner-spot.partner-ghf{
    width: calc(100% - 20px);
    margin: 1rem auto 1.8rem;
  }
}

/* se il CSS globale rende <a> block full-width, lo rendiamo “centrante” */
.vi-home .partner-spot.partner-ghf > a.partner-link{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  margin: 0 auto;
}

.vi-home .partner-spot.partner-ghf img{
  display: block;
  max-width: 100%;
  height: auto;
}

/* ===== HOME: Trust box (Affidabilità e trasparenza) ===== */
.vi-home .vi-home-trust{
  max-width: 78ch;
  margin: 1.2rem auto 1.4rem;
  padding: 1.05rem 1.1rem;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 6px 18px rgba(0,0,0,.05);
}

.vi-home .vi-home-trust h2{
  margin: 0 0 .55rem;
}

.vi-home .vi-home-trust h3{
  margin: .85rem 0 .35rem;
  font-size: 1rem;
}

.vi-home .vi-home-trust p{
  margin: .45rem 0;
}

.vi-home .vi-home-trust ul{
  margin: .25rem 0 .6rem 1.15rem;
}

.vi-home .vi-home-trust li{
  margin: .25rem 0;
}

@media (max-width: 480px){
  .vi-home .vi-home-trust{
    max-width: 92vw;
    padding: .95rem 1rem;
  }
}

/* ===== HOME: accent soft sui box (brand green) ===== */
.vi-home{ --vi-accent: var(--accent, #16a34a); }

/* Hero: un filo di “brand” senza sparare */
.vi-home main.container > header{
  border: 1px solid rgba(22,163,74,.14);
  background: linear-gradient(180deg, rgba(22,163,74,.06), rgba(255,255,255,.92));
}

/* Trust card: barra laterale per autorevolezza */
.vi-home .vi-home-trust{
  border-left: 6px solid rgba(22,163,74,.35);
}

/* FAQ: box leggermente “tintati” + barra a sinistra */
.vi-home main.container section[aria-labelledby="h2-faq"] details{
  border: 1px solid rgba(0,0,0,.10);
  border-left: 4px solid rgba(22,163,74,.22);
  background: rgba(22,163,74,.03);
}
.vi-home main.container section[aria-labelledby="h2-faq"] details[open]{
  background: rgba(22,163,74,.05);
}

/* Opzionale: se le card “Vai dritto…” sono cat-card (se non lo sono: nessun effetto) */
.vi-home .vi-grid.cats .cat-card{
  border: 1px solid rgba(22,163,74,.16);
  background: linear-gradient(180deg, rgba(22,163,74,.05), rgba(255,255,255,.94));
}
.vi-home .vi-grid.cats .cat-card:hover,
.vi-home .vi-grid.cats .cat-card:focus-visible{
  border-color: rgba(22,163,74,.35);
}

/* Dark mode: evita bianco “sporco” */
@media (prefers-color-scheme: dark){
  .vi-home main.container > header{
    border-color: rgba(34,197,94,.18);
    background: linear-gradient(180deg, rgba(34,197,94,.10), rgba(255,255,255,.04));
  }
  .vi-home .vi-home-trust{
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.10);
  }
  .vi-home main.container section[aria-labelledby="h2-faq"] details{
    border-color: rgba(255,255,255,.10);
    background: rgba(34,197,94,.06);
  }
  .vi-home main.container section[aria-labelledby="h2-faq"] details[open]{
    background: rgba(34,197,94,.09);
  }
}

/* ul/li reset + box full-height */
.vi-home .vi-home-quicklinks{
  list-style: none;
  padding: 0;
  margin: .6rem 0 1rem;
}

.vi-home .vi-home-quicklinks > li{
  margin: 0;
}

.vi-home .vi-home-quicklinks > li > a{
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* quicklinks: forza stessa altezza per box nella stessa riga */
.vi-home .vi-home-quicklinks{
  align-items: stretch;
}

.vi-home .vi-home-quicklinks > li{
  display: flex;
}

.vi-home .vi-home-quicklinks > li > a{
  flex: 1;
}

.vi-home .vi-home-quicklinks{
  grid-auto-rows: 1fr;
}

/* quicklinks: micro-accento colore (subtle) + focus visibile */
.vi-home .vi-home-quicklinks > li > a{
  background: rgba(34,197,94,.03);
  border-color: rgba(34,197,94,.16);
}

.vi-home .vi-home-quicklinks > li > a:hover{
  background: rgba(34,197,94,.06);
  border-color: rgba(34,197,94,.28);
}

.vi-home .vi-home-quicklinks > li > a:focus-visible{
  outline: 2px solid rgba(34,197,94,.45);
  outline-offset: 2px;
  background: rgba(34,197,94,.06);
}

@media (prefers-reduced-motion: reduce){
  .vi-home .vi-home-quicklinks > li > a{
    transition: none;
  }
}

/* quicklinks: card feel (molto leggero) */
.vi-home .vi-home-quicklinks > li > a{
  box-shadow: 0 6px 18px rgba(0,0,0,.04);
}

.vi-home .vi-home-quicklinks > li > a:hover{
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
}

@media (max-width: 560px){
  .vi-home .vi-home-quicklinks > li > a{
    padding: .95rem 1rem;
  }
  .vi-home .vi-home-quick-desc{
    line-height: 1.35;
  }
}

.vi-home .vi-home-trust ul{
  padding-left: 1.1rem;
}
.vi-home .vi-home-trust li{
  margin: .35rem 0;
}

/* GHF: label sopra banner (HOME) */
.vi-home p.vi-adv-label{
  width: min(1100px, calc(100% - 32px));
  margin: 0 auto .35rem;
  font-size: .85rem;
  opacity: .75;
  text-align: center;
}

@media (max-width: 480px){
  .vi-home p.vi-adv-label{
    width: calc(100% - 20px);
  }
}


/* GHF: nota affiliato (HOME) */
.vi-home .partner-spot.partner-ghf .partner-note{
  display: block;
  margin: .45rem auto 0;
  max-width: 68ch;
  padding: 0 1rem;
  text-align: center;
  font-size: .85rem;
  line-height: 1.35;
  opacity: .78;
}

@media (max-width: 560px){
  .vi-home .partner-spot.partner-ghf .partner-note{
    padding: 0 .75rem;
    font-size: .82rem;
  }
}