/*
Theme Name: Light4
Theme URI: https://light4.it
Description: Child theme di GeneratePress per light4.it
Author: Luca De Luigi
Author URI: https://lucadeluigi.com
Template: generatepress
Version: 1.2.0
Requires PHP: 8.1
Text Domain: light4
*/

/* -------------------------------------------
   FONT
   Arial è già installato su Mac, iPhone e Windows: nessun file da scaricare.
   Android e Linux non lo hanno: per loro c'è Arimo (stesse misure di Arial,
   licenza libera OFL), ospitato nel tema. Il browser lo scarica SOLO se
   Arial manca. Nessuna richiesta a server esterni (GDPR).
------------------------------------------- */
@font-face {
    font-family: 'Arimo';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('assets/fonts/arimo-latin-400-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
    font-family: 'Arimo';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('assets/fonts/arimo-latin-700-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* -------------------------------------------
   LIGHT4 DESIGN SYSTEM TOKENS
------------------------------------------- */
:root {
    --l4-font: Arial, 'Arimo', 'Helvetica Neue', Helvetica, sans-serif;
    --l4-heading-tracking: -0.02em; /* titoli grandi in Arial: leggermente più compatti */

    --l4-radius: 3px; /* arrotondamento di pulsanti e card */

    --l4-contrast-light: #ffffff;
    --l4-contrast-dark: #000000;
    --l4-border-opacity-white: rgba(255, 255, 255, 0.6);
    --l4-border-opacity-black: rgba(0, 0, 0, 0.6);

    /* Frecce del carosello (a riposo; al passaggio del mouse si invertono) */
    --l4-carousel-btn-bg: var(--l4-contrast-dark);     /* fondo e bordo */
    --l4-carousel-btn-color: var(--l4-contrast-light); /* freccia */
}

/* Font del sito: vale anche per pulsanti e campi dei moduli
   (che nei browser non ereditano il font in automatico). */
body,
button,
input,
select,
textarea {
    font-family: var(--l4-font);
}

h1, h2, h3 {
    letter-spacing: var(--l4-heading-tracking);
}

h2 {
    font-size: clamp(3.0625rem, 5vw + 1rem, 3.8125rem);
}

h3 {
    font-size: clamp(1.75rem, 4vw + 0.5rem, 2.25rem);
}

/* Occhiello: piccola etichetta maiuscola sopra i titoli (aggiunta da Luca) */
.eyebrow {
	font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.3em;
    text-transform: uppercase;
}

/* Aggiunte da Luca */
h6 {
	font-size: clamp(1.3125rem, 1.5vw + 1rem, 1.4375rem);
    line-height: 1.25;
}

.link-slide a {
    font-size: 13px;
    letter-spacing: 1px;
    text-decoration: none;
	color: var(--contrast);
}

/* -------------------------------------------
   HERO SECTION
------------------------------------------- */
.light4-hero-section {
    position: relative;
    width: 100%;
    height: 100vh;  /* fallback browser vecchi */
    height: 100svh; /* altezza reale visibile su mobile (esclude la barra indirizzi) */
    min-height: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: #000000;
}

.light4-hero-backgrounds {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 10; 
}

.light4-hero-media {
    display: block;
    width: 100%; height: 100%;
    object-fit: cover;
}

.light4-hero-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.35); 
    z-index: 20; 
}

.light4-hero-content {
    position: relative;
    z-index: 99 !important; 
    text-align: center;
    max-width: 1000px;
    padding: 0 30px;
}

.light4-hero-headline {
    color: #ffffff !important;
    font-weight: 400;
    line-height: 1.1;
    margin: 0 0 40px 0;
    font-size: clamp(2.5rem, 8vw, 7rem);
    letter-spacing: -0.02em;
}

.light4-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}

.light4-hero-floating-text {
    position: absolute;
    bottom: 40px;
    right: 40px;
    z-index: 99 !important;
    display: flex;        /* pallino e testo sulla stessa riga */
    align-items: center;
}

.floating-link {
    display: flex;
    align-items: center;
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.floating-dot {
    width: 8px;
    height: 8px;
    border: 1px solid #ffffff;
    border-radius: 50%;
    margin-right: 10px;
    display: inline-block;
}

/* -------------------------------------------
   LIGHT4 BUTTONS DESIGN SYSTEM
------------------------------------------- */
.light4-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 35px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none !important;
    font-weight: 500;
    overflow: hidden; 
    cursor: pointer;
    box-sizing: border-box;
    transition: color 0.35s ease, border-color 0.35s ease;
    border-radius: var(--l4-radius);

    /* Valori di hover di default, sovrascritti da ogni variante */
    --l4-btn-ripple: var(--l4-contrast-light);
    --l4-btn-text-hover: var(--l4-contrast-dark);
    --l4-btn-border-hover: var(--l4-contrast-light);
}

/* Testo del bottone (sopra al ripple) */
.light4-btn > span:not(.l4-btn-ripple) {
    position: relative;
    z-index: 2;
    pointer-events: none;
}

/* Cerchio che segue il mouse: posizione e dimensione le gestisce light4.js */
.light4-btn .l4-btn-ripple {
    position: absolute;
    z-index: 1;
    border-radius: 50%;
    background-color: var(--l4-btn-ripple);
    pointer-events: none;
}

.light4-btn:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

/* 2. STILE 1: SOLID WHITE */
a.light4-btn.light4-btn--solid-white,
button.light4-btn.light4-btn--solid-white {
    background-color: var(--l4-contrast-light);
    border: 1px solid var(--l4-contrast-light);
    color: var(--l4-contrast-dark);
    --l4-btn-ripple: var(--l4-contrast-dark);
    --l4-btn-text-hover: var(--l4-contrast-light);
    --l4-btn-border-hover: var(--l4-contrast-dark);
}

/* 3. STILE 2: GHOST WHITE */
a.light4-btn.light4-btn--ghost-white,
button.light4-btn.light4-btn--ghost-white {
    background-color: transparent;
    border: 1px solid var(--l4-border-opacity-white);
    color: var(--l4-contrast-light);
    --l4-btn-ripple: var(--l4-contrast-light);
    --l4-btn-text-hover: var(--l4-contrast-dark);
    --l4-btn-border-hover: var(--l4-contrast-light);
}

