/* ============================================================
   positions.css — TEMPLATE PURO vivitoscana_puro
   Solo i WRAPPER delle posizioni-modulo del template puro.
   Lo stile dei contenuti (hero, card, intro, hub comune, footer,
   newsletter) vive in vivitoscana.css ed è riusato dai moduli.
   ============================================================ */

/* ---------- HEADER: ad ai lati del logo (riserva, solo desktop) ---------- */
.vt-header-row { position: relative; }
.vt-adside { display: none; }
@media (min-width: 1100px) {
  .vt-adside {
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: 50%; transform: translateY(-50%);
    max-width: 200px; max-height: 70px; overflow: hidden;
  }
  .vt-adside--l { left: 12px; }
  .vt-adside--r { right: 12px; }
}

/* ---------- HERO / SUBNAV / TOP: contenitori a tutta larghezza ---------- */
.vt-hero-wrap { display: block; }
.vt-subnav { background: rgba(250,247,240,.96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 30; }
/* FIX spaziatura voci: il contenuto del modulo è dentro .mod-custom, quindi il flex
   con gap va messo LÌ (su .wrap il gap agirebbe su un unico figlio = wrapper). */
.vt-subnav .wrap { display: flex; gap: 30px; overflow-x: auto; scrollbar-width: none; }
.vt-subnav .mod-custom { display: flex; flex-wrap: nowrap; gap: 30px; align-items: stretch; }
.vt-subnav .wrap::-webkit-scrollbar { display: none; }
.vt-subnav a { font: 500 14px/1 var(--sans); color: var(--ink-soft); padding: 16px 2px; white-space: nowrap; border-bottom: 2px solid transparent; text-decoration: none; }
.vt-subnav a:hover, .vt-subnav a.active { color: var(--olive-deep); border-bottom-color: var(--olive-deep); }
.vt-top { padding: 18px 0; }

/* ---------- MAIN a tutta larghezza (home, hub macroarea) ---------- */
/* IMPORTANTE: nel layout a tutta larghezza il <main> avvolge solo l'intro (le strisce
   stanno FUORI dal main). Il min-height:60vh ereditato da .vt-main lo gonfiava a mezzo
   schermo, creando il grande vuoto tra intro e prima striscia. Qui lo azzero alla radice. */
.vt-main--full { padding: 0; margin: 0; min-height: 0; }
.vt-main--full > .vt-zone { display: block; }

/* ---------- MAIN a 2 colonne (articolo, hub comune) ---------- */
.vt-main.has-aside { padding: 40px 0 60px; }
.vt-main.has-aside .vt-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 44px;
  align-items: start;
}
.vt-main.has-aside.has-left .vt-grid { grid-template-columns: 300px minmax(0, 1fr); }
.vt-center { min-width: 0; }
.vt-aside { display: flex; flex-direction: column; gap: 22px; position: sticky; top: 120px; }
.vt-center > .vt-zone + .vt-zone { margin-top: 40px; }
@media (max-width: 980px) {
  .vt-main.has-aside .vt-grid,
  .vt-main.has-aside.has-left .vt-grid { grid-template-columns: 1fr; gap: 36px; }
  .vt-aside { position: static; }
}

/* ---------- NEWSLETTER (posizione propria, fuori dal footer) ---------- */
.vt-newsletter-wrap { background: var(--cream-2); }
.vt-news { max-width: var(--wrap); margin: 0 auto; padding: 40px 28px; }
.vt-news__inner { display: grid; grid-template-columns: auto 1fr auto; gap: 30px; align-items: center; }
.vt-news h2 { color: var(--terracotta); font-size: 28px; font-weight: 500; }
.vt-news p { font-size: 14.5px; color: var(--ink-soft); margin-top: 8px; line-height: 1.6; }
.vt-news form { display: flex; gap: 10px; }
.vt-news input[type="email"] { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 13px 16px; font: 400 15px var(--sans); min-width: 220px; background: var(--white); }
.vt-news button { background: var(--olive); color: #fff; border: 0; border-radius: var(--radius-sm); padding: 0 22px; font: 600 15px var(--sans); cursor: pointer; }
.vt-news button:hover { background: var(--olive-deep); }
@media (max-width: 760px) {
  .vt-news__inner { grid-template-columns: 1fr; gap: 18px; }
  .vt-news input[type="email"] { flex: 1; min-width: 0; }
}

/* ---------- SPAZI PUBBLICITARI (policy COSA-COSTRUIRE.md §11) ----------
   Sempre dichiarati, sfondo che li stacca, etichetta "Pubblicità".  */
.vt-ad { background: var(--cream-2); border: 1px dashed var(--line); border-radius: var(--radius-sm); position: relative; }
.vt-ad .wrap { padding: 14px 28px; }
.vt-ad-label {
  display: block; font: 600 10px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-soft); opacity: .75; margin-bottom: 8px;
}
.vt-ad--leaderboard { margin: 0; border-left: 0; border-right: 0; border-radius: 0; text-align: center; }
.vt-ad--incontent { margin: 36px 0; text-align: center; }
.vt-ad--prefooter { margin: 0; border-left: 0; border-right: 0; border-radius: 0; text-align: center; }
.vt-ad--right { padding: 14px; text-align: center; }
.vt-ad--right .vt-ad-label { text-align: left; }

/* ============================================================
   STRISCE = CAROSELLO ORIZZONTALE (regola generale: tutte le strisce, tutte le pagine)
   Una sola riga che scorre lateralmente (swipe su mobile, trascinamento col mouse su
   desktop). Le card hanno larghezza fissa uniforme: NON vanno mai a capo e NON si
   rimpiccioliscono. Funziona anche nella colonna stretta dell'hub comune.
   Il link "Vedi tutti" (nelle .head dei moduli) porta alla griglia completa.
   ============================================================ */
.rail, .comune-rail, .vt-evgrid, .vt-themes {
  display: flex;
  flex-wrap: nowrap;
  gap: 22px;
  overflow-x: auto;
  overflow-y: hidden;
  min-width: 0;
  scroll-snap-type: none;   /* DESKTOP: niente snap — l'aggancio dava lo STRATTONE a fine animazione frecce. Su mobile è riattivato nel blocco @760 per lo swipe col dito. */
  scroll-padding-left: 0;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  padding-bottom: 12px;            /* spazio per la barra di scorrimento */
  scrollbar-width: thin;
  scrollbar-color: var(--olive) var(--cream-2);   /* indicatore di posizione PIÙ VISIBILE (Firefox): thumb olive su traccia crema */
  cursor: grab;
}
.rail.is-dragging, .comune-rail.is-dragging,
.vt-evgrid.is-dragging, .vt-themes.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.rail::-webkit-scrollbar, .comune-rail::-webkit-scrollbar,
.vt-evgrid::-webkit-scrollbar, .vt-themes::-webkit-scrollbar { height: 10px; }
.rail::-webkit-scrollbar-track, .comune-rail::-webkit-scrollbar-track,
.vt-evgrid::-webkit-scrollbar-track, .vt-themes::-webkit-scrollbar-track { background: var(--cream-2); border-radius: 8px; }
.rail::-webkit-scrollbar-thumb, .comune-rail::-webkit-scrollbar-thumb,
.vt-evgrid::-webkit-scrollbar-thumb, .vt-themes::-webkit-scrollbar-thumb { background: var(--olive); border-radius: 8px; }
.rail::-webkit-scrollbar-thumb:hover, .comune-rail::-webkit-scrollbar-thumb:hover,
.vt-evgrid::-webkit-scrollbar-thumb:hover, .vt-themes::-webkit-scrollbar-thumb:hover { background: var(--olive-deep); }

/* ogni card aggancia lo snap e si FERMA su card intera: a riposo non resta mai una mezza card */
.rail > *, .comune-rail > *, .vt-evgrid > *, .vt-themes > * { scroll-snap-align: start; }   /* tolto scroll-snap-stop: always (forzava 1 card per volta a scatto); l'aggancio "start" tiene comunque le card intere */
/* altezze pari nella riga + impaginazione interna a colonna */
.rail > .card, .comune-rail > .card { display: flex; flex-direction: column; align-self: stretch; }
.vt-evgrid > .vt-evcard, .vt-themes > .vt-theme { align-self: stretch; }

/* LARGHEZZA = una frazione esatta del contenitore: N card INTERE riempiono la riga.
   Così non resta mai una card tagliata al bordo destro e il "Vedi tutti" (a destra nella
   .head) resta allineato col bordo destro delle card. N (--per) varia per tipo e breakpoint.
   È sempre relativo alla larghezza del CONTENITORE: vale a piena larghezza (home) e nella
   colonna stretta (hub comune). */
.rail, .comune-rail, .vt-evgrid, .vt-themes { --gap: 22px; --per: 4; }
.rail > .card,
.vt-evgrid > .vt-evcard, .vt-themes > .vt-theme,
.comune-rail > .card.dest, .comune-rail > .card.exp {
  flex: 0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));
  width: auto;
}
.rail.five   { --per: 4; }
.rail.four   { --per: 4; }
.rail.three  { --per: 3; }
.vt-evgrid   { --per: 3; }
.vt-themes   { --per: 5; }
.comune-rail { --per: 3; }   /* hub comune: 3 card INTERE per riga su desktop (era 2). Mobile -> 1 sotto, vedi @760 */
@media (max-width: 1100px) {
  .rail.five, .rail.four { --per: 3; }
  .rail.three, .vt-evgrid { --per: 2; }
  .vt-themes { --per: 4; }
}
@media (max-width: 760px) {
  .rail.five, .rail.four, .rail.three { --per: 2; }
  .vt-evgrid { --per: 1; }
  .vt-themes { --per: 3; }
  /* MOBILE: snap riattivato per lo swipe col dito (sul desktop resta OFF, dove ci sono le frecce animate) */
  .rail, .comune-rail, .vt-evgrid, .vt-themes { scroll-snap-type: x proximity; }
  /* hub comune su mobile: card NON a piena larghezza, lascia sbucare ~10% della successiva
     (accenno discreto = invito a scorrere col dito). flex-basis batte un eventuale width. */
  .comune-rail > .card.dest, .comune-rail > .card.exp { flex: 0 0 90%; }
}
@media (max-width: 520px) {
  .rail.five, .rail.four, .rail.three, .vt-evgrid { --per: 1; }
  .vt-themes { --per: 2; }
}

/* FRECCE di scorrimento — iniettate via JS dentro un wrapper .vt-rail-wrap (solo desktop) */
.vt-rail-wrap { position: relative; }
.vt-rail-arrow {
  position: absolute; top: calc(50% - 6px); transform: translateY(-50%);
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--white); border: 1px solid var(--line);
  box-shadow: var(--shadow-sm); color: var(--ink);
  display: grid; place-items: center; cursor: pointer; z-index: 6;
  transition: background .2s;
}
.vt-rail-arrow:hover { background: var(--cream-2); }
.vt-rail-arrow[hidden] { display: none; }
.vt-rail-arrow--l { left: 4px; }
.vt-rail-arrow--r { right: 4px; }
.vt-rail-arrow svg { width: 20px; height: 20px; display: block; }
@media (max-width: 760px) { .vt-rail-arrow { display: none !important; } }

/* ============================================================
   ALLINEAMENTO PERFETTO DENTRO LA STRISCIA
   immagine identica · titolo stessa altezza · meta ancorato in fondo · card pari altezza
   ============================================================ */

/* AREA IMMAGINE: stessa proporzione e stessa altezza per tutte le card della striscia.
   width:100% + flex:0 0 auto + min-height:0 fanno RISPETTARE l'aspect-ratio dentro il flex
   (senza, alcune immagini si "allungavano": è il bug noto di aspect-ratio sui figli flex). */
.rail > .card .ph, .comune-rail > .card .ph { width: 100%; flex: 0 0 auto; align-self: stretch; min-height: 0; }
.dest .ph      { aspect-ratio: 4/3; }
.exp .ph       { aspect-ratio: 1/1; }
.story .ph     { aspect-ratio: 16/10; }
.itin-card .ph { aspect-ratio: 16/10; }

