/* Prima e dopo: il "dopo" sta sopra e si svela con un taglio verticale. */
.pd-elenco{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2.75rem,5vw,4.5rem) clamp(1.25rem,2.6vw,2.25rem);margin-block:2.5rem 3.5rem}
.pd-elenco .pd--grande{grid-column:1/-1}
/* le coppie grandi restano a tutta larghezza ma in formato panoramico: nessuno
   spazio vuoto di fianco e mai piu' alte della finestra (sul telefono restano 3:2) */
@media (min-width:900px){
  .pd-elenco:not(.pd-elenco--sola) .pd--grande .pd__cornice{aspect-ratio:2.1/1;max-height:calc(100svh - 9rem)}
  .pd-elenco:not(.pd-elenco--sola) .pd--grande .pd__img{object-position:50% 55%}
}
.pd-elenco--sola{display:block;margin-block:2rem 1rem}
/* coppia singola (home, Progetti): su schermo largo testo a sinistra e foto a
   destra, e la foto non supera l'altezza della finestra, cosi' titolo e
   confronto stanno in uno schermo. In RTL le colonne si scambiano da sole. */
@media (min-width:900px){
  .wp-block-group:has(> .pd-elenco--sola){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);
    column-gap:clamp(2rem,4vw,4rem);align-content:start}
  .wp-block-group:has(> .pd-elenco--sola) > *{grid-column:1;margin:0 0 1.25rem!important;max-width:none!important}
  .wp-block-group:has(> .pd-elenco--sola) > h2{margin-top:clamp(1rem,4vw,3rem)!important}
  .wp-block-group:has(> .pd-elenco--sola) > .pd-elenco--sola{grid-column:2;grid-row:1/span 9;margin:0!important}
  .pd-elenco--sola .pd{max-width:calc((100svh - 7rem) * 1.5);margin-inline-start:auto}
}
@media (max-width:820px){.pd-elenco{grid-template-columns:1fr}}

.pd{margin:0;--taglio:50%}
.pd__cornice{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--wp--preset--color--pietra-scura);
  cursor:ew-resize;touch-action:pan-y pinch-zoom;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.pd__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.pd__img--dopo{clip-path:inset(0 0 0 var(--taglio))}
.paghera-rtl .pd__img--dopo,[dir=rtl] .pd__img--dopo{clip-path:inset(0 var(--taglio) 0 0)}

/* la linea d'ottone e la maniglia */
.pd__linea{position:absolute;top:0;bottom:0;inset-inline-start:var(--taglio);width:1px;margin-inline-start:-.5px;
  background:var(--wp--preset--color--ottone-chiaro);box-shadow:0 0 0 1px rgba(21,32,26,.18);pointer-events:none}
.pd__maniglia{position:absolute;top:50%;left:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;
  border:1px solid var(--wp--preset--color--ottone-chiaro);background:rgba(21,32,26,.62);
  transition:transform .5s cubic-bezier(.16,1,.3,1),background-color .3s}
.pd__maniglia::before,.pd__maniglia::after{content:"";position:absolute;top:50%;width:8px;height:8px;margin-top:-4px;
  border:solid #F7F6F1;border-width:0 0 1.5px 1.5px}
.pd__maniglia::before{left:15px;transform:rotate(45deg)}
.pd__maniglia::after{right:15px;transform:rotate(-135deg)}
.pd__cornice:hover .pd__maniglia{transform:scale(1.08);background:rgba(21,32,26,.78)}
/* quando la coppia si apre, un solo anello d'ottone dalla maniglia: invita a provarla */
.pd__linea::after{content:"";position:absolute;top:50%;left:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;
  border:1px solid var(--wp--preset--color--ottone-chiaro);opacity:0;pointer-events:none}
.pd--invito .pd__linea::after{animation:pd-anello 1.6s cubic-bezier(.16,1,.3,1)}
@keyframes pd-anello{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(2.4)}}
.pd--solo-prima .pd__etichetta--dopo{transform:translateX(.5rem)}
.pd--solo-dopo .pd__etichetta--prima{transform:translateX(-.5rem)}
.pd:has(.pd__cursore:focus-visible) .pd__maniglia{outline:2px solid var(--wp--preset--color--ottone-chiaro);outline-offset:4px}

/* il cursore vero, per tastiera e lettori di schermo: nascosto alla vista, non al fuoco */
.pd__cursore{position:absolute;top:50%;inset-inline-start:var(--taglio);width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* etichette: si spengono quando il loro lato e' coperto */
.pd__etichetta{position:absolute;top:clamp(.75rem,2vw,1.25rem);padding:.4rem .75rem;border-radius:2px;
  font-size:.75rem;font-weight:500;letter-spacing:.06em;line-height:1;color:#F7F6F1;background:rgba(21,32,26,.72);
  transition:opacity .4s,transform .6s cubic-bezier(.16,1,.3,1)}
.pd__etichetta--prima{inset-inline-start:clamp(.75rem,2vw,1.25rem)}
.pd__etichetta--dopo{inset-inline-end:clamp(.75rem,2vw,1.25rem)}
.pd--solo-prima .pd__etichetta--dopo,.pd--solo-dopo .pd__etichetta--prima{opacity:0}
.paghera-rtl .pd--solo-prima .pd__etichetta--dopo{transform:translateX(-.5rem)}
.paghera-rtl .pd--solo-dopo .pd__etichetta--prima{transform:translateX(.5rem)}

.pd__didascalia{margin-top:.9rem;font-family:var(--wp--preset--font-family--cormorant);font-size:1.3125rem;line-height:1.25}
.pd--grande .pd__didascalia{font-size:1.5rem}
@media (max-width:560px){.pd__maniglia{width:46px;height:46px;margin:-23px 0 0 -23px}.pd__maniglia::before{left:12px}.pd__maniglia::after{right:12px}}
@media (prefers-reduced-motion:reduce){.pd__maniglia,.pd__etichetta,.pd__didascalia::before{transition:none}.pd--invito .pd__linea::after{animation:none}}