/* 4. STILE 3: SOLID BLACK */
a.light4-btn.light4-btn--solid-black,
button.light4-btn.light4-btn--solid-black {
    background-color: var(--l4-contrast-dark);
    border: 1px solid var(--l4-contrast-dark);
    color: var(--l4-contrast-light);
    --l4-btn-ripple: var(--l4-contrast-light);
    --l4-btn-text-hover: var(--l4-contrast-dark);
    --l4-btn-border-hover: var(--l4-contrast-light);
}

/* 5. STILE 4: GHOST BLACK */
a.light4-btn.light4-btn--ghost-black,
button.light4-btn.light4-btn--ghost-black {
    background-color: transparent;
    border: 1px solid var(--l4-border-opacity-black);
    color: var(--l4-contrast-dark);
    --l4-btn-ripple: var(--l4-contrast-dark);
    --l4-btn-text-hover: var(--l4-contrast-light);
    --l4-btn-border-hover: var(--l4-contrast-dark);
}

/* 6. STATO HOVER (classe aggiunta da light4.js insieme al ripple).
   Stessa specificità delle varianti e scritto dopo: vince per ordine. */
a.light4-btn.is-hovered,
button.light4-btn.is-hovered {
    color: var(--l4-btn-text-hover);
    border-color: var(--l4-btn-border-hover);
}

/* -------------------------------------------
   LIGHT4 ANIMATED LINKS (UNDERLINE SLIDE)
------------------------------------------- */
a.light4-link-underline,
.light4-link-underline a {
    --l4-underline-glow: transparent; /* niente alone: una sola linea */
    color: inherit;
    text-decoration: none !important;
    padding-bottom: 3px;
    /* Due strati: la linea da 1px e un alone sopra (spento di default,
       acceso con la variante .light4-link-underline--glow) */
    background-image:
        linear-gradient(currentColor, currentColor),
        linear-gradient(to top, var(--l4-underline-glow), transparent);
    background-repeat: no-repeat;
    background-size: 0% 1px, 0% 5px;
    background-position: right bottom, right bottom;
    transition: background-size 0.5s cubic-bezier(0.65, 0, 0.35, 1);
    -webkit-box-decoration-break: clone; /* funziona anche sui link su più righe */
    box-decoration-break: clone;
}

/* Entra da sinistra, all'uscita si ritira verso destra */
a.light4-link-underline:is(:hover, :focus-visible),
.light4-link-underline a:is(:hover, :focus-visible) {
    background-size: 100% 1px, 100% 5px;
    background-position: left bottom, left bottom;
}

/* Variante: alone morbido sopra la linea, come un filamento acceso */
a.light4-link-underline--glow,
.light4-link-underline--glow a {
    --l4-underline-glow: color-mix(in srgb, currentColor 35%, transparent);
}

/* -------------------------------------------
   LIGHT4 CUSTOM FLOATING HEADER
------------------------------------------- */
.light4-site-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    background-color: transparent !important;
    pointer-events: none; 
    /* Il blend va sull'header (non sul container interno): essendo fixed con
       z-index, l'header crea un livello a sé, e solo da qui il blend
       "vede" la pagina sottostante. Con elementi bianchi, exclusion li
       rende bianchi sul buio e scuri sul chiaro. */
    mix-blend-mode: exclusion;
}

/* Sopra la hero (classe gestita da light4.js) e a menu aperto: bianco pieno */
.light4-site-header.is-over-hero,
body.l4-no-scroll .light4-site-header {
    mix-blend-mode: normal;
}

.light4-header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 60px;
    pointer-events: auto;
}

.light4-svg-logo {
    height: 40px;
    width: auto;
    display: block;
}

.light4-logo-wrapper a {
    display: block;
}

/* Gruppo a destra: selettore lingua + bottone menu */
.light4-header-actions {
    display: flex;
    align-items: center;
    gap: 2.5rem;
}

/* -------------------------------------------
   SELETTORE DI LINGUA
   Header: solo desktop. Menu overlay: solo mobile.
------------------------------------------- */
.light4-lang-switcher ul {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.light4-lang-switcher a {
    display: inline-block;
    padding: 6px 0; /* area cliccabile più comoda senza cambiare l'aspetto */
    font-size: 13px;
    line-height: 1;
    letter-spacing: 1px;
    text-decoration: none !important;
    color: inherit;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.light4-lang-switcher a:hover,
.light4-lang-switcher a:focus-visible,
.light4-lang-switcher a.is-active {
    opacity: 1;
}

/* Lingua attiva: sottolineata, come il "filamento" dei link */
.light4-lang-switcher a.is-active span[aria-hidden] {
    border-bottom: 1px solid currentColor;
    padding-bottom: 3px;
}

.light4-lang-switcher--header {
    color: var(--l4-contrast-light);
}

.light4-lang-switcher--overlay {
    margin-top: auto;   /* in fondo al pannello */
    padding-top: 40px;
    color: var(--base-3);
}

.light4-lang-switcher--overlay a {
    font-size: 15px;
}

@media (min-width: 769px) {
    .light4-lang-switcher--overlay {
        display: none;
    }
}

@media (max-width: 768px) {
    .light4-lang-switcher--header {
        display: none;
    }
}

/* È un <button>: azzera lo stile che GeneratePress applica a tutti i bottoni
   (sfondo grigio, padding, colore al passaggio del mouse). */
.light4-site-header .light4-menu-trigger,
.light4-site-header .light4-menu-trigger:hover,
.light4-site-header .light4-menu-trigger:focus {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    font: inherit;
    line-height: 1;
    color: var(--l4-contrast-light);
    cursor: pointer;
}

.light4-site-header :is(a, button):focus-visible {
    outline: 1px solid currentColor;
    outline-offset: 8px;
}

.light4-menu-text {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
}

.light4-menu-text::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: -4px;
    left: 0;
    background-color: currentColor;
    transform: scaleX(0);
    transform-origin: bottom left;
    transition: transform 0.35s ease-in-out;
}

.light4-menu-trigger:hover .light4-menu-text::after,
.light4-menu-trigger:focus-visible .light4-menu-text::after {
    transform: scaleX(1);
}

.light4-burger-icon {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 1px;
}

.burger-line {
    display: block;
    width: 24px;
    height: 1px;
    background-color: var(--l4-contrast-light);
    transition: transform 0.3s ease, background-color 0.3s ease;
}


/* -------------------------------------------
   LIGHT4 FULLSCREEN OVERLAY MENU
------------------------------------------- */
body.l4-no-scroll {
    overflow: hidden !important;
    padding-right: var(--scrollbar-width, 0px);
}

.light4-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 9998;
    visibility: hidden; 
}

