/* =====================================================================
   MARCA_77292_PORTFOLIO_CAROSELLO_CATEGORIE -- il layout "Carosello per
   categoria" della vetrina pubblica /portfolio (18 settembre 2026).

   Giovanni: «aggiungi una versione simile al quadrato classico dove su
   ogni riga c'e' una categoria che scorre lateralmente tipo infinito a
   destra e sinistra e mostra tutte le gallerie divise per tipologie».

   FOGLIO A PARTE, come portfolio-layout-vetrina.css: si carica SOLO
   quando questo layout e' scelto (vedi il <link> in
   portfolio_pubblico.html), e non tocca ne' quel foglio ne'
   portfolio-copertine.css -- stesso motivo di sempre, non pestare il
   lavoro di chi in questi giorni sta gia' toccando quei due file.

   NIENTE VARIABILI NUOVE: --ink/--ink-2/--surface/--accent/--line
   arrivano gia' caricate da modern-theme.css, tema chiaro e scuro
   vengono da soli.

   LA MECCANICA DELLO SCORRIMENTO STA IN JAVASCRIPT
   (portfolio_pubblico.html, avviaCarosello/scorriCarosello/
   raddoppiaPerCarosello): qui c'e' solo il DISEGNO -- una fila che
   scorre in orizzontale, con lo scrollbar nascosto (le frecce e il
   dito bastano) e le tessere di misura fissa perche' una fila che
   scorre non puo' avere colonne elastiche come una griglia.
   ===================================================================== */

.pf-copertine.pf-layout-carosello-categorie{
  display:flex;
  flex-wrap:nowrap;
  gap:14px;
  overflow-x:auto;
  overflow-y:hidden;
  padding-bottom:4px;   /* spazio per non tagliare l'ombra al passaggio del mouse */
  scroll-behavior:auto; /* lo scorrimento automatico muove scrollLeft a mano, a scatti
                            morbidi gia' suoi: "smooth" qui sopra farebbe a botte con
                            quello -- resta "smooth" solo sulle frecce, impostato in
                            linea da scrollBy() in portfolio_pubblico.html */
  /* Lo scrollbar si nasconde: la riga si scorre col dito, il mouse a
     trascinare la rotellina laterale, o le frecce -- una barra grigia
     sotto ogni riga di categoria sarebbe solo rumore visivo. */
  scrollbar-width:none;            /* Firefox */
  -ms-overflow-style:none;         /* vecchio Edge */
}
.pf-copertine.pf-layout-carosello-categorie::-webkit-scrollbar{
  display:none;                    /* Chrome, Safari */
}

/* Tessera di misura FISSA: una fila che scorre non puo' avere colonne
   elastiche come la griglia di "Quadrato classico". La proporzione
   (4:5, dalla regola base di portfolio-copertine.css) resta la stessa:
   cambia solo che qui la larghezza e' un numero, non una frazione della
   riga. */
.pf-copertine.pf-layout-carosello-categorie .pf-copertina{
  flex:0 0 auto;
  width:150px;
}
@media (min-width:640px){
  .pf-copertine.pf-layout-carosello-categorie{gap:var(--gal-respiro,20px)}
  .pf-copertine.pf-layout-carosello-categorie .pf-copertina{width:200px}
}
@media (min-width:980px){
  .pf-copertine.pf-layout-carosello-categorie .pf-copertina{width:230px}
}

/* Il titolo della categoria (pf-gruppo-titolo, gia' definito altrove)
   sta bene com'e': qui serve solo dare respiro alla riga sotto,
   cosi' le frecce (qui sotto) non sembrano appiccicate al titolo. */
.pf-gruppo:has(.pf-copertine.pf-layout-carosello-categorie){
  margin-bottom:8px;
}

/* Le frecce: una coppia per riga, sotto la fila (non sopra le tessere:
   coprire una foto con un pulsante e' sempre la scelta peggiore). Solo
   da schermo abbastanza largo -- richiesta di Giovanni: "frecce su
   computer, dito su telefono". */
.pf-carosello-frecce{
  display:none;
  justify-content:flex-end;
  gap:8px;
  margin:8px 0 4px;
}
@media (min-width:768px) and (hover:hover) and (pointer:fine){
  .pf-carosello-frecce{display:flex}
}
.pf-carosello-freccia{
  width:36px;
  height:36px;
  border-radius:999px;
  border:1px solid var(--line,#ddd);
  background:var(--surface,#fff);
  color:var(--ink,#222);
  font-size:20px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:border-color .15s, color .15s, background .15s;
}
.pf-carosello-freccia:hover{
  border-color:var(--accent,#0f8a4f);
  color:var(--accent,#0f8a4f);
}
.pf-carosello-freccia:focus-visible{
  outline:2px solid var(--accent,#0f8a4f);
  outline-offset:2px;
}

/* :has() non e' ovunque (Firefox piu' vecchi): senza, il margine sopra
   resta quello di sempre -- niente si rompe, solo un po' meno di
   respiro fra il titolo e la riga. Le frecce e lo scorrimento restano
   identici in ogni caso: questa e' solo una rifinitura estetica. */