/* TITOLO: parte alla stessa altezza e riserva ~2 righe → anche le descrizioni iniziano allineate
   (è un minimo, non un massimo: non tronca mai). */
.dest .body h3, .story .body h3, .exp h3, .itin-card h3 { min-height: 2.4em; }

/* CORPO che cresce (card pari altezza) e META ancorata in FONDO (stessa linea in tutte le card) */
.dest .body, .story .body { display: flex; flex-direction: column; flex: 1 1 auto; }
.exp .meta, .itin-card .meta { margin-top: auto; padding-top: 10px; }

/* testo mai troncato */
.card h3, .card p, .chip, .vt-subnav a, .vt-evcard .ev-t { overflow: visible; text-overflow: clip; }
.chip { white-space: nowrap; }

@media (max-width: 560px) {
  .rail.five > .card, .rail.four > .card { width: 220px; }
  .rail.three > .card { width: 280px; }
  /* .comune-rail: niente width fissa qui — la larghezza mobile (80% + accenno) è gestita nel blocco @760 sopra */
  .vt-evgrid > .vt-evcard { width: 280px; }
}

/* ============================================================
   FASCIA INTRO sotto l'hero — più respiro (era schiacciata da una colonna "fantasma":
   la griglia prevedeva 3 colonne ma il modulo intro ne riempie 2).
   ============================================================ */
.intro .wrap {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
  gap: 50px;
  padding: 60px 28px;
  align-items: center;
}
.intro .lead { font-size: 18px; line-height: 1.8; color: var(--ink); }
.pillars { gap: 26px; }
@media (max-width: 860px) {
  .intro .wrap { grid-template-columns: 1fr; gap: 30px; padding: 44px 22px; }
}

/* Niente "buco" tra intro e prima striscia: la vista "featured" senza articoli lascia
   un box vuoto nel layout a tutta larghezza → nascondilo. E ritmo coerente per le strisce.
   (Solo nel layout a tutta larghezza: nelle pagine a 2 colonne il componente è il contenuto vero.) */
.vt-main--full .blog-featured,
.vt-main--full .com-content-category-blog { display: none; }
.vt-strip section.block { padding: 48px 0; }

/* ============================================================
   STRISCE-FASCIA INDIPENDENTI (posizioni striscia1..6)
   Ogni striscia è una banda a piena larghezza; lo sfondo lo dà il modulo
   (.block = crema, .block.alt = bianco), così sono governabili separatamente.
   ============================================================ */
.vt-strip { display: block; }

/* Eventi (card compatta con data) — il layout-riga lo dà il carosello qui sopra */
.vt-evcard { display: flex; gap: 14px; align-items: center; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow-sm); text-decoration: none; color: var(--ink); transition: .2s; }
.vt-evcard:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.vt-evdate { flex: 0 0 auto; width: 58px; text-align: center; background: var(--cream-2); border-radius: var(--radius-sm); padding: 9px 0; }
.vt-evdate .d { font-family: var(--serif); font-size: 22px; color: var(--terracotta); line-height: 1; display: block; }
.vt-evdate .m { font: 600 10px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin-top: 5px; display: block; }
.vt-evcard .ev-t { font-family: var(--serif); font-size: 17px; font-weight: 500; margin: 0 0 3px; }
.vt-evcard .ev-p { font-size: 12.5px; color: var(--ink-soft); }

/* Temi (tessere a icona) — il layout-riga lo dà il carosello qui sopra */
.vt-theme { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 14px; box-shadow: var(--shadow-sm); text-decoration: none; color: var(--ink); transition: .2s; }
.vt-theme:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.vt-theme .vt-ic-lg { width: 36px; height: 36px; color: var(--olive); }
.vt-theme .t-name { font-family: var(--serif); font-size: 16px; line-height: 1.2; }

/* Richiamo "Cammini" sotto gli itinerari */
.vt-cammini { margin-top: 22px; background: var(--cream-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.vt-cammini p { font-size: 14.5px; color: var(--ink); margin: 0; }
.vt-cammini strong { font-family: var(--serif); font-weight: 600; }

/* NB: .vt-skip e .vt-totop sono già definiti in vivitoscana.css (riusati). */