/* ============================================================
   VelvetTicino — Guida alla qualità e tutorial in linea
   ------------------------------------------------------------
   Veste guida.html e il pannello che vt-guida.js apre dentro la
   dashboard. Non tocca i fogli di Design: si aggiunge.

   Il registro è quello del resto del sito — oro, linee sottili,
   molto respiro — con due sole eccezioni volute: il verde e il
   rosso del «sì» e del «no». Qui la leggibilità immediata conta
   più dell'eleganza, perché è l'unico punto in cui la differenza
   fra due frasi molto simili deve saltare all'occhio.
   ============================================================ */

/* ---------- La pagina ---------- */
/* L'apertura sta al centro, sotto il titolo: e' il punto in cui si
   spiega che cosa si sta per leggere, e a bandiera sinistra sotto
   una testata a tutta larghezza restava sbilanciata. */
.vt-guida-intro{max-width:66ch;margin-inline:auto;text-align:center;}

.vt-guida-indice{
  margin:26px auto 8px;padding:18px 22px;
  border:1px solid var(--vt-line);border-radius:var(--vt-r-lg);
  background:var(--vt-surface);max-width:66ch;text-align:center;
}
.vt-guida-indice b{
  display:block;font-size:.80rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--vt-text-faint);margin-bottom:10px;
}
.vt-guida-indice ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:center;}
.vt-guida-indice a{color:var(--vt-gold);text-decoration:none;font-size:.96rem;}
.vt-guida-indice a:hover{color:var(--vt-white);}

.vt-guida-sez{margin-top:clamp(40px,6vw,72px);scroll-margin-top:100px;}
.vt-guida-sez .vt-h3{margin:10px 0 12px;}
.vt-guida-sez > .vt-copy{max-width:68ch;}

.vt-guida-criteri{
  display:grid;gap:clamp(16px,2vw,24px);margin-top:26px;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
}

.vt-guida-criterio{
  border:1px solid var(--vt-line);border-radius:var(--vt-r-lg);
  background:var(--vt-surface);overflow:hidden;
  display:flex;flex-direction:column;scroll-margin-top:100px;
}
.vt-guida-criterio.is-obbligatorio{border-color:var(--vt-line-gold);}

.vt-guida-esempio{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--vt-bg-2);}
.vt-guida-esempio img{width:100%;height:100%;object-fit:cover;display:block;}
/* Detto una volta sola, e detto: sono immagini generate, non
   fotografie di persone reali. */
.vt-guida-esempio-nota{
  position:absolute;left:0;right:0;bottom:0;padding:7px 12px;
  background:linear-gradient(transparent,rgba(10,10,10,.82));
  color:var(--vt-text-soft);font-size:.78rem;letter-spacing:.02em;
}

.vt-guida-corpo{padding:20px 22px 22px;display:flex;flex-direction:column;gap:9px;}
.vt-guida-corpo h3{
  font-family:var(--vt-display);font-weight:500;font-size:1.46rem;
  color:var(--vt-white);margin:0;line-height:1.25;
}
.vt-guida-bollo{
  align-self:flex-start;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--vt-gold);border:1px solid var(--vt-line-gold);border-radius:99px;
  padding:.28em .9em;
}

