/* ==================================================================
   I MODULI DEL SITO (25/10/2026) - tessere, pacchetto in primo piano,
   immagine o pubblicita', video, pastiglie, frecce delle file.

   Valgono sulla home e sulla pagina dei pacchetti, che si compongono
   tutte e due da Online › Sito (sito-home-moduli.ts): stavano in
   home.css, e /pacchetti non lo carica. Un posto solo, non due copie.
   Usano le variabili di stile.css / pacchetti.css (--inchiostro,
   --titolo-font, --fondo, --linea, --testo-tenue).
   ================================================================== */

/* il sottotitolo di una sezione */
.h-sotto{color:var(--testo-tenue);margin:-.1rem 0 1.4rem}

/* i tipi di viaggio: tessere alte con la foto */
.h-tessere{display:grid;grid-template-columns:repeat(5, 1fr);gap:.9rem}
.h-tessera{position:relative;aspect-ratio:3/4;border-radius:14px;overflow:hidden;color:#fff;text-decoration:none;background:var(--inchiostro)}
.h-tessera img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.h-tessera:hover img{transform:scale(1.05)}
.h-tessera::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom, rgba(0,0,0,0) 45%, rgba(0,0,0,.72))}
.h-tessera span{position:absolute;left:.8rem;right:.8rem;bottom:.9rem;z-index:1;text-align:center}
.h-tessera b{display:block;font-family:var(--titolo-font);font-size:1.25rem;line-height:1.15}
.h-tessera small{display:block;margin-top:.25rem;font-size:.8rem;opacity:.9}

/* LE TESSERE DI UN MODULO (25/10/2026): sempre della misura di cinque per
   riga, anche se sono tre - su tre colonne venivano alte mezza pagina */

/* IL PACCHETTO IN PRIMO PIANO (modulo, 25/10/2026): la foto grande a sinistra, il viaggio a destra */
.h-primo{display:grid;grid-template-columns:1.3fr 1fr;gap:1.6rem;align-items:center;text-decoration:none;color:var(--testo);
  border:1px solid var(--linea);border-radius:16px;overflow:hidden;background:#fff}
.h-primo-foto{display:block;aspect-ratio:16/10;background:var(--fondo);overflow:hidden}
.h-primo-foto img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.h-primo:hover .h-primo-foto img{transform:scale(1.03)}
.h-primo-testo{display:flex;flex-direction:column;align-items:flex-start;gap:.45rem;padding:1.4rem 1.6rem 1.4rem 0}
.h-primo-testo small{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--testo-tenue)}
.h-primo-testo > b{font-family:var(--titolo-font);font-size:clamp(1.4rem, 2.6vw, 1.9rem);line-height:1.15;color:var(--inchiostro)}
.h-primo-dati{font-size:.88rem;color:var(--testo-tenue)}
.h-primo-prezzo{font-size:.95rem}
.h-primo-prezzo b{font-size:1.2rem;color:var(--inchiostro)}
.h-primo-prezzo i{font-style:normal;color:var(--testo-tenue)}
.h-primo .h-bottone{margin-top:.5rem}

