/* ==========================================================================
   WineFor VERSIONE 2 — PAGINE RISORSA (guide scaricabili)
   CSS condiviso da tutte le pagine risorsa-<slug>.html.
   Richiede home3h.css caricato PRIMA (variabili, reset, container,
   .container--stretto, bottoni, sezioni, .reveal, .badge-pill, .ph-img,
   .faq e gli stili del form Contact Form 7).

   Impaginazione ripresa dal modello Smartness: breadcrumb, hero con il form
   affiancato, blocco "cosa troverai", FAQ, CTA finale.
   ========================================================================== */

/* ------------------------------------------------------------------- HERO */
.ris-hero {
  background: linear-gradient(
    180deg,
    var(--hero-grad-3) 0%,
    var(--blu-tint) 100%
  );
  padding-top: 40px;
}

.ris-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 36px;
  font-size: 14px;
  color: var(--testo-muted);
}

.ris-breadcrumb a {
  color: var(--blu);
  transition: color var(--transition);
}

.ris-breadcrumb a:hover {
  color: var(--blu-dark);
  text-decoration: underline;
}

/* 2 colonne: contenuto a sinistra, form a destra. Sotto i 900px si impila
   e il form perde lo sticky (su mobile darebbe fastidio). */
.ris-hero-griglia {
  display: grid;
  gap: 40px;
  align-items: start;
}

@media (min-width: 900px) {
  .ris-hero-griglia {
    grid-template-columns: 1fr 400px;
    gap: 56px;
  }
}

.ris-hero-testo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.ris-titolo {
  font-size: clamp(30px, 4.4vw, 46px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.ris-sub {
  font-size: 18px;
  line-height: 1.65;
  color: var(--testo-muted);
}

.ris-copertina {
  width: 100%;
  max-width: 420px;
  margin: 8px 0 0;
}

.ris-copertina img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.ris-copertina figcaption {
  margin-top: 10px;
  font-size: 13px;
  color: var(--testo-muted);
}

/* ------------------------------------------------------- COLONNA DEL FORM */
@media (min-width: 900px) {
  .ris-form-colonna {
    position: sticky;
    top: 24px;
  }
}

.ris-form-card {
  padding: 28px 26px;
  background: var(--bianco);
  border: 1px solid var(--bordo);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.ris-form-titolo {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.ris-form-sub {
  margin: 6px 0 20px;
  font-size: 15px;
  color: var(--testo-muted);
}

/* nella colonna stretta i campi stanno sempre incolonnati, anche sopra i
   620px dove la griglia condivisa passerebbe a due colonne */
.ris-form-card .calc-form-griglia {
  grid-template-columns: 1fr;
}

.ris-form-card .wpcf7-submit,
.ris-form-card .mock-invia {
  width: 100%;
}

.ris-form-esito {
  padding: 16px 18px;
  font-size: 16px;
  text-align: center;
  color: var(--blu);
  background: var(--blu-tint);
  border-radius: var(--radius);
}

/* --------------------------------------------------------- COSA TROVERAI */
.ris-punti {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 20px;
  counter-reset: punto;
}

.ris-punti li {
  position: relative;
  padding: 26px 28px 26px 76px;
  background: var(--bianco);
  border: 1px solid var(--bordo);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  counter-increment: punto;
}

/* numerazione disegnata: dà ritmo senza ricorrere a icone-tool */
.ris-punti li::before {
  content: counter(punto);
  position: absolute;
  top: 26px;
  left: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ottone);
  color: var(--bianco);
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
}

.ris-punti h3 {
  margin-bottom: 8px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--blu);
}

.ris-punti p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--testo-muted);
}

/* ------------------------------------------------------------ RESPONSIVE */
@media (max-width: 768px) {
  .ris-form-card {
    padding: 22px 18px;
  }

  .ris-punti li {
    padding: 22px 20px 22px 20px;
  }

  .ris-punti li::before {
    position: static;
    margin-bottom: 12px;
  }
}

/* ==========================================================================
   GUIDA ENOTURISMO (risorsa-enoturismo.html)
   Solo aggiunte: nessuna regola qui sopra e' stata toccata, quindi le altre
   pagine risorsa (Instagram, Fiere, HoReCa) restano identiche. Pattern
   riusabile per le prossime guide con copertina a libro.
   ========================================================================== */

/* ------------------------------------------------- HERO: intro e copertina */
/* Mobile e tablet: [copertina | sottotitolo] e spunte nascoste, cosi' il modulo
   parte subito sotto il titolo (tra 900 e 1040px la colonna di testo e' troppo
   stretta per le spunte). Da 1040px: sottotitolo a tutta larghezza e sotto
   [copertina | spunte]. */
.ris-intro {
  display: grid;
  grid-template-columns: 96px 1fr;
  grid-template-areas: 'cover sub';
  gap: 16px;
  align-items: start;
  width: 100%;
}

.ris-intro .ris-sub {
  grid-area: sub;
  font-size: 16px;
  line-height: 1.55;
}

.ris-intro .ris-copertina {
  grid-area: cover;
  max-width: none;
  margin: 0;
}

/* copertina a libro: file trasparente davvero (canale alfa), niente tile bianca
   intorno — l'ombra è già dentro l'immagine, aggiungerne una in CSS raddoppierebbe
   l'effetto. Le proprietà restano definite (anche se vuote/di reset) per chiarezza
   su cosa NON fare qui, non solo per assenza di stile. */
