/* =========================================================================
   MARCA_86301_PORTFOLIO_COMPATTO (D640, 2 ottobre 2026)

   Giovanni: «nel portfolio qui troppo spazio vuoto, compatta le sezioni,
   poi icona fb va sotto, mettilo affiancato e magari riduci testo [...]
   i titoli preferiti, matrimonio ecc falli piu' grandi».

   FOGLIO A PARTE, caricato dopo tutti gli altri del portfolio: non tocca
   modern-theme.css, portfolio-pulsanti-81805.css ne' recensioni-carosello.css
   (che altri reparti stanno cambiando). Senza questo foglio la pagina torna
   quella di prima.

   Le regole sulla striscia delle recensioni partono da .pf-vetrina: quel
   foglio si carica DOPO questo, e a parita' di peso vincerebbe lui.
   ========================================================================= */

/* ---- 1. i contatti: una riga sola ------------------------------------
   La riga la mette in fila portfolio-compatto-86301.js, che misura: se i
   pulsanti col testo non ci stanno, prima stringe il testo (pf-c-stretti),
   poi lascia solo le icone (pf-c-icone). Senza il programma la riga va a
   capo come prima: niente si nasconde. */
.pf-contatti{margin-top:12px}
.pf-contatti a{min-height:44px;box-sizing:border-box}
.pf-contatti.pf-c-misurati{flex-wrap:nowrap;max-width:100%}
.pf-contatti.pf-c-misurati a{flex:0 0 auto}
.pf-contatti.pf-c-stretti{gap:6px}
.pf-contatti.pf-c-stretti a{padding:8px 11px;gap:5px}
.pf-contatti.pf-c-stretti a > span{font-size:11.5px}
.pf-contatti.pf-c-stretti svg{width:16px;height:16px}
/* Solo icone: cerchi da 44 punti, il nome resta per chi legge con la voce
   (aria-label sul collegamento, gia' scritto) e nel suggerimento (title). */
.pf-contatti.pf-c-icone{gap:10px}
.pf-contatti.pf-c-icone a{width:44px;height:44px;padding:0;justify-content:center;
  border-radius:50%}
.pf-contatti.pf-c-icone a > span{display:none}
.pf-contatti.pf-c-icone svg{width:19px;height:19px}

/* Il numero di telefono scritto sulla copertina: col dito si prendeva in
   20 punti di altezza. Diventa alto 44 senza spostare niente (il margine
   negativo restituisce lo spazio in piu'). */
.pf-banner-recapiti a{display:inline-flex;align-items:center;min-height:44px;
  padding-top:12px;padding-bottom:12px;margin-top:-12px;margin-bottom:-12px;box-sizing:border-box}

/* ---- 2. meno vuoto fra le sezioni ------------------------------------ */
.pf-vetrina .rcc{padding-top:10px;padding-bottom:8px}
.pf-corpo{padding-top:18px}
.pf-cerca{margin-bottom:14px}
.pf-filtri{gap:10px;margin-bottom:18px}
.pf-filtro-gruppo{gap:6px}
.pf-tab{margin-bottom:0}
.pf-tab button,
.pf-tab-categoria button{min-height:44px}
.pf-gruppo{margin-bottom:28px}

/* ---- 3. i titoli delle sezioni piu' grandi --------------------------- */
.pf-gruppo-titolo{font-size:24px;font-weight:600;letter-spacing:.01em;
  text-transform:none;line-height:1.2;color:var(--ink);
  margin:0 0 12px;padding-bottom:8px}

@media (max-width:640px){
  .pf-vetrina .rcc{padding:8px 18px 6px}
  .pf-corpo{padding-top:12px}
  .pf-cerca{margin-bottom:12px}
  .pf-filtri{gap:8px;margin-bottom:14px}
  .pf-gruppo{margin-bottom:22px}
  .pf-gruppo-titolo{font-size:21px;margin-bottom:10px}
  /* Con tante categorie la fila andava a capo su quattro o cinque righe
     (291 punti misurati, prima ancora di vedere una foto). Da telefono
     diventa UNA fila che si scorre col dito, come le righe delle gallerie
     qui sotto; la sfumatura a destra dice che ce ne sono altre. */
  .pf-tab-categoria{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;
    max-width:100%;padding:2px 24px 4px 2px;scroll-snap-type:x proximity;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
            mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
  .pf-tab-categoria::-webkit-scrollbar{display:none}
  .pf-tab-categoria button{flex:0 0 auto;scroll-snap-align:start;white-space:nowrap}
  .pf-filtro-gruppo:has(.pf-tab-categoria){align-items:stretch}
  .pf-filtro-gruppo:has(.pf-tab-categoria) .pf-filtro-titolo{align-self:center}
}