/* L'IMMAGINE O PUBBLICITA' (modulo, 25/10/2026): una foto larga, il testo in basso a sinistra */
.h-banner{position:relative;display:block;border-radius:16px;overflow:hidden;background:var(--fondo);color:#fff;text-decoration:none}
.h-banner img{display:block;width:100%;aspect-ratio:21/8;object-fit:cover;transition:transform .5s ease}
a.h-banner:hover img{transform:scale(1.02)}
.h-banner:has(.h-banner-testo)::after{content:"";position:absolute;inset:0;background:linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,0) 60%)}
.h-banner-testo{position:absolute;left:clamp(1rem, 3vw, 2rem);right:clamp(1rem, 3vw, 2rem);bottom:clamp(1rem, 3vw, 1.8rem);z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:.4rem}
.h-banner-testo b{font-family:var(--titolo-font);font-size:clamp(1.4rem, 3.2vw, 2.3rem);line-height:1.1;text-shadow:0 2px 18px rgba(0,0,0,.3)}
.h-banner-testo > span:not(.h-bottone){font-size:clamp(.92rem, 1.6vw, 1.05rem);max-width:40rem}
.h-banner .h-bottone{margin-top:.4rem;background:#fff;color:var(--inchiostro)}
/* un elemento senza link (un'immagine e basta) non e' un collegamento */
div.h-tessera, div.h-meta, div.scheda-viaggio{cursor:default}

/* I VIDEO AL POSTO DELLE FOTO (25/10/2026): stessa misura, stesso taglio.
   SOPRA LA CASELLA, NON DENTRO IL SUO CONTO: un video lasciato nel flusso
   portava la sua misura (1080x1920) e la casella veniva piu' alta delle
   altre; posato sopra, la casella resta quella della foto. */
.h-primo-foto{position:relative}
.h-tessera video, .h-meta video, .sv-foto video, .h-primo-foto video, .h-eroe-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.h-banner video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* trasparente finche' non gira: sotto si vede la foto */
.h-video{opacity:0;transition:opacity .6s ease, transform .5s ease}
.h-video.pronto{opacity:1}
/* e al passaggio del mouse si ingrandisce, come le foto */
.h-tessera video, .h-meta video, .sv-foto video, .h-banner video, .h-primo-foto video{transition:transform .5s ease}
.h-tessera:hover video, .scheda-viaggio:hover .sv-foto video{transform:scale(1.05)}
.h-meta:hover video{transform:scale(1.05)}
a.h-banner:hover video, .h-primo:hover .h-primo-foto video{transform:scale(1.02)}

.h-fila-giro{position:relative;margin-top:.8rem}

.h-tessera .sv-tipo, .h-meta .sv-tipo{z-index:2;font-style:normal}

.h-fila-freccia{position:absolute;top:38%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:0;background:#fff;box-shadow:var(--ombra);
  font-size:1.5rem;line-height:1;color:var(--inchiostro);cursor:pointer}
.h-fila-freccia.sx{left:-14px}
.h-fila-freccia.dx{right:-14px}
.h-fila-freccia[disabled]{opacity:0;pointer-events:none}

/* LE CARTE DELL'ELENCO DI /pacchetti (.pk-card): il video e la pastiglia come nelle altre */
.pk-card-foto video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .6s ease, transform .5s ease}
.pk-card:hover .pk-card-foto video{transform:scale(1.05)}
.pk-card-foto .sv-tipo{z-index:2}

/* NELLE PAGINE DELLE DESTINAZIONI E DEI TAG (sito/pacchetti/pagina.html):
   un modulo ha il margine e il titolo delle altre sezioni della pagina
   (.pg-pacchetti), non quelli della home, piu' larga */
.pk-main.pg .h-sezione{max-width:none;padding:0;margin:0 0 2rem}
.pk-main.pg .h-sezione h2, .pk-main.pg .h-testa-fila h2{font-size:1.35rem;margin:0 0 .8rem}
.pk-main.pg .h-testa-fila{margin-bottom:.2rem}

@media (max-width:1000px){
  .h-tessere{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:42%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .h-tessera{scroll-snap-align:start}
  .h-primo{grid-template-columns:1fr}
  .h-banner img{aspect-ratio:4/3}
  .h-primo-testo{padding:0 1.2rem 1.3rem}
}
@media (max-width:640px){
  .h-fila-freccia{display:none}
}

/* LA FOTO IN FONDO (26/10/2026): la fascia prima del piede, scelta in
   Online › Sito come quella in testa. Sulla home e' la sua (.h-fine-foto
   di home.css); sulle altre pagine, con una foto scelta, la sezione si
   disegna come quella della home (.chiusa-fine, dal server): titolo e
   pulsante al centro, la foto larga quanto la pagina, senza sfumatura,
   staccata dal pulsante */
html{overflow-x:clip}
.chiusa-fine{position:relative;text-align:center;margin-top:clamp(2.5rem, 6vw, 4rem);padding-top:1rem}
.chiusa-fine h2{margin:0 0 .7rem}
.chiusa-fine p{max-width:40rem;margin:0 auto 1.1rem;color:var(--testo-tenue)}
.chiusa-fine > a{position:relative;z-index:2;display:inline-flex}
/* larga quanto la finestra senza la barra di scorrimento (--barra la
   misura moduli.js): con 100vw pieni stava 7 px a sinistra */
.chiusa-foto{position:relative;height:clamp(220px, 32vw, 380px);width:calc(100vw - var(--barra, 0px));margin-left:calc(50% - (100vw - var(--barra, 0px)) / 2);
  margin-top:2rem;background:var(--fondo, #f3f1ec) center/cover no-repeat;overflow:hidden}
/* come sulla home, la foto tocca il piede */
main:has(.chiusa-fine:last-child) + .h-piede{margin-top:0}
.h-fine-foto{overflow:hidden}
.h-fine-foto .chiusa-video,.chiusa-foto .chiusa-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}