.light4-menu-backdrop {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.4); 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0; 
}

.light4-menu-panel {
    position: absolute;
    top: 20px; right: 20px; bottom: 20px;
    width: calc(100% - 40px); 
    max-width: 450px; 
    background-color: rgba(255, 255, 255, 0.15); /* Colore del pannello (modificabile) */
    border-radius: 20px;
    padding: 120px 40px 60px 50px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow-y: auto;              /* se le voci superano l'altezza dello schermo */
    overscroll-behavior: contain;  /* lo scroll non passa alla pagina sotto */
    transform: translateX(120%); 
}

/* -------------------------------------------
   VOCI MENU, HOVER FOCUS E SOTTOMENU (WP DYNAMIC)
------------------------------------------- */
.light4-menu-nav {
    position: relative;
    z-index: 10;
    width: 100%;
}

.light4-menu-list {
    list-style: none;
    padding: 0; margin: 0;
}

/* IMPORTANTE: Rimuove l'overflow per permettere l'apertura a tendina dei sottomenu */
.light4-menu-list .menu-item {
    margin-bottom: 25px;
    overflow: visible !important; 
}

/* 1. Colore Base e Layout delle voci */
.light4-menu-list .menu-item a {
    position: relative;
    z-index: 2;
    color: var(--base-3) !important; /* Diventa bianco */
    font-size: clamp(2rem, 4vw, 2.5rem);
    text-transform: uppercase;
    font-weight: 400;
    line-height: 1.1;
    opacity: 1;
    transition: opacity 0.3s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    text-decoration: none !important;
}

/* 2. Effetto Focus: spegne tutto tranne la voce sotto il mouse */
.light4-menu-list:hover .menu-item a {
    opacity: 0.35 !important; 
}
.light4-menu-list .menu-item a:hover {
    opacity: 1 !important; 
}

/* 3. Animazione Underline su Hover (ora usa ::before per non confliggere col +) */
.light4-menu-list .menu-item > a::before {
    content: '';
    position: absolute;
    width: 100%; height: 1px;
    bottom: -2px; left: 0;
    background-color: currentColor;
    transform: scaleX(0);
    transform-origin: bottom left;
    transition: transform 0.35s ease-in-out;
}
.light4-menu-list .menu-item > a:hover::before,
.light4-menu-list .menu-item > a:focus-visible::before {
    transform: scaleX(1);
}

.light4-menu-list .menu-item > a:focus-visible {
    outline: none; /* sostituito dalla sottolineatura */
}

/* -------------------------------------------
   ICONE SOTTOMENU (+ / -) E TENDINE
------------------------------------------- */
/* Voce padre: link a sinistra, bottone +/− a destra, sottomenu sotto */
.light4-menu-list .menu-item-has-children {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
}

.light4-menu-list .menu-item-has-children > .sub-menu {
    grid-column: 1 / -1;
}

/* Bottone +/− (aggiunto in PHP). Azzera lo stile bottoni di GeneratePress. */
.light4-menu-list .light4-submenu-toggle,
.light4-menu-list .light4-submenu-toggle:hover,
.light4-menu-list .light4-submenu-toggle:focus {
    margin: 0 0 0 20px;
    padding: 0;
    width: 44px;  /* area di tocco minima consigliata */
    height: 44px;
    background: none;
    border: 0;
    border-radius: 0;
    color: var(--base-3);
    font-size: 35px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.light4-menu-list .light4-submenu-toggle::before {
    content: '+';
}

.light4-menu-list .light4-submenu-toggle[aria-expanded="true"]::before {
    content: '\2212'; /* segno meno tipografico */
}

.light4-menu-list .light4-submenu-toggle:focus-visible {
    outline: 1px solid currentColor;
    outline-offset: -4px;
}

/* Il +/− segue l'effetto "spegni le altre voci" */
.light4-menu-list:hover .light4-submenu-toggle {
    opacity: 0.35;
}

.light4-menu-list .menu-item-has-children > a:hover + .light4-submenu-toggle,
.light4-menu-list .light4-submenu-toggle:hover {
    opacity: 1;
}

/* Struttura invisibile iniziale del sottomenu */
.light4-menu-list .sub-menu {
    list-style: none;
    padding-left: 30px; 
    margin-top: 20px;
    display: none; 
}

/* Stile per le voci interne al sottomenu */
.light4-menu-list .sub-menu .menu-item {
    margin-bottom: 15px;
}
.light4-menu-list .sub-menu .menu-item a {
    font-size: clamp(1.2rem, 2.5vw, 1.5rem);
    text-transform: none; 
}

/* -------------------------------------------
   PREPARAZIONE ANIMAZIONI GSAP (PRE-LOAD HIDE)
   Gli elementi vengono nascosti SOLO se:
   - il JS è attivo (.l4-js, aggiunta nel <head>)
   - non è scattato il fallback (.l4-static)
   - l'utente non ha chiesto di ridurre il movimento
   In tutti gli altri casi restano visibili: niente pagine vuote.
------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
    .l4-js:not(.l4-static) .light4-hero-headline,
    .l4-js:not(.l4-static) .light4-hero-buttons .light4-btn,
    .l4-js:not(.l4-static) .l4-reveal-line,
    .l4-js:not(.l4-static) .l4-slide-up,
    .l4-js:not(.l4-static) .l4-fade-up,
    .l4-js:not(.l4-static) .l4-stagger-item {
        visibility: hidden;
        opacity: 0;
    }

    /* Testi divisi in parole: solo opacity, così lo spazio resta riservato */
    .l4-js:not(.l4-static) .l4-reveal-text :is(h1, h2, h3, h4, h5, h6, p) {
        opacity: 0;
    }
}


/* -------------------------------------------
   GLOBAL VIDEO BACKGROUND SYSTEM (VISUAL EDITOR)
------------------------------------------- */
.l4-video-bg-container {
    position: relative;
    overflow: hidden;
}

/* Intercetta il blocco Video nativo di WordPress e lo posiziona sul fondo */
figure.wp-block-video.l4-video-bg {
    position: absolute !important;
    top: 0; left: 0; 
    width: 100%; height: 100%;
    margin: 0;
    z-index: 0;
    pointer-events: none;
}

/* Adatta il video all'interno per riempire tutto lo spazio */
figure.wp-block-video.l4-video-bg video {
    width: 100%; height: 100%;
    object-fit: cover;
}

/* Manda tutti gli altri blocchi (la tua griglia, i testi) in primo piano */
.l4-video-bg-container > *:not(.l4-video-bg) {
    position: relative;
    z-index: 2;
}

/* -------------------------------------------
   IMAGE ZOOM HOVER EFFECT (HARDWARE ACCELERATED)
------------------------------------------- */
/* Il contenitore dell'immagine: fa da maschera e taglia via i bordi */
.l4-image-zoom {
    overflow: hidden;
    display: block; /* Fondamentale se l'immagine ha un link (tag <a>) */
    position: relative;
}

/* L'immagine al suo interno: applichiamo la transizione morbida */
.l4-image-zoom img {
    display: block;
    width: 100%;
    height: auto;
    /* Easing personalizzato molto morbido (stile Apple) */
    transition: transform 0.6s cubic-bezier(0.33, 1, 0.68, 1); 
    /* translateZ(0) attiva l'accelerazione hardware GPU evitando sfarfallii */
    transform: scale(1) translateZ(0);
}

/* L'effetto allo stato hover */
.l4-image-zoom:hover img {
    transform: scale(1.06) translateZ(0); /* Zoom in al 106% */
}







/* -------------------------------------------
   MEDIA QUERIES (SEMPRE IN FONDO!)
------------------------------------------- */
@media (max-width: 768px) {
    /* Bottoni affiancati; uno solo resta largo quanto il suo testo */
    .light4-hero-buttons {
        gap: 10px;
    }

    .light4-hero-buttons .light4-btn {
        padding: 14px 22px;
        font-size: 12px;
    }

    /* Con due bottoni: stessa larghezza, testo che può andare a capo */
    .light4-hero-buttons:has(.light4-btn + .light4-btn) .light4-btn {
        flex: 1 1 0;
        min-width: 0;
        max-width: 220px;
        padding-inline: 14px;
        text-align: center;
    }

    .light4-hero-floating-text { 
        bottom: 20px; 
        right: 20px; 
    }
    
    .light4-header-container {
        padding: 25px 20px;
    }
    
    .light4-menu-panel {
        top: 15px; right: 15px; bottom: 15px;
        width: calc(100% - 30px);
        padding: 100px 30px 40px 30px;
    }
}

/* -------------------------------------------
   SPOTLIGHT REVEAL (.l4-spotlight)
   La classe .l4-spotlight-text la aggiunge light4.js: senza JS,
   o con "riduci movimento", il testo resta normale.
   Il testo diventa una "maschera": si vede il gradiente radiale
   (luce piena al centro, penombra fuori) ritagliato sulle lettere.
------------------------------------------- */
.l4-spotlight-text {
    --l4-spot-x: 50%;
    --l4-spot-y: 50%;
    --l4-spot-radius: 180px;
    --l4-spot-dim-color: color-mix(in srgb, var(--l4-spot-color, currentColor) var(--l4-spot-dim, 20%), transparent);

    /* Normale: dentro il faro il colore pieno, fuori la penombra */
    --l4-spot-inner: var(--l4-spot-color, currentColor);
    --l4-spot-outer: var(--l4-spot-dim-color);

    background-image: radial-gradient(
        circle var(--l4-spot-radius) at var(--l4-spot-x) var(--l4-spot-y),
        var(--l4-spot-inner) 0%,
        var(--l4-spot-inner) 35%,
        var(--l4-spot-outer) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Variante .l4-spotlight--invert: il testo resta pieno e il faro lo schiarisce.
   Il colore del faro si sceglie con --l4-spot-glow (default: il testo sbiadito). */
.l4-spotlight--invert .l4-spotlight-text,
.l4-spotlight-text.l4-spotlight--invert {
    --l4-spot-inner: var(--l4-spot-glow, var(--l4-spot-dim-color));
    --l4-spot-outer: var(--l4-spot-color, currentColor);
}

/* -------------------------------------------
   SLIDE UP REVEAL PER RIGHE (.l4-slide-up)
   Ogni riga sale da sotto la propria linea (stessa uscita della hero).
------------------------------------------- */
.l4-slide-up .l4-line-mask {
    /* lo spazio extra evita che la maschera tagli le discendenti (g, p, q) */
    padding-bottom: 0.12em;
    margin-bottom: -0.12em;
}

/* -------------------------------------------
   TORCIA (.l4-torch)
   Per container con sfondo scuro: una luce calda segue il cursore.
   Personalizzazione (CSS del container):
     --l4-torch-size: 380px;                      raggio della luce
     --l4-torch-color: rgba(255, 228, 190, 0.16); colore e intensità
------------------------------------------- */
:where(.l4-torch) {
    position: relative; /* :where = specificità zero, GenerateBlocks può sovrascrivere */
}

.l4-torch {
    isolation: isolate;
}

.l4-torch::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 50;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(
        circle var(--l4-torch-size, 380px) at var(--l4-torch-x, 50%) var(--l4-torch-y, 50%),
        var(--l4-torch-core, rgba(255, 244, 228, 0.55)) 0,
        var(--l4-torch-color, rgba(255, 228, 190, 0.16)) 6px,
        transparent 100%
    );
    mix-blend-mode: screen; /* schiarisce sfondo e contenuti, come una luce vera */
    opacity: 0;
    transition: opacity 0.5s ease;
}

.l4-torch.is-lit::after {
    opacity: 1;
}

/* Variante: il cursore sparisce e resta solo la luce (sui link torna la manina) */
.l4-torch--no-cursor.is-lit,
.l4-torch--no-cursor.is-lit * {
    cursor: none;
}

.l4-torch--no-cursor.is-lit :is(a, button, input, select, textarea, label) {
    cursor: pointer;
}

.l4-torch--no-cursor.is-lit :is(input, textarea) {
    cursor: text;
}

/* -------------------------------------------
   CAMBIO PAGINA IN DISSOLVENZA (View Transitions)
   Solo CSS: i browser che non lo supportano cambiano pagina normalmente.
------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }

    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation-duration: 0.45s;
        animation-timing-function: ease;
    }
}

/* -------------------------------------------
   CARD CON TESTO SOPRA L'IMMAGINE (.l4-card-overlay)
   Va sul container della card (es. quello con .l4-stagger-item).
   Struttura: il PRIMO elemento è l'immagine (o il suo wrapper
   .l4-image-zoom); tutto quello che segue (titolo, testo, pulsanti,
   etichette...) va sopra l'immagine, impilato in basso.

   Personalizzazione (CSS del container):
     --l4-card-ratio: 4 / 6;      proporzioni della card
     --l4-card-pad: 1.75rem;      spazio tra contenuti e bordi
     --l4-card-gap: 0.5rem;       spazio tra un elemento e l'altro
     --l4-card-scrim: 0.6;        quanto scurire il fondo per leggere il testo (0–1)
     --l4-card-text: #ffffff;     colore del testo
   Varianti:
     .l4-card-overlay--top        contenuti in alto
     .l4-card-overlay--center     contenuti al centro
     .l4-card-overlay--reveal     solo il titolo è visibile; il resto
                                  appare al passaggio del mouse
------------------------------------------- */
.l4-card-overlay {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;   /* contenuti in basso */
    align-items: flex-start;     /* i pulsanti mantengono la loro larghezza */
    gap: var(--l4-card-gap, 0.5rem);
    padding: var(--l4-card-pad, 1.75rem);
    /* Proporzione minima: se il testo è lungo, la card si allunga invece di tagliarlo */
    aspect-ratio: var(--l4-card-ratio, 4 / 6);
    color: var(--l4-card-text, #ffffff);
}

/* Immagine: riempie tutta la card, sotto a tutto */
.l4-card-overlay > :first-child {
    position: absolute;
    inset: 0;
    z-index: 0;
    margin: 0;
}

.l4-card-overlay > :first-child img,
.l4-card-overlay > img:first-child {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Sfumatura scura dietro ai contenuti: garantisce la leggibilità
   anche su immagini chiare (contrasto richiesto dall'accessibilità) */
.l4-card-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, var(--l4-card-scrim, 0.6)) 0%,
        rgba(0, 0, 0, 0) 60%
    );
}

/* Tutti gli altri elementi: sopra l'immagine */
.l4-card-overlay > :not(:first-child) {
    position: relative;
    z-index: 2;
    margin: 0;
    max-width: 100%;
}

/* Testi: ereditano il colore della card */
.l4-card-overlay > :is(h1, h2, h3, h4, h5, h6, p, span) {
    color: inherit;
}

/* Un po' d'aria in più prima di pulsanti e link */
.l4-card-overlay > :is(a, .light4-btn, .gb-button, .wp-block-buttons):not(:first-child) {
    margin-top: 0.75rem;
}

/* Lo zoom parte passando sull'intera card, anche sopra i contenuti */
.l4-card-overlay:hover .l4-image-zoom img {
    transform: scale(1.06) translateZ(0);
}

/* Variante: contenuti in alto */
.l4-card-overlay--top {
    justify-content: flex-start;
}

.l4-card-overlay--top::after {
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, var(--l4-card-scrim, 0.6)) 0%,
        rgba(0, 0, 0, 0) 60%
    );
}

