/* ==========================================================================
   PROGETTO & DESIGN — 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 .pg- per le novità.
   ========================================================================== */

/* --------------------------------------------------------------- hero foto */
.pg-hero .pn-hero-stage{position:relative;height:100svh;min-height:560px}
.pg-hero-ph{position:absolute;inset:0;overflow:hidden;z-index:0;background:#000}
.pg-hero-ph img{width:100%;height:100%;object-fit:cover;will-change:transform}
.pg-hero .pn-hero-title{max-width:16ch}

/* --------------------------------------------------------------- bento */
.pg-kpi-testo{font-size:clamp(26px,3vw,40px);letter-spacing:3px}
.pg-card-note{margin-top:14px}
.pn-prog .pn-card--data .pg-card-note,
.pn-prog .pn-card--green .pg-card-note{color:rgba(255,255,255,.78);font-size:13.5px;line-height:1.6}
@media (min-width:1081px) and (max-height:1000px){
  .pn-prog .pn-sec--pin .pg-card-note{display:none}
}

/* --------------------------------------------------------------- metodo
   Tre passi in fila e, sotto, una foto larga: il disegno a matita che è
   il risultato di quei tre passi.                                        */
.pg-metodo{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,40px);
  counter-reset:passo}
.pg-metodo li{border-top:1px solid var(--line);padding-top:20px}
.pg-metodo .pn-mono{display:block;color:var(--green);margin-bottom:12px}
.pg-metodo .pn-h3{font-size:clamp(17px,1.7vw,22px)}
.pg-metodo .pn-body{margin-top:12px}

.pg-metodo-fig{margin:clamp(34px,4.5vw,64px) 0 0;position:relative;overflow:hidden;
  aspect-ratio:21/9;background:#eee}
.pg-metodo-fig .pn-ph img{width:100%;height:100%;object-fit:cover}

@media (max-width:820px){
  .pg-metodo{grid-template-columns:1fr}
  .pg-metodo-fig{aspect-ratio:4/3}
}

/* --------------------------------------------------------------- cantiere
   Quattro momenti del cantiere: foto sopra, didascalia sotto.            */
.pg-cantiere{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,26px);
  margin-top:clamp(30px,4vw,54px)}
.pg-cantiere figure{margin:0}
.pg-cantiere img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;
  transition:transform 1.1s var(--ease)}
.pg-cantiere figure:hover img{transform:scale(1.05)}
.pg-cantiere figcaption{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-dark);
  color:var(--on-dark);font-size:14.5px;line-height:1.6}
.pg-cantiere figcaption .pn-mono{display:block;color:var(--green);margin-bottom:8px}

@media (max-width:1000px){ .pg-cantiere{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .pg-cantiere{grid-template-columns:1fr} }