/* ==========================================================================
   VELE — solo le parti che Piscine e ICONIA non hanno.
   La base (tipografia del tema, header, bento, pin, nastro, footer) arriva
   da piscine-nuova.css, caricato prima. Prefisso .vl- per le novità.
   ========================================================================== */

/* --------------------------------------------------------------- hero foto
   Piscine ha i fotogrammi a scorrimento, ICONIA il video: qui una foto sola
   che si allarga piano (lo zoom lo fa Motion, in js/vele.js).             */
.vl-hero .pn-hero-stage{position:relative;height:100svh;min-height:560px}
.vl-hero-ph{position:absolute;inset:0;overflow:hidden;z-index:0;background:#000}
.vl-hero-ph img{width:100%;height:100%;object-fit:cover;will-change:transform}
.vl-hero .pn-hero-title{max-width:14ch}

/* --------------------------------------------------------------- bento
   Due card portano un numero e una riga di spiegazione: su schermo basso,
   col bento appeso, la riga sparisce invece di far tagliare il numero.   */
.vl-card-note{margin-top:14px}
.pn-vele .pn-card--data .vl-card-note,
.pn-vele .pn-card--green .vl-card-note{color:rgba(255,255,255,.78);font-size:13.5px;line-height:1.6}
/* il testo al posto del numero: stessa scala dei contatori */
.vl-kpi-testo{font-size:clamp(30px,3.4vw,44px);letter-spacing:3px}
@media (min-width:1081px) and (max-height:1000px){
  .pn-vele .pn-sec--pin .vl-card-note{display:none}
}

/* --------------------------------------------------------------- materiali */
.vl-mat{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,36px)}
.vl-card{margin:0}
.vl-card-fig{margin:0;overflow:hidden;aspect-ratio:4/3;background:#efece6}
.vl-card-fig img{width:100%;height:100%;object-fit:cover}
.vl-card-txt{padding-top:20px}
.vl-card-sub{color:var(--green)}
.vl-card .pn-h3{margin:6px 0 10px;font-size:clamp(19px,1.9vw,25px);letter-spacing:2.5px}

@media (max-width:900px){
  .vl-mat{grid-template-columns:1fr;gap:26px}
  /* impilate diventano righe: foto a sinistra, testo a destra */
  .vl-card{display:grid;grid-template-columns:36% 1fr;gap:18px;align-items:start}
  .vl-card-fig{aspect-ratio:1/1}
  .vl-card-txt{padding-top:0}
}

/* --------------------------------------------------------------- montaggio
   Cinque passi in fila: la foto sopra, il testo sotto. Su schermi stretti
   diventano due colonne e poi una sola.                                  */
.vl-mont{list-style:none;margin:clamp(30px,4vw,54px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(14px,1.8vw,26px)}
.vl-mont li{border-top:1px solid var(--line-dark);padding-top:18px}
.vl-mont figure{margin:0 0 18px;overflow:hidden;aspect-ratio:3/4;background:#111}
.vl-mont figure img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease)}
.vl-mont li:hover figure img{transform:scale(1.06)}
.vl-mont .pn-mono{display:block;color:var(--green);margin-bottom:10px}
.vl-mont .pn-h3{font-size:clamp(15px,1.5vw,19px)}
.vl-mont .pn-body{margin-top:10px;font-size:14.5px}

@media (max-width:1080px){ .vl-mont{grid-template-columns:repeat(3,1fr)} }
@media (max-width:700px){ .vl-mont{grid-template-columns:repeat(2,1fr)} }
@media (max-width:460px){ .vl-mont{grid-template-columns:1fr} }