/* Variante: contenuti al centro */
.l4-card-overlay--center {
    justify-content: center;
    align-items: center;
    text-align: center;
}

.l4-card-overlay--center::after {
    background: rgba(0, 0, 0, calc(var(--l4-card-scrim, 0.6) * 0.6));
}

/* Variante: solo il titolo resta visibile, il resto (testo, pulsanti)
   appare al passaggio del mouse o quando si arriva con il tasto Tab.
   Solo con il mouse: su touch tutto resta sempre visibile. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .l4-card-overlay--reveal > :nth-child(n+3) {
        opacity: 0;
        transform: translateY(12px);
        transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.33, 1, 0.68, 1);
    }

    .l4-card-overlay--reveal:is(:hover, :focus-within) > :nth-child(n+3) {
        opacity: 1;
        transform: none;
    }

    /* Leggera cascata: il pulsante arriva dopo il testo */
    .l4-card-overlay--reveal:is(:hover, :focus-within) > :nth-child(4) {
        transition-delay: 0.08s;
    }
}

/* -------------------------------------------
   CAROSELLO ORIZZONTALE (.l4-carousel)
   Sul contenitore i cui figli diretti sono le card
   (con un Query Loop di GenerateBlocks: sul Looper).
   Card visibili (il decimale è la card che spunta):
     --l4-carousel-per-view: 3.25;         desktop
     --l4-carousel-per-view-tablet: 2.25;  fino a 1024px
     --l4-carousel-per-view-mobile: 1.5;   fino a 767px
     --l4-carousel-gap: 1.5rem;            spazio tra le card
   Varianti pronte:
     .l4-carousel--four    4 / 3 / 2 card (es. schede progetto)
     .l4-carousel--arrows-mobile  mostra le frecce anche su cellulare
     .l4-carousel--light-arrows   frecce bianche, per sezioni scure
     .l4-carousel--peek    fa spuntare un pezzo della card successiva
                           (--l4-carousel-peek: 0.25; = un quarto di card)
   "html" nel selettore alza la priorità sopra gli stili di griglia
   che GenerateBlocks applica al Looper.
------------------------------------------- */
html .l4-carousel {
    /* Variabili interne: leggono quelle pubbliche (impostabili sul contenitore)
       oppure usano i valori predefiniti. Il breakpoint sceglie quale usare. */
    --_l4-per-view: var(--l4-carousel-per-view, 3.25);
    --_l4-gap: var(--l4-carousel-gap, 1.5rem);

    display: grid;
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-template-rows: none;
    grid-auto-columns: calc((100% + var(--_l4-gap)) / (var(--_l4-per-view) + var(--l4-carousel-peek, 0)) - var(--_l4-gap));
    gap: var(--_l4-gap);
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none; /* sostituita dalla barra di avanzamento */
}

.l4-carousel::-webkit-scrollbar {
    display: none;
}

.l4-carousel > * {
    min-width: 0;
    scroll-snap-align: start;
}

.l4-carousel:focus-visible {
    outline: 1px solid currentColor;
    outline-offset: 6px;
}

/* Trascinamento con il mouse */
.l4-carousel.is-draggable {
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}

.l4-carousel.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    scroll-behavior: auto;
}

.l4-carousel img {
    -webkit-user-drag: none;
}

/* Frecce e barra di avanzamento (create da light4.js) */
.l4-carousel-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 2.5rem;
}

.l4-carousel-controls.is-static {
    display: none; /* tutte le card sono già visibili */
}