.vt-guida-si,.vt-guida-no,.vt-guida-perche{margin:0;font-size:.98rem;line-height:1.6;}
.vt-guida-si{color:var(--vt-text-soft);}
.vt-guida-no{color:var(--vt-text-soft);}
.vt-guida-si b,.vt-guida-no b{
  display:inline-block;min-width:2.1em;font-weight:600;font-size:.80rem;
  letter-spacing:.1em;text-transform:uppercase;
}
.vt-guida-si b{color:#8fbf8f;}
.vt-guida-no b{color:#d98a8a;}
.vt-guida-perche{
  color:var(--vt-text-mute);font-size:.92rem;font-style:italic;
  border-top:1px solid var(--vt-line-soft);padding-top:9px;margin-top:3px;
}

/* ---------- Il pulsante ---------- */
/* Sempre nello stesso posto, sempre visibile: un tutorial che non
   si sa come richiamare viene chiuso una volta e perso per sempre. */
.vt-guida-btn{
  position:fixed;right:clamp(14px,2vw,26px);bottom:clamp(14px,2vw,26px);z-index:1200;
  display:inline-flex;align-items:center;gap:9px;
  padding:.78em 1.25em;border-radius:99px;cursor:pointer;
  border:1px solid var(--vt-line-gold);background:rgba(18,16,14,.94);
  color:var(--vt-gold);font-family:var(--vt-sans);font-size:.88rem;
  letter-spacing:.04em;backdrop-filter:blur(8px);
  box-shadow:0 10px 30px rgba(0,0,0,.45);
  transition:.3s var(--vt-ease);
}
.vt-guida-btn:hover{background:rgba(201,164,92,.14);color:var(--vt-white);}
.vt-guida-btn.is-aperto{color:var(--vt-text-soft);border-color:var(--vt-line);}
.vt-guida-btn svg{width:16px;height:16px;}

/* ---------- Il pannello ---------- */
.vt-guida-panel{
  position:fixed;right:clamp(14px,2vw,26px);bottom:calc(clamp(14px,2vw,26px) + 62px);
  z-index:1201;width:min(390px,calc(100vw - 28px));
  max-height:min(76vh,700px);overflow-y:auto;
  border:1px solid var(--vt-line-gold);border-radius:var(--vt-r-lg);
  background:var(--vt-bg-2);box-shadow:0 24px 70px rgba(0,0,0,.6);
  animation:vtGuidaSu .35s var(--vt-ease);
}
@keyframes vtGuidaSu{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}

.vt-guida-panel-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 18px 10px;
}
.vt-guida-x{
  background:none;border:0;color:var(--vt-text-mute);font-size:1.5rem;
  line-height:1;cursor:pointer;padding:0 4px;
}
.vt-guida-x:hover{color:var(--vt-white);}

.vt-guida-panel-corpo{padding:0 18px 16px;display:flex;flex-direction:column;gap:9px;}
.vt-guida-panel-corpo h3{
  font-family:var(--vt-display);font-weight:500;font-size:1.46rem;
  color:var(--vt-white);margin:0;line-height:1.25;
}
.vt-guida-panel-corpo .vt-guida-esempio{aspect-ratio:16/10;border-radius:var(--vt-r-sm);}

.vt-guida-panel-piede{
  padding:14px 18px 18px;border-top:1px solid var(--vt-line);
  display:flex;flex-direction:column;gap:12px;
}
.vt-guida-avanz{height:2px;background:var(--vt-line);border-radius:2px;overflow:hidden;}
.vt-guida-avanz span{display:block;height:100%;background:var(--vt-gold);transition:width .35s var(--vt-ease);}
.vt-guida-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.vt-guida-conta{font-size:.82rem;color:var(--vt-text-faint);letter-spacing:.04em;}

/* Spegnerlo dev'essere facile quanto accenderlo: un'uscita
   nascosta trasforma un aiuto in un fastidio. */
.vt-guida-spegni{
  background:none;border:0;padding:0;cursor:pointer;text-align:left;
  color:var(--vt-text-mute);font-size:.84rem;text-decoration:underline;
  text-underline-offset:3px;font-family:var(--vt-sans);
}
.vt-guida-spegni:hover{color:var(--vt-text);}
.vt-guida-tutto{color:var(--vt-gold);font-size:.84rem;text-decoration:none;}
.vt-guida-tutto:hover{color:var(--vt-white);}

/* ---------- Il rimando dal rifiuto ---------- */
.vt-guida-rimando{
  display:inline-flex;align-items:center;gap:6px;margin-top:6px;
  font-size:.86rem;color:var(--vt-gold);text-decoration:none;
  border-bottom:1px solid var(--vt-line-gold);padding-bottom:1px;
}
.vt-guida-rimando:hover{color:var(--vt-white);}

/* ---------- Telefono ---------- */
@media (max-width:640px){
  .vt-guida-panel{
    right:8px;left:8px;width:auto;
    bottom:calc(clamp(14px,2vw,26px) + 58px);max-height:72vh;
  }
  .vt-guida-btn{font-size:.82rem;padding:.7em 1.05em;}
  .vt-guida-criteri{grid-template-columns:1fr;}
}

/* La guida si stampa: alcune inserzioniste la leggeranno accanto
   al fotografo, non davanti allo schermo. */
@media print{
  .vt-guida-btn,.vt-guida-panel,.vt-guida-indice{display:none!important;}
  .vt-guida-criterio{break-inside:avoid;page-break-inside:avoid;border:1px solid #bbb;}
  .vt-guida-corpo h3{color:#000;}
  .vt-guida-si b{color:#2e6b2e;}
  .vt-guida-no b{color:#8b2b2b;}
}

/* La testata è un'immagine a tutta larghezza: sotto, l'aria del
   contenitore standard si sommava a quella della sezione e lasciava
   un vuoto largo quanto mezzo schermo. Qui si dimezza — il respiro
   resta, l'attesa no. */
body[data-page="guida"] .vt-page-hero{padding-bottom:clamp(20px,3vw,40px);}
body[data-page="guida"] .vt-section--sm{padding-top:clamp(22px,3vw,44px);}