.ris-copertina--libro {
  padding: 0;
  background: none;
  border-radius: 0;
  box-shadow: none;
}

.ris-copertina--libro img {
  border-radius: 0;
  box-shadow: none;
}

.ris-check {
  display: none;
  grid-area: check;
  gap: 14px;
}

.ris-check li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 17px;
  line-height: 1.45;
}

.ris-check li::before {
  content: '✓';
  flex: 0 0 auto;
  color: var(--ottone);
  font-weight: 800;
}

@media (min-width: 1040px) {
  .ris-intro {
    grid-template-columns: 250px 1fr;
    grid-template-areas:
      'sub sub'
      'cover check';
    gap: 28px 32px;
    align-items: center;
  }

  .ris-intro .ris-sub {
    font-size: 18px;
    line-height: 1.65;
  }

  .ris-check {
    display: grid;
  }
}

@media (max-width: 899px) {
  .ris-hero--guida {
    padding-top: 24px;
  }

  .ris-hero--guida .ris-breadcrumb {
    margin-bottom: 18px;
  }

  .ris-hero--guida .ris-hero-griglia {
    gap: 28px;
  }

  .ris-hero--guida .ris-hero-testo {
    gap: 14px;
  }
}

/* le CTA "Scarica la guida gratis" della pagina puntano alla card del modulo */
#modulo-guida {
  scroll-margin-top: 24px;
}

/* titoli a capo bilanciati (evitano "tre / numeri" su due righe) */
.ris-sezione-titolo-bilanciato .section-title {
  text-wrap: balance;
}

/* -------------------------------------------------- DOPO L'INVIO: download */
/* Stesso schema di .calc-grazie del calcolatore (stessi token), adattato alla
   card stretta del modulo. Nessun display sul contenitore: l'attributo hidden
   deve continuare a funzionare. */
.ris-grazie:focus-visible {
  outline: 2px solid var(--blu);
  outline-offset: 6px;
  border-radius: var(--radius);
}

.ris-grazie-titolo {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.ris-grazie-testo {
  margin-top: 8px;
  font-size: 16px;
  color: var(--testo-muted);
}

.ris-grazie-download {
  width: 100%;
  margin-top: 18px;
}

.ris-grazie-meta {
  margin-top: 10px;
  text-align: center;
  font-size: 14px;
  color: var(--testo-muted);
}

.ris-grazie-email {
  margin-top: 16px;
  font-size: 15px;
  color: var(--testo-muted);
  word-break: break-word;
}

.ris-grazie-email b {
  color: var(--blu);
}

.ris-grazie-nota {
  margin-top: 4px;
  font-size: 14px;
  color: var(--testo-muted);
}

.ris-grazie-demo {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--bordo);
}

.ris-grazie-demo p {
  margin-bottom: 12px;
  font-size: 15px;
  color: var(--testo);
}

.ris-grazie-demo .btn {
  width: 100%;
}

/* ------------------------------------------------------ FASCIA "IN NUMERI" */
/* Banda scura (.section--blu): tre cifre in ottone, nota sulla fonte e la frase
   che porta al resto della pagina. */
.ris-numeri {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.ris-numero {
  padding: 8px 32px;
  text-align: center;
}

.ris-numero + .ris-numero {
  border-left: 1px solid rgba(255, 255, 255, 0.16);
}

.ris-numero-cifra {
  font-size: clamp(44px, 5.4vw, 64px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--ottone);
}

.ris-numero-unita {
  font-size: 0.36em;
  font-weight: 700;
  letter-spacing: 0;
}

.ris-numero-testo {
  margin-top: 12px;
  font-size: 17px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
}

.ris-numeri-fonte {
  margin-top: 32px;
  text-align: center;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}

.ris-numeri-chiusura {
  max-width: 640px;
  margin: 36px auto 0;
  text-align: center;
  font-size: clamp(21px, 2.6vw, 28px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

@media (max-width: 720px) {
  .ris-numeri {
    grid-template-columns: 1fr;
  }

  .ris-numero {
    padding: 22px 0;
  }

  .ris-numero + .ris-numero {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
  }
}

/* --------------------------------------------- COSA TROVERAI: tre domande */
.ris-domande {
  margin-top: 28px;
  padding: 28px 30px;
  background: var(--bianco);
  border: 1px solid var(--bordo);
  border-left: 4px solid var(--ottone);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.ris-domande h3 {
  margin-bottom: 14px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--blu);
}

.ris-domande ol {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 24px;
  list-style: decimal;
  font-size: 17px;
  line-height: 1.5;
}

.ris-domande p {
  margin-top: 16px;
  font-size: 17px;
  font-weight: 600;
}

.ris-punti-cta {
  margin-top: 32px;
  text-align: center;
}

/* ------------------------------------------------------- CHI L'HA SCRITTA */
/* Intermezzo breve: meno aria delle sezioni piene, niente foto stock. */
.ris-autore-sezione {
  padding: 64px 0;
}

.ris-autore {
  max-width: 720px;
  margin: 0 auto;
  padding: 4px 0 4px 26px;
  border-left: 4px solid var(--ottone);
}

.ris-autore-occhiello {
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--blu);
}

.ris-autore-testo {
  font-size: 18px;
  line-height: 1.65;
}

/* -------------------------------------------------------------- CTA FINALE */
/* Guida = azione primaria (arancio); la demo e' secondaria (a contorno). */
.ris-cta-coppia {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 8px;
}

@media (max-width: 480px) {
  .ris-cta-coppia .btn {
    width: 100%;
  }
}