.l4-carousel-progress {
    --l4-thumb-size: 0.3;
    --l4-thumb-pos: 0;

    position: relative;
    flex: 1;
    height: 1px;
    margin-right: 1.25rem;
    background-color: color-mix(in srgb, currentColor 20%, transparent);
}

.l4-carousel-thumb {
    position: absolute;
    top: -0.5px;
    height: 2px;
    width: calc(var(--l4-thumb-size) * 100%);
    left: calc(var(--l4-thumb-pos) * (1 - var(--l4-thumb-size)) * 100%);
    background-color: currentColor;
}

/* Frecce: fondo nero e freccia bianca; al passaggio del mouse si invertono.
   Colori: in :root, in cima al file (--l4-carousel-btn-bg / -color).
   Su una sezione scura: classe .l4-carousel--light-arrows sul carosello.
   Azzera anche lo stile che GeneratePress applica a tutti i bottoni. */
.l4-carousel-btn,
.l4-carousel-btn:hover,
.l4-carousel-btn:focus {
    --_l4-btn-bg: var(--l4-carousel-btn-bg, var(--l4-contrast-dark));
    --_l4-btn-fg: var(--l4-carousel-btn-color, var(--l4-contrast-light));

    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 52px;
    height: 52px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--_l4-btn-bg);
    border-radius: 50%;
    background: var(--_l4-btn-bg);
    color: var(--_l4-btn-fg);
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}

/* Colori invertiti: fondo bianco, freccia nera (il bordo resta scuro,
   così il cerchio si vede anche su sfondi chiari) */
.l4-carousel-btn:focus-visible:not(:disabled) {
    background-color: var(--_l4-btn-fg);
    color: var(--_l4-btn-bg);
}

/* Variante per sezioni scure (classe sul carosello, accanto a l4-carousel):
   frecce bianche con freccia nera, che all'hover diventano nere */
.l4-carousel--light-arrows + .l4-carousel-controls {
    --l4-carousel-btn-bg: var(--l4-contrast-light);
    --l4-carousel-btn-color: var(--l4-contrast-dark);
}

/* Hover solo con il mouse: su touch resterebbe "acceso" dopo il tocco */
@media (hover: hover) and (pointer: fine) {
    .l4-carousel-btn:hover:not(:disabled) {
        background-color: var(--_l4-btn-fg);
        color: var(--_l4-btn-bg);
    }
}

.l4-carousel-btn:focus-visible {
    outline: 1px solid currentColor;
    outline-offset: 3px;
}

/* Freccia disattivata (inizio o fine del carosello): solo il contorno,
   senza fondo, come nella prima versione */
.l4-carousel-btn:disabled {
    background: transparent;
    border-color: color-mix(in srgb, var(--_l4-btn-bg) 30%, transparent);
    color: var(--_l4-btn-bg);
    opacity: 0.3;
    cursor: default;
}

.l4-carousel-prev svg {
    transform: rotate(180deg);
}

/* Variante: 4 card su desktop, 3 su tablet, 2 su mobile */
.l4-carousel--four {
    --l4-carousel-per-view: 4;
    --l4-carousel-per-view-tablet: 3;
    --l4-carousel-per-view-mobile: 2;
}

/* Variante: si vede un pezzo della card successiva, a tutte le larghezze.
   Si somma alle card visibili: con --four diventa 4¼ / 3¼ / 2¼. */
.l4-carousel--peek {
    --l4-carousel-peek: 0.25;
}

/* Tablet: 2 card e un pezzo */
@media (max-width: 1024px) {
    html .l4-carousel {
        --_l4-per-view: var(--l4-carousel-per-view-tablet, 2.25);
    }
}

/* Mobile: 1 card e mezza, senza frecce (si scorre con il dito) */
@media (max-width: 767px) {
    html .l4-carousel {
        --_l4-per-view: var(--l4-carousel-per-view-mobile, 1.5);
        --_l4-gap: var(--l4-carousel-gap-mobile, 1rem);
    }

    .l4-carousel-controls .l4-carousel-btn {
        display: none;
    }

    .l4-carousel-progress {
        margin-right: 0;
    }

    /* Variante .l4-carousel--arrows-mobile: frecce visibili anche qui,
       a 44px (misura minima comoda per il dito) */
    .l4-carousel--arrows-mobile + .l4-carousel-controls .l4-carousel-btn {
        display: inline-flex;
        width: 44px;
        height: 44px;
    }

    .l4-carousel--arrows-mobile + .l4-carousel-controls .l4-carousel-progress {
        margin-right: 0.75rem;
    }
}

/* -------------------------------------------
   ZOOM-OUT AL PASSAGGIO DEL MOUSE (.l4-image-zoom--out)
   Variante di .l4-image-zoom: l'immagine parte leggermente
   ingrandita e al passaggio del mouse torna alla misura reale.
   Uso: sul contenitore dell'immagine, insieme a .l4-image-zoom
     → classi: l4-image-zoom l4-image-zoom--out
   Lo zoom parte anche passando sulla card intera (.l4-card-overlay)
   o sull'elemento di una griglia .l4-hover-focus.
   Personalizzazione: --l4-zoom-from: 1.08;  ingrandimento iniziale
   Solo con il mouse: su touch l'immagine resta alla misura reale.
------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
    .l4-image-zoom.l4-image-zoom--out img {
        transform: scale(var(--l4-zoom-from, 1.08)) translateZ(0);
        transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1); /* più lento e morbido dello zoom-in */
    }

    .l4-image-zoom.l4-image-zoom--out:hover img,
    .l4-card-overlay:hover .l4-image-zoom.l4-image-zoom--out img,
    .l4-hover-focus > :hover .l4-image-zoom.l4-image-zoom--out img {
        transform: scale(1) translateZ(0);
    }
}

/* -------------------------------------------
   FOCUS SU UN ELEMENTO, GLI ALTRI SI SBIADISCONO (.l4-hover-focus)
   Sul contenitore dei progetti (con un Query Loop: sul Looper).
   Passando su un elemento, gli altri si attenuano; nello spazio tra
   le card tutti restano normali. Funziona anche con il tasto Tab.
   Usa "filter" (non "opacity"): così non entra in conflitto con
   l'animazione di entrata .l4-stagger-item, che lavora sull'opacità.
   Personalizzazione (CSS del contenitore):
     --l4-focus-dim: 0.4;    quanto restano visibili gli altri (0–1)
------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
    .l4-hover-focus > * {
        transition: filter 0.5s ease;
    }

    .l4-hover-focus:has(> :is(:hover, :focus-within)) > :not(:hover, :focus-within) {
        filter: opacity(var(--l4-focus-dim, 0.4)) saturate(0.6);
    }
}

/* -------------------------------------------
   PROPORZIONI (.l4-ratio-*)
   Su una card .l4-card-overlay: imposta le proporzioni della card.
   Su un contenitore d'immagine (anche .l4-image-zoom): l'immagine
   riempie lo spazio e viene ritagliata, senza deformarsi.
   Disponibili: l4-ratio-1-1, -4-5, -3-4, -5-7, -2-3, -16-9
------------------------------------------- */
.l4-ratio-1-1 { --l4-card-ratio: 1 / 1; aspect-ratio: 1 / 1; }
.l4-ratio-4-5 { --l4-card-ratio: 4 / 5; aspect-ratio: 4 / 5; }
.l4-ratio-3-4 { --l4-card-ratio: 3 / 4; aspect-ratio: 3 / 4; }
.l4-ratio-5-7 { --l4-card-ratio: 5 / 7; aspect-ratio: 5 / 7; }
.l4-ratio-2-3 { --l4-card-ratio: 2 / 3; aspect-ratio: 2 / 3; }
.l4-ratio-16-9 { --l4-card-ratio: 16 / 9; aspect-ratio: 16 / 9; }

:is(.l4-ratio-1-1, .l4-ratio-4-5, .l4-ratio-3-4, .l4-ratio-5-7, .l4-ratio-2-3, .l4-ratio-16-9):not(.l4-card-overlay) {
    overflow: hidden;
}

:is(.l4-ratio-1-1, .l4-ratio-4-5, .l4-ratio-3-4, .l4-ratio-5-7, .l4-ratio-2-3, .l4-ratio-16-9):not(.l4-card-overlay) img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

/* -------------------------------------------
   SEZIONE TESTO + COLLAGE (.l4-split / .l4-collage)
   Struttura (vedi il pattern "Testo + collage"):
     .l4-split                      sezione
       ├─ .l4-split__text           colonna testo
       └─ .l4-collage               colonna media
            ├─ .l4-collage__col     colonna sinistra (più bassa)
            │    └─ .l4-collage__media
            └─ .l4-collage__col     colonna destra
                 ├─ .l4-collage__media
                 └─ .l4-collage__media .l4-collage__media--small
   Varianti:
     .l4-split--reverse     media a sinistra, testo a destra
   Personalizzazione (CSS della sezione):
     --l4-media-ratio: 9 / 16;      proporzioni dei media
     --l4-collage-gap: 2.5rem;      spazio tra i media
     --l4-collage-offset: 14%;      quanto scende la colonna sinistra
------------------------------------------- */
.l4-split {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 2.5rem;
    row-gap: 4rem;
    align-items: center;
}

.l4-split__text {
    grid-column: 2 / span 4;
    max-width: 30rem;
}

.l4-split .l4-collage {
    grid-column: 7 / -1;
}

/* Variante specchiata: media a sinistra */
.l4-split--reverse .l4-split__text {
    grid-column: 8 / span 4;
    grid-row: 1;
}

.l4-split--reverse .l4-collage {
    grid-column: 1 / span 6;
    grid-row: 1;
}

/* Ritmo verticale del testo */
.l4-split__text > * {
    margin-top: 0;
    margin-bottom: 0;
}

.l4-split__text > * + * {
    margin-top: 1.75rem;
}

.l4-split__text > :is(h1, h2, h3) + * {
    margin-top: 2.5rem;
}

.l4-split__text > :is(a, .light4-btn, .gb-button, .wp-block-buttons):last-child {
    margin-top: 2.75rem;
}

/* Collage: colonna sinistra larga 4/7, destra 3/7 */
.l4-collage {
    --_l4-collage-gap: var(--l4-collage-gap, 2.5rem);

    display: grid;
    grid-template-columns: 4fr 3fr;
    gap: var(--_l4-collage-gap);
    align-items: start;
}

/* La colonna sinistra parte più in basso: composizione sfalsata */
.l4-collage > .l4-collage__col:first-child {
    margin-top: var(--l4-collage-offset, 14%);
}

.l4-collage__col {
    display: flex;
    flex-direction: column;
    gap: var(--_l4-collage-gap);
    min-width: 0;
}

/* Ogni media: maschera con proporzioni fisse, il contenuto la riempie */
.l4-collage__media {
    position: relative;
    overflow: hidden;
    aspect-ratio: var(--l4-media-ratio, 9 / 16);
    background-color: color-mix(in srgb, currentColor 6%, transparent); /* segnaposto mentre carica */
}

.l4-collage__media--small {
    width: calc((100% - 2 * var(--_l4-collage-gap)) * 2 / 3 + var(--_l4-collage-gap)); /* 2 colonne su 3 */
}

.l4-collage__media > *,
.l4-collage__media :is(figure, .wp-block-image, .wp-block-video) {
    height: 100%;
    margin: 0;
}

.l4-collage__media :is(img, video) {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

/* Tablet e mobile: testo sopra, collage sotto */
@media (max-width: 1024px) {
    .l4-split {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 3.5rem;
    }

    .l4-split__text,
    .l4-split .l4-collage,
    .l4-split--reverse .l4-split__text,
    .l4-split--reverse .l4-collage {
        grid-column: 1;
        grid-row: auto;
    }

    .l4-split__text {
        max-width: 36rem;
    }
}

@media (max-width: 767px) {
    .l4-collage {
        --_l4-collage-gap: var(--l4-collage-gap-mobile, 1rem);
    }
}

/* -------------------------------------------
   PARALLASSE DENTRO LA MASCHERA (.l4-parallax)
   Sul contenitore con overflow nascosto (es. .l4-collage__media):
   il contenuto scorre più lento della pagina, dentro la cornice.
   Varianti di velocità: .l4-parallax--slow  .l4-parallax--fast
   Direzione opposta:    .l4-parallax--reverse
   La gestisce light4.js; senza JS o con "riduci movimento" è ferma.
------------------------------------------- */
.l4-parallax {
    overflow: hidden; /* la cornice taglia il contenuto ingrandito */
}

.l4-parallax > * {
    will-change: transform;
}

/* Blocco Immagine di WordPress con la classe direttamente sul blocco */
figure.l4-parallax > img {
    display: block;
    width: 100%;
}

/* -------------------------------------------
   CASCATA: VELOCITÀ (.l4-stagger-group--slow / --fast)
   Sul contenitore con .l4-stagger-group. Valori in secondi,
   letti da light4.js: scarto tra un elemento e il successivo
   (--l4-stagger-delay) e durata di ciascuno (--l4-stagger-duration).
   Predefiniti: 0.18s di scarto, 1.3s di durata.
------------------------------------------- */
.l4-stagger-group--slow {
    --l4-stagger-delay: 0.35;
    --l4-stagger-duration: 1.5;
}

.l4-stagger-group--fast {
    --l4-stagger-delay: 0.1;
    --l4-stagger-duration: 1;
}

/* -------------------------------------------
   CARD DI SOLO TESTO (.l4-text-card)
   Sul container di ogni card. Stesso arrotondamento dei pulsanti
   (--l4-radius). Card della stessa riga alte uguali; se l'ultimo
   elemento è un link o un pulsante, resta allineato in fondo.
   Varianti:
     .l4-text-card--split     titolo in alto, testo e pulsante in fondo
     .l4-text-card--outline   solo bordo, senza fondo
     .l4-text-card--dark      fondo scuro, testo chiaro
   Personalizzazione (CSS della card): --l4-card-padding: 2.5rem;
------------------------------------------- */
.l4-text-card {
    box-sizing: border-box; /* padding incluso nell'altezza: card allineate */
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
    padding: var(--l4-card-padding, clamp(1.75rem, 3vw, 2.5rem));
    border: 1px solid transparent;
    border-radius: var(--l4-radius);
    /* nessun colore di fondo: si imposta da GenerateBlocks, card per card */
    color: var(--contrast, #222222);
    transition: border-color 0.45s ease;
}

/* Passaggio del mouse (o Tab dentro la card): il bordo diventa pieno.
   Colore regolabile con --l4-card-border-hover. */
.l4-text-card:focus-within {
    border-color: var(--l4-card-border-hover, var(--l4-contrast-dark));
}

@media (hover: hover) and (pointer: fine) {
    .l4-text-card:hover {
        border-color: var(--l4-card-border-hover, var(--l4-contrast-dark));
    }
}

.l4-text-card > * {
    margin: 0;
}

/* Titolo un po' più staccato dal testo */
.l4-text-card > :is(h2, h3, h4, h5, h6) + * {
    margin-top: 0.25rem;
}

/* Link o pulsante finale: sempre in fondo, anche se i testi hanno lunghezze diverse */
.l4-text-card > :last-child:is(a, .light4-btn, .gb-button, .wp-block-buttons, .link-slide) {
    margin-top: auto;
    padding-top: 1.5rem;
    align-self: flex-start;
}

/* Variante: titolo in alto, testo e pulsante in fondo alla card.
   Lo spazio libero va tra il titolo e il testo. Altezza minima
   regolabile con --l4-card-min-height (sulla card o sul gruppo). */
.l4-text-card--split {
    min-height: var(--l4-card-min-height, 22rem);
}

.l4-text-card--split > :is(h2, h3, h4, h5, h6) + * {
    margin-top: auto; /* tutto ciò che segue il titolo scende in fondo */
}

.l4-text-card--split > :last-child:is(a, .light4-btn, .gb-button, .wp-block-buttons, .link-slide) {
    margin-top: 0; /* resta subito sotto il testo, non a metà */
}

@media (max-width: 767px) {
    .l4-text-card--split {
        min-height: var(--l4-card-min-height-mobile, 16rem);
    }
}

/* -------------------------------------------
   GRUPPO DI CARD ALLINEATE (.l4-text-cards)
   Sul contenitore (la griglia) delle card. Allinea le righe interne
   di tutte le card: titoli in alto, testi che iniziano sulla stessa
   linea, link sulla stessa linea in fondo, anche se titoli e testi
   hanno lunghezze diverse.
   Struttura di ogni card: titolo, testo, link (in quest'ordine).
   --l4-card-spacer: 5rem;   spazio tra titolo e testo (0 = attaccati)
   Da tablet in su; su cellulare le card restano normali, una sotto l'altra.
------------------------------------------- */
@media (min-width: 768px) {
    .l4-text-cards {
        /* Ogni card occupa 4 righe: titolo / spazio / testo / link.
           Lo schema si ripete se le card vanno su più righe. */
        grid-auto-rows: auto minmax(var(--l4-card-spacer, 5rem), auto) auto auto;
    }

    .l4-text-cards > .l4-text-card {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 4;
        row-gap: 0;
        min-height: 0;
        height: auto;
    }

    .l4-text-cards > .l4-text-card > * {
        margin: 0;
    }

    .l4-text-cards > .l4-text-card > :nth-child(1) { grid-row: 1; }
    .l4-text-cards > .l4-text-card > :nth-child(2) { grid-row: 3; align-self: start; }
    .l4-text-cards > .l4-text-card > :nth-child(3) {
        grid-row: 4;
        align-self: start; /* link allineati dall'alto, anche se uno va a capo */
        margin: 0;         /* annulla il margin-top: auto della card base */
        padding-top: 1.5rem;
    }
}

.l4-text-card--outline {
    background-color: transparent;
    border-color: color-mix(in srgb, currentColor 20%, transparent);
}

.l4-text-card--dark {
    background-color: var(--contrast-2, #2D2926);
    color: var(--base-3, #ffffff);
}

/* Nella card scura i link prendono il colore chiaro del testo
   (anche quelli con .link-slide, che altrimenti sarebbero scuri) */
.l4-text-card--dark a:not(.light4-btn) {
    color: inherit;
}

/* -------------------------------------------
   MOVIMENTO RIDOTTO (impostazione di accessibilità del sistema)
------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    /* Zoom-out: immagine ferma alla misura reale */
    html .l4-image-zoom.l4-image-zoom--out img {
        transform: none !important;
        transition: none !important;
    }

    html .l4-carousel {
        scroll-behavior: auto;
    }

    .l4-image-zoom img,
    .l4-image-zoom:hover img {
        transition: none;
        transform: none;
    }

    a.light4-link-underline,
    .light4-link-underline a,
    .light4-menu-text::after,
    .light4-menu-list .menu-item > a::before {
        transition: none;
    }
}