/* ============================================================
   VETRINE (25 set 2026)
   1. Immagini in cornice: una regola sola per tutto il sito
   2. Fondi: mesh leggera e foto colorate dalla mesh
   3. Home: apertura a manifesto (pp-h2-*)
   4. Home: sezioni nuove (pp-hs-*)
   5. Gallerie e scaffali: comandi
   Caricato su tutte le pagine dopo redesign-5.css (inc/sezioni.php).
   ============================================================ */

/* ---- 1. IMMAGINI IN CORNICE ----------------------------------------------
   app-1.css da' a OGNI <img> bordo nero 3px e angoli da 20px. Dentro un
   riquadro che ha gia' il suo bordo, l'immagine disegna una seconda cornice
   e lascia scoperti gli angoli (ritratti autori, 25 set 2026: gia' successo
   con le foto della redazione, corretto li' a mano). Regola unica: la
   cornice fa il bordo, l'immagine la riempie. Per un riquadro nuovo basta la
   classe .pp-riquadro sul contenitore. */
.pp-riquadro{ position:relative; overflow:hidden; border:3px solid var(--pp-ink,#242124); border-radius:var(--pp-r-ctrl,12px); background:var(--pp-cream,#F0E6C7); }
.pp-riquadro img,
.pp-aut-ritratto img,
.pp-member-photo img,
.pp-str-copertina img,
.pp-str-tavole img,
.pp-vetrina-media img,
.pp-h2-porta img{ border:0 !important; border-radius:0 !important; }
.pp-riquadro > img,.pp-riquadro > a > img,.pp-riquadro > picture > img,
.pp-aut-ritratto > img{ display:block; width:100%; height:100%; object-fit:cover; }
/* autoritratti e loghi: interi, non tagliati (come prima) */
.pp-aut-disegno > img{ object-fit:contain; }

/* ---- 2. FONDI ------------------------------------------------------------ */
/* Mesh del design system (01_BRAND/FONDI) a bassa opacita': si stira, non si ritaglia. */
.pp-fondo-mesh{ position:relative; isolation:isolate; }
.pp-fondo-mesh::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:url("../inc/asset/brand/mesh.jpg") 0 0/100% 100% no-repeat; opacity:.38; }
/* Foto in bianco e nero sotto un velo: --pp-foto:url(...) sulla sezione. */
.pp-fondo-foto{ position:relative; isolation:isolate; overflow:hidden; }
.pp-fondo-foto::before{ content:""; position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:var(--pp-foto) center/cover no-repeat; filter:grayscale(1) contrast(1.08); }
.pp-fondo-foto::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; }
/* scura: testo chiaro sulla foto velata d'inchiostro */
.pp-fondo-foto--scuro{ color:var(--pp-cream,#F0E6C7); background:var(--pp-ink,#242124); }
.pp-fondo-foto--scuro::after{ background:linear-gradient(90deg,rgba(36,33,36,.94) 0%,rgba(36,33,36,.82) 50%,rgba(36,33,36,.62) 100%); }
/* calda: la foto colorata dalla mesh (moltiplica), per le sezioni allegre */
.pp-fondo-foto--mesh{ background:var(--pp-cream,#F0E6C7); }
.pp-fondo-foto--mesh::after{ background:url("../inc/asset/brand/mesh.jpg") 0 0/100% 100% no-repeat; mix-blend-mode:multiply; opacity:.95; }

/* ---- 3. HOME: APERTURA A MANIFESTO -------------------------------------- */
.pp-h2{ position:relative; overflow:hidden; isolation:isolate; display:flex; flex-direction:column;
  min-height:min(100svh,960px); padding-top:calc(70px + clamp(24px,5vw,60px)); border-bottom:3px solid var(--pp-ink,#242124); }
.pp-h2-fondo{ position:absolute; inset:0; z-index:-1; overflow:hidden; background:linear-gradient(135deg,var(--pp-acid,#F9DB62),var(--pp-rosa,#FF85A5)); }
.pp-h2-fondo .pp-hero-slide{ filter:grayscale(1) contrast(1.08); }
.pp-h2-mesh{ position:absolute; inset:0; background:url("../inc/asset/brand/mesh.jpg") 0 0/100% 100% no-repeat; mix-blend-mode:multiply; opacity:.94; }
.pp-h2-carta{ position:absolute; inset:0; background:linear-gradient(90deg,rgba(240,230,199,.97) 0%,rgba(240,230,199,.92) 40%,rgba(240,230,199,.4) 70%,rgba(240,230,199,.08) 100%); }
.pp-h2-griglia{ position:relative; display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(20px,4vw,56px); align-items:center; flex:1 0 auto; padding-bottom:clamp(28px,4vw,48px); }
#site-content .pp-h2-kicker{ display:inline-flex; margin:0; max-width:none; padding:.35rem .9rem; background:var(--pp-cream,#F0E6C7); border:2px solid var(--pp-ink,#242124); border-radius:999px;
  font:700 .74rem/1.2 "Space Mono",monospace; text-transform:uppercase; letter-spacing:.08em; }
.pp-h2-titolo{ margin:clamp(16px,2.5vw,26px) 0 clamp(20px,3vw,32px); line-height:0; }
.pp-h2-titolo svg{ display:block; width:min(100%,680px); height:auto; filter:drop-shadow(5px 7px 0 #242124); overflow:visible; }
.pp-h2-nuvola{ position:relative; max-width:36rem; padding:18px 22px; background:#fff; border:3px solid var(--pp-ink,#242124); border-radius:28px; box-shadow:var(--pp-shadow,4px 6px 0 #242124); }
.pp-h2-nuvola::before{ content:""; position:absolute; left:52px; top:-16px; width:26px; height:26px; background:#fff; border-left:3px solid var(--pp-ink,#242124); border-top:3px solid var(--pp-ink,#242124); transform:rotate(45deg); }
#site-content .pp-h2-nuvola p{ margin:0; max-width:none; font-family:"Space Mono",monospace; font-size:1rem; line-height:1.6; color:var(--pp-ink,#242124); }
.pp-h2-azioni{ display:flex; flex-wrap:wrap; gap:14px; margin-top:26px; }
.pp-h2-btn,.pp-hs-btn{ display:inline-flex; align-items:center; gap:.5em; min-height:52px; padding:.8rem 1.4rem; border:3px solid var(--pp-ink,#242124); border-radius:var(--pp-r-ctrl,12px);
  background:#fff; color:var(--pp-ink,#242124); box-shadow:var(--pp-shadow,4px 6px 0 #242124); font:400 .92rem/1.1 "Archivo Black",sans-serif; text-transform:uppercase; text-decoration:none;
  transition:transform .15s ease,box-shadow .15s ease; }
.pp-h2-btn::after,.pp-hs-btn::after{ content:"→"; }
.pp-h2-btn:hover,.pp-hs-btn:hover{ transform:translate(-2px,-3px); box-shadow:6px 9px 0 var(--pp-ink,#242124); }
.pp-h2-btn:active,.pp-hs-btn:active{ transform:translate(4px,6px); box-shadow:0 0 0 var(--pp-ink,#242124); }
.pp-h2-btn--primo{ background:var(--pp-grad,linear-gradient(135deg,#F9DB62,#FF85A5)); }

.pp-h2-adesivi{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(10px,1.6vw,18px); justify-items:center; }
.pp-h2-adesivi li{ width:clamp(92px,10.5vw,138px); aspect-ratio:1; display:grid; place-content:center; gap:4px; padding:8px; text-align:center;
  border:3px solid var(--pp-ink,#242124); border-radius:50%; box-shadow:var(--pp-shadow,4px 6px 0 #242124); background:#fff; color:var(--pp-ink,#242124); transform:rotate(-6deg); }
.pp-h2-adesivi li:nth-child(6n+1){ background:var(--pp-acid,#F9DB62); transform:rotate(-8deg); }
.pp-h2-adesivi li:nth-child(6n+2){ background:var(--pp-rosa,#FF85A5); transform:rotate(5deg) translateY(22px); }
.pp-h2-adesivi li:nth-child(6n+3){ background:#fff; transform:rotate(-3deg); }
.pp-h2-adesivi li:nth-child(6n+4){ background:#FFE0B0; transform:rotate(7deg) translateY(10px); }
.pp-h2-adesivi li:nth-child(6n+5){ background:var(--pp-ink,#242124); color:var(--pp-acid,#F9DB62); transform:rotate(-5deg) translateY(30px); }
.pp-h2-adesivi li:nth-child(6n){ background:#fff; transform:rotate(4deg) translateY(8px); }
.pp-h2-adesivi b{ font:400 clamp(1.4rem,2.6vw,2.2rem)/1 "Archivo Black",sans-serif; letter-spacing:-.02em; }
.pp-h2-adesivi span{ font:700 clamp(.58rem,.8vw,.7rem)/1.15 "Space Mono",monospace; text-transform:uppercase; }

.pp-h2-porte{ position:relative; padding-bottom:clamp(24px,3vw,40px); }
.pp-h2-porte ul{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(12px,1.6vw,20px); }
.pp-h2-porta{ display:grid; grid-template-columns:60px minmax(0,1fr); column-gap:14px; row-gap:2px; align-items:center; height:100%; padding:14px 16px;
  background:#fff; border:3px solid var(--pp-ink,#242124); border-radius:var(--pp-r-card,20px); box-shadow:var(--pp-shadow,4px 6px 0 #242124);
  color:var(--pp-ink,#242124); text-decoration:none; transition:transform .15s ease,box-shadow .15s ease; }
.pp-h2-porta:hover{ transform:translate(-2px,-4px); box-shadow:6px 10px 0 var(--pp-ink,#242124); }
.pp-h2-porta img{ grid-row:1 / span 3; width:60px; height:52px; object-fit:contain; }
.pp-h2-porta-k{ font:700 .66rem/1.2 "Space Mono",monospace; text-transform:uppercase; letter-spacing:.06em; opacity:.75; }
.pp-h2-porta strong{ font:400 1.05rem/1.05 "Archivo Black",sans-serif; text-transform:uppercase; }
.pp-h2-porta-d{ font:400 .76rem/1.35 "Space Mono",monospace; }

@media (max-width:1023px){
  .pp-h2{ min-height:0; }
  .pp-h2-griglia{ grid-template-columns:1fr; }
  .pp-h2-carta{ background:linear-gradient(180deg,rgba(240,230,199,.95) 0%,rgba(240,230,199,.9) 55%,rgba(240,230,199,.72) 100%); }
  /* adesivi: un foglio intero, tutti e sei a vista (niente fila che scorre) */
  .pp-h2-adesivi{ grid-template-columns:repeat(6,96px); justify-content:start; gap:12px; padding:4px 0 34px; }
  .pp-h2-adesivi li{ width:96px; }
  .pp-h2-porte ul{ grid-template-columns:1fr 1fr; }
}
@media (max-width:700px){
  .pp-h2-adesivi{ grid-template-columns:repeat(3,96px); justify-content:space-evenly; row-gap:14px; }
}
@media (max-width:560px){
  .pp-h2-nuvola{ padding:14px 16px; border-radius:22px; }
  .pp-h2-nuvola::before{ left:40px; }
  #site-content .pp-h2-nuvola p{ font-size:.9rem; line-height:1.5; }
  .pp-h2-azioni{ flex-wrap:nowrap; margin-top:22px; }
  .pp-h2-btn{ padding:.75rem .9rem; font-size:.84rem; white-space:nowrap; }
  .pp-h2-porta{ grid-template-columns:1fr; padding:12px; }
  .pp-h2-porta img{ grid-row:auto; width:44px; height:38px; margin-bottom:6px; }
  .pp-h2-porta-d{ display:none; }
  .pp-h2-azioni{ gap:10px; }
  .pp-h2-btn{ flex:1 1 0; min-width:0; justify-content:center; }
  #site-content .pp-h2-kicker{ font-size:.64rem; padding:.32rem .7rem; letter-spacing:.06em; }
}

/* ---- 4. HOME: SEZIONI NUOVE ---------------------------------------------- */
.pp-hs{ padding-block:clamp(56px,8vw,112px); border-bottom:3px solid var(--pp-ink,#242124); }
.pp-hs-testa{ margin-bottom:clamp(24px,4vw,40px); }
.pp-hs-titolo{ margin:0; font:400 clamp(2rem,5vw,4rem)/.95 "Archivo Black",sans-serif; text-transform:uppercase; text-wrap:balance; }
#site-content .pp-hs-intro{ max-width:56ch; margin:14px 0 0; font-family:"Space Mono",monospace; font-size:1rem; line-height:1.6; }
.pp-hs-btn{ margin-top:22px; }

/* Dentro i libri: le tavole in fila, come pagine appoggiate sul tavolo */
.pp-hs-galleria{ display:flex; gap:clamp(18px,2.4vw,32px); overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:none;
  padding:10px max(1rem,calc((100vw - 1200px) / 2 + 1rem)) 30px; scroll-padding-inline:max(1rem,calc((100vw - 1200px) / 2 + 1rem)); }
.pp-hs-galleria::-webkit-scrollbar{ display:none; }
.pp-hs-galleria:focus-visible{ outline:3px solid var(--pp-viola,#702963); outline-offset:-3px; }
.pp-hs-galleria figure{ flex:0 0 auto; margin:0; scroll-snap-align:start; }
.pp-hs-galleria a{ display:block; color:var(--pp-ink,#242124); text-decoration:none; }
.pp-hs-galleria img{ display:block; width:auto; height:clamp(260px,32vw,420px); background:#fff;
  border:3px solid var(--pp-ink,#242124) !important; border-radius:6px !important; box-shadow:8px 12px 0 var(--pp-ink,#242124);
  transform:rotate(-1.2deg); transition:transform .25s ease; }
.pp-hs-galleria figure:nth-child(even) img{ transform:rotate(1deg); }
.pp-hs-galleria a:hover img{ transform:rotate(0) translateY(-4px); }
.pp-hs-galleria figcaption{ display:grid; gap:2px; margin-top:18px; }
.pp-hs-galleria figcaption b{ font:400 1.05rem/1.1 "Archivo Black",sans-serif; text-transform:uppercase; }
.pp-hs-galleria figcaption span{ font:700 .78rem "Space Mono",monospace; text-transform:uppercase; }

/* Dove ci trovi: foto del banchetto, velo d'inchiostro */
.pp-hs-app-griglia{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,5vw,64px); align-items:center; }
.pp-fondo-foto--scuro .prpr-kicker{ color:var(--pp-acid,#F9DB62); }
.pp-fondo-foto--scuro .pp-hs-titolo{ color:var(--pp-cream,#F0E6C7); }
#site-content .pp-fondo-foto--scuro .pp-hs-intro{ color:rgba(240,230,199,.9); }
.pp-fondo-foto--scuro .pp-hs-btn{ background:var(--pp-acid,#F9DB62); box-shadow:4px 6px 0 #000; }
.pp-hs-eventi{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.pp-hs-evento{ display:grid; grid-template-columns:72px minmax(0,1fr); gap:14px; align-items:center; padding:14px; background:#fff; color:var(--pp-ink,#242124);
  border:3px solid var(--pp-ink,#242124); border-radius:var(--pp-r-card,20px); box-shadow:4px 6px 0 #000; text-decoration:none; }
.pp-hs-bollo{ display:grid; place-content:center; aspect-ratio:1; text-align:center; background:var(--pp-acid,#F9DB62); border:3px solid var(--pp-ink,#242124); border-radius:12px; line-height:1; text-transform:uppercase; }
.pp-hs-bollo b{ font:400 1.3rem "Archivo Black",sans-serif; } .pp-hs-bollo span{ font:400 .8rem "Archivo Black",sans-serif; }
.pp-hs-evento strong{ display:block; font:400 1.05rem/1.1 "Archivo Black",sans-serif; text-transform:uppercase; }
.pp-hs-evento em{ display:block; font:400 .85rem "Space Mono",monospace; font-style:normal; margin-top:4px; }
.pp-hs-evento i{ display:inline-block; margin-top:6px; padding:.1rem .6rem; font:700 .7rem "Space Mono",monospace; font-style:normal; text-transform:uppercase; background:var(--pp-rosa,#FF85A5); border:2px solid var(--pp-ink,#242124); border-radius:999px; }
.pp-hs-app-vuoto{ padding:22px 24px; background:#fff; color:var(--pp-ink,#242124); border:3px solid var(--pp-ink,#242124); border-radius:var(--pp-r-card,20px); box-shadow:4px 6px 0 #000; }
#site-content .pp-hs-app-vuoto p{ margin:0 0 10px; max-width:none; }
#site-content .pp-hs-app-dove{ font:700 .75rem "Space Mono",monospace; text-transform:uppercase; letter-spacing:.06em; margin-top:14px; }
.pp-hs-anni{ list-style:none; margin:0; padding:0; display:grid; gap:8px; font:400 .9rem/1.45 "Space Mono",monospace; }
.pp-hs-anni b{ display:inline-block; min-width:3.2em; font:400 1rem "Archivo Black",sans-serif; }

/* PRPR Fest: la foto della festa colorata dalla mesh, la locandina e un box */
.pp-hs-fest-griglia{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(24px,5vw,64px); align-items:center; }
.pp-hs-locandina{ justify-self:center; display:block; width:min(100%,380px); transform:rotate(-3deg); transition:transform .3s ease; }
.pp-hs-locandina:hover{ transform:rotate(-1deg) translateY(-4px); }
.pp-hs-locandina img{ display:block; width:100%; height:auto; border:3px solid var(--pp-ink,#242124) !important; border-radius:8px !important; box-shadow:10px 15px 0 var(--pp-ink,#242124); }
.pp-hs-fest-box{ padding:clamp(22px,3vw,34px); background:#fff; border:3px solid var(--pp-ink,#242124); border-radius:var(--pp-r-card,20px); box-shadow:6px 9px 0 var(--pp-ink,#242124); }
#site-content .pp-hs-fest-data{ margin:16px 0 0; max-width:none; font:400 1rem "Space Mono",monospace; }
.pp-hs-fest-data strong{ font-family:"Archivo Black",sans-serif; font-weight:400; }

@media (max-width:860px){
  .pp-hs-app-griglia,.pp-hs-fest-griglia{ grid-template-columns:1fr; }
  .pp-hs-locandina{ width:min(70%,300px); }
}
@media (max-width:560px){
  /* le tavole doppie (pagine affiancate) restano dentro lo schermo */
  .pp-hs-galleria img{ height:clamp(200px,62vw,260px); }
}

/* ---- 5. COMANDI DI GALLERIE E SCAFFALI (script nel footer) ---------------- */
.pp-galleria-nav{ display:flex; align-items:center; justify-content:flex-end; gap:12px; max-width:1200px; margin:0 auto; padding:0 1rem; }
:is(#pp-peso, body) .pp-galleria-nav .pp-scaffale-btn{ width:52px; height:52px; min-height:52px; padding:0; display:grid; place-items:center;
  background:#fff; color:var(--pp-ink,#242124); border:3px solid var(--pp-ink,#242124); border-radius:var(--pp-r-ctrl,12px);
  box-shadow:2px 3px 0 var(--pp-ink,#242124); transform:none; cursor:pointer; }
:is(#pp-peso, body) .pp-galleria-nav .pp-scaffale-btn[aria-disabled="true"]{ opacity:.35; box-shadow:none; cursor:default; }
.pp-galleria-nav .pp-scaffale-conta{ font:700 .9rem "Space Mono",monospace; min-width:6ch; text-align:center; font-variant-numeric:tabular-nums; }

@media (prefers-reduced-motion:reduce){
  .pp-h2-btn,.pp-hs-btn,.pp-h2-porta,.pp-hs-galleria img,.pp-hs-locandina{ transition:none; }
}
@media (prefers-reduced-motion:no-preference){ .pp-hs-galleria{ scroll-behavior:smooth; } }