@charset "UTF-8";
/* ==========================================================================
   C&C SRL High-Tech — r-evolution.css
   Catalogo degli ambiti della divisione R-Evolution
   (page-templates/template-r-evolution-ambito.php).

   Dipende da base.css, che possiede i token di design: qui non compare un
   solo valore esadecimale, ogni colore arriva da una custom property --cc-*.

   Blocchi definiti (interfaccia concordata — non rinominare):
     .cc-catalog        .cc-catalog__item   .cc-catalog__media  .cc-catalog__img
                        .cc-catalog__name   .cc-catalog__tag
                        .cc-catalog__specs  .cc-catalog__spec
                        .cc-catalog__code   .cc-catalog__doc
     .cc-catalog-group  .cc-catalog-group__intro  .cc-catalog-group__note
     .cc-lab            .cc-lab__partner    .cc-lab__logo       .cc-lab__text
                        .cc-lab__lists      .cc-lab__list       .cc-lab__list-title
                        .cc-lab__gallery    .cc-lab__shot

   Colonne della griglia catalogo — media query esplicite ai breakpoint del
   CONTRACT, perché repeat(auto-fill, minmax()) non garantisce i conteggi:
     > 1100px  3 colonne
     900–1100  2 colonne
     640–900   2 colonne
     < 640px   1 colonna

   Contenuti
     1. Gruppo di catalogo   .cc-catalog-group*
     2. Griglia              .cc-catalog
     3. Scheda prodotto      .cc-catalog__item e figli
     4. Laboratorio Analisi  .cc-lab*
     5. Responsive           1100px · 900px · 640px
     6. Reduced motion
   ========================================================================== */


/* ==========================================================================
   1. GRUPPO DI CATALOGO
   Un ambito contiene uno o più gruppi ("Ultrafiltrazione", "Osmosi inversa",
   "Bombole CO₂"…). Il titolo del gruppo resta un heading: lo veste base.css.
   ========================================================================== */

.cc-catalog-group + .cc-catalog-group{
  margin-top: 64px;
}

/* Spazio sotto al titolo del gruppo, qualunque livello usi il template. */
.cc-catalog-group > h2,
.cc-catalog-group > h3,
.cc-catalog-group > h4{
  margin-bottom: 18px;
}

.cc-catalog-group__intro{
  max-width: 760px;
  margin: 0 0 30px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--cc-text-muted);
}

/*
 * Avvertenza del gruppo (es. l'acqua addolcita non è consigliabile da bere).
 * È un'informazione tecnica che va letta, non un ornamento: barra arancio a
 * sinistra e fondo bianco, così stacca anche dentro una sezione --muted.
 *
 * Funziona sia prima sia dopo la griglia: il template decide dove metterla.
 */
.cc-catalog-group__note{
  max-width: 760px;
  margin: 28px 0 0;
  padding: 16px 20px;
  background: var(--cc-surface);
  border: 1px solid var(--cc-border);
  border-left: 3px solid var(--cc-orange);
  font-size: 14px;
  line-height: 1.65;
  color: var(--cc-text-muted);
}

.cc-catalog-group__intro + .cc-catalog-group__note{
  margin-top: 0;
  margin-bottom: 30px;
}

.cc-catalog-group__note + .cc-catalog{
  margin-top: 28px;
}


/* ==========================================================================
   2. GRIGLIA
   Le celle si allungano fino all'altezza della riga (align-items: stretch è
   il default della griglia): è il primo dei due passaggi che tengono i
   pulsanti "Scheda tecnica" allineati in fondo — il secondo è il
   margin-top: auto su .cc-catalog__doc, più avanti.
   ========================================================================== */

.cc-catalog{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}


/* ==========================================================================
   3. SCHEDA PRODOTTO
   Una scheda può non avere immagine, non avere nome, non avere prezzo, non
   avere codice e non avere pulsante: nel JSON di origine capitano tutte
   queste combinazioni (i gasatori non hanno nome, gli accessori non hanno
   prezzo né scheda tecnica, molti prodotti non hanno prezzo pubblicato).
   Nessun elemento è quindi obbligatorio e nessuno lascia un vuoto quando
   manca — la colonna flex si limita a impaginare i figli che esistono.
   ========================================================================== */

.cc-catalog__item{
  /* Inset della scheda: i figli di testo lo usano come padding laterale e il
     riquadro immagine lo annulla per andare a filo. Un valore solo, così a
     640px basta ridefinirlo qui per muovere tutto insieme. */
  --cc-catalog-pad: 20px;

  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: var(--cc-catalog-pad) 0;
  background: var(--cc-surface);
  border: 1px solid var(--cc-border);
  transition:
    transform .3s var(--cc-ease),
    box-shadow .3s var(--cc-ease),
    border-color .3s var(--cc-ease);
}

.cc-catalog__item:hover,
.cc-catalog__item:focus-within{
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(14, 34, 64, .12);
  border-color: var(--cc-border-str);
}

/* La riga arancio che si scrive in cima alla scheda: stessa gestualità delle
   altre card del tema (.cc-product, .cc-sector-card), qui replicata sotto la
   classe del catalogo invece che toccando base.css. */
.cc-js .cc-catalog__item::after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 0;
  height: 3px;
  background: var(--cc-orange);
  transition: width .35s var(--cc-ease);
  pointer-events: none;
}

.cc-js .cc-catalog__item:hover::after,
.cc-js .cc-catalog__item:focus-within::after{
  width: 100%;
}

/* --- Padding laterale dei figli di testo ---------------------------------
   Il riquadro immagine deve arrivare ai bordi della scheda, quindi il padding
   orizzontale non può stare sul contenitore: lo portano i singoli figli.
   ------------------------------------------------------------------------ */

.cc-catalog__name,
.cc-catalog__specs,
.cc-catalog__code{
  padding-left: var(--cc-catalog-pad);
  padding-right: var(--cc-catalog-pad);
}

/* --- Riquadro immagine ---------------------------------------------------
   Rapporto fisso 1:1 deciso dal riquadro, non dal file. Le immagini reali
   vanno da 0,26 (render verticali dei depuratori, 263×1024) a 2,1 (un
   raccogligocce fotografato di lato): con object-fit: cover i primi
   perderebbero i tre quarti dell'altezza, quindi contain e basta.

   Il fondo è bianco come la scheda: i JPG dei prodotti sono già scontornati
   su bianco e un fondo grigio li trasformerebbe in un rettangolo visibile,
   mentre i PNG trasparenti si appoggiano al bianco senza alone. A separare
   immagine e testo è la sottile riga in basso, non un cambio di colore.
   ------------------------------------------------------------------------ */

.cc-catalog__media{
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  margin: 0 0 6px;
  padding: 18px;
  background: var(--cc-surface);
  border-bottom: 1px solid var(--cc-border);
}

/* A filo con il bordo superiore della scheda. */
.cc-catalog__item > .cc-catalog__media:first-child{
  margin-top: calc(var(--cc-catalog-pad) * -1);
}

/* Se il prodotto non ha immagine il riquadro sparisce del tutto invece di
   lasciare un quadrato bianco vuoto. Due regole separate e non una lista:
   un browser che non conosce :has() scarterebbe l'intera lista. */
.cc-catalog__media:empty{
  display: none;
}

.cc-catalog__media:not(:has(img)){
  display: none;
}

.cc-catalog__img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transition: transform .6s var(--cc-ease);
}

.cc-catalog__item:hover .cc-catalog__img,
.cc-catalog__item:focus-within .cc-catalog__img{
  transform: scale(1.04);
}

/* --- Nome ----------------------------------------------------------------
   Niente maiuscolo: i nomi vanno da "UF-NE" a "Ice ricambio rubinetto acqua
   G5/8 x 35 x 10 con compensatore", e sessanta caratteri tutti in maiuscolo
   su una colonna da 384px diventano quattro righe da decifrare.
   ------------------------------------------------------------------------ */

.cc-catalog__name{
  margin: 0;
  font-family: var(--cc-font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.28;
  letter-spacing: .2px;
  color: var(--cc-navy);
  overflow-wrap: break-word;
}

/* --- Etichetta breve ("Settore Ho.Re.Ca.") -------------------------------
   Pastiglia inchiostro su giallo, la coppia ad alto contrasto del tema.
   ------------------------------------------------------------------------ */

.cc-catalog__tag{
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  /* Il padding laterale della pastiglia è suo, quello della scheda resta
     come margine per non farla partire dal bordo. */
  margin-left: var(--cc-catalog-pad);
  margin-right: var(--cc-catalog-pad);
  padding: 4px 9px;
  background: var(--cc-yellow);
  font-family: var(--cc-font-mono);
  font-weight: 500;
  font-size: 10px;
  line-height: 1.3;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cc-ink);
}

/* --- Specifiche ----------------------------------------------------------
   Frasi intere, da zero a sette per scheda. Lista con rientro sporgente e
   quadratino giallo: le righe lunghe restano leggibili anche andando a capo.
   ------------------------------------------------------------------------ */

.cc-catalog__specs{
  margin: 2px 0 0;
  list-style: none;
}

/* Zero specifiche: la lista non occupa il gap della colonna flex. */
.cc-catalog__specs:empty{
  display: none;
}

.cc-catalog__spec{
  position: relative;
  padding-left: 14px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--cc-text-muted);
  overflow-wrap: break-word;
}

.cc-catalog__spec + .cc-catalog__spec{
  margin-top: 6px;
}

.cc-catalog__spec::before{
  content: "";
  position: absolute;
  top: .58em;
  left: 0;
  width: 5px;
  height: 5px;
  background: var(--cc-yellow);
}

/* --- Codice articolo -----------------------------------------------------
   Monospaziato dal token del tema, piccolo, ma su --cc-text-muted: il
   contrasto resta conforme AA (CONTRACT §10 garantisce quel token).
   `anywhere` perché "CCSG100009011-1" non ha punti dove spezzarsi.
   ------------------------------------------------------------------------ */

.cc-catalog__code{
  font-family: var(--cc-font-mono);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: .5px;
  color: var(--cc-text-muted);
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* --- Pulsante scheda tecnica ---------------------------------------------
   margin-top: auto — è questo che tiene il pulsante incollato in fondo.
   Le celle della griglia sono già alte uguali, la scheda è una colonna flex,
   e il margine automatico si mangia tutto lo spazio libero rimasto sopra il
   pulsante: che la scheda abbia una specifica o sette, il bordo inferiore del
   pulsante cade sempre alla stessa quota di quelli della sua riga.
   Il gap della colonna (10px) resta come distanza minima dal contenuto.

   Le regole sono autosufficienti: il pulsante ha l'aspetto giusto sia che il
   template gli metta anche .cc-btn .cc-btn--ghost, sia che non lo faccia.
   ------------------------------------------------------------------------ */

.cc-catalog__doc{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: auto var(--cc-catalog-pad) 0;
  padding: 12px 16px;
  background: transparent;
  border: 1px solid var(--cc-border-str);
  font-family: var(--cc-font-body);
  font-weight: 600;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  text-align: center;
  color: var(--cc-navy);
  transition:
    background-color .25s var(--cc-ease),
    border-color .25s var(--cc-ease),
    color .25s var(--cc-ease);
}

.cc-catalog__doc:hover,
.cc-catalog__doc:focus-visible{
  background: var(--cc-bg);
  border-color: var(--cc-navy);
  color: var(--cc-navy);
  /* Il ghost di base.css si solleva di 3px: qui no, la scheda si è già
     sollevata tutta insieme e i due movimenti insieme sarebbero uno di
     troppo. */
  transform: none;
}


/* ==========================================================================
   4. LABORATORIO ANALISI  (ambito editoriale)
   Niente catalogo: presentazione del partner, elenchi di competenze e tre
   fotografie del laboratorio.
   ========================================================================== */

.cc-lab{
  display: grid;
  gap: 48px;
}

/* --- Partner: marchio a sinistra, testo a destra ------------------------- */

.cc-lab__partner{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 36px;
}

/*
 * Marchio di un partner esterno, non il nostro: dimensione contenuta e
 * ferma. L'emblema C&C in testata sta a 108px, questo si ferma a 180px di
 * larghezza su un logo orizzontale (369×135), cioè circa 60px di altezza —
 * presente, mai in concorrenza.
 *
 * La regola vale sia che .cc-lab__logo sia l'immagine, sia che sia il
 * riquadro che la contiene.
 */
.cc-lab__logo{
  display: block;
  width: 180px;
  max-width: 100%;
  height: auto;
  padding: 14px 16px;
  background: var(--cc-surface);
  border: 1px solid var(--cc-border);
}

.cc-lab__logo img{
  display: block;
  width: 100%;
  height: auto;
}

.cc-lab__text{
  max-width: 760px;
  min-width: 0;
  font-size: 16px;
  line-height: 1.75;
  color: var(--cc-text-muted);
}

.cc-lab__text p + p{
  margin-top: 14px;
}

/* --- Elenchi di competenze ----------------------------------------------- */

.cc-lab__lists{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

/*
 * .cc-lab__list regge entrambe le forme di markup possibili: la lista stessa,
 * oppure il blocco che contiene titolo e lista. Il titolo è escluso dalle
 * regole delle voci con :not(), così resta blu anche quando il template lo
 * scrive come primo <li> — dove `.cc-lab__list li` avrebbe avuto la meglio
 * sulla sua classe per specificità.
 */
.cc-lab__list{
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
}

.cc-lab__list ul{
  margin: 0;
  padding: 0;
  list-style: none;
}

.cc-lab__list-title{
  display: block;
  margin: 0 0 14px;
  padding-left: 14px;
  font-family: var(--cc-font-display);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--cc-navy);
  box-shadow: inset 3px 0 0 var(--cc-yellow);
}

.cc-lab__list li:not(.cc-lab__list-title){
  position: relative;
  padding-left: 14px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--cc-text-muted);
}

.cc-lab__list li:not(.cc-lab__list-title) + li:not(.cc-lab__list-title){
  margin-top: 8px;
}

.cc-lab__list li:not(.cc-lab__list-title)::before{
  content: "";
  position: absolute;
  top: .62em;
  left: 0;
  width: 5px;
  height: 5px;
  background: var(--cc-yellow);
}

/* --- Galleria: fila di tre, una colonna sotto i 640px -------------------- */

.cc-lab__gallery{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * Qui sono fotografie di reportage, non render di prodotto: cover è corretto,
 * il riquadro a rapporto fisso tiene la fila allineata e riserva lo spazio
 * prima che l'immagine lazy arrivi.
 */
.cc-lab__shot{
  display: block;
  overflow: hidden;
  min-width: 0;
  aspect-ratio: 3 / 2;
  background: var(--cc-bg);
  border: 1px solid var(--cc-border);
  object-fit: cover;
}

.cc-lab__shot img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--cc-ease);
}

.cc-lab__shot:hover img,
.cc-lab__shot:focus-within img{
  transform: scale(1.05);
}


/* ==========================================================================
   5. RESPONSIVE
   ========================================================================== */

/* --- max-width 1100px — 3 → 2 colonne ------------------------------------ */

@media (max-width: 1100px){

  .cc-catalog{
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .cc-catalog-group + .cc-catalog-group{
    margin-top: 52px;
  }

  .cc-lab{ gap: 40px; }

  .cc-lab__partner{ gap: 28px; }

  .cc-lab__gallery{ gap: 16px; }
}

/* --- max-width 900px — restano 2 colonne, impilano partner ed elenchi ---- */

@media (max-width: 900px){

  .cc-catalog{
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }

  .cc-catalog-group + .cc-catalog-group{
    margin-top: 44px;
  }

  .cc-catalog-group__intro{
    margin-bottom: 24px;
    font-size: 15px;
  }

  .cc-catalog__name{ font-size: 17px; }

  .cc-lab{ gap: 34px; }

  .cc-lab__partner{
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .cc-lab__lists{ gap: 24px; }

  .cc-lab__text{ font-size: 15px; }
}

/* --- max-width 640px — 1 colonna ----------------------------------------- */

@media (max-width: 640px){

  .cc-catalog{
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .cc-catalog__item{
    --cc-catalog-pad: 16px;
  }

  .cc-catalog__media{ padding: 14px; }

  .cc-catalog__name{ font-size: 16px; }

  .cc-catalog__spec{ font-size: 12.5px; }

  .cc-catalog-group + .cc-catalog-group{
    margin-top: 36px;
  }

  .cc-catalog-group__note{
    margin-top: 22px;
    padding: 14px 16px;
    font-size: 13px;
  }

  .cc-lab__lists,
  .cc-lab__gallery{
    grid-template-columns: 1fr;
  }

  .cc-lab__gallery{ gap: 14px; }

  .cc-lab__logo{ width: 160px; }

  .cc-lab__list li{ font-size: 14px; }
}


/* ==========================================================================
   6. REDUCED MOTION
   base.css azzera già ogni durata; qui vanno neutralizzati gli stati finali
   che dipendono da una trasformazione, come fa il resto del tema.
   ========================================================================== */

@media (prefers-reduced-motion: reduce){

  .cc-catalog__item:hover,
  .cc-catalog__item:focus-within{
    transform: none;
  }

  .cc-catalog__item:hover .cc-catalog__img,
  .cc-catalog__item:focus-within .cc-catalog__img,
  .cc-lab__shot:hover img,
  .cc-lab__shot:focus-within img{
    transform: none;
  }

  .cc-js .cc-catalog__item::after,
  .cc-js .cc-catalog__item:hover::after,
  .cc-js .cc-catalog__item:focus-within::after{
    width: 0;
  }
}