/* ==========================================================================
   PAVIMENTAZIONI — solo le parti che le altre pagine nuovo stile non hanno.
   La base (tipografia del tema, header, bento, pin, nastro, footer) arriva
   da piscine-nuova.css, caricato prima. Prefisso .pv- per le novità.
   ========================================================================== */

/* --------------------------------------------------------------- hero foto
   Come in Vele: una foto sola che si allarga piano (lo zoom lo fa Motion,
   in js/pavimentazioni.js).                                              */
.pv-hero .pn-hero-stage{position:relative;height:100svh;min-height:560px}
.pv-hero-ph{position:absolute;inset:0;overflow:hidden;z-index:0;background:#000}
.pv-hero-ph img{width:100%;height:100%;object-fit:cover;will-change:transform}
.pv-hero .pn-hero-title{max-width:14ch}

/* --------------------------------------------------------------- bento
   Al posto dei numeri ci sono due parole: "senza fughe" e "drenante" sono
   il vero argomento di questa pavimentazione. Stessa scala dei contatori. */
.pv-kpi-testo{font-size:clamp(26px,3vw,40px);letter-spacing:3px}
.pv-card-note{margin-top:14px}
.pn-pav .pn-card--data .pv-card-note,
.pn-pav .pn-card--green .pv-card-note{color:rgba(255,255,255,.78);font-size:13.5px;line-height:1.6}
/* col bento appeso su schermi bassi la riga sparisce, invece di far
   tagliare la parola */
@media (min-width:1081px) and (max-height:1000px){
  .pn-pav .pn-sec--pin .pv-card-note{display:none}
}

/* --------------------------------------------------------------- dove si usa */
.pv-usi{list-style:none;margin:clamp(30px,4vw,54px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,34px)}
.pv-usi li{border-top:1px solid var(--line);padding-top:18px}
.pv-usi b{display:block;font-family:'Roboto',sans-serif;font-weight:100;
  font-size:clamp(20px,2vw,27px);line-height:1.1;letter-spacing:2.5px;
  text-transform:uppercase;color:var(--text)}
.pv-usi span{display:block;margin-top:12px;color:var(--muted);font-size:14.5px;line-height:1.7}

@media (max-width:900px){ .pv-usi{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .pv-usi{grid-template-columns:1fr} }

/* --------------------------------------------------------------- processo */
.pv-proc{list-style:none;margin:clamp(30px,4vw,54px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,36px)}
.pv-proc li{border-top:1px solid var(--line-dark);padding-top:18px}
.pv-proc figure{margin:0 0 18px;overflow:hidden;aspect-ratio:4/3;background:#111}
.pv-proc figure img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.pv-proc li:hover figure img{transform:scale(1.06)}
.pv-proc .pn-mono{display:block;color:var(--green);margin-bottom:10px}
.pv-proc .pn-body{margin-top:10px;font-size:14.5px}

@media (max-width:820px){ .pv-proc{grid-template-columns:1fr} }