/* =============================================================
   sections-bento.css — Bento Premium (2026)
   Sezioni home: "Cambridge GOLD Preparation Centre" e
   "Certificazioni Internazionali".
   Token-based: usa le preset color di theme.json, quindi si
   adatta sia a Warm Tones sia a PHSE Professional.
   Hook di classe (da applicare ai pattern):
     .saba-bento              → wrapper sezione
     .saba-bento__head        → heading + sottotitolo (centrati)
     .saba-bento__grid        → griglia certificato + rail
     .saba-bento__cert        → card certificato (bordeaux)
     .saba-bento__rail        → colonna delle 3 feature
     .saba-feature            → singola feature card
     .saba-cert-grid          → griglia chip certificazioni
     .saba-cert-chip          → singola chip certificazione
   ============================================================= */

:root {
    --saba-bento-radius: 22px;
    --saba-bento-radius-sm: 16px;
    --saba-bento-gold: var(--wp--preset--color--accent, #D4A574);
    --saba-bento-bordeaux: var(--wp--preset--color--primary, #A32638);
    --saba-bento-bordeaux-dark: var(--wp--preset--color--primary-dark, #7D1D2C);
    --saba-bento-cream: var(--wp--preset--color--background, #FFF8F0);
    --saba-bento-cream-alt: var(--wp--preset--color--background-alt, #F3EBE2);
    --saba-bento-ink: var(--wp--preset--color--foreground, #2A2A2A);
    --saba-bento-ink-soft: var(--wp--preset--color--secondary, #565656);

    /* Hover-lift card (saba-feature, saba-cert-chip, saba-mission-card,
       saba-info-card, card "I nostri servizi"): un'unica sorgente per
       intensità/easing, così l'intero sito si accorda da qui invece che
       da valori duplicati in ogni regola :hover.
       NB: translate/scale (non transform) — le card con animazione di
       reveal (plugin Saba Animations o @keyframes saba-home-reveal più
       sotto) tengono "transform" occupato in modo permanente con
       animation-timeline:view(); usare transform anche qui lo bloccherebbe. */
    --saba-hover-lift: -6px;
    --saba-hover-scale: 1.015;
    --saba-hover-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --saba-hover-duration: 0.35s;
    --saba-hover-border: color-mix(in srgb, var(--saba-bento-gold) 70%, transparent);
    --saba-hover-shadow:
        0 4px 12px -4px rgba(0, 0, 0, 0.14),
        0 28px 48px -20px color-mix(in srgb, var(--saba-bento-bordeaux) 50%, transparent);
    --saba-hover-transition: translate var(--saba-hover-duration) var(--saba-hover-ease), scale var(--saba-hover-duration) var(--saba-hover-ease), box-shadow var(--saba-hover-duration) var(--saba-hover-ease), border-color 0.25s ease;
}

/* ---------- Sezione ---------- */
.saba-bento {
    padding-block: clamp(3.5rem, 7vw, 6rem);
}

.saba-bento__head {
    max-width: 760px;
    margin-inline: auto;
    text-align: center;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.saba-bento__eyebrow {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--saba-bento-bordeaux);
    background: color-mix(in srgb, var(--saba-bento-gold) 22%, transparent);
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    margin-bottom: 1.1rem;
}

.saba-bento__title {
    font-size: clamp(2rem, 4.5vw, 3rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--saba-bento-ink);
    margin: 0 0 0.9rem;
}

.saba-bento__subtitle {
    font-size: clamp(1.05rem, 1.6vw, 1.3rem);
    line-height: 1.5;
    color: var(--saba-bento-ink-soft);
    margin: 0;
}

/* ---------- Griglia bento (Cambridge) ---------- */
.saba-bento__grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(1.25rem, 2.5vw, 2rem);
    align-items: stretch;
    max-width: 1180px;
    margin-inline: auto;
}

/* Card certificato: bordeaux premium con filo oro */
.saba-bento__cert {
    position: relative;
    display: flex;
    flex-direction: column;
    background: linear-gradient(160deg, var(--saba-bento-bordeaux) 0%, var(--saba-bento-bordeaux-dark) 100%);
    border-radius: var(--saba-bento-radius);
    padding: clamp(1.5rem, 2.5vw, 2.25rem);
    overflow: hidden;
    box-shadow: 0 26px 60px -24px color-mix(in srgb, var(--saba-bento-bordeaux) 70%, black);
}

.saba-bento__cert::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 5px;
    background: linear-gradient(90deg, var(--saba-bento-gold), #f0d9b8, var(--saba-bento-gold));
}

.saba-bento__seal {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    align-self: flex-start;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--saba-bento-bordeaux-dark);
    background: var(--saba-bento-gold);
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    margin-bottom: 1.1rem;
}

.saba-bento__cert figure {
    margin: 0;
    border-radius: var(--saba-bento-radius-sm);
    overflow: hidden;
    background: #fff;
    box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.5);
}

.saba-bento__cert figure img {
    display: block;
    width: 100%;
    height: auto;
}

.saba-bento__cert-caption {
    margin: 1.25rem 0 0;
    font-size: 0.98rem;
    line-height: 1.6;
    color: color-mix(in srgb, #fff 86%, transparent);
}

/* Rail: 3 feature card impilate, centrate verticalmente sul certificato.
   height:100% riempie la cella grid (alta come il certificato) e
   align-content:center centra il gruppo di card; grid-auto-rows:max-content
   evita che le card si allunghino, gap stretto tra loro. */
.saba-bento__rail {
    display: grid;
    grid-auto-rows: max-content;
    align-content: center;
    height: 100%;
    gap: 1rem;
}

.saba-feature {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.4rem 1.1rem;
    align-content: center;
    background: var(--wp--preset--color--surface, #fff);
    border: 1px solid var(--wp--preset--color--gray-light, #E6E0D9);
    border-radius: var(--saba-bento-radius-sm);
    padding: clamp(1.1rem, 2vw, 1.5rem);
    box-shadow: 0 8px 22px -14px rgba(0, 0, 0, 0.25);
    transition: var(--saba-hover-transition);
}

.saba-feature:hover {
    translate: 0 var(--saba-hover-lift);
    scale: var(--saba-hover-scale);
    border-color: var(--saba-hover-border);
    box-shadow: var(--saba-hover-shadow);
}

.saba-feature__icon {
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 13px;
    color: var(--saba-bento-bordeaux);
    background: color-mix(in srgb, var(--saba-bento-gold) 24%, transparent);
    border: 1px solid color-mix(in srgb, var(--saba-bento-gold) 45%, transparent);
}

.saba-feature__icon svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    stroke-width: 1.9;
    fill: none;
}

.saba-feature h3 {
    margin: 0;
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--saba-bento-ink);
}

.saba-feature p {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--saba-bento-ink-soft);
}

/* ---------- Griglia chip (Certificazioni) ---------- */
.saba-cert-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(1rem, 2vw, 1.5rem);
    align-items: stretch;
    max-width: 1180px;
    margin-inline: auto;
}

.saba-cert-chip {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 0.6rem;
    background: var(--wp--preset--color--surface, #fff);
    border: 1px solid var(--wp--preset--color--gray-light, #E6E0D9);
    border-radius: var(--saba-bento-radius-sm);
    padding: clamp(1.25rem, 2vw, 1.6rem);
    box-shadow: 0 8px 22px -14px rgba(0, 0, 0, 0.22);
    transition: var(--saba-hover-transition);
}

.saba-cert-chip:hover {
    translate: 0 var(--saba-hover-lift);
    scale: var(--saba-hover-scale);
    border-color: var(--saba-hover-border);
    box-shadow: var(--saba-hover-shadow);
}

.saba-cert-chip__badge {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(150deg, var(--saba-bento-bordeaux), var(--saba-bento-bordeaux-dark));
}

.saba-cert-chip__badge svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    stroke-width: 1.9;
    fill: none;
}

.saba-cert-chip h4 {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--saba-bento-bordeaux);
}

.saba-cert-chip p {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--saba-bento-ink-soft);
}

/* ---------- CTA ---------- */
.saba-bento__cta {
    display: flex;
    justify-content: center;
    margin-top: clamp(2rem, 4vw, 3rem);
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .saba-bento__grid {
        grid-template-columns: 1fr;
    }
    .saba-cert-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .saba-cert-grid {
        grid-template-columns: 1fr;
    }
    .saba-feature {
        grid-template-columns: auto 1fr;
    }
}

/* =============================================================
   FASE 1 — Uniformazione home (scopata a .home)
   Porta le card "vecchie" allo stesso linguaggio del bento:
   raggio 16px, ombra soft, bordo gray-light, hover-lift in oro.
   ============================================================= */

/* Card light unificata (La nostra missione, Conoscere le lingue).
   NB: lo sfondo della card NON viene forzato: ognuna mantiene il proprio
   (bianca su sezione crema, crema su sezione bianca) per il giusto contrasto. */
.home .saba-mission-card,
.home .saba-info-card {
    border-radius: var(--saba-bento-radius-sm, 16px) !important;
    border: 1px solid var(--wp--preset--color--gray-light, #E6E0D9) !important;
    border-left-width: 1px !important;
    box-shadow: 0 8px 22px -14px rgba(0, 0, 0, 0.18) !important;
    transition: var(--saba-hover-transition) !important;
}

.home .saba-mission-card:hover,
.home .saba-info-card:hover {
    translate: 0 var(--saba-hover-lift);
    scale: var(--saba-hover-scale);
    border-color: var(--saba-hover-border) !important;
    box-shadow: var(--saba-hover-shadow) !important;
}

/* Card highlight (gradiente bordeaux): allinea solo il raggio */
.home .saba-info-card-highlight {
    border-radius: var(--saba-bento-radius-sm, 16px) !important;
}

/* Bottoni: raggio unico in tutta la home */
.home .wp-block-button__link {
    border-radius: 10px !important;
}

/* Titoli: niente maiuscolo forzato (uniforma la scala) */
.home .wp-block-heading {
    text-transform: none !important;
}

/* Focus-visible coerente (a11y 2026) */
.home .saba-mission-card a:focus-visible,
.home .saba-info-card a:focus-visible,
.home .saba-feature a:focus-visible,
.home .saba-cert-chip a:focus-visible,
.home .wp-block-button__link:focus-visible {
    outline: 2px solid var(--saba-bento-gold, #D4A574);
    outline-offset: 2px;
}

/* =============================================================
   FASE 1b — scala titoli, card residue, ritmo sezioni, motion
   ============================================================= */

/* Titoli sezione: scala unica su tutta la home */
.home h2.wp-block-heading {
    font-size: clamp(2rem, 3.6vw, 2.75rem) !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.12 !important;
}

/* Card "Esperienze" (media-text) e box "Help for Zambia": raggio uniforme */
.home .wp-block-media-text {
    border-radius: var(--saba-bento-radius-sm, 16px) !important;
    overflow: hidden !important;
}
/* Esperienze: spazio tra le due media-text impilate (prima attaccate). */
.home .wp-block-group.alignfull:has(.wp-block-media-text) .wp-block-media-text + .wp-block-media-text {
    margin-top: clamp(1rem, 2vw, 1.5rem) !important;
}
.home .saba-event-info-box,
.home .saba-fondi-box {
    border-radius: var(--saba-bento-radius-sm, 16px) !important;
}

/* Ritmo verticale uniforme delle sezioni (hero escluso).
   :has() seleziona solo le sezioni con quelle card specifiche, così non
   tocca l'hero né altri gruppi full-width. */
.home .wp-block-group.alignfull:has(.saba-mission-card),
.home .wp-block-group.alignfull:has(.wp-block-media-text),
.home .wp-block-group.alignfull:has(.saba-info-card),
.home .wp-block-group.alignfull:has(.saba-event-info-box) {
    padding-top: clamp(3.5rem, 7vw, 6rem) !important;
    padding-bottom: clamp(3.5rem, 7vw, 6rem) !important;
}

/* Ritmo sfondi sezione: alternanza crema / crema-alt su tutta la home.
   Sequenza: missione CREMA · Zambia ACCENT bordeaux · lingue ALT · Cambridge
   CREMA · Certificazioni ALT · Esperienze CREMA. Help for Zambia resta un
   accent coerente col bento (vedi sotto). Selezione via :has() sulla card. */
.home .wp-block-group.alignfull.has-background-alt-background-color:has(.saba-mission-card) {
    background-color: var(--wp--preset--color--background, #FFF8F0) !important;
}
.home .wp-block-group.alignfull.has-white-background-color:has(.saba-info-card) {
    background-color: var(--wp--preset--color--background-alt, #F3EBE2) !important;
}
.home .saba-info-card {
    background-color: var(--wp--preset--color--surface, #fff) !important;
}

/* "Help for Zambia": accent bordeaux coerente col bento (filo oro, glass + card
   bianca, badge oro, immagini con cornice). Gradiente reso bordeaux-dominante
   per la leggibilità del testo bianco. :has(.saba-fondi-box) = unico della
   sezione (l'header usa la stessa gradient class ma non ha il fondi-box).
   IMPORTANTE sui contrasti: gli elenchi di elementi usano :where() (specificità
   0), così la regola "testo scuro" della card bianca (catena di classe più
   lunga) vince in modo prevedibile sulla regola base "testo bianco". Con :is()
   un :not(.classe) interno gonfiava la specificità e invertiva i contrasti
   (bug white-on-white nella fondi-box). */
.home .wp-block-group.alignfull.saba-fundraising-banner.has-blue-accent-gradient-background:has(.saba-fondi-box) {
    background-image: linear-gradient(160deg, #A32638 0%, #7D1D2C 100%) !important;
    background-color: #7D1D2C !important;
}
.home .saba-fundraising-banner:has(.saba-fondi-box) {
    position: relative;
    overflow: hidden;
}
/* filo oro in alto (come la card-certificato bento) */
.home .saba-fundraising-banner:has(.saba-fondi-box)::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 5px;
    z-index: 4;
    pointer-events: none;
    background: linear-gradient(90deg, var(--saba-bento-gold, #D4A574), #f0d9b8, var(--saba-bento-gold, #D4A574));
}
/* Testo: base BIANCO su gradiente/glass (incl. div tipo "MINISTRY…").
   I bottoni (.wp-element-button) sono ESCLUSI: mantengono il loro stile (sotto),
   altrimenti il testo del bottone diventa bianco su sfondo chiaro (illeggibile). */
.home .saba-fundraising-banner:has(.saba-fondi-box) :where(h2, h3, h4, p, strong, li, em, div, span, a:not(.wp-element-button):not(.wp-block-file__button)) {
    color: #fff !important;
}
/* Card bianca (fondi-box) → testo SCURO (catena più lunga → vince). */
.home .saba-fundraising-banner:has(.saba-fondi-box) .saba-fondi-box :where(h2, h3, h4, p, strong, li, em, div, span, a:not(.wp-element-button):not(.wp-block-file__button)) {
    color: var(--wp--preset--color--foreground, #2A2A2A) !important;
}
.home .saba-fundraising-banner:has(.saba-fondi-box) .saba-fondi-box .saba-ico {
    color: var(--saba-bento-bordeaux, #A32638) !important;
}
/* Badge oro → testo bordeaux. */
.home .saba-fundraising-banner:has(.saba-fondi-box) .saba-event-badge :where(p, strong, span, h3, h4) {
    color: #7D1D2C !important;
}
/* card glass */
.home .saba-event-info-box {
    background: rgba(255, 255, 255, 0.10) !important;
    border: 1px solid color-mix(in srgb, var(--saba-bento-gold, #D4A574) 50%, transparent) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 14px 32px -18px rgba(0, 0, 0, 0.55) !important;
    border-radius: 16px !important;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}
/* card bianca fondi-box */
.home .saba-fondi-box {
    background: #fff !important;
    border: 1px solid var(--wp--preset--color--gray-light, #E6E0D9) !important;
    box-shadow: 0 14px 32px -18px rgba(0, 0, 0, 0.5) !important;
    border-radius: 16px !important;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}
/* badge oro bg */
.home .saba-fundraising-banner .saba-event-badge {
    background: var(--saba-bento-gold, #D4A574) !important;
    border: none !important;
    box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.4) !important;
}
.home .saba-event-info-box:hover,
.home .saba-fondi-box:hover {
    transform: translateY(-4px);
}
/* Immagini: cornice coerente (erano grezze, raggio 0, niente ombra) */
.home .saba-fundraising-banner:has(.saba-fondi-box) .wp-block-media-text__media img,
.home .saba-fundraising-banner:has(.saba-fondi-box) figure.wp-block-image img {
    border-radius: 16px !important;
    box-shadow: 0 14px 32px -18px rgba(0, 0, 0, 0.55);
    display: block;
}
/* Bottone "Scarica l'Elenco": stacca dall'immagine sopra + oro su bordeaux */
.home .saba-fundraising-banner:has(.saba-fondi-box) .wp-block-file {
    margin-top: 1.5rem !important;
}
.home .saba-fundraising-banner a.wp-block-file__button {
    background-color: var(--saba-bento-gold, #D4A574) !important;
    color: #7D1D2C !important;
    border-radius: 10px !important;
    margin-left: 0 !important;
}
/* Bottone "Scopri FOR Zambia" (wp-block-button, stile saba-cta-glow): era
   bianco-su-bianco. Lo rendo un CTA oro coerente col pulsante "Scarica" e
   neutralizzo l'effetto glow (::before) che confondeva lo sfondo. */
.home .saba-fundraising-banner:has(.saba-fondi-box) .wp-block-button .wp-block-button__link {
    background: var(--saba-bento-gold, #D4A574) !important;
    color: #7D1D2C !important;
    border: none !important;
    box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.4) !important;
}
.home .saba-fundraising-banner:has(.saba-fondi-box) .wp-block-button.saba-cta-glow .wp-block-button__link::before {
    display: none !important;
}

/* Icona inline (sostituisce le emoji): eredita il colore del testo */
.saba-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: -0.16em;
    width: 1.1em;
    height: 1.1em;
    margin-right: 0.4em;
}
.saba-ico svg {
    width: 100%;
    height: 100%;
}

/* Accessibilità: rispetta prefers-reduced-motion (disattiva entrance/slide) */
@media (prefers-reduced-motion: reduce) {
    .home .is-animated,
    .home [class*="saba-slide"] {
        transition: none !important;
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}

/* =============================================================
   SISTEMA BOTTONI UNIFICATO 2026 (.home)
   Design-system component-based: un'unica libreria di regole per
   tutta la home, così i bottoni sono coerenti (prima ogni sezione
   aveva colori/effetti diversi: bordeaux/ocra/ocra-scuro, testo
   bianco/bordeaux/ocra, glow misti).
   - PRIMARY (pieno):  sezioni chiare → bordeaux + bianco
                       sezioni scure (cover hero / Help Zambia) → oro + bordeaux
   - SECONDARY (outline): bordo+testo bordeaux su chiaro / bianco su scuro,
                          con riempimento all'hover (cambio forma/colore 2026)
   - Micro-interazioni: hover lift (calamita) + bloom d'ombra, transizione
     fluida; :active reset; contorni netti (raggio 10px, outline 2px).
   - A11y WCAG: hit-box min 44px, focus-visible ring, contrasti verificati
     (bordeaux+bianco ~7:1, oro+bordeaux ~5.9:1).
   ============================================================= */
.home .wp-block-button__link,
.home .wp-block-file__button {
    border-radius: 10px !important;
    /* taglia unica: prima variavano (12px/24px vs 16px/32px) */
    padding: 0.9rem 2rem !important;
    min-height: 44px;
    font-size: 1rem !important;
    font-weight: 600;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}
.home .wp-block-button__link:hover,
.home .wp-block-file__button:hover {
    transform: translateY(-2px);
}
.home .wp-block-button__link:active,
.home .wp-block-file__button:active {
    transform: translateY(0);
}
.home .wp-block-button__link:focus-visible,
.home .wp-block-file__button:focus-visible {
    outline: 2px solid var(--saba-bento-gold, #D4A574) !important;
    outline-offset: 3px;
}

/* PRIMARY su sezioni CHIARE → bordeaux + bianco */
.home .wp-block-button:not(.is-style-outline) > .wp-block-button__link {
    background: var(--wp--preset--color--primary, #A32638) !important;
    background-image: none !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 6px 18px -10px rgba(163, 38, 56, 0.6) !important;
}
.home .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover {
    background: var(--wp--preset--color--primary-dark, #7D1D2C) !important;
    box-shadow: 0 12px 26px -12px rgba(163, 38, 56, 0.7) !important;
}

/* PRIMARY su sezioni SCURE (cover hero + Help Zambia) → oro + bordeaux */
.home .wp-block-cover .wp-block-button:not(.is-style-outline) > .wp-block-button__link,
.home .saba-fundraising-banner:has(.saba-fondi-box) .wp-block-button:not(.is-style-outline) > .wp-block-button__link {
    background: var(--saba-bento-gold, #D4A574) !important;
    color: #7D1D2C !important;
}
.home .wp-block-cover .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover,
.home .saba-fundraising-banner:has(.saba-fondi-box) .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover {
    background: var(--wp--preset--color--accent-light, #E8C9A7) !important;
}

/* SECONDARY (outline) su CHIARO → bordeaux, fill all'hover */
.home .wp-block-button.is-style-outline > .wp-block-button__link {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: 2px solid var(--wp--preset--color--primary, #A32638) !important;
    color: var(--wp--preset--color--primary, #A32638) !important;
}
.home .wp-block-button.is-style-outline > .wp-block-button__link:hover {
    background: var(--wp--preset--color--primary, #A32638) !important;
    color: #fff !important;
}
/* SECONDARY su SCURO (cover) → bianco */
.home .wp-block-cover .wp-block-button.is-style-outline > .wp-block-button__link {
    border-color: #fff !important;
    color: #fff !important;
}
.home .wp-block-cover .wp-block-button.is-style-outline > .wp-block-button__link:hover {
    background: #fff !important;
    color: var(--wp--preset--color--primary, #A32638) !important;
}

/* Reduced-motion: niente lift sui bottoni */
@media (prefers-reduced-motion: reduce) {
    .home .wp-block-button__link,
    .home .wp-block-file__button {
        transition: none !important;
    }
    .home .wp-block-button__link:hover,
    .home .wp-block-file__button:hover {
        transform: none !important;
    }
}

/* =============================================================
   REVEAL ON SCROLL — CSS scroll-driven 2026 (curato)
   Sostituisce il vecchio reveal JS (che nascondeva ~44 blocchi via
   IntersectionObserver + opacity inline). Qui un SET MIRATO di elementi
   — titoli di sezione e card chiave — si rivela mentre entra nel viewport.

   Principi:
   - Zero JavaScript: `animation-timeline: view()` gira off-main-thread.
   - Contenuto SEMPRE visibile di default: l'effetto vive solo dentro
     @supports + prefers-reduced-motion:no-preference. Browser senza
     supporto o utenti che chiedono meno movimento → nessuna animazione,
     nessun contenuto nascosto (niente FOUC, niente safety-net JS).
   ============================================================= */
@keyframes saba-home-reveal {
    from { opacity: 0; transform: translateY(1.75rem); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        .home :is(
            .saba-bento__head,
            .saba-mission-card,
            .saba-info-card,
            .saba-feature,
            .saba-cert-chip,
            .saba-fundraising-banner .saba-fondi-box
        ) {
            animation: saba-home-reveal both ease-out;
            animation-timeline: view();
            /* completa l'entrata poco dopo l'apparizione: ciò che è già
               visibile al load resta subito allo stato finale. Con view-timeline
               la progressione la detta lo scroll, non serve animation-duration. */
            animation-range: entry 0% cover 28%;
        }
    }
}

/* =============================================================
   SMOOTH SCROLL nativo (sostituisce il JS smoothScrollLinks)
   scroll-margin-top compensa l'header per gli anchor-link interni.
   ============================================================= */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}
:where(h1, h2, h3, h4, h5, h6)[id],
:where(section, article)[id] {
    scroll-margin-top: 100px;
}

/* =============================================================
   PAGINA "Chi siamo" (id 148) — stesso linguaggio bento della home
   Scoped a .page-id-148: card con raggio/ombra/hover coerenti, scala
   titoli unica, ritmo verticale sezioni. Il reveal on-scroll resta
   quello del plugin Saba Animations (attributo Animazione sul blocco),
   qui non viene generato via CSS.
   ============================================================= */

/* Hero "La nostra storia": l'overlay originale (gradiente giallo/arancio) non
   appartiene alla palette del sito e lascia il testo (colore "background",
   quasi bianco) illeggibile sopra il video chiaro. Scrim bordeaux-oro coerente
   col resto del sito (stessa formula della card "Help for Zambia"),
   asimmetrico: leggero sulla foto a sinistra, scuro dietro al testo a destra
   (il media-text ha grid-template-columns:24% auto, foto stretta a sinistra). */
.page-id-148 .wp-block-cover {
    position: relative;
}
.page-id-148 .wp-block-cover__video-background {
    filter: saturate(0.75) brightness(0.82);
}
.page-id-148 .wp-block-cover .wp-block-cover__background.has-background-gradient {
    background: linear-gradient(90deg, rgba(125, 39, 29, 0.25) 0%, rgba(125, 39, 29, 0.55) 24%, rgba(90, 25, 20, 0.85) 100%) !important;
    opacity: 1 !important;
}
.page-id-148 .wp-block-cover::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    z-index: 5;
    pointer-events: none;
    background: linear-gradient(90deg, var(--saba-bento-gold, #D4A574), #f0d9b8, var(--saba-bento-gold, #D4A574));
}
.page-id-148 .wp-block-media-text__content h1,
.page-id-148 .wp-block-media-text__content p {
    color: #fff !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

/* Titoli sezione: stessa scala della home */
.page-id-148 h2.wp-block-heading {
    font-size: clamp(2rem, 3.6vw, 2.75rem) !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.12 !important;
}

/* Ritmo verticale sezioni (hero esclusa) */
.page-id-148 .entry-content > .wp-block-group:not(.saba-video-card) {
    padding-top: clamp(3.5rem, 7vw, 6rem) !important;
    padding-bottom: clamp(3.5rem, 7vw, 6rem) !important;
}

/* Card "I nostri servizi": raggio pieno + ombra + hover-lift, altezza uniforme */
.page-id-148 .wp-block-columns .wp-block-column .has-white-background-color.has-background {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: var(--saba-bento-radius-sm, 16px) !important;
    border: 1px solid var(--wp--preset--color--gray-light, #E6E0D9);
    box-shadow: 0 8px 22px -14px rgba(0, 0, 0, 0.22);
    transition: var(--saba-hover-transition);
}
.page-id-148 .wp-block-columns .wp-block-column .has-white-background-color.has-background:hover {
    translate: 0 var(--saba-hover-lift);
    scale: var(--saba-hover-scale);
    border-color: var(--saba-hover-border);
    box-shadow: var(--saba-hover-shadow);
}

/* Video "60 secondi": stesso raggio/ombra delle card bento */
.page-id-148 .saba-video-card {
    border-radius: var(--saba-bento-radius-sm, 16px) !important;
    box-shadow: 0 14px 32px -18px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}
.page-id-148 .saba-video-card figure.wp-block-video {
    border-radius: var(--saba-bento-radius-sm, 16px) !important;
    overflow: hidden;
    margin: 0;
}

/* Citazione fondatrice: card con virgolette oro, coerente col bento */
.page-id-148 blockquote.wp-block-quote {
    position: relative;
    background: var(--wp--preset--color--surface, #fff);
    border: 1px solid var(--wp--preset--color--gray-light, #E6E0D9);
    border-radius: var(--saba-bento-radius, 22px);
    box-shadow: 0 14px 32px -18px rgba(0, 0, 0, 0.18);
    max-width: 900px;
    margin-inline: auto;
    padding-inline: clamp(1.5rem, 4vw, 3rem) !important;
}
.page-id-148 blockquote.wp-block-quote::before {
    content: "\201C";
    position: absolute;
    top: 0.1rem;
    left: 1.5rem;
    font-size: 4rem;
    line-height: 1;
    color: var(--saba-bento-gold, #D4A574);
    font-family: Georgia, serif;
    opacity: 0.7;
}
.page-id-148 blockquote.wp-block-quote cite {
    color: var(--saba-bento-bordeaux, #A32638);
    font-weight: 600;
}

/* Ritratti fondatori: cornice con ombra, coerente con le altre immagini bento */
.page-id-148 figure.wp-block-image.has-custom-border img {
    box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.35);
}

/* Focus-visible coerente (a11y 2026) */
.page-id-148 a:focus-visible {
    outline: 2px solid var(--saba-bento-gold, #D4A574);
    outline-offset: 2px;
}

/* =============================================================
   PAGINA "Formazione Linguistica" (id 1218) — card lingue e card
   Cambridge Gold avevano già raggio/bordo corretti (impostati inline
   nell'editor) ma nessuna ombra/hover: le allineo ai token condivisi.
   ============================================================= */
.page-id-1218 .saba-language-card > .wp-block-group {
    box-shadow: 0 8px 22px -14px rgba(0, 0, 0, 0.22);
    transition: var(--saba-hover-transition);
}
.page-id-1218 .saba-language-card:hover > .wp-block-group {
    translate: 0 var(--saba-hover-lift);
    scale: var(--saba-hover-scale);
    box-shadow: var(--saba-hover-shadow);
}
.page-id-1218 .saba-cambridge-card {
    box-shadow: 0 8px 22px -14px rgba(163, 38, 56, 0.15);
    transition: var(--saba-hover-transition);
}
.page-id-1218 .saba-cambridge-card:hover {
    translate: 0 var(--saba-hover-lift);
    scale: var(--saba-hover-scale);
    box-shadow: var(--saba-hover-shadow);
}

/* =============================================================
   TEMPLATE "page-formazione-linguistica.html" — usato da
   Inglese/Francese/Spagnolo (le sottopagine lingua). Card
   competenze/corsi avevano raggio ma nessuna ombra/hover; l'hero
   usava un overlay bordeaux piatto invece dello scrim asimmetrico.
   ============================================================= */
.saba-lang-hero {
    position: relative;
}
.saba-lang-hero::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(90deg, var(--saba-bento-gold, #D4A574), #f0d9b8, var(--saba-bento-gold, #D4A574));
}

.saba-skill-card {
    box-shadow: 0 8px 22px -14px rgba(0, 0, 0, 0.18);
    transition: var(--saba-hover-transition);
}
.saba-skill-card:hover {
    translate: 0 var(--saba-hover-lift);
    scale: var(--saba-hover-scale);
    box-shadow: var(--saba-hover-shadow);
}

.saba-course-card {
    box-shadow: 0 8px 22px -14px rgba(0, 0, 0, 0.22);
    transition: var(--saba-hover-transition);
}
.saba-course-card:hover {
    translate: 0 var(--saba-hover-lift);
    scale: var(--saba-hover-scale);
    box-shadow: var(--saba-hover-shadow);
}

/* =============================================================
   PAGINA "Turismo Responsabile / Le nostre attività" (id 556) —
   le card "Le nostre esperienze" (.saba-hub-card) avevano un raggio
   immagine impostato con chiavi non valide ("top"/"right" invece di
   topLeft/topRight), quindi WordPress non generava alcun border-radius:
   foto con angoli quadrati che sporgevano dalla card bianca arrotondata.
   Fix: overflow:hidden sul contenitore (che ha già radius:16px inline)
   ritaglia la foto ai suoi angoli, niente bisogno di toccare l'attributo.
   Aggiunte anche ombra/hover-lift (mancavano) e il filo oro dell'hero,
   assente qui mentre presente su tutte le altre pagine con cover foto.
   ============================================================= */
.page-id-556 .saba-hub-card > .wp-block-group {
    overflow: hidden;
    box-shadow: 0 8px 22px -14px rgba(0, 0, 0, 0.22);
    transition: var(--saba-hover-transition);
}
.page-id-556 .saba-hub-card:hover > .wp-block-group {
    translate: 0 var(--saba-hover-lift);
    scale: var(--saba-hover-scale);
    border-color: var(--saba-hover-border);
    box-shadow: var(--saba-hover-shadow);
}

.page-id-556 .wp-block-cover {
    position: relative;
}
.page-id-556 .wp-block-cover::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(90deg, var(--saba-bento-gold, #D4A574), #f0d9b8, var(--saba-bento-gold, #D4A574));
}

/* Bottoni: micro-interazione hover mancante (nessuna delle due CTA
   di pagina l'aveva); non sono dentro elementi ad animazione scroll,
   quindi transform è sicuro qui (a differenza delle card sopra). */
.page-id-556 .wp-block-button__link {
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease;
}
.page-id-556 .wp-block-button__link:hover {
    transform: translateY(-2px);
}
.page-id-556 .wp-block-button__link:focus-visible {
    outline: 2px solid var(--saba-bento-gold, #D4A574);
    outline-offset: 3px;
}