/* ==========================================================================
   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,.gd-quote-bg video{width:100%;height:100%;object-fit:cover;display:block}
.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
   È un nastro come le realizzazioni: il margine sotto la testata lo dà
   già lo stage, quello di .pn-sec-head lo raddoppierebbe.               */
.gd-cant-head{margin-bottom:0}

/* --------------------------------------------------------------- terrazze
   Ci si arriva anche dal menu (giardini.html#terrazze): scroll-margin
   tiene il titolo sotto l'header fisso invece che nascosto dietro.     */
.gd-terr{scroll-margin-top:var(--hdr);padding-block:clamp(88px,11vw,150px)}
.gd-terr-kicker{display:block;margin:clamp(46px,6vw,80px) 0 22px;color:var(--green)}
.gd-terr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,44px)}
.gd-terr-item{margin:0;display:flex;flex-direction:column}
.gd-terr-media{position:relative;overflow:hidden;aspect-ratio:4/5;background:#efece6}
.gd-terr-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.4s var(--ease)}
.gd-terr-item:hover .gd-terr-media img{transform:scale(1.05)}
.gd-terr-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.55) 100%)}
.gd-terr-item h3{margin:22px 0 10px}
.gd-terr-item .pn-link{margin-top:16px}

.gd-terr-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,20px);
  margin-top:clamp(56px,7vw,100px)}
.gd-terr-gallery figure{margin:0;overflow:hidden;aspect-ratio:4/3;background:#efece6}
.gd-terr-gallery img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease)}
.gd-terr-gallery figure:hover img{transform:scale(1.04)}
.gd-terr-credit{margin:14px 0 0;color:var(--muted);font-size:10.5px}

@media (max-width:900px){
  .gd-terr-grid{grid-template-columns:1fr;gap:40px}
  .gd-terr-media{aspect-ratio:16/11}
  .gd-terr-gallery{grid-template-columns:1fr 1fr}
}