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

/* --------------------------------------------------------------- bento */
.gd-kpi-testo{font-size:clamp(24px,2.7vw,36px);letter-spacing:3px}
.gd-card-note{margin-top:14px}
.pn-giardini .pn-card--data .gd-card-note,
.pn-giardini .pn-card--green .gd-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-giardini .pn-sec--pin .gd-card-note{display:none}
}

/* Lo stile della voce di menu "Giardini" (che è anche una pagina) sta nel
   foglio condiviso piscine-nuova.css: .pn-drop-head — serve a tutte le
   pagine, non solo a questa. */

/* --------------------------------------------------------------- l'anima del luogo
   Il manifesto: una dichiarazione larga, poi tre capitoli con un piccolo
   filmato ciascuno. I filmati partono solo quando la sezione si vede
   (js/giardini.js): fermi, restano il loro fermo immagine.              */
.gd-anima{padding-block:clamp(88px,11vw,150px)}
.gd-manifesto{max-width:64ch}
.gd-claim{margin:18px 0 22px;font-size:clamp(30px,4.4vw,58px);line-height:1.12}
.gd-manifesto .pn-lead{max-width:56ch}

.gd-capitoli{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2.6vw,44px);margin-top:clamp(46px,6vw,88px)}
.gd-cap{margin:0}
.gd-cap-media{position:relative;overflow:hidden;aspect-ratio:3/4;background:#111}
.gd-cap-media video,.gd-cap-media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.4s var(--ease)}
.gd-cap:hover .gd-cap-media video{transform:scale(1.05)}
/* velatura in basso: il numero deve restare leggibile su qualsiasi fotogramma */
.gd-cap-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0) 48%,rgba(0,0,0,.62) 100%)}
.gd-cap-n{position:absolute;left:18px;bottom:12px;z-index:2;
  font-family:'Roboto',sans-serif;font-weight:100;font-size:clamp(34px,3.4vw,46px);
  line-height:1;letter-spacing:2px;color:var(--white)}
.gd-cap h3{margin:22px 0 10px}
.gd-cap .pn-body{font-size:15px}

@media (max-width:900px){
  .gd-capitoli{grid-template-columns:1fr;gap:34px}
  .gd-cap-media{aspect-ratio:16/10}
}

/* --------------------------------------------------------------- la frase
   Una riga sola, a tutta pagina, sopra la foto che scorre piano.        */
.gd-quote{position:relative;overflow:hidden;background:var(--black);
  min-height:76svh;display:grid;place-items:center;text-align:center;
  padding-block:clamp(70px,9vw,120px)}
.gd-quote-bg{position:absolute;inset:-10% 0;z-index:0;will-change:transform}
.gd-quote-bg img{width:100%;height:100%;object-fit:cover}
.gd-quote-bg::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.56)}
.gd-quote-in{position:relative;z-index:2;width:min(1000px,90vw)}
.gd-quote-in .pn-h2{font-size:clamp(28px,3.8vw,50px);line-height:1.2}
.gd-quote-p{margin:26px auto 0;max-width:50ch;color:rgba(255,255,255,.86)}

/* --------------------------------------------------------------- cantiere */
.gd-cantiere{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,26px);
  margin-top:clamp(30px,4vw,54px)}
.gd-cantiere figure{margin:0}
.gd-cantiere img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;
  transition:transform 1.1s var(--ease)}
.gd-cantiere figure:hover img{transform:scale(1.05)}
.gd-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}
.gd-cantiere figcaption .pn-mono{display:block;color:var(--green);margin-bottom:8px}

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