/* ============================================================
   Prima / Dopo — stili specifici della pagina.
   Caricati SOLO su template-prima-dopo.php (vedi functions.php).

   Rispetto al prototipo statico sono stati rimossi:
   - :root, *, body, .wrap, h1/h2/h3, .eyebrow, a  -> gia' in site.css
   - .brand                                        -> collideva con la nav condivisa
   - .foot                                         -> sostituito dal footer del sito
   Tutto il resto e' scoped sotto .pd-page.
   ============================================================ */

/* HERO */
.pd-head{background:var(--dark);color:#fff;position:relative;overflow:hidden;padding:60px 0 52px}
.pd-head::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:54px 54px}
.pd-head::after{content:"";position:absolute;inset:0;background:radial-gradient(90% 120% at 85% 0%,rgba(232,83,30,.4),transparent 55%)}
.pd-head .wrap{position:relative;z-index:1}
.pd-head .eyebrow{color:#fff}
.pd-head .eyebrow::before{background:#fff}
.pd-head h1{color:#fff;font-size:clamp(30px,5vw,50px);max-width:20ch;margin:16px 0 14px}
.pd-head h1 em{font-style:normal;color:var(--orange)}
.pd-head p{max-width:60ch;color:rgba(255,255,255,.78);font-size:16px}
.pd-back{display:inline-flex;align-items:center;gap:8px;margin-top:26px;font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--apricot)}
.pd-back:hover{color:#fff}

/* PROGETTO */
.pd-page{padding:64px 0 90px}
.pd-page .proj{margin-bottom:64px}
.pd-page .proj-head{display:flex;justify-content:space-between;align-items:baseline;gap:18px;flex-wrap:wrap;border-bottom:1px solid var(--mist);padding-bottom:16px;margin-bottom:14px}
.pd-page .proj-head h2{font-size:clamp(22px,3vw,30px)}
.pd-page .proj-head .loc{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;color:var(--ink);opacity:.65}
.pd-page .proj-note{font-size:15px;color:var(--ink);max-width:66ch;margin-bottom:30px}

/* SLIDER PRIMA / DOPO */
.pd-page .ba-cap{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-testo,#B23A12);margin:0 0 12px}
.pd-page .ba{--pos:50%;position:relative;aspect-ratio:3/2;overflow:hidden;border:1px solid var(--ink);background:var(--dark);touch-action:none;cursor:ew-resize;margin-bottom:34px;outline:none}
.pd-page .ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;-webkit-user-drag:none}
.pd-page .ba .after{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.pd-page .ba .divider{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;background:var(--orange);transform:translateX(-1px);pointer-events:none;box-shadow:0 0 0 1px rgba(255,255,255,.35)}
.pd-page .ba .handle{position:absolute;top:50%;left:var(--pos);transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;background:var(--orange);border:2px solid #fff;display:flex;align-items:center;justify-content:center;pointer-events:none;box-shadow:0 4px 18px rgba(30,31,31,.35)}
.pd-page .ba .handle svg{width:22px;height:22px;stroke:#fff;stroke-width:2;fill:none}
.pd-page .ba .lab{position:absolute;top:16px;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(30,31,31,.6);border:1px solid rgba(255,255,255,.3);padding:6px 11px;pointer-events:none;backdrop-filter:blur(3px)}
.pd-page .ba .lab-before{left:16px}
.pd-page .ba .lab-after{right:16px}
.pd-page .ba:focus-visible{box-shadow:0 0 0 3px rgba(232,83,30,.4)}
.pd-page .hint{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:var(--ink);opacity:.6;text-transform:uppercase;display:flex;align-items:center;gap:9px;margin:-18px 0 44px}
.pd-page .hint .d{width:7px;height:7px;background:var(--orange);border-radius:50%}

@media(max-width:560px){
  .pd-page .ba .handle{width:40px;height:40px}
}