/*
* Griglia prodotti — dall'originale index.html r.491–704.
*
* In questo file: tutto l'aspetto.
* Markup in templates/prodgrid.php, controlli in includes/widgets/class-prodgrid.php.
* Nessun .js: il filtro è fatto dal PHP leggendo `?filtro=` (vedi il template).
*
* ⚠️ Nell'originale le schede hanno gli stili INLINE e le classi `.prod-card`
* portano solo ombra e hover. Qui è tutto in classi: gli stili inline non sono
* modificabili dal pannello e non si possono spegnere con reduced-motion.
*
* ⚠️ Due pesi dell'originale sono CODICE MORTO: il titolo della scheda ha
* `font-weight:600` inline, ma `.page:not([data-page="home"]) h3` lo porta a
* **500!important**. Misurato: 500. Stessa cosa per il badge, che resta 600.
*
* ⚠️ `.prod-chip`, `#prodFilterBar` e `#prodFilterBanner` esistono nel CSS e
* nel JS dell'originale ma NON nel markup: sono avanzi di una versione
* precedente. Non portati.
*
* Cascata MISURATA sull'originale (1440/1200/1180/1024/900/700/620/375):
*
* >1180 961–1180 621–960 ≤620
* colonne 4 3 2 1
* padding sez 34/40/20 34/40/20 34/20/20 34/20/20
* gap 24px 24px 24px 24px
*
* Tutto il resto della scheda non cambia mai: figura 172px, corpo 20px,
* badge 10.5px, titolo 18px, testo 14px con altezza minima 42px (due righe).
*
* Indice: sezione · griglia · scheda · figura · corpo · badge · titolo ·
* testo · link · vuoto · breakpoint · reduced-motion
*/
/* ---------- sezione ---------- */
.adea-prodgrid-section{
position:relative;overflow:hidden;
max-width:var(--adea-prodgrid-maxw,1240px);margin:0 auto;
padding:var(--adea-prodgrid-pad,34px 40px 20px);
font-family:var(--adea-font-testo,'Source Sans 3',system-ui,sans-serif);
line-height:normal; /* il Kit impone 1.5; l'originale eredita normal dal body */
}
/* ---------- griglia ---------- */
.adea-prodgrid{
display:grid;
grid-template-columns:var(--adea-prodgrid-cols,repeat(4,1fr));
gap:var(--adea-prodgrid-gap,24px);
position:relative;z-index:1;
}
/* ---------- scheda ---------- */
.adea-prodcard{
border:1px solid #e8edf2;border-radius:16px;overflow:hidden;background:#fff;
box-shadow:0 16px 38px -22px rgba(10,37,64,.22);
transition:transform .35s cubic-bezier(.2,.85,.25,1),box-shadow .35s ease;
}
/* ⚠️ −4px, non −6px né −5px. Sull'hover di questa scheda competono TRE valori:
`.prod-card:hover` (−6px, r.70), `.prod-grid>div:hover` (−5px, r.488) e
l'inline che initHover scrive dal `data-hover` (−4px). Vince l'inline.
L'ombra invece resta quella di r.52, che è `!important`. Misurato con hover
reale, non dedotto dalla cascata. */
.adea-prodcard:hover,.adea-prodcard:focus-within{
transform:translateY(-4px);box-shadow:0 26px 52px -24px rgba(10,37,64,.34);
}
/* ---------- figura ----------
Altezza fissa e `overflow:hidden`: è il ritaglio entro cui l'immagine si
ingrandisce in hover. */
.adea-prodcard-fig{
height:var(--adea-prodgrid-fig-h,172px);overflow:hidden;background:#f6f3ec;
}
/* ⚠️ selettore discendente: `.elementor img{height:auto}` è (0,1,1) (§13).
`display:block` va dichiarato, l'originale lo prende dalla regola globale. */
.adea-prodcard-fig .adea-prodcard-img{
display:block;width:100%;height:100%;object-fit:cover;
transition:transform var(--adea-dur-slow,.6s) var(--adea-ease);
}
.adea-prodcard:hover .adea-prodcard-img{transform:scale(1.06)}
/* ---------- corpo ---------- */
/* ⚠️ niente flex qui: avevo aggiunto `flex:1` + `margin-top:auto` sul link per
allinearli in fondo, ma l'originale NON lo fa — il link segue il paragrafo.
Ad allineare le schede basta l'altezza minima di due righe sul testo. */
.adea-prodcard-body{padding:20px}
/* ---------- badge della famiglia ---------- */
.adea-prodcard-badge{
display:inline-block;
font-family:var(--adea-font-titoli,'Poppins',sans-serif);font-weight:600;
font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;
color:var(--adea-verde-scuro,#379a4c);background:#e9f4ec;
padding:4px 10px;border-radius:5px;margin-bottom:11px;
}
/* ---------- titolo, testo, link ---------- */
.adea-prodcard-title{
font-family:var(--adea-font-titoli,'Poppins',sans-serif);
font-weight:500; /* 500, non 600: vedi la nota sul codice morto in testa */
font-size:18px;color:var(--adea-blu,#004F9E);margin:0 0 8px;
/* ⚠️ la regola che porta il peso a 500 (`.page:not([data-page="home"]) h3`,
r.692) imposta ANCHE `letter-spacing:-.01em`. Senza, a 768px il titolo
"Sciroppi di glucosio e fruttosio" andava su due righe invece di una e la
riga di schede cresceva di 27px. Terza volta che una di queste regole
porta due proprietà: prenderle sempre tutte. */
letter-spacing:-.01em;
/* ⚠️ il Kit di Elementor impone un line-height anche alle INTESTAZIONI
(1.2): il titolo veniva 21.6px invece dei 27px dell'originale, e la
scheda 14px più bassa. */
line-height:normal;
}
.adea-prodcard-text{
font-size:14px;line-height:1.5;color:#5b6b78;margin:0 0 14px;
/* due righe riservate: allinea i link in fondo fra schede con testi diversi */
min-height:42px;
}
/* ⚠️ due classi per la stessa ragione del bottone della mappa: oggi il colore
coincide con quello dei link del Kit, ma è una coincidenza — cambiando la
palette globale il link seguirebbe il Kit invece del widget. */
.adea-prodcard-body .adea-prodcard-link{
font-family:var(--adea-font-titoli,'Poppins',sans-serif);font-weight:600;font-size:13.5px;
color:var(--adea-blu,#004F9E);display:inline-block;text-decoration:none;
transition:transform .18s ease,color .2s ease;
}
.adea-prodcard-body .adea-prodcard-link:hover,.adea-prodcard-body .adea-prodcard-link:focus-visible{
color:var(--adea-verde,#42AD59);transform:translateX(4px);
}
/* ---------- nessun risultato ----------
Non esiste nell'originale: lì il filtro nasconde le schede via JS e, se non
ne resta nessuna, la pagina mostra un vuoto senza spiegazione. */
.adea-prodgrid-empty{
grid-column:1/-1;padding:40px 0;text-align:center;
font-size:17px;line-height:1.55;color:#5b6b78;
}
.adea-prodgrid-empty a{color:var(--adea-blu,#004F9E);font-weight:600}
/* ---------- breakpoint originali (misurati) ---------- */
@media(max-width:1180px){.adea-prodgrid{--adea-prodgrid-cols:repeat(3,1fr)}}
@media(max-width:960px){
/* `.sect` dell'originale: sotto 960 il margine laterale è 20px */
.adea-prodgrid-section{--adea-prodgrid-pad:34px 20px 20px;--adea-prodgrid-cols:repeat(2,1fr)}
.adea-prodgrid{--adea-prodgrid-cols:repeat(2,1fr)}
}
@media(max-width:620px){.adea-prodgrid{--adea-prodgrid-cols:1fr}}
/* ---------- reduced-motion ----------
Come l'originale (r.653–655): niente sollevamento e niente ingrandimento. */
@media(prefers-reduced-motion:reduce){
.adea-prodcard:hover,.adea-prodcard:focus-within,
.adea-prodcard:hover .adea-prodcard-img,
.adea-prodcard-body .adea-prodcard-link:hover,.adea-prodcard-body .adea-prodcard-link:focus-visible{transform:none!important}
.adea-prodcard-img{transition:none!important}
}
/* ---------- arrivo da un'ancora ----------
⚠️ 2026-08-31: le voci della fascia in home portano alla singola scheda
(`/prodotti/#p-nome`). Due accorgimenti perché l'atterraggio si capisca.
`scroll-margin-top`: senza, il browser porta la scheda a filo del bordo
superiore e l'header — che è alto e galleggia sopra la pagina — la copre.
`:target`: dopo un salto di mezza pagina serve dire QUALE scheda è quella
cercata, altrimenti si resta a cercarla con gli occhi. Il contorno è nel blu
del marchio e sparisce da sé al clic successivo. Sotto «riduci le
animazioni» compare senza dissolvenza. */
.adea-prodgrid .adea-prodcard{ scroll-margin-top:150px; }
.adea-prodgrid .adea-prodcard:target{
outline:2px solid var(--adea-blu,#004F9E);
outline-offset:4px;
animation:adeaProdTarget 2.4s ease-out 1;
}
@keyframes adeaProdTarget{
0%,60%{ outline-color:var(--adea-blu,#004F9E) }
100% { outline-color:transparent }
}
@media(prefers-reduced-motion:reduce){
.adea-prodgrid .adea-prodcard:target{ animation:none }
}
/* ---------- invito sotto la griglia ----------
⚠️ 2026-09-14 — RICHIESTA DEL CLIENTE: al posto del «Richiedi info» dentro
ogni scheda, un solo invito sotto tutte. Sta nella SEZIONE, non nella
griglia: dentro `.adea-prodgrid` diventerebbe una cella e si metterebbe in
fila con le schede.
La sezione ha `padding:34px 40px 20px` — i 20px in basso bastavano quando
sotto c'era solo l'ultima riga di schede; con un bottone centrato serve
respiro, e lo dà il margine qui, non un cambio di padding della sezione (che
sposterebbe anche il bordo superiore). */
.adea-prodgrid-cta{
display:flex;justify-content:center;
margin:var(--adea-prodgrid-cta-mt,44px) 0 var(--adea-prodgrid-cta-mb,14px);
position:relative;z-index:1; /* sopra la decorazione di fondo */
}
@media(max-width:620px){
.adea-prodgrid-cta{
margin-top:var(--adea-prodgrid-cta-mt-620,32px);
}
/* su schermo stretto il bottone prende tutta la colonna: un invito a metà
larghezza, da solo in mezzo, sembra un errore di impaginazione */
.adea-prodgrid-cta .adea-c-cta{width:100%;justify-content:center}
}