come primo elemento (poi h3 col nome cliente) → carosello
Solo le card prodotto/crosslink hanno un link dentro l'h3: questo distingue
in automatico dove serve la griglia e dove il carosello, senza toccare il
contenuto delle pagine. */
/* Contenitore creato via JS (footer.php) quando 2+ blocchi "Colonne" con
card-link consecutivi non erano avvolti in un blocco Gruppo: li rende
una griglia unica, identica a quella delle sezioni già corrette. */
.ael-merged-grid{ display:grid !important; grid-template-columns:repeat(3, 1fr); gap:24px; }
@media (max-width:600px){
.ael-merged-grid{ grid-template-columns:repeat(2, 1fr) !important; gap:12px !important; }
}
/* Card PRODOTTO/CROSSLINK più compatte su mobile: griglia unica a 2 colonne,
anche quando le card sono divise in più blocchi "Colonne" da 3 (Home,
"Altri servizi", ecc.) invece di 2+1 per gruppo */
@media (max-width:600px){
/* Base: un blocco "Colonne" con card-link che NON è dentro un Gruppo
(diretto figlio dell'area contenuto) diventa una griglia a 2 colonne
per conto suo — copre il caso in cui la sezione non sia avvolta in un
blocco Gruppo (es. dimenticanza in una pagina), senza dover editare
la pagina. Se restano 3 card, l'ultima occupa tutta la larghezza
invece di restare da sola con uno spazio vuoto accanto. */
.content-col > .wp-block-columns:has(.wp-block-column.card h3 a){
display:grid !important;
grid-template-columns:repeat(2, 1fr) !important;
gap:12px !important;
}
.content-col > .wp-block-columns:has(.wp-block-column.card h3 a) > .wp-block-column.card:last-child:nth-child(odd){
grid-column:1 / -1;
}
/* Quando invece la sezione È avvolta in un Gruppo (caso più comune),
unifichiamo più blocchi "Colonne" da 3 in un'unica griglia continua
(es. 6 card in 2 righe da 3, invece di 2+1 per ciascun gruppo). */
.wp-block-group:has(.wp-block-column.card h3 a){
display:grid !important;
grid-template-columns:repeat(2, 1fr) !important;
gap:12px !important;
}
/* Alcune pagine avvolgono il contenuto del Gruppo in un div extra
".wp-block-group__inner-container" (versione diversa dell'editor):
va reso "trasparente" anche lui, altrimenti la griglia non arriva
alle card vere ma si ferma a questo unico contenitore. */
.wp-block-group:has(.wp-block-column.card h3 a) .wp-block-group__inner-container,
.wp-block-group:has(.wp-block-column.card h3 a) .wp-block-columns{
display:contents !important;
}
.wp-block-group:has(.wp-block-column.card h3 a) .wp-block-heading{
grid-column:1 / -1;
}
.wp-block-column.card{ padding:16px 12px !important; margin:0 !important; }
.wp-block-column.card h3{ font-size:.95rem !important; margin-top:10px !important; }
.wp-block-column.card p{
font-size:.8rem !important; display:-webkit-box; -webkit-line-clamp:2;
-webkit-box-orient:vertical; overflow:hidden;
}
.wp-block-column.card .card-icon{ width:44px !important; height:44px !important; background-size:44px 44px !important; }
}
/* Card PROBLEMA e RECENSIONE: carosello orizzontale su mobile, una card
per volta, con frecce prev/next (inserite via JS in footer.php). */
.testimonial-carousel-nav{ display:none; }
@media (max-width:600px){
.wp-block-group:has(.wp-block-column.card):not(:has(.wp-block-column.card h3 a)) .wp-block-group__inner-container,
.wp-block-group:has(.wp-block-column.card):not(:has(.wp-block-column.card h3 a)) .wp-block-columns{
display:contents !important;
}
.wp-block-group:has(.wp-block-column.card):not(:has(.wp-block-column.card h3 a)) .wp-block-columns{
display:flex !important;
flex-wrap:nowrap !important;
overflow-x:auto;
scroll-snap-type:x mandatory;
gap:12px !important;
margin:0 !important;
padding-bottom:4px;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
}
.wp-block-group:has(.wp-block-column.card):not(:has(.wp-block-column.card h3 a)) .wp-block-columns::-webkit-scrollbar{
display:none;
}
.wp-block-group:has(.wp-block-column.card):not(:has(.wp-block-column.card h3 a)) .wp-block-column.card{
flex:0 0 82% !important;
scroll-snap-align:center;
}
.testimonial-carousel-nav{
display:flex; justify-content:center; gap:16px; margin:14px 0 0;
}
.testimonial-carousel-nav button{
width:38px; height:38px; border-radius:50%; border:none;
background:var(--accent-dark); color:#fff; font-size:18px; line-height:1;
display:flex; align-items:center; justify-content:center; cursor:pointer;
}
}
.wp-block-columns.block-alt{
background:var(--section-alt); border:1px solid #e0e0e0; border-radius:8px; padding:28px 24px; margin:2em 0;
}
/* Blocco "Dettagli" nativo (core/details) → accordion FAQ, già semantico */
.wp-block-details{ border-bottom:1px solid rgba(32,33,36,.12); padding:6px 0; margin:0; }
.wp-block-details summary{
font-family:var(--font-display); font-size:1.05rem; font-weight:600;
padding:14px 0; cursor:pointer; list-style:none;
}
.wp-block-details summary::-webkit-details-marker{ display:none; }
.wp-block-details summary::after{ content:"+"; float:right; font-family:var(--font-body); font-weight:400; color:var(--accent); }
.wp-block-details[open] summary::after{ content:"\2212"; }
.wp-block-details p{ margin:0 0 16px; }
/* Gruppo con sfondo alternato per separare sezioni (aggiungi classe "block-alt" al blocco Gruppo) */
.wp-block-group.block-alt{ background:var(--section-alt); border:1px solid #e0e0e0; border-radius:8px; padding:20px 28px; margin:2.2em 0; }
.wp-block-group.block-alt *:first-child{ margin-top:0; }
.wp-block-group.block-alt *:last-child{ margin-bottom:0; }
.marche-badge-grid{ display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 2.2em; list-style:none; padding:20px 28px !important; border-radius:8px; }
.marche-badge-grid li{ background:#fff; border:1px solid #e0e0e0; border-radius:20px; padding:5px 14px; font-size:.85rem; color:var(--ink); }
/* Badge marche compatti su mobile: griglia fissa a 4 colonne, tutte visibili */
@media (max-width:600px){
.marche-badge-grid{ display:grid !important; grid-template-columns:repeat(4, 1fr) !important; gap:6px !important; padding:14px 12px !important; }
.marche-badge-grid li{
padding:5px 4px !important; font-size:.68rem !important; line-height:1.25 !important;
text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
}
/* Immagini dentro il contenuto */
.content-col .wp-block-image{ margin-top:2em; margin-bottom:2em; }
.content-col .wp-block-image img{ border-radius:4px; width:100%; height:auto; }
.content-col .wp-block-image figcaption{ font-size:.82rem; color:#595959; margin-top:6px; }
/* =========================================================================
BANNER CTA finale (aggiungi la classe "cta-banner" a un blocco Gruppo)
========================================================================= */
.wp-block-group.cta-banner{
background:var(--accent-dark) !important; color:#fff; text-align:center; padding:52px 24px !important; border-radius:6px; margin:2.5em 0;
}
.wp-block-group.cta-banner *:first-child{ margin-top:0; }
.wp-block-group.cta-banner *:last-child{ margin-bottom:0; }
.wp-block-group.cta-banner h2, .wp-block-group.cta-banner p{ color:#fff; }
.wp-block-group.cta-banner .wp-block-buttons{ justify-content:center; }
.wp-block-group.cta-banner .wp-block-button__link{ background:#fff; color:var(--accent) !important; }
/* =========================================================================
FOOTER
========================================================================= */
.site-footer{ padding:44px 0 24px; font-size:.95rem; color:rgba(255,255,255,.82); background:var(--deep); margin-top:40px; line-height:1.7; }
.site-footer .footer-cols{ max-width:1120px; margin:0 auto; padding:0 24px; display:grid; grid-template-columns:repeat(3,1fr); gap:40px; }
.site-footer .footer-col > p{ margin:0 0 .6em; }
.site-footer .footer-title{ color:#9ad0f5; font-weight:700; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; margin:0 0 14px !important; }
.site-footer a{ color:#fff; text-decoration:none; }
.site-footer a:hover{ text-decoration:underline; }
.footer-contacts, .footer-services-menu{ list-style:none; margin:0; padding:0; }
.footer-contacts li, .footer-services-menu li{ margin:0 0 8px; }
.footer-services-menu li{ padding-left:14px; position:relative; }
.footer-services-menu li::before{ content:""; position:absolute; left:0; top:.8em; width:5px; height:5px; border-radius:50%; background:#9ad0f5; }
.footer-secondary{ max-width:1120px; margin:32px auto 0; padding:18px 24px 0; border-top:1px solid rgba(255,255,255,.14); }
.footer-secondary-menu{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:8px 26px; }
.footer-secondary-menu a{ font-size:.88rem; color:rgba(255,255,255,.85); }
.site-footer .footer-secondary + .legal-note{ margin-top:14px; border-top:none; padding-top:0; }
.site-footer .legal-note{ color:rgba(255,255,255,.55); border-top:1px solid rgba(255,255,255,.14); max-width:1120px; margin:28px auto 0; padding:18px 24px 0; text-align:center; font-size:.78rem; }
.site-footer .footer-copy{ text-align:center; margin:16px 0 0; font-size:.82rem; color:rgba(255,255,255,.55); }
@media (max-width:860px){
.site-footer .footer-cols{ grid-template-columns:1fr; gap:28px; }
}
/* Pulsante fluttuante chiamata */
.wa-float{
position:fixed; right:20px; bottom:20px; z-index:999; width:58px; height:58px;
border-radius:50%; background:var(--accent-dark); display:flex; align-items:center;
justify-content:center; box-shadow:0 4px 14px rgba(0,0,0,.25); text-decoration:none;
}
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }