/* ═══════════════════════════════════════════════════
   BNB Events v2.0 — Bagliori Nel Buio
   ═══════════════════════════════════════════════════ */

/*
 * I colori stanno tutti qui.
 *
 * Prima erano scritti a mano in un centinaio di punti — trenta «#fff», quaranta
 * «rgba(255,255,255,...)» — e cambiare tema avrebbe voluto dire ripassarli uno
 * per uno sperando di non saltarne nessuno. Adesso sono nomi: cambiare l'aspetto
 * e' cambiare questo blocco, e i punti che li usano non si toccano piu'.
 *
 * Il chiaro e' quello di partenza. Per tornare al nero e oro basta aggiungere
 * class="bnb-scuro" al contenitore, o accendere l'interruttore nelle
 * impostazioni, che lo mette sul <body> di tutto il sito.
 */
:root {
    /*
     * L'accento e' il nero.
     *
     * Il nome della variabile resta «gold» perche' e' scritto in duecento
     * punti: rinominarlo adesso vorrebbe dire toccare duecento righe per
     * cambiare una parola, e ogni riga toccata e' una riga che si puo'
     * sbagliare. Il colore si cambia qui, il nome lo si cambiera' quando
     * ci sara' un motivo migliore della bellezza del nome.
     */
    --bnb-gold: #16181c;
    --bnb-gold-hover: #000000;
    --bnb-gold-rgb: 22, 24, 28;

    /* Le superfici, dalla piu' esterna alla piu' interna. */
    --bnb-page: #ffffff;
    --bnb-page-rgb: 255, 255, 255;
    --bnb-surface: #ffffff;
    --bnb-surface-2: #f7f6f3;
    --bnb-surface-3: #efeee9;

    --bnb-border: #e2e0da;

    /* Il testo. Nero pieno su bianco pieno stanca gli occhi: si usa un
       grigio molto scuro, che resta ben oltre il minimo di leggibilita'. */
    --bnb-text: #1c1e22;
    --bnb-text-muted: #5c626b;

    /* L'inchiostro a opacita': su fondo chiaro e' scuro. E' la variabile che
       ha permesso di convertire in un colpo solo tutti i rgba(255,255,255). */
    --bnb-ink-rgb: 28, 30, 34;

    /* La coppia che si scambia: fondo pieno di contrasto e testo sopra. */
    --bnb-invert-bg: #1c1e22;
    --bnb-invert-fg: #ffffff;

    /* Il testo sopra l'oro. */
    --bnb-on-gold: #ffffff;

    --bnb-shadow-color: rgba(28, 30, 34, 0.10);

    --bnb-radius: 10px;
    --bnb-transition: all 0.25s ease;

    /* Gli accenti di stato, scuriti quanto basta per leggerli sul bianco. */
    --bnb-online-color: #1c7a5a;
    --bnb-live-color: #b03a3a;
    --bnb-course-color: #3a5f96;
}

/* Il nero e oro di prima, intatto, per chi lo rivuole. */
.bnb-scuro,
body.bnb-scuro {
    --bnb-gold: #c9a96e;
    --bnb-gold-hover: #e0c08a;
    --bnb-gold-rgb: 201, 169, 110;

    --bnb-page: #0a0a0a;
    --bnb-page-rgb: 10, 10, 10;
    --bnb-surface: #111111;
    --bnb-surface-2: #1a1a1a;
    --bnb-surface-3: #222222;

    --bnb-border: #2a2a2a;

    --bnb-text: #ffffff;
    --bnb-text-muted: #aaaaaa;
    --bnb-ink-rgb: 255, 255, 255;

    --bnb-invert-bg: #ffffff;
    --bnb-invert-fg: #000000;
    --bnb-on-gold: #0a0a0a;

    --bnb-shadow-color: rgba(0, 0, 0, 0.8);

    --bnb-online-color: #4caf8a;
    --bnb-live-color: #e07070;
    --bnb-course-color: #7a9fd4;
}

/*
 * Il fondo delle schede va detto, non ereditato.
 *
 * Finche' il tema era scuro il fondo delle schede si confondeva con quello del
 * sito e nessuno notava che molte regole il fondo non lo dichiaravano affatto.
 * Su bianco la stessa dimenticanza si vede subito.
 */
.bnb-events-wrap,
.bnb-percorsi-wrap,
.bnb-event-card,
.bnb-percorso-card {
    color: var(--bnb-text);
}

/* ══════════════════════════════════════════
   GRIGLIA, LISTA E CAROSELLO DEGLI EVENTI — v4.21
   [bnb_events] e [bnb_events_filtered]
   ══════════════════════════════════════════ */

/*
 * Perche' questo blocco e' stato riscritto per intero.
 *
 * Una regola della vista lista era rimasta senza la graffa di chiusura
 * («align-items: center» e poi piu' niente). Il browser, da li' in avanti, ha
 * considerato tutto il resto parte di quella regola rotta: la scheda, i
 * badge, i pulsanti, meta' della barra dei filtri — circa seicento righe
 * ignorate senza un errore. La griglia usciva come testo nudo.
 *
 * Qui sotto c'e' la struttura nuova della scheda (una sola, per griglia,
 * lista e carosello), disegnata come le schede della vetrina: angoli
 * morbidi, targhette bianche sulla locandina, pulsanti neri pieni.
 */

.bnb-events-wrap {
    --bnb-evc-radius: 14px;
    --bnb-evc-gap: 26px;
    --bnb-evc-online: #0f7a55;
    --bnb-evc-online-bg: #e7f4ee;
    --bnb-evc-live: #a8362f;
    --bnb-evc-live-bg: #f9ebe9;
    --bgl-muted: #8a8f98;
    --bgl-line: #d9d7d1;
    box-sizing: border-box;
}

.bnb-scuro .bnb-events-wrap,
body.bnb-scuro .bnb-events-wrap {
    --bnb-evc-online: #6fd1a8;
    --bnb-evc-online-bg: rgba(111, 209, 168, .14);
    --bnb-evc-live: #f0948c;
    --bnb-evc-live-bg: rgba(240, 148, 140, .14);
    --bgl-line: #3a3a3a;
}

.bnb-events-wrap *,
.bnb-events-wrap *::before,
.bnb-events-wrap *::after {
    box-sizing: border-box;
}

.bnb-events-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--bnb-evc-gap);
    padding: 6px 0;
    align-items: stretch;
}

.bnb-events-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ── La scheda ── */
.bnb-events-wrap .bnb-evc {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    margin: 0;
    background: var(--bnb-surface);
    border: 1px solid var(--bnb-border);
    border-radius: var(--bnb-evc-radius);
    overflow: hidden;
    color: var(--bnb-text);
    box-shadow: 0 1px 2px rgba(var(--bnb-ink-rgb), .04);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    opacity: 1;
    pointer-events: auto;
}

.bnb-events-wrap .bnb-evc:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--bnb-gold-rgb), .55);
    box-shadow: 0 14px 34px var(--bnb-shadow-color);
}

@media (prefers-reduced-motion: reduce) {
    .bnb-events-wrap .bnb-evc,
    .bnb-events-wrap .bnb-evc:hover { transform: none; transition: none; }
}

/* ── La locandina ── */
.bnb-events-wrap .bnb-evc-media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--bnb-surface-3);
    text-decoration: none !important;
    flex: 0 0 auto;
}

.bnb-events-wrap .bnb-evc-media img,
.bnb-events-wrap .bnb-evc-media img.bnb-event-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    display: block;
    margin: 0;
    border-radius: 0;
    transition: transform .5s ease;
}

.bnb-events-wrap .bnb-evc:hover .bnb-evc-media img { transform: scale(1.05); }

/* Un velo leggero in basso e in alto: le targhette si leggono anche sulle
   locandine chiare. */
.bnb-events-wrap .bnb-evc-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 34%, rgba(0,0,0,0) 70%, rgba(0,0,0,.18) 100%);
    pointer-events: none;
}

.bnb-events-wrap .bnb-evc-noimg {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    color: var(--bnb-text-muted);
}

/* La data: un piccolo calendario da tavolo. */
.bnb-events-wrap .bnb-evc-date {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 54px;
    padding: 6px 8px 7px;
    background: var(--bnb-surface);
    color: var(--bnb-text);
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
    line-height: 1;
    text-align: center;
}

.bnb-events-wrap .bnb-evc-date-wd {
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--bnb-text-muted);
}

.bnb-events-wrap .bnb-evc-date-d {
    margin: 3px 0 2px;
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -.02em;
}

.bnb-events-wrap .bnb-evc-date-m {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* Online o dal vivo. */
.bnb-events-wrap .bnb-evc-modes {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.bnb-events-wrap .bnb-evc-mode {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px 6px 10px;
    background: var(--bnb-surface);
    color: var(--bnb-text);
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}

.bnb-evc-dot {
    display: inline-block;
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bnb-text-muted);
    font-style: normal;
}

.bnb-events-wrap .bnb-evc-mode.is-online { color: var(--bnb-evc-online); }
.bnb-events-wrap .bnb-evc-mode.is-live   { color: var(--bnb-evc-live); }
.bnb-events-wrap .bnb-evc-mode.is-online .bnb-evc-dot {
    background: var(--bnb-evc-online);
    box-shadow: 0 0 0 3px var(--bnb-evc-online-bg);
    animation: bnb-evc-pulse 2.4s ease-in-out infinite;
}
.bnb-events-wrap .bnb-evc-mode.is-live .bnb-evc-dot {
    background: var(--bnb-evc-live);
    box-shadow: 0 0 0 3px var(--bnb-evc-live-bg);
}

@keyframes bnb-evc-pulse {
    0%, 100% { box-shadow: 0 0 0 3px var(--bnb-evc-online-bg); }
    50%      { box-shadow: 0 0 0 5px var(--bnb-evc-online-bg); }
}

@media (prefers-reduced-motion: reduce) {
    .bnb-events-wrap .bnb-evc-mode.is-online .bnb-evc-dot { animation: none; }
}

/* Esaurito: una fascia sulla locandina, la scheda resta leggibile e
   «Scopri di più» resta cliccabile. */
.bnb-events-wrap .bnb-evc-soldout {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 8px 12px;
    background: rgba(20, 20, 22, .82);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-align: center;
}

.bnb-events-wrap .bnb-evc.is-sold-out .bnb-evc-media img { filter: grayscale(.7); }

/* ── Il corpo ── */
.bnb-events-wrap .bnb-evc-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 12px;
    padding: 18px 20px 20px;
    min-width: 0;
}

.bnb-events-wrap .bnb-evc-eyebrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin: 0;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--bnb-text-muted);
    line-height: 1.3;
}

.bnb-events-wrap .bnb-evc-cat.is-course { color: var(--bnb-course-color); }
.bnb-events-wrap .bnb-evc-sep { opacity: .5; }

.bnb-events-wrap .bnb-evc-title,
.bnb-events-wrap h3.bnb-evc-title {
    margin: 0 !important;
    padding: 0;
    font-size: 1.14rem;
    font-weight: 600;
    line-height: 1.28;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

.bnb-events-wrap .bnb-evc-title a {
    color: var(--bnb-text) !important;
    text-decoration: none !important;
}

.bnb-events-wrap .bnb-evc-title a:hover,
.bnb-events-wrap .bnb-evc-title a:focus-visible {
    color: var(--bnb-gold) !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

/* Quando e dove: una riga per cosa, con un'icona a tratto. */
.bnb-events-wrap .bnb-evc-info {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.bnb-events-wrap .bnb-evc-info li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0 !important;
    padding: 0;
    font-size: .86rem;
    line-height: 1.35;
    color: var(--bnb-text);
    list-style: none !important;
}

.bnb-events-wrap .bnb-evc-info li::before,
.bnb-events-wrap .bnb-evc-info li::marker { content: none; }

.bnb-events-wrap .bnb-evc-ico {
    display: inline-block;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 1px;
    color: var(--bnb-text-muted);
    vertical-align: middle;
}

.bnb-events-wrap .bnb-evc-text {
    margin: 0 !important;
    padding: 0;
    font-size: .88rem;
    line-height: 1.6;
    color: var(--bnb-text-muted);
    overflow-wrap: anywhere;
}

/* Prezzo e posti. */
.bnb-events-wrap .bnb-evc-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
}

.bnb-events-wrap .bnb-evc-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--bnb-surface-2);
    border: 1px solid var(--bnb-border);
    color: var(--bnb-text);
    font-size: .74rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.bnb-events-wrap .bnb-evc-tag .bnb-evc-ico {
    width: 14px;
    height: 14px;
    margin: 0;
    color: currentColor;
}

.bnb-events-wrap .bnb-evc-tag.is-free {
    background: var(--bnb-evc-online-bg);
    border-color: transparent;
    color: var(--bnb-evc-online);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.bnb-events-wrap .bnb-evc-tag.is-price {
    background: var(--bnb-invert-bg);
    border-color: var(--bnb-invert-bg);
    color: var(--bnb-invert-fg);
    font-weight: 700;
}

.bnb-events-wrap .bnb-evc-tag.is-few,
.bnb-events-wrap .bnb-evc-tag.is-out {
    background: var(--bnb-evc-live-bg);
    border-color: transparent;
    color: var(--bnb-evc-live);
}

/* I pulsanti: stessa altezza, divisi a meta', sempre in fondo. */
.bnb-events-wrap .bnb-evc-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap: 8px;
    margin-top: auto;
    padding-top: 6px;
}

.bnb-events-wrap .bnb-evc-btn,
.bnb-events-wrap a.bnb-evc-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    width: 100%;
    margin: 0 !important;
    padding: 10px 14px !important;
    border-radius: 999px !important;
    font-size: .74rem !important;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.15;
    text-transform: uppercase;
    text-align: center;
    white-space: normal;
    box-shadow: none;
    transform: none;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.bnb-events-wrap .bnb-evc-btn.bnb-btn-disabled {
    background: var(--bnb-surface-3) !important;
    border: 1px solid var(--bnb-border) !important;
    color: var(--bnb-text-muted) !important;
    cursor: not-allowed;
}

/* ── Vista lista: locandina a sinistra, testo a destra ── */
.bnb-events-list .bnb-evc {
    flex-direction: row;
    height: auto;
}

.bnb-events-list .bnb-evc-media {
    flex: 0 0 38%;
    max-width: 380px;
    aspect-ratio: auto;
    min-height: 220px;
}

.bnb-events-list .bnb-evc-body {
    padding: 22px 26px;
}

.bnb-events-list .bnb-evc-info {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px 18px;
}

.bnb-events-list .bnb-evc-actions {
    grid-template-columns: repeat(2, max-content);
    justify-content: start;
}

.bnb-events-list .bnb-evc-btn { min-width: 170px; }

@media (max-width: 720px) {
    .bnb-events-list .bnb-evc { flex-direction: column; }
    .bnb-events-list .bnb-evc-media { flex: 0 0 auto; max-width: none; min-height: 0; aspect-ratio: 16 / 10; }
    .bnb-events-list .bnb-evc-body { padding: 18px 20px 20px; }
    .bnb-events-list .bnb-evc-actions { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }
    .bnb-events-list .bnb-evc-btn { min-width: 0; }
}

/* ── Nel carosello ── */
.bnb-events-slider {
    position: relative;
}

.bnb-events-slider .bgl-slider-track {
    gap: 22px !important;
    padding: 4px 3px 18px !important;
}

.bnb-events-slider .bgl-slider-track > .bnb-evc {
    height: 100%;
}

/* Nel carosello non si solleva: la scheda verrebbe tagliata dal bordo
   della pista, che deve nascondere quello che esce di lato. */
.bnb-events-slider .bnb-evc:hover { transform: none; }

.bnb-events-slider .bnb-evc-title { font-size: 1.06rem; }

.bnb-events-slider .bgl-slider-nav {
    gap: 16px;
    margin-top: 10px;
}

.bnb-events-slider .bgl-slider-btn {
    width: 42px !important;
    height: 42px !important;
    background: var(--bnb-surface) !important;
    border: 1px solid var(--bnb-border) !important;
    color: var(--bnb-text) !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 8px rgba(var(--bnb-ink-rgb), .08);
}

.bnb-events-slider .bgl-slider-btn:hover:not([disabled]),
.bnb-events-slider .bgl-slider-btn:focus-visible:not([disabled]) {
    background: var(--bnb-invert-bg) !important;
    border-color: var(--bnb-invert-bg) !important;
    color: var(--bnb-invert-fg) !important;
}

.bnb-events-slider .bgl-slider-btn[disabled] {
    opacity: .4;
    box-shadow: none;
}

.bnb-events-slider .bgl-slider-btn .bnb-evc-ico {
    width: 18px;
    height: 18px;
    margin: 0;
    color: currentColor;
}

/* ── Colonne strette: tutto un po' piu' raccolto ── */
.bnb-events-grid.bnb-cols-4 .bnb-evc-body,
.bnb-events-grid.bnb-cols-5 .bnb-evc-body { padding: 16px 16px 18px; }
.bnb-events-grid.bnb-cols-4 .bnb-evc-title,
.bnb-events-grid.bnb-cols-5 .bnb-evc-title { font-size: 1rem; }
.bnb-events-grid.bnb-cols-5 .bnb-evc-actions { grid-template-columns: 1fr; }

@media (max-width: 640px) {
    .bnb-events-wrap .bnb-evc-body { padding: 16px 16px 18px; }
    .bnb-events-wrap .bnb-evc-btn,
    .bnb-events-wrap a.bnb-evc-btn { letter-spacing: .04em; font-size: .7rem !important; padding: 10px 10px !important; }
    .bnb-events-wrap .bnb-evc-title { font-size: 1.05rem; }
}

/* ══════════════════════════════════════════
   FILTRI — [bnb_events_filtered]
   ══════════════════════════════════════════ */

.bnb-filter-wrap { position: relative; }

.bnb-filter-wrap *,
.bnb-filter-wrap *::before,
.bnb-filter-wrap *::after { box-sizing: border-box; }

.bnb-filters {
    margin: 0 0 28px;
    background: var(--bnb-surface);
    border: 1px solid var(--bnb-border);
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(var(--bnb-ink-rgb), .04);
}

.bnb-filters-inner {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 18px;
}

.bnb-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.bnb-filter-row--top {
    flex-wrap: nowrap;
    gap: 10px;
}

.bnb-filter-search {
    position: relative;
    flex: 1 1 0%;
    min-width: 0;
}

.bnb-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    color: var(--bnb-text-muted);
    pointer-events: none;
}

.bnb-search-icon .bnb-evc-ico { width: 17px; height: 17px; margin: 0; }

.bnb-filters .bnb-filter-input,
.bnb-filters .bnb-filter-select {
    width: 100%;
    height: 46px;
    margin: 0;
    padding: 0 16px 0 42px;
    background-color: var(--bnb-surface-2);
    border: 1px solid var(--bnb-border);
    border-radius: 999px;
    color: var(--bnb-text);
    font-family: inherit;
    font-size: .9rem;
    line-height: 46px;
    box-shadow: none;
    outline: none;
    transition: border-color .2s ease, background-color .2s ease;
}

.bnb-filters .bnb-filter-input::placeholder { color: var(--bnb-text-muted); opacity: 1; }

.bnb-filters .bnb-filter-input:focus,
.bnb-filters .bnb-filter-select:focus {
    background-color: var(--bnb-surface);
    border-color: var(--bnb-gold);
}

.bnb-filter-date { flex: 0 0 230px; min-width: 0; }

.bnb-filters .bnb-filter-select {
    padding: 0 40px 0 18px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235c626b' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    cursor: pointer;
    white-space: nowrap;
}

.bnb-filters .bnb-filter-select option { background: var(--bnb-surface); color: var(--bnb-text); }

.bnb-filter-row--modes,
.bnb-filter-row--cats {
    padding-top: 12px;
    border-top: 1px solid var(--bnb-border);
}

/* Modalita': pillole con il pallino colorato. */
.bnb-filters .bnb-mode-btn,
.bnb-filters .bnb-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    margin: 0;
    padding: 7px 15px;
    background: transparent;
    border: 1px solid var(--bnb-border);
    border-radius: 999px;
    color: var(--bnb-text);
    font-family: inherit;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: none;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.bnb-filters .bnb-mode-btn:hover,
.bnb-filters .bnb-filter-btn:hover {
    background: var(--bnb-surface-2);
    border-color: var(--bnb-text);
    color: var(--bnb-text);
}

.bnb-filters .bnb-mode-btn.is-online .bnb-evc-dot { background: #0f7a55; }
.bnb-filters .bnb-mode-btn.is-live .bnb-evc-dot   { background: #a8362f; }

.bnb-filters .bnb-mode-btn.active,
.bnb-filters .bnb-filter-btn.active {
    background: var(--bnb-invert-bg);
    border-color: var(--bnb-invert-bg);
    color: var(--bnb-invert-fg);
}

.bnb-filters .bnb-mode-btn.active .bnb-evc-dot { box-shadow: 0 0 0 2px var(--bnb-invert-fg); }

/* Le categorie un filo piu' discrete delle modalita'. */
.bnb-filters .bnb-filter-btn {
    min-height: 32px;
    padding: 6px 13px;
    font-size: .7rem;
    color: var(--bnb-text-muted);
}

.bnb-filters .bnb-filter-btn:focus-visible,
.bnb-filters .bnb-mode-btn:focus-visible {
    outline: 2px solid var(--bnb-gold);
    outline-offset: 2px;
}

@media (max-width: 640px) {
    .bnb-filters-inner { padding: 14px; gap: 12px; }
    .bnb-filter-row--top { flex-wrap: wrap; }
    .bnb-filter-date { flex: 1 1 100%; }

    /* Su telefono le pillole scorrono di lato invece di andare su tre righe. */
    .bnb-filter-row--modes,
    .bnb-filter-row--cats {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin: 0 -14px;
        padding-left: 14px;
        padding-right: 14px;
    }

    .bnb-filter-row--modes::-webkit-scrollbar,
    .bnb-filter-row--cats::-webkit-scrollbar { display: none; }

    .bnb-filters .bnb-filter-btn,
    .bnb-filters .bnb-mode-btn { flex: 0 0 auto; width: auto; }
}

/* ── Loading ── */
.bnb-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--bnb-page-rgb), 0.5);
    border-radius: var(--bnb-radius);
    z-index: 10;
}

.bnb-loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--bnb-border);
    border-top-color: var(--bnb-gold);
    border-radius: 50%;
    animation: bnb-spin 0.7s linear infinite;
}

@keyframes bnb-spin { to { transform: rotate(360deg); } }

.bnb-events-results { transition: opacity 0.2s ease; }

/* ══════════════════════════════════════════
   CORSO – PROGRAMMA SESSIONI
   ══════════════════════════════════════════ */

.bnb-course-schedule {
    margin: 32px 0;
}

.bnb-course-schedule-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--bnb-text);
    margin: 0 0 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--bnb-border);
}

.bnb-sessions-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
}

/* Linea verticale connettore */
.bnb-sessions-list::before {
    content: '';
    position: absolute;
    left: 19px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, var(--bnb-gold), transparent);
    opacity: 0.3;
}

.bnb-session-item {
    display: flex;
    gap: 20px;
    padding: 20px 0;
    border-bottom: 1px solid var(--bnb-border);
    position: relative;
}

.bnb-session-item:last-child { border-bottom: none; }

/* Numero / check cerchio */
.bnb-session-number {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 700;
    position: relative;
    z-index: 1;
}

.bnb-session-upcoming .bnb-session-number {
    background: var(--bnb-surface-2);
    border: 2px solid var(--bnb-gold);
    color: var(--bnb-gold);
}

.bnb-session-past .bnb-session-number {
    background: rgba(76,175,138,0.15);
    border: 2px solid var(--bnb-online-color);
    color: var(--bnb-online-color);
}

.bnb-session-check { font-size: 1rem; }

.bnb-session-content { flex: 1; }

.bnb-session-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
}

.bnb-session-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--bnb-text);
    margin: 0;
}

.bnb-session-past .bnb-session-title {
    color: var(--bnb-text-muted);
}

.bnb-session-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.bnb-session-date,
.bnb-session-time {
    font-size: 0.82rem;
    color: var(--bnb-text-muted);
    display: flex;
    align-items: center;
    gap: 5px;
}

.bnb-session-description {
    font-size: 0.88rem;
    color: var(--bnb-text-muted);
    line-height: 1.6;
    margin: 0;
}

/* ══════════════════════════════════════════
   COLONNE
   ══════════════════════════════════════════ */

.bnb-events-grid.bnb-cols-2 { grid-template-columns: repeat(2, 1fr); }
.bnb-events-grid.bnb-cols-3 { grid-template-columns: repeat(3, 1fr); }
.bnb-events-grid.bnb-cols-4 { grid-template-columns: repeat(4, 1fr); }
.bnb-events-grid.bnb-cols-5 { grid-template-columns: repeat(5, 1fr); }

/*
 * Meno eventi delle colonne che hai chiesto: si allargano fino a un limite e
 * il gruppo va al centro. Il tetto serve perche' un evento solo largo quanto
 * la pagina non e' «pieno», e' una locandina gigante — e l'immagine, caricata
 * per stare in una scheda, si sgranerebbe.
 */
.bnb-events-grid.is-poche {
    justify-content: center;
}

.bnb-events-grid.is-poche.bnb-cols-1 { grid-template-columns: minmax(0, 520px); }
.bnb-events-grid.is-poche.bnb-cols-2 { grid-template-columns: repeat(2, minmax(0, 520px)); }
.bnb-events-grid.is-poche.bnb-cols-3 { grid-template-columns: repeat(3, minmax(0, 440px)); }
.bnb-events-grid.is-poche.bnb-cols-4 { grid-template-columns: repeat(4, minmax(0, 380px)); }

/* Sugli schermi stretti il tetto non serve — lo spazio e' poco e il problema
   non si pone — ma le regole qui sopra sono piu' specifiche di quelle
   responsive piu' in basso e le batterebbero. Quindi si ripetono a mano. */
@media (max-width: 1024px) {
    .bnb-events-grid.is-poche.bnb-cols-1 { grid-template-columns: minmax(0, 520px); }
    .bnb-events-grid.is-poche.bnb-cols-2,
    .bnb-events-grid.is-poche.bnb-cols-3,
    .bnb-events-grid.is-poche.bnb-cols-4 { grid-template-columns: repeat(2, minmax(0, 460px)); }
}

@media (max-width: 768px) {
    .bnb-events-grid.is-poche.bnb-cols-1,
    .bnb-events-grid.is-poche.bnb-cols-2,
    .bnb-events-grid.is-poche.bnb-cols-3,
    .bnb-events-grid.is-poche.bnb-cols-4 { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════
   INFINITE SCROLL
   ══════════════════════════════════════════ */

.bnb-infinite-wrap { position: relative; }
.bnb-infinite-sentinel { height: 1px; width: 100%; margin-top: 40px; }
.bnb-infinite-loader {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 32px 0;
}

/* ══════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════ */

@media (max-width: 1200px) {
    .bnb-events-grid.bnb-cols-5 { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 1024px) {
    .bnb-events-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .bnb-events-grid.bnb-cols-4,
    .bnb-events-grid.bnb-cols-5 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .bnb-events-grid.bnb-cols-2 { grid-template-columns: 1fr; }
    .bnb-events-grid.bnb-cols-3,
    .bnb-events-grid.bnb-cols-4,
    .bnb-events-grid.bnb-cols-5 { grid-template-columns: repeat(2, 1fr); }
    .bnb-session-item { gap: 14px; }
    .bnb-session-number { width: 34px; height: 34px; font-size: 0.8rem; }
    .bnb-sessions-list::before { left: 16px; }
}

@media (max-width: 640px) {
    .bnb-events-grid { grid-template-columns: 1fr; gap: 16px; }
    .bnb-events-list .bnb-event-card { grid-template-columns: 1fr; }
    .bnb-events-list .bnb-event-img-wrap { min-height: unset; aspect-ratio: 16 / 7; }
    .bnb-event-body { padding: 16px; }
    .bnb-event-footer { flex-direction: column; }
    .bnb-btn { width: 100%; text-align: center; justify-content: center; }
    .bnb-event-title { font-size: 0.95rem; }
    .bnb-filters { clip-path: none; margin-bottom: 24px; }
    .bnb-filters-inner { padding: 12px 16px; }
    .bnb-filter-row--top { flex-wrap: wrap; gap: 8px; }
    .bnb-filter-search { width: 100%; }
    .bnb-filter-date { width: 100%; }
    .bnb-filter-select { width: 100%; }
    .bnb-filter-btn, .bnb-mode-btn { font-size: 0.68rem; padding: 4px 9px; }
    .bnb-events-grid.bnb-cols-3,
    .bnb-events-grid.bnb-cols-4,
    .bnb-events-grid.bnb-cols-5 { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════
   PERCORSI
   ══════════════════════════════════════════ */

.bnb-percorsi-list {
    display: flex;
    flex-direction: column;
    gap: 48px;
    padding-top: 4px;
}

.bnb-percorso-card {
    background: var(--bnb-surface);
    border: 1px solid var(--bnb-border);
    border-radius: var(--bnb-radius);
    overflow: hidden;
    color: var(--bnb-text);
    box-shadow: 0 1px 3px var(--bnb-shadow-color);
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.bnb-percorso-card:hover {
    border-color: var(--bnb-gold);
    box-shadow: 0 6px 24px var(--bnb-shadow-color);
}

/*
 * Intestazione a tutta larghezza, testo al centro.
 *
 * Prima era una griglia "340 pixel di immagine, poi il testo", e senza
 * immagine il testo restava schiacciato in quei 340 pixel: l'elenco dei corsi
 * si riduceva a una lettera per riga. La larghezza piena non ha quel problema
 * perche' non c'e' piu' una colonna da riempire — c'e' solo la pagina.
 */
.bnb-percorso-head { display: block; }

.bnb-percorso-banner {
    position: relative;
    width: 100%;
    aspect-ratio: 21 / 7;
    overflow: hidden;
    background: var(--bnb-surface-2);
}

.bnb-percorso-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.bnb-percorso-card:hover .bnb-percorso-banner img { transform: scale(1.02); }

.bnb-percorso-headtext {
    padding: 34px 40px 28px;
    text-align: center;
    max-width: 780px;
    margin: 0 auto;
}

.bnb-percorso-level-badge {
    display: inline-block;
    background: var(--bnb-surface-3);
    color: var(--bnb-text-muted);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 5px 12px;
    border-radius: 999px;
    margin-bottom: 14px;
}

.bnb-percorso-title {
    font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem);
    font-weight: 700;
    color: var(--bnb-text);
    margin: 0 0 12px;
    line-height: 1.22;
    letter-spacing: -0.01em;
}

.bnb-percorso-excerpt {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--bnb-text-muted);
    margin: 0 0 20px;
}

.bnb-percorso-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 22px;
}

.bnb-pmeta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bnb-surface-2);
    border: 1px solid var(--bnb-border);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 0.83rem;
    color: var(--bnb-text-muted);
    white-space: nowrap;
}

.bnb-pmeta-price {
    background: transparent;
    border-color: var(--bnb-gold);
    color: var(--bnb-gold);
    font-weight: 700;
    font-size: 0.95rem;
}

.bnb-percorso-cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

/* ── Il corpo con i tab ── */
.bnb-percorso-body { border-top: 1px solid var(--bnb-border); }

.bnb-percorso-tabs {
    display: flex;
    background: var(--bnb-surface-2);
    border-bottom: 1px solid var(--bnb-border);

    /*
     * Se i tab non ci stanno, la barra scorre invece di spezzare le parole
     * (4.21.23). Prima ogni voce si prendeva una fetta uguale e ci infilava
     * dentro il testo come capitava: «Lezioni registrate» andava a capo con il
     * numerino da solo sulla seconda riga, e la barra sembrava rotta gia' sul
     * portatile, prima ancora del telefono.
     */
    overflow-x: auto;
    scrollbar-width: none;
}

.bnb-percorso-tabs::-webkit-scrollbar { display: none; }

.bnb-tab-btn {
    /*
     * Cresce per riempire la barra quando c'e' spazio — l'aspetto di prima —
     * ma non si stringe mai sotto la lunghezza della sua parola.
     */
    flex: 1 0 auto;
    white-space: nowrap;
    min-width: 0;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 15px 18px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--bnb-text-muted);
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
    font-family: inherit;
}

.bnb-tab-btn:hover { color: var(--bnb-text); background: var(--bnb-surface); }

.bnb-tab-btn.active {
    color: var(--bnb-text);
    background: var(--bnb-surface);
    border-bottom-color: var(--bnb-gold);
}

.bnb-tab-btn:focus-visible { outline: 2px solid var(--bnb-gold); outline-offset: -2px; }

.bnb-tab-count {
    display: inline-block;
    min-width: 20px;
    padding: 1px 6px;
    margin-left: 6px;
    border-radius: 999px;
    background: var(--bnb-gold);
    color: var(--bnb-on-gold);
    font-size: 0.7rem;
    font-weight: 700;
}

.bnb-tab-panel { padding: 28px 40px 34px; }

.bnb-percorso-content {
    font-size: 0.97rem;
    line-height: 1.7;
    color: var(--bnb-text);
}

.bnb-percorso-content > *:first-child { margin-top: 0; }
.bnb-percorso-content > *:last-child  { margin-bottom: 0; }

.bnb-text-muted { color: var(--bnb-text-muted); font-style: italic; margin: 0; }

/* ── L'elenco dei corsi ── */
.bnb-percorso-courses-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bnb-course-accordion {
    border: 1px solid var(--bnb-border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--bnb-surface);
    transition: border-color 0.2s;
}

.bnb-course-accordion:has(.bnb-acc-body:not([hidden])) { border-color: var(--bnb-gold); }

.bnb-acc-header {
    width: 100%;
    background: var(--bnb-surface-2);
    border: none;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    text-align: left;
    transition: background 0.2s;
    font-family: inherit;
}

.bnb-acc-header:hover { background: var(--bnb-surface-3); }
.bnb-acc-header:focus-visible { outline: 2px solid var(--bnb-gold); outline-offset: -2px; }

.bnb-acc-thumb {
    flex: 0 0 auto;
    width: 64px;
    height: 48px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--bnb-surface-3);
    display: flex;
    align-items: center;
    justify-content: center;
}

.bnb-acc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.bnb-acc-num { font-size: 0.95rem; font-weight: 700; color: var(--bnb-gold); }

/*
 * min-width: 0 su tutta la catena.
 *
 * Un elemento flessibile non scende sotto la larghezza minima del suo
 * contenuto se non glielo si dice: e' la ragione per cui il titolo andava a
 * capo una lettera per volta invece di stringersi. Va messo su OGNI livello,
 * perche' basta un anello che non lo dichiara e la catena non stringe.
 */
.bnb-acc-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.bnb-acc-title {
    display: block;
    min-width: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--bnb-text);
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.bnb-acc-meta { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }

.bnb-acc-meta span {
    background: var(--bnb-surface);
    border: 1px solid var(--bnb-border);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 0.72rem;
    color: var(--bnb-text-muted);
    white-space: nowrap;
}

.bnb-acc-arrow {
    flex: 0 0 auto;
    color: var(--bnb-gold);
    font-size: 1rem;
    transition: transform 0.25s ease;
}

.bnb-acc-header[aria-expanded="true"] .bnb-acc-arrow { transform: rotate(180deg); }

.bnb-acc-body { padding: 18px 20px 20px; border-top: 1px solid var(--bnb-border); }
.bnb-acc-body[hidden] { display: none; }

.bnb-acc-excerpt {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--bnb-text-muted);
    margin: 0 0 16px;
}

.bnb-acc-sessions {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bnb-acc-session {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 10px 12px;
    border-radius: 6px;
    background: var(--bnb-surface-2);
}

.bnb-acc-session-num {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--bnb-surface);
    border: 1px solid var(--bnb-gold);
    color: var(--bnb-gold);
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bnb-session-past .bnb-acc-session-num { background: var(--bnb-gold); color: var(--bnb-on-gold); }
.bnb-session-past { opacity: 0.72; }

.bnb-acc-session-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bnb-acc-session-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--bnb-text);
    overflow-wrap: anywhere;
}

.bnb-acc-session-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 0.76rem;
    color: var(--bnb-text-muted);
}

.bnb-acc-session-desc { font-size: 0.83rem; line-height: 1.55; color: var(--bnb-text-muted); }

.bnb-acc-footer { display: flex; justify-content: flex-end; }

.bnb-btn-sm { font-size: 0.78rem; padding: 7px 14px; }

/*
 * L'avviso che compare dopo un link (4.21.24): «sei dentro», oppure «quel
 * link non vale piu'». Due parole in cima alla pagina, non un riquadro che
 * grida: chi arriva qui sta gia' guardando la cosa che gli interessa.
 */
.bgl-flash {
    margin: 0 0 20px;
    padding: 12px 16px;
    border-left: 3px solid var(--bnb-border);
    border-radius: 0 8px 8px 0;
    background: var(--bnb-surface-2);
    color: var(--bnb-text);
    font-size: 0.95rem;
    line-height: 1.55;
}

.bgl-flash.is-ok   { border-left-color: var(--bnb-online-color); }
.bgl-flash.is-warn { border-left-color: var(--bnb-gold); }

/* ══════════════════════════════════════════
   RESPONSIVE PERCORSI
   ══════════════════════════════════════════ */

@media (max-width: 782px) {
    .bnb-percorso-banner { aspect-ratio: 16 / 9; }
    .bnb-percorso-headtext { padding: 24px 20px 22px; }
    .bnb-tab-panel { padding: 20px 18px 26px; }

    /*
     * La barra dei tab su telefono (4.21.23).
     *
     * Su schermo largo i tab si dividono lo spazio in parti uguali. Su un
     * telefono quello stesso conto da a ciascuno settanta pixel, e parole come
     * «Materiali didattici» o «Certificazione» ci vanno a capo dentro: due
     * righe per voce, altezze diverse, e la barra che sembra rotta.
     *
     * Qui la barra diventa una riga sola che scorre con il dito. Ogni voce
     * tiene la sua larghezza naturale e non si spezza mai; lo scatto dolce
     * fa fermare lo scorrimento su una voce intera invece che a meta'. La
     * barra di scorrimento si nasconde perche' su telefono si scorre con il
     * dito e quella riga grigia toglierebbe solo spazio — il fatto che si
     * scorra si vede dalla voce tagliata sul bordo, che e' l'invito giusto.
     */
    .bnb-percorso-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .bnb-percorso-tabs::-webkit-scrollbar { display: none; }

    .bnb-tab-btn {
        flex: 0 0 auto;
        white-space: nowrap;
        scroll-snap-align: start;
        padding: 13px 16px;
        font-size: 0.8rem;
    }

    /* Il conteggio non deve staccarsi dalla sua parola. */
    .bnb-tab-count { margin-left: 5px; }
    .bnb-acc-thumb { width: 48px; height: 40px; }
    .bnb-percorsi-list { gap: 32px; }
}

@media (max-width: 520px) {
    .bnb-acc-meta { display: none; }
    .bnb-percorso-cta .bnb-btn { flex: 1 1 100%; text-align: center; }
}



/* ══════════════════════════════════════════
   TICKET VIRTUALE — [bnb_ticket]
   ══════════════════════════════════════════ */


/* ══════════════════════════════════════════
   TICKET VIRTUALE — [bnb_ticket]
   Selettori rinforzati per override tema
   ══════════════════════════════════════════ */

.bnb-ticket-wrap {
    margin: 32px 0;
    display: block;
}

/* Reset totale su tutto il ticket — override GeneratePress/qualsiasi tema */
.bnb-ticket,
.bnb-ticket *,
.bnb-ticket *::before,
.bnb-ticket *::after {
    box-sizing: border-box;
}

.bnb-ticket {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    background: var(--bnb-page) !important;
    border: 2px solid var(--bnb-text) !important;
    max-width: 640px;
    width: 100%;
    position: relative;
    box-shadow: 0 4px 32px var(--bnb-shadow-color);
    overflow: hidden;
    font-family: inherit;
    /* Annulla qualsiasi stile ereditato dal tema */
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    list-style: none;
}

/* ── Stub sinistro ADMIT ONE ── */
.bnb-ticket .bnb-tk-stub {
    flex: 0 0 86px !important;
    width: 86px !important;
    min-width: 86px !important;
    background: var(--bnb-page) !important;
    border-right: 2px solid var(--bnb-text) !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 6px !important;
    margin: 0 !important;
    overflow: hidden;
}

.bnb-ticket .bnb-tk-stub-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px;
    flex: 1;
    justify-content: center;
}

.bnb-ticket .bnb-tk-admit-text {
    font-size: 0.5rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--bnb-text) !important;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

.bnb-ticket .bnb-tk-admit-one {
    font-size: 0.95rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.12em;
    color: var(--bnb-text) !important;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
}

.bnb-ticket .bnb-tk-admit-price {
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    color: rgba(var(--bnb-ink-rgb), 0.55) !important;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    display: block !important;
    margin: 0 !important;
}

.bnb-ticket .bnb-tk-stub-stars {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px;
    align-items: center;
    margin-top: 10px !important;
}

.bnb-ticket .bnb-tk-stub-serial {
    font-size: 0.4rem !important;
    letter-spacing: 0.1em;
    color: rgba(var(--bnb-ink-rgb), 0.25) !important;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    margin-top: 6px !important;
    display: block !important;
}

/* ── Linea perforazione ── */
.bnb-ticket .bnb-tk-perf {
    flex: 0 0 0px !important;
    width: 0 !important;
    display: block !important;
    position: relative;
    overflow: visible;
    margin: 0 !important;
    padding: 0 !important;
}

.bnb-ticket .bnb-tk-notch {
    position: absolute !important;
    width: 18px !important;
    height: 18px !important;
    background: var(--bnb-page) !important;
    border-radius: 50% !important;
    border: 2px solid var(--bnb-text) !important;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    margin: 0 !important;
    padding: 0 !important;
}

.bnb-ticket .bnb-tk-notch--top    { top: -10px !important; bottom: auto !important; }
.bnb-ticket .bnb-tk-notch--bottom { bottom: -10px !important; top: auto !important; }

.bnb-ticket .bnb-tk-dash-line {
    position: absolute !important;
    top: 0; bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0 !important;
    border-left: 2px dashed rgba(var(--bnb-ink-rgb), 0.3) !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ── Corpo principale ── */
.bnb-ticket .bnb-tk-body {
    flex: 1 1 auto !important;
    padding: 18px 20px 16px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px;
    text-align: center !important;
    background: var(--bnb-page) !important;
    overflow: hidden;
}

/* Stelle decorative */
.bnb-ticket .bnb-tk-stars-row {
    display: flex !important;
    flex-direction: row !important;
    gap: 5px;
    align-items: center;
    color: rgba(var(--bnb-ink-rgb), 0.4) !important;
    margin: 0 !important;
    padding: 0 !important;
}

.bnb-ticket .bnb-tk-star {
    display: inline-flex !important;
    line-height: 0;
    padding: 0 !important;
    margin: 0 !important;
}

/* Categoria */
.bnb-ticket .bnb-tk-category {
    font-size: 0.58rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.25em;
    color: rgba(var(--bnb-ink-rgb), 0.4) !important;
    text-transform: uppercase;
    border: 1px solid rgba(var(--bnb-ink-rgb), 0.18) !important;
    border-radius: 0 !important;
    padding: 2px 8px !important;
    margin: 0 !important;
    background: transparent !important;
    display: inline-block !important;
}

/* Titolo */
.bnb-ticket .bnb-tk-title {
    font-size: 1.05rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bnb-text) !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.25 !important;
    text-align: center !important;
    border: none !important;
    background: none !important;
}

/* Meta data / ora */
.bnb-ticket .bnb-tk-meta {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 14px;
    padding: 10px 0 !important;
    margin: 0 !important;
    border-top: 1px dashed rgba(var(--bnb-ink-rgb), 0.18) !important;
    border-bottom: 1px dashed rgba(var(--bnb-ink-rgb), 0.18) !important;
    border-left: none !important;
    border-right: none !important;
    width: 100%;
    justify-content: center;
}

.bnb-ticket .bnb-tk-date-block {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    line-height: 1;
    margin: 0 !important;
}

.bnb-ticket .bnb-tk-date-day {
    font-size: 1.6rem !important;
    font-weight: 900 !important;
    color: var(--bnb-text) !important;
    line-height: 1 !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

.bnb-ticket .bnb-tk-date-month {
    font-size: 0.6rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.2em;
    color: rgba(var(--bnb-ink-rgb), 0.6) !important;
    margin: 2px 0 0 !important;
    padding: 0 !important;
    display: block !important;
    text-transform: uppercase;
}

.bnb-ticket .bnb-tk-date-year {
    font-size: 0.52rem !important;
    color: rgba(var(--bnb-ink-rgb), 0.35) !important;
    letter-spacing: 0.15em;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

.bnb-ticket .bnb-tk-divider {
    width: 1px !important;
    height: 38px !important;
    background: rgba(var(--bnb-ink-rgb), 0.22) !important;
    flex-shrink: 0;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

.bnb-ticket .bnb-tk-time-block {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 3px;
    margin: 0 !important;
}

.bnb-ticket .bnb-tk-weekday {
    font-size: 0.58rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.2em;
    color: rgba(var(--bnb-ink-rgb), 0.45) !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    text-transform: uppercase;
}

.bnb-ticket .bnb-tk-time {
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    color: var(--bnb-text) !important;
    letter-spacing: 0.04em;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

.bnb-ticket .bnb-tk-mode {
    font-size: 0.56rem !important;
    letter-spacing: 0.16em;
    color: rgba(var(--bnb-ink-rgb), 0.38) !important;
    text-transform: uppercase;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Posti */
.bnb-ticket .bnb-tk-seats {
    font-size: 0.58rem !important;
    letter-spacing: 0.2em;
    color: rgba(var(--bnb-ink-rgb), 0.45) !important;
    text-transform: uppercase;
    margin: 0 !important;
    padding: 0 !important;
}

.bnb-ticket .bnb-tk-seats--few {
    color: #e07070 !important;
    font-weight: 700 !important;
}

/* CTA */
.bnb-ticket .bnb-tk-cta {
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
}

.bnb-ticket .bnb-tk-btn {
    display: block !important;
    width: 100% !important;
    padding: 10px 16px !important;
    background: var(--bnb-page) !important;
    border: 2px solid var(--bnb-text) !important;
    border-radius: 0 !important;
    color: var(--bnb-text) !important;
    font-size: 0.7rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-decoration: none !important;
    text-align: center !important;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    box-sizing: border-box !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

.bnb-ticket .bnb-tk-btn:hover {
    background: var(--bnb-invert-bg) !important;
    color: var(--bnb-invert-fg) !important;
}

.bnb-ticket .bnb-tk-btn--disabled {
    border-color: rgba(var(--bnb-ink-rgb), 0.2) !important;
    color: rgba(var(--bnb-ink-rgb), 0.25) !important;
    cursor: not-allowed;
}

.bnb-ticket .bnb-tk-btn--disabled:hover {
    background: transparent !important;
    color: rgba(var(--bnb-ink-rgb), 0.25) !important;
}

/* ── Striscia numerazione laterale destra ── */
.bnb-ticket .bnb-tk-side-num {
    flex: 0 0 20px !important;
    width: 20px !important;
    border-left: 1px dashed rgba(var(--bnb-ink-rgb), 0.18) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 0 !important;
    margin: 0 !important;
    gap: 1px;
    background: var(--bnb-page) !important;
    overflow: hidden;
}

.bnb-ticket .bnb-tk-side-num span {
    font-size: 0.42rem !important;
    color: rgba(var(--bnb-ink-rgb), 0.2) !important;
    font-weight: 600 !important;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    display: block !important;
    line-height: 1;
    margin: 0 !important;
    padding: 0 !important;
}

/* ── Sold out ── */
.bnb-ticket--soldout .bnb-ticket .bnb-tk-title,
.bnb-ticket--soldout .bnb-tk-title {
    opacity: 0.45;
}

.bnb-ticket--soldout::after {
    content: 'ESAURITO';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-15deg);
    font-size: 1.4rem;
    font-weight: 900;
    letter-spacing: 0.15em;
    color: rgba(224,112,112,0.55);
    border: 3px solid rgba(224,112,112,0.35);
    padding: 4px 14px;
    pointer-events: none;
    white-space: nowrap;
    z-index: 10;
}

/* ── Icona pentacolo SVG — sempre piccola e fissa ── */
.bnb-mode-svg {
    width: 13px; height: 13px;
    min-width: 13px; min-height: 13px;
    max-width: 13px; max-height: 13px;
    vertical-align: middle;
    display: inline-block;
    flex-shrink: 0;
    overflow: hidden;
}

.bnb-mode-badge--online .bnb-mode-svg { color: inherit; }

.bnb-event-modes-overlay .bnb-mode-badge .bnb-mode-svg {
    width: 11px; height: 11px;
    min-width: 11px; min-height: 11px;
    max-width: 11px; max-height: 11px;
}

.bnb-mode-btn .bnb-mode-svg {
    width: 12px; height: 12px;
    min-width: 12px; min-height: 12px;
    max-width: 12px; max-height: 12px;
}

/* ── Responsive ticket ── */
@media (max-width: 580px) {
    .bnb-ticket .bnb-tk-stub { flex: 0 0 60px !important; width: 60px !important; min-width: 60px !important; }
    .bnb-ticket .bnb-tk-admit-one { font-size: 0.78rem !important; }
    .bnb-ticket .bnb-tk-title { font-size: 0.88rem !important; }
    .bnb-ticket .bnb-tk-date-day { font-size: 1.3rem !important; }
    .bnb-ticket .bnb-tk-body { padding: 14px 12px 12px !important; }
    .bnb-ticket .bnb-tk-side-num { display: none !important; }
}

/* ══════════════════════════════════════════
   CALENDARIO — link Google Calendar / iCal
   ══════════════════════════════════════════ */

.bnb-ticket .bnb-tk-cal-links {
    display: flex !important;
    justify-content: center !important;
    gap: 14px;
    margin-top: 12px !important;
    flex-wrap: wrap;
}

.bnb-ticket .bnb-tk-cal-link {
    color: rgba(var(--bnb-ink-rgb), 0.5) !important;
    font-size: 0.62rem !important;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-decoration: none !important;
    text-transform: uppercase;
    border-bottom: 1px dashed rgba(var(--bnb-ink-rgb), 0.25);
    padding-bottom: 1px;
    transition: color 0.2s;
}

.bnb-ticket .bnb-tk-cal-link:hover {
    color: var(--bnb-gold) !important;
    border-color: var(--bnb-gold);
}

/* ══════════════════════════════════════════
   RICHIESTA APERTURA POSTO — form sold-out
   ══════════════════════════════════════════ */

.bnb-ticket .bnb-tk-waitlist {
    width: 100% !important;
    margin-top: 14px !important;
    padding-top: 14px !important;
    border-top: 1px dashed rgba(var(--bnb-ink-rgb), 0.18) !important;
}

.bnb-ticket .bnb-tk-waitlist-intro {
    font-size: 0.72rem !important;
    color: rgba(var(--bnb-ink-rgb), 0.5) !important;
    margin: 0 0 10px !important;
    line-height: 1.5 !important;
    text-align: center;
}

.bnb-ticket .bnb-tk-waitlist-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px;
    width: 100%;
}

.bnb-ticket .bnb-tk-waitlist-form input {
    width: 100% !important;
    padding: 9px 12px !important;
    background: transparent !important;
    border: 1px solid rgba(var(--bnb-ink-rgb), 0.3) !important;
    border-radius: 0 !important;
    color: var(--bnb-text) !important;
    font-size: 0.78rem !important;
    outline: none;
    box-sizing: border-box !important;
    margin: 0 !important;
}

.bnb-ticket .bnb-tk-waitlist-form input::placeholder {
    color: rgba(var(--bnb-ink-rgb), 0.35) !important;
}

.bnb-ticket .bnb-tk-waitlist-form input:focus {
    border-color: var(--bnb-gold) !important;
}

.bnb-ticket .bnb-tk-btn--waitlist {
    background: transparent !important;
    border-color: var(--bnb-gold) !important;
    color: var(--bnb-gold) !important;
    margin-top: 4px !important;
}

.bnb-ticket .bnb-tk-btn--waitlist:hover {
    background: var(--bnb-gold) !important;
    color: var(--bnb-invert-fg) !important;
}

.bnb-ticket .bnb-tk-btn--waitlist:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.bnb-ticket .bnb-tk-waitlist-success {
    color: #4caf8a !important;
    font-size: 0.78rem !important;
    text-align: center;
    margin: 4px 0 0 !important;
    font-weight: 600;
}

.bnb-ticket .bnb-tk-waitlist-error {
    color: #e07070 !important;
    font-size: 0.72rem !important;
    text-align: center;
    margin: 8px 0 0 !important;
}

/* ---------- Gli eventi dentro il carosello ---------- */

/*
 * Il meccanismo sta in slider.css: qui c'e' solo quanto sono larghe le schede
 * degli eventi dentro la pista, che e' una cosa loro e non del carosello.
 *
 * Le locandine sono in formato 16:9 e portano parecchio testo sotto — data,
 * orario, prezzo, posti — quindi servono piu' larghe di quelle dei consulti.
 * Su telefono il 82% lascia intravedere il bordo della scheda dopo: e' il modo
 * piu' onesto di dire "si scorre" senza scriverlo da nessuna parte.
 */
.bnb-events-slider .bgl-slider-track {
	grid-auto-columns: 82%;
}

@media (min-width: 620px) {
	.bnb-events-slider.bnb-cols-2 .bgl-slider-track { grid-auto-columns: 48%; }
	.bnb-events-slider.bnb-cols-3 .bgl-slider-track,
	.bnb-events-slider.bnb-cols-4 .bgl-slider-track,
	.bnb-events-slider.bnb-cols-5 .bgl-slider-track { grid-auto-columns: 47%; }
}

@media (min-width: 980px) {
	.bnb-events-slider.bnb-cols-2 .bgl-slider-track { grid-auto-columns: 48%; }
	.bnb-events-slider.bnb-cols-3 .bgl-slider-track { grid-auto-columns: 31.5%; }
	.bnb-events-slider.bnb-cols-4 .bgl-slider-track { grid-auto-columns: 23.5%; }
	.bnb-events-slider.bnb-cols-5 .bgl-slider-track { grid-auto-columns: 18.6%; }
}

/*
 * Tutte alte uguali. In una griglia a colonne sarebbe gia' cosi', ma certi
 * temi mettono align-items: start sui contenitori a griglia e ce lo portiamo
 * dietro senza accorgercene: le schede diventerebbero di altezze diverse e i
 * pulsanti in fondo non sarebbero piu' allineati.
 */
.bnb-events-slider .bgl-slider-track > .bnb-event-card {
	align-self: stretch;
	height: 100%;
	margin: 0;
}

/* ---------- Le targhette dei corsi ---------- */

.bgl-course-badge {
	border-radius: 999px;
	font-weight: 600;
	padding: 0.2em 0.7em;
}

.bgl-course-badge.is-soon    { background: #eef0f4; color: #3b4149; }
.bgl-course-badge.is-running { background: #fdf3e2; color: #7a4d00; }
.bgl-course-badge.is-done    { background: #eceff2; color: #545c66; }

/* ══════════════════════════════════════════
   I LINK SI DEVONO VEDERE — anche sotto il puntatore
   ══════════════════════════════════════════ */

/*
 * Perche' serve un blocco apposta.
 *
 * Il colore dei link lo decide il tema, e Kadence lo sceglie pensando al SUO
 * fondo. Quando il nostro fondo e' diventato bianco, i link che il tema
 * colorava chiaro sono spariti — e quelli sotto il puntatore anche di piu',
 * perche' molti temi schiariscono ancora al passaggio del mouse.
 *
 * Qui il colore lo diciamo noi, dentro i nostri contenitori soltanto, e in
 * piu' al passaggio compare la sottolineatura: cosi' il link si distingue
 * anche per chi i colori non li separa bene, che e' circa un uomo su dodici.
 * Affidare un'informazione al solo colore e' il modo piu' rapido di renderla
 * invisibile a qualcuno.
 */
.bnb-events-wrap a,
.bnb-percorsi-list a,
.bnb-percorso-card a,
.bnb-event-card a,
.bgl-corso-scheda a,
.bgl-vetrina a {
    color: var(--bnb-gold);
    text-decoration: none;
    transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}

.bnb-events-wrap a:hover,
.bnb-percorsi-list a:hover,
.bnb-percorso-card a:hover,
.bnb-event-card a:hover,
.bgl-corso-scheda a:hover,
.bgl-vetrina a:hover,
.bnb-events-wrap a:focus-visible,
.bnb-percorso-card a:focus-visible,
.bgl-corso-scheda a:focus-visible,
.bgl-vetrina a:focus-visible {
    color: var(--bnb-gold-hover);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* I titoli restano del colore del testo: si capisce che sono link dal contesto. */
.bnb-event-title a,
.bnb-percorso-title a {
    color: var(--bnb-text);
}

.bnb-event-title a:hover,
.bnb-percorso-title a:hover {
    color: var(--bnb-gold);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/*
 * I pulsanti non si sottolineano mai: hanno gia' un bordo e un fondo, e la
 * riga sotto la scritta li fa sembrare rotti.
 */
.bnb-btn,
.bgl-cs-btn,
.bgl-vet-btn,
.bnb-events-wrap .bnb-btn,
.bnb-percorso-card .bnb-btn,
.bgl-corso-scheda .bgl-cs-btn,
.bgl-vetrina .bgl-vet-btn {
    text-decoration: none;
}

.bnb-btn:hover,
.bgl-cs-btn:hover,
.bgl-vet-btn:hover,
.bnb-events-wrap .bnb-btn:hover,
.bnb-percorso-card .bnb-btn:hover,
.bgl-corso-scheda .bgl-cs-btn:hover,
.bgl-vetrina .bgl-vet-btn:hover {
    text-decoration: none;
}

/* Il pulsante pieno: al passaggio si scurisce, non si schiarisce. */
.bnb-events-wrap .bnb-btn-primary:hover,
.bnb-percorso-card .bnb-btn-primary:hover,
.bnb-btn-primary:hover {
    background-color: var(--bnb-gold-hover);
    color: var(--bnb-on-gold);
}

/* Quello vuoto: si riempie, cosi' il cambiamento e' evidente. */
.bnb-events-wrap .bnb-btn-secondary:hover,
.bnb-percorso-card .bnb-btn-secondary:hover,
.bnb-btn-secondary:hover {
    background-color: var(--bnb-gold);
    border-color: var(--bnb-gold);
    color: var(--bnb-on-gold);
}

/*
 * Il contorno di chi naviga con la tastiera. Non si toglie mai: e' l'unico
 * modo che ha di sapere dove si trova.
 */
.bnb-events-wrap a:focus-visible,
.bnb-percorso-card a:focus-visible,
.bnb-percorso-card button:focus-visible,
.bgl-corso-scheda a:focus-visible,
.bgl-corso-scheda button:focus-visible,
.bgl-vetrina a:focus-visible,
.bgl-vetrina button:focus-visible {
    outline: 2px solid var(--bnb-gold);
    outline-offset: 2px;
}

/* ══════════════════════════════════════════
   PRESENTAZIONE DEL CORSO — [bgl_scheda_corso]
   ══════════════════════════════════════════ */

.bgl-corso-scheda {
    color: var(--bnb-text);
    background: var(--bnb-surface);
    border: 1px solid var(--bnb-border);
    border-radius: var(--bnb-radius);
    overflow: hidden;
    box-shadow: 0 1px 3px var(--bnb-shadow-color);
}

/* ── L'intestazione, a tutta larghezza ── */
.bgl-cs-hero { display: block; }

.bgl-cs-cover {
    width: 100%;
    aspect-ratio: 21 / 8;
    overflow: hidden;
    background: var(--bnb-surface-2);
}

.bgl-cs-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bgl-cs-headtext {
    padding: 30px 40px 26px;
    text-align: center;
    max-width: 820px;
    margin: 0 auto;
}

.bgl-cs-title {
    font-size: clamp(1.55rem, 1.1rem + 1.8vw, 2.2rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0 0 10px;
    color: var(--bnb-text);
}

.bgl-cs-sub {
    font-size: 1.02rem;
    line-height: 1.6;
    color: var(--bnb-text-muted);
    margin: 0 0 18px;
}

.bgl-cs-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.bgl-cs-chip {
    display: inline-flex;
    align-items: center;
    background: var(--bnb-surface-2);
    border: 1px solid var(--bnb-border);
    border-radius: 999px;
    padding: 5px 13px;
    font-size: 0.79rem;
    color: var(--bnb-text-muted);
    white-space: nowrap;
}

.bgl-cs-chip.is-running { border-color: var(--bnb-live-color);   color: var(--bnb-live-color); }
.bgl-cs-chip.is-soon    { border-color: var(--bnb-course-color); color: var(--bnb-course-color); }
.bgl-cs-chip.is-done    { opacity: 0.75; }
.bgl-cs-chip.is-tba     { border-style: dashed; color: var(--bnb-text-muted); }

/*
 * Il pannello di un corso senza data.
 *
 * Dove di solito c'e' il prezzo qui c'e' una riga di testo e un cuore. Lo
 * spazio resta lo stesso — la scheda non deve sembrare mutilata — ma non c'e'
 * niente che assomigli a un pulsante d'acquisto, perche' non c'e' niente da
 * acquistare.
 */
/*
 * Il riquadro «non c'e' ancora una data».
 *
 * Era tratteggiato — una convenzione da mockup, non da pagina pubblica: dice
 * «provvisorio» a chi disegna e «rotto» a chi compra. E il pulsante stava
 * schiacciato a sinistra come un elemento avanzato dal riquadro del prezzo,
 * perche' e' esattamente quello che era: il modulo di acquisto svuotato.
 * Qui diventa una cosa sua, centrata, con il verde che usa il resto del sito.
 */
.bgl-cs-prices.is-tba {
    border: 1px solid #aeb6c0;
    border-radius: 14px;
    background: #fbfcfd;
    text-align: center;
    padding: 26px 24px 24px;
}

.bgl-cs-prices.is-tba .bgl-cs-price {
    display: block;
    text-align: center;
}

.bgl-cs-prices.is-tba .bgl-cs-price-label {
    display: inline-block;
    margin-bottom: 10px;
    padding: 4px 14px;
    border-radius: 999px;
    background: #eceff3;
    color: #414852;
    font-size: 0.78rem;
    font-weight: 650;
    letter-spacing: 0.02em;
    text-transform: none;
}

.bgl-cs-tba-nota {
    display: block;
    margin: 0 auto 18px;
    max-width: 44ch;
    font-size: 1rem;
    line-height: 1.6;
    color: #3b4149;
    font-weight: 500;
}

/* Il cuore, al centro e piu' grande: e' l'unica cosa che si puo' fare qui. */
.bgl-cs-prices.is-tba .bgl-cuore {
    margin: 0;
    display: flex;
    justify-content: center;
}


/* ══════════════════════════════════════════
   I DUE MODULI CHE SCORRONO
   ══════════════════════════════════════════ */

.bgl-cs-duo {
    border-top: 1px solid var(--bnb-border);
    background: var(--bnb-surface-2);
}

.bgl-duo-switch {
    display: flex;
    max-width: 560px;
    margin: 0 auto;
    padding: 18px 20px 0;
    gap: 8px;
}

.bgl-duo-btn {
    flex: 1;
    min-width: 0;
    background: var(--bnb-surface);
    border: 1px solid var(--bnb-border);
    border-radius: 999px;
    padding: 11px 16px;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--bnb-text-muted);
    cursor: pointer;
    font-family: inherit;
    transition: var(--bnb-transition);
}

.bgl-duo-btn:hover {
    border-color: var(--bnb-gold);
    color: var(--bnb-gold);
}

.bgl-duo-btn.is-on {
    background: var(--bnb-gold);
    border-color: var(--bnb-gold);
    color: var(--bnb-on-gold);
}

.bgl-duo-btn:focus-visible {
    outline: 2px solid var(--bnb-gold);
    outline-offset: 2px;
}

.bgl-duo-vp {
    overflow: hidden;
    padding: 18px 20px 26px;
}

/*
 * I due pannelli stanno affiancati e si sposta la fila, invece di nascondere
 * quello che non serve. Nascondendolo la finestra cambierebbe altezza a ogni
 * scambio e tutta la pagina sotto farebbe un salto.
 */
.bgl-duo-track {
    display: flex;
    align-items: flex-start;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

/*
 * Il pannello e' largo quanto la finestra, e nessuno dei due ha un limite.
 *
 * Il limite c'era, ed era sul pannello: 560px dentro un contenitore piu'
 * largo. Sembrava innocuo e invece rompeva lo scorrimento, perche' il
 * JavaScript spostava la fila di -100% — cioe' della larghezza del
 * CONTENITORE — mentre il pannello era piu' stretto: il secondo usciva
 * dall'altra parte e restava il vuoto.
 *
 * L'ho tolto invece di spostarlo sulla finestra: con il limite sulla
 * finestra il modulo veniva bene ma stretto, e il riquadro dei prezzi
 * accanto perdeva il respiro che aveva prima. Adesso occupano lo spazio
 * che gli da' la pagina, e lo spostamento lo misura il JavaScript sul
 * pannello vero: qualunque larghezza sia, i due numeri coincidono.
 */
.bgl-duo-panel {
    flex: 0 0 100%;
    min-width: 0;
    margin: 0;
    background: var(--bnb-surface);
    border: 1px solid var(--bnb-border);
    border-radius: 10px;
    padding: 24px 26px;
}

/* Chi preferisce meno movimento non lo subisce. */
@media (prefers-reduced-motion: reduce) {
    .bgl-duo-track { transition: none; }
}

/* ── I prezzi ── */
.bgl-cs-prices {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 30px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--bnb-border);
}

.bgl-cs-price {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.bgl-cs-price-label {
    font-size: 0.78rem;
    color: var(--bnb-text-muted);
}

.bgl-cs-price-now {
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--bnb-text);
}

.bgl-cs-price.is-reserved .bgl-cs-price-now { color: var(--bnb-gold); }

.bgl-cs-price-was {
    font-size: 0.92rem;
    color: var(--bnb-text-muted);
    text-decoration: line-through;
}

.bgl-cs-price-code { font-size: 0.75rem; color: var(--bnb-text-muted); }

.bgl-cs-price-code code {
    background: var(--bnb-surface-3);
    border-radius: 4px;
    padding: 1px 6px;
    font-weight: 700;
    color: var(--bnb-text);
    letter-spacing: 0.04em;
}

.bgl-cs-note {
    margin: 0 0 16px;
    font-size: 0.84rem;
    line-height: 1.55;
    color: var(--bnb-text-muted);
    background: var(--bnb-surface-2);
    border-left: 3px solid var(--bnb-gold);
    padding: 10px 12px;
    border-radius: 0 6px 6px 0;
}

/* ── L'elenco spuntato ── */
.bgl-cs-includes {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.bgl-cs-includes li {
    position: relative;
    padding-left: 26px;
    font-size: 0.89rem;
    line-height: 1.5;
    color: var(--bnb-text);
}

/*
 * La spunta e' disegnata qui: due lati di un quadrato ruotato di 45 gradi.
 * Niente caratteri presi da librerie di terzi, che cambiano forma da un
 * dispositivo all'altro proprio quando servono chiari.
 */
.bgl-cs-includes li::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 0.42em;
    width: 5px;
    height: 10px;
    border: solid var(--bnb-gold);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* ── I pulsanti ── */
.bgl-cs-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bgl-cs-btn {
    display: block;
    text-align: center;
    padding: 14px 20px;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    transition: var(--bnb-transition);
    border: 1px solid transparent;
    cursor: pointer;
    font-family: inherit;
}

.bgl-cs-btn.is-buy {
    background: var(--bnb-gold);
    color: var(--bnb-on-gold);
}

.bgl-cs-btn.is-buy:hover {
    background: var(--bnb-gold-hover);
    color: var(--bnb-on-gold);
}

.bgl-cs-btn.is-ghost {
    background: transparent;
    border-color: var(--bnb-border);
    color: var(--bnb-text);
    font-weight: 600;
}

.bgl-cs-btn.is-ghost:hover { border-color: var(--bnb-gold); color: var(--bnb-gold); }

.bgl-cs-btn.is-off {
    background: var(--bnb-surface-3);
    color: var(--bnb-text-muted);
    cursor: not-allowed;
}

.bgl-cs-btn-sm {
    display: inline-block;
    padding: 7px 14px;
    font-size: 0.79rem;
}

.bgl-cs-reassure {
    margin: 12px 0 0;
    font-size: 0.79rem;
    line-height: 1.55;
    color: var(--bnb-text-muted);
}

/* ── Il modulo del codice ── */
.bgl-cs-panel-intro {
    margin: 0 0 16px;
    font-size: 0.89rem;
    line-height: 1.6;
    color: var(--bnb-text-muted);
}

.bgl-cs-codeform {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bgl-cs-codeform label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--bnb-text-muted);
    margin-top: 6px;
}

.bgl-cs-codeform input {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 13px;
    border: 1px solid var(--bnb-border);
    border-radius: 8px;
    background: var(--bnb-surface);
    color: var(--bnb-text);
    font-size: 0.95rem;
    font-family: inherit;
}

.bgl-cs-codeform input:focus {
    outline: 2px solid var(--bnb-gold);
    outline-offset: 1px;
    border-color: var(--bnb-gold);
}

.bgl-cs-codeform input[name="codice"] {
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
}

.bgl-cs-codeform button { margin-top: 14px; }

.bgl-cs-recall {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px dashed var(--bnb-border);
}

/* ── Chi e' gia' dentro ── */
.bgl-cs-inside {
    border-top: 1px solid var(--bnb-border);
    background: var(--bnb-surface-2);
    padding: 20px 40px;
}

.bgl-cs-hello {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.6;
}

.bgl-cs-who {
    display: block;
    margin-top: 6px;
    font-size: 0.8rem;
    color: var(--bnb-text-muted);
}

.bgl-cs-testnote {
    margin: 0 0 12px;
    padding: 11px 14px;
    background: #fdf3e2;
    border-left: 4px solid #9a6100;
    border-radius: 0 6px 6px 0;
    color: #4a3000;
    font-size: 0.86rem;
    line-height: 1.55;
}

/* ══════════════════════════════════════════
   I TAB DELLA SCHEDA
   ══════════════════════════════════════════ */

.bgl-cs-tabs-wrap { border-top: 1px solid var(--bnb-border); }
.bgl-cs-tabs-wrap .bnb-tab-panel { padding: 26px 40px 32px; }

.bgl-cs-room {
    display: inline-block;
    align-self: flex-start;
    margin-top: 8px;
    padding: 7px 14px;
    border-radius: 6px;
    background: var(--bnb-gold);
    color: var(--bnb-on-gold);
    font-size: 0.79rem;
    font-weight: 700;
    text-decoration: none;
}

.bgl-cs-room:hover { background: var(--bnb-gold-hover); color: var(--bnb-on-gold); }
.bgl-cs-room.is-rec { background: var(--bnb-course-color); }

.bgl-cs-locked {
    margin: 16px 0 0;
    padding: 11px 14px;
    background: var(--bnb-surface-2);
    border-left: 3px solid var(--bnb-border);
    border-radius: 0 6px 6px 0;
    font-size: 0.83rem;
    line-height: 1.55;
    color: var(--bnb-text-muted);
}

/* ── Registrazioni ── */
.bgl-cs-recs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bgl-cs-rec {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    background: var(--bnb-surface-2);
    border: 1px solid var(--bnb-border);
    border-radius: 8px;
}

.bgl-cs-rec.is-locked { opacity: 0.72; }

.bgl-cs-rec-n {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bnb-surface);
    border: 1px solid var(--bnb-gold);
    color: var(--bnb-gold);
    font-size: 0.78rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bgl-cs-rec-txt {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bgl-cs-rec-txt strong { font-size: 0.92rem; overflow-wrap: anywhere; }
.bgl-cs-rec-txt span { font-size: 0.76rem; color: var(--bnb-text-muted); }

.bgl-cs-lockchip {
    flex: 0 0 auto;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--bnb-text-muted);
    border: 1px dashed var(--bnb-border);
    border-radius: 999px;
    padding: 4px 11px;
}

/* ── Materiali ── */
.bgl-cs-mats {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.bgl-cs-mat h4 {
    margin: 0 0 10px;
    font-size: 0.92rem;
    font-weight: 700;
}

.bgl-cs-mat ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bgl-cs-mat li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    background: var(--bnb-surface-2);
    border: 1px solid var(--bnb-border);
    border-radius: 7px;
}

.bgl-cs-mat-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.87rem;
    overflow-wrap: anywhere;
}

.bgl-cs-mat-size {
    flex: 0 0 auto;
    font-size: 0.75rem;
    color: var(--bnb-text-muted);
}

/* ── L'avviso per chi amministra ── */
.bgl-cs-hint {
    background: #fdf3e2;
    border-left: 4px solid #9a6100;
    color: #4a3000;
    padding: 12px 16px;
    border-radius: 0 6px 6px 0;
    font-size: 0.86rem;
    line-height: 1.55;
}

/* ══════════════════════════════════════════
   RESPONSIVE SCHEDA CORSO
   ══════════════════════════════════════════ */

@media (max-width: 860px) {
    .bgl-cs-cover { aspect-ratio: 16 / 9; }
    .bgl-cs-headtext { padding: 24px 20px 22px; }
    .bgl-cs-tabs-wrap .bnb-tab-panel { padding: 20px 18px 26px; }
    .bgl-cs-inside { padding: 18px 20px; }
    .bgl-duo-vp { padding: 16px 14px 22px; }
    .bgl-duo-switch { padding: 16px 14px 0; }
    .bgl-duo-panel { padding: 20px 18px; }
}

@media (max-width: 520px) {
    .bgl-cs-prices { flex-direction: column; gap: 14px; }
    .bgl-cs-price-now { font-size: 1.45rem; }
    .bgl-cs-rec { flex-wrap: wrap; }
    .bgl-cs-mat li { flex-wrap: wrap; }
}

/* ══════════════════════════════════════════
   CORSI INCLUSI IN UN PERCORSO
   ══════════════════════════════════════════ */

.bgl-inc-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bgl-inc {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px;
    background: var(--bnb-surface-2);
    border: 1px solid var(--bnb-border);
    border-radius: 10px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.bgl-inc:hover {
    border-color: var(--bnb-gold);
    box-shadow: 0 3px 12px var(--bnb-shadow-color);
}

.bgl-inc-media {
    flex: 0 0 auto;
    width: 104px;
    height: 74px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--bnb-surface-3);
    display: flex;
    align-items: center;
    justify-content: center;
}

.bgl-inc-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bgl-inc-n {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--bnb-gold);
}

/* min-width: 0 su ogni anello, o il testo lungo sfonda invece di andare a capo. */
.bgl-inc-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.bgl-inc-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--bnb-text);
    overflow-wrap: anywhere;
}

.bgl-inc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.bgl-inc-chips span {
    background: var(--bnb-surface);
    border: 1px solid var(--bnb-border);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 0.71rem;
    color: var(--bnb-text-muted);
    white-space: nowrap;
}

.bgl-inc-chips .is-running { border-color: var(--bnb-live-color);   color: var(--bnb-live-color); }
.bgl-inc-chips .is-soon    { border-color: var(--bnb-course-color); color: var(--bnb-course-color); }

.bgl-inc-sum {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--bnb-text-muted);
}

.bgl-inc-go { flex: 0 0 auto; }

@media (max-width: 640px) {
    .bgl-inc { flex-wrap: wrap; }
    .bgl-inc-media { width: 72px; height: 56px; }
    .bgl-inc-go { flex: 1 1 100%; }
    .bgl-inc-go .bgl-cs-btn { display: block; text-align: center; }
}

/* ══════════════════════════════════════════
   DOVE — indirizzo e mappa
   ══════════════════════════════════════════ */

.bgl-ev-addr {
    margin: 0 0 14px;
    font-size: 0.95rem;
    line-height: 1.6;
}

.bgl-ev-map {
    position: relative;
    border: 1px dashed var(--bnb-border);
    border-radius: 10px;
    padding: 22px;
    text-align: center;
    background: var(--bnb-surface-2);
    margin-bottom: 14px;
}

.bgl-ev-mapbtn {
    display: inline-block;
    width: auto;
}

.bgl-ev-mapnote {
    margin: 10px 0 0;
    font-size: 0.79rem;
    line-height: 1.55;
    color: var(--bnb-text-muted);
}

/*
 * Quando la mappa arriva, il riquadro smette di essere un invito e diventa una
 * cornice: via il tratteggio, via il fondo, e l'altezza la decide il rapporto
 * fra i lati invece di un numero fisso — cosi' sul telefono non diventa una
 * fessura.
 */
.bgl-ev-map.is-on {
    padding: 0;
    border-style: solid;
    background: none;
    overflow: hidden;
    aspect-ratio: 16 / 10;
}

.bgl-ev-map.is-on iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.bgl-ev-room { margin-top: 12px; }

/* ══════════════════════════════════════════
   LA VETRINA — [bgl_vetrina]
   ══════════════════════════════════════════ */

.bgl-vetrina {
    color: var(--bnb-text);
}

.bgl-vet-tabs {
    border: 1px solid var(--bnb-border);
    border-radius: 10px 10px 0 0;
    background: var(--bnb-surface-2);
}

.bgl-vet-panel { padding: 24px 0 0; }

/*
 * Le colonne si scelgono con la classe, ma il minimo comanda: repeat(auto-fit,
 * minmax(...)) fa scendere il numero da solo quando non ci sta. Cinque colonne
 * su un telefono sarebbero cinque francobolli, e nessuno ha mai comprato niente
 * da un francobollo.
 */
.bgl-vet-grid {
    display: grid;
    gap: 22px;
}

.bgl-vet-grid.is-1 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.bgl-vet-grid.is-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.bgl-vet-grid.is-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.bgl-vet-grid.is-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.bgl-vet-grid.is-5 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 185px), 1fr)); }

@media (min-width: 1100px) {
    .bgl-vet-grid.is-1 { grid-template-columns: repeat(1, 1fr); }
    .bgl-vet-grid.is-2 { grid-template-columns: repeat(2, 1fr); }
    .bgl-vet-grid.is-3 { grid-template-columns: repeat(3, 1fr); }
    .bgl-vet-grid.is-4 { grid-template-columns: repeat(4, 1fr); }
    .bgl-vet-grid.is-5 { grid-template-columns: repeat(5, 1fr); }
}

/*
 * Quando le schede sono meno delle colonne che hai chiesto.
 *
 * Occupano tutta la riga, ma fino a un limite: una scheda sola larga milleduecento
 * pixel non e' «piena», e' una locandina gigante con tre parole sotto, e
 * l'immagine si sgrana perche' nessuno carica foto cosi' grandi. Il tetto le
 * tiene di una misura credibile e il gruppo si mette al centro — cosi' lo
 * spazio che avanza sta ai due lati, dove si legge come margine, invece che
 * tutto a destra, dove si legge come un buco.
 */
.bgl-vet-grid.is-poche {
    justify-content: center;
}

@media (min-width: 1100px) {
    .bgl-vet-grid.is-poche.is-1 { grid-template-columns: minmax(0, 520px); }
    .bgl-vet-grid.is-poche.is-2 { grid-template-columns: repeat(2, minmax(0, 520px)); }
    .bgl-vet-grid.is-poche.is-3 { grid-template-columns: repeat(3, minmax(0, 440px)); }
    .bgl-vet-grid.is-poche.is-4 { grid-template-columns: repeat(4, minmax(0, 380px)); }
}

.bgl-vet-card {
    background: var(--bnb-surface);
    border: 1px solid var(--bnb-border);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.bgl-vet-card:hover {
    transform: translateY(-3px);
    border-color: var(--bnb-gold);
    box-shadow: 0 8px 26px var(--bnb-shadow-color);
}

@media (prefers-reduced-motion: reduce) {
    .bgl-vet-card, .bgl-vet-card:hover { transform: none; transition: none; }
}

.bgl-vet-media {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--bnb-surface-3);
    text-decoration: none;
}

.bgl-vet-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.bgl-vet-card:hover .bgl-vet-media img { transform: scale(1.05); }

.bgl-vet-noimg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 18px;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--bnb-text-muted);
}

.bgl-vet-kind,
.bgl-vet-badge {
    position: absolute;
    top: 10px;
    border-radius: 999px;
    padding: 4px 11px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: var(--bnb-page);
    color: var(--bnb-text);
    box-shadow: 0 1px 4px var(--bnb-shadow-color);
}

.bgl-vet-kind  { left: 10px; }
.bgl-vet-badge { right: 10px; text-transform: none; letter-spacing: 0; font-weight: 600; }

.bgl-vet-badge.is-running { color: var(--bnb-live-color); }
.bgl-vet-badge.is-soon    { color: var(--bnb-course-color); }
.bgl-vet-badge.is-done    { color: var(--bnb-text-muted); }

/*
 * «Date in definizione»: una targhetta ferma, senza colore d'accento.
 *
 * Le altre targhette annunciano qualcosa che sta succedendo — e' in corso, sta
 * per iniziare. Questa dice il contrario: non c'e' ancora niente. Darle il
 * colore delle altre la farebbe leggere come una promessa, e la delusione
 * arriverebbe mezzo secondo dopo.
 */
/*
 * «Prova gratis» sulla locandina di un corso registrato: verde, perche' e'
 * l'unica targhetta che promette qualcosa invece di dire uno stato.
 */
.bgl-vet-badge.is-prova {
    color: #18603c;
    background: #eaf3ee;
    font-weight: 650;
}

.bgl-vet-card.is-registrato .bgl-vet-kind {
    background: #1c1e22;
    color: #ffffff;
}

.bgl-vet-badge.is-tba {
    color: var(--bnb-text);
    background: var(--bnb-surface-2, #eceff3);
    font-weight: 650;
}

/* Sulle schede senza data il cuore sta sotto le informazioni, non sopra: il
   titolo e il «date in definizione» vengono prima, perche' sono il motivo per
   cui uno guarda la scheda. */
.bgl-vet-card .bgl-cuore { margin: 10px 0 0; }


/*
 * «Scopri» compare al passaggio del mouse — ma su un telefono il passaggio del
 * mouse non esiste. Percio' sotto i 1024 pixel resta sempre visibile: un
 * pulsante che si mostra solo a chi ha un mouse e' un pulsante che meta' delle
 * persone non vedra' mai.
 */
.bgl-vet-btn {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%) translateY(8px);
    opacity: 0;
    background: var(--bnb-gold);
    color: var(--bnb-on-gold);
    border-radius: 999px;
    padding: 9px 22px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
    transition: opacity 0.22s ease, transform 0.22s ease;
    pointer-events: none;
}

.bgl-vet-card:hover .bgl-vet-btn,
.bgl-vet-media:focus-visible .bgl-vet-btn {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

@media (max-width: 1024px), (hover: none) {
    .bgl-vet-btn { opacity: 1; transform: translateX(-50%); }
}

.bgl-vet-body {
    padding: 15px 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 auto;
}

.bgl-vet-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.32;
    overflow-wrap: anywhere;
}

.bgl-vet-title a { color: var(--bnb-text); text-decoration: none; }
.bgl-vet-title a:hover { color: var(--bnb-gold); }

.bgl-vet-meta {
    margin: 0;
    font-size: 0.79rem;
    color: var(--bnb-text-muted);
    line-height: 1.5;
}

/* ══════════════════════════════════════════
   I PULSANTI, E COSA SUCCEDE SOTTO IL PUNTATORE
   ══════════════════════════════════════════ */

/*
 * Una regola sola per tutti i pulsanti del plugin, e vale al contrario:
 *
 *   fermo    → fondo nero, scritta bianca
 *   sotto il puntatore → fondo bianco, bordo nero, scritta nera
 *
 * L'inversione e' voluta: e' il cambiamento piu' evidente che esista fra due
 * stati, si vede con la coda dell'occhio e non dipende dal saper distinguere
 * due tonalita' vicine.
 *
 * Il !important non e' pigrizia. Kadence colora i link e i pulsanti con regole
 * sue, spesso piu' specifiche delle nostre perche' partono dal <body>; senza,
 * il colore del tema vince e il pulsante torna invisibile al passaggio — che e'
 * esattamente il guasto da cui nasce questo blocco.
 */
.bgl-cs-btn.is-buy,
.bgl-cs-room,
.bgl-vetrina .bgl-vet-btn,
.bnb-events-wrap .bnb-btn-primary,
.bnb-percorso-card .bnb-btn-primary,
.bgl-corso-scheda .bgl-duo-btn.is-on,
.bgl-corso-scheda .bgl-cs-room,
.bnb-btn-primary {
    background-color: var(--bnb-gold) !important;
    border: 1px solid var(--bnb-gold) !important;
    color: var(--bnb-on-gold) !important;
    text-decoration: none !important;
}

.bgl-cs-btn.is-buy:hover,
.bgl-cs-btn.is-buy:focus-visible,
.bgl-cs-room:hover,
.bgl-vetrina .bgl-vet-card:hover .bgl-vet-btn,
.bnb-events-wrap .bnb-btn-primary:hover,
.bnb-events-wrap .bnb-btn-primary:focus-visible,
.bnb-percorso-card .bnb-btn-primary:hover,
.bgl-corso-scheda .bgl-duo-btn.is-on:hover,
.bgl-corso-scheda .bgl-cs-room:hover,
.bgl-corso-scheda .bgl-cs-room:focus-visible,
.bnb-btn-primary:hover,
.bnb-btn-primary:focus-visible {
    background-color: var(--bnb-page) !important;
    border-color: var(--bnb-gold) !important;
    color: var(--bnb-gold) !important;
}

/* Quelli vuoti fanno il percorso opposto: si riempiono di nero. */
.bgl-cs-btn.is-ghost,
.bgl-vetrina .bgl-vet-ghost,
.bnb-events-wrap .bnb-btn-secondary,
.bnb-percorso-card .bnb-btn-secondary,
.bgl-corso-scheda .bgl-duo-btn,
.bnb-btn-secondary {
    background-color: transparent !important;
    border: 1px solid var(--bnb-border) !important;
    color: var(--bnb-text) !important;
    text-decoration: none !important;
}

.bgl-cs-btn.is-ghost:hover,
.bgl-cs-btn.is-ghost:focus-visible,
.bnb-events-wrap .bnb-btn-secondary:hover,
.bnb-events-wrap .bnb-btn-secondary:focus-visible,
.bnb-percorso-card .bnb-btn-secondary:hover,
.bgl-corso-scheda .bgl-duo-btn:not(.is-on):hover,
.bnb-btn-secondary:hover,
.bnb-btn-secondary:focus-visible {
    background-color: var(--bnb-gold) !important;
    border-color: var(--bnb-gold) !important;
    color: var(--bnb-on-gold) !important;
}

/* Il pulsante spento non reagisce: non c'e' niente da premere. */
.bgl-corso-scheda .bgl-cs-btn.is-off,
.bgl-corso-scheda .bgl-cs-btn.is-off:hover {
    background-color: var(--bnb-surface-3) !important;
    border-color: var(--bnb-border) !important;
    color: var(--bnb-text-muted) !important;
    cursor: not-allowed;
}

/*
 * I link dentro i testi. Su fondo bianco un link nero e' indistinguibile da
 * una parola qualsiasi, quindi la sottolineatura c'e' sempre e sotto il
 * puntatore si ingrossa. Il colore da solo non basterebbe comunque: circa un
 * uomo su dodici non separa bene certe tonalita'.
 */
.bnb-percorso-content a,
.bgl-corso-scheda .bnb-tab-panel a:not(.bgl-cs-btn):not(.bgl-cs-room):not(.bnb-btn),
.bnb-percorso-card .bnb-tab-panel a:not(.bnb-btn):not(.bgl-cs-btn):not(.bgl-cs-room),
.bgl-cs-who a {
    color: var(--bnb-gold) !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.bnb-percorso-content a:hover,
.bgl-corso-scheda .bnb-tab-panel a:not(.bgl-cs-btn):not(.bgl-cs-room):hover,
.bnb-percorso-card .bnb-tab-panel a:not(.bnb-btn):not(.bgl-cs-btn):not(.bgl-cs-room):hover,
.bgl-cs-who a:hover {
    color: var(--bnb-gold-hover) !important;
    text-decoration-thickness: 2px !important;
}

/* I titoli-link: neri, e sotto il puntatore si sottolineano. */
.bnb-event-title a,
.bnb-percorso-title a,
.bgl-vet-title a,
.bgl-inc-title a {
    color: var(--bnb-text) !important;
    text-decoration: none !important;
}

.bnb-event-title a:hover,
.bnb-percorso-title a:hover,
.bgl-vet-title a:hover,
.bgl-inc-title a:hover {
    color: var(--bnb-gold) !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

/* ══════════════════════════════════════════
   LA PROMOZIONE, BEN VISIBILE
   ══════════════════════════════════════════ */

.bgl-cs-promo {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px 14px;
    margin-bottom: 4px;
}

.bgl-cs-tag {
    display: inline-flex;
    align-items: center;
    background: var(--bnb-gold);
    color: var(--bnb-on-gold);
    border-radius: 5px;
    padding: 4px 11px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}

/*
 * Il prezzo barrato piu' piccolo e spento, quello nuovo grande e nero. La
 * differenza di dimensione fa il lavoro che il colore da solo non farebbe: si
 * capisce quale dei due si paga anche guardando la pagina di sfuggita.
 */
.bgl-cs-promo .bgl-cs-price-was {
    font-size: 1.05rem;
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    color: var(--bnb-text-muted);
    order: 2;
}

.bgl-cs-promo .bgl-cs-price-now {
    font-size: 2.1rem;
    order: 1;
}

.bgl-cs-promo .bgl-cs-tag { order: 0; }

.bgl-cs-saving {
    display: block;
    margin-top: 2px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--bnb-gold);
}

/* ══════════════════════════════════════════
   LA BARRA DI AVANZAMENTO DEL CORSO
   ══════════════════════════════════════════ */

.bgl-prog {
    margin: 0 0 18px;
}

.bgl-prog-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 7px;
    font-size: 0.84rem;
}

.bgl-prog-lab { font-weight: 700; color: var(--bnb-text); }
.bgl-prog-num { color: var(--bnb-text-muted); }

/*
 * La barra e' fatta di segmenti, uno per lezione, e non di una striscia piena.
 * Con poche lezioni una striscia continua non dice niente — «tre quarti» di un
 * corso da quattro incontri e' un'informazione che si legge meglio contando i
 * blocchi. Sopra le venti lezioni i segmenti diventano troppo sottili e la
 * barra torna continua.
 */
.bgl-prog-bar {
    display: flex;
    gap: 3px;
    height: 9px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--bnb-surface-3);
}

.bgl-prog-seg {
    flex: 1 1 0;
    min-width: 0;
    background: var(--bnb-surface-3);
    transition: background 0.3s ease;
}

.bgl-prog-seg.is-done { background: var(--bnb-gold); }
.bgl-prog-seg.is-now  { background: var(--bnb-gold); opacity: 0.55; }

.bgl-prog-bar.is-long { gap: 0; }

.bgl-prog-note {
    margin: 7px 0 0;
    font-size: 0.79rem;
    color: var(--bnb-text-muted);
}

/* ══════════════════════════════════════════
   IL CONTO ALLA ROVESCIA DELLA PROMOZIONE
   ══════════════════════════════════════════ */

.bgl-cd {
    margin: 0 0 16px;
    padding: 14px 16px;
    background: var(--bnb-surface-2);
    border: 1px solid var(--bnb-border);
    border-radius: 10px;
}

.bgl-cd-when {
    margin: 0 0 10px;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--bnb-text);
}

.bgl-cd-hour {
    display: inline-block;
    margin-left: 4px;
    font-size: 0.78rem;
    color: var(--bnb-text-muted);
}

.bgl-cd-clock {
    display: flex;
    gap: 8px;
}

.bgl-cd-box {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 9px 4px;
    background: var(--bnb-surface);
    border: 1px solid var(--bnb-border);
    border-radius: 8px;
}

/*
 * I numeri in cifre a larghezza fissa. Senza, ogni volta che un 1 diventa un 8
 * la scatola si allarga di un pelo e il riquadro «respira» a ogni secondo —
 * un movimento piccolo ma continuo, di quelli che stancano senza che si capisca
 * perche'.
 */
.bgl-cd-box b {
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1;
    color: var(--bnb-text);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.bgl-cd-box i {
    font-style: normal;
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bnb-text-muted);
}

/* Sotto le 24 ore i giorni non servono: via, e spazio al resto. */
.bgl-cd.is-soon .bgl-cd-box:first-child { display: none; }

.bgl-cd.is-soon .bgl-cd-box b { color: var(--bnb-live-color); }

.bgl-cd-over {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--bnb-text-muted);
}

.bgl-cd.is-over {
    background: var(--bnb-surface);
    border-style: dashed;
}

@media (max-width: 420px) {
    .bgl-cd-clock { gap: 5px; }
    .bgl-cd-box { padding: 7px 2px; }
    .bgl-cd-box b { font-size: 1.1rem; }
    .bgl-cd-box i { font-size: 0.56rem; letter-spacing: 0.04em; }
}

/* ══════════════════════════════════════════
   IL PROGRAMMA: LE LEZIONE UNA PER UNA
   ══════════════════════════════════════════ */

.bgl-lez {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    counter-reset: none;
}

.bgl-lez-riga {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 14px 16px;
    background: var(--bnb-surface-2);
    border: 1px solid var(--bnb-border);
    border-radius: 10px;
    transition: border-color 0.2s;
}

.bgl-lez-riga:hover { border-color: var(--bnb-gold); }
.bgl-lez-riga.is-past { opacity: 0.78; }
.bgl-lez-riga.is-open { border-left: 3px solid var(--bnb-gold); }

.bgl-lez-n {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--bnb-surface);
    border: 1px solid var(--bnb-gold);
    color: var(--bnb-gold);
    font-size: 0.88rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bgl-lez-riga.is-past .bgl-lez-n {
    background: var(--bnb-gold);
    color: var(--bnb-on-gold);
}

/* min-width: 0, o un titolo lungo sfonda la riga invece di andare a capo. */
.bgl-lez-corpo { min-width: 0; }

.bgl-lez-tit {
    margin: 0 0 3px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--bnb-text);
    overflow-wrap: anywhere;
}

.bgl-lez-quando {
    margin: 0 0 5px;
    font-size: 0.79rem;
    color: var(--bnb-text-muted);
}

.bgl-lez-desc {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--bnb-text-muted);
}

.bgl-lez-azione {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.bgl-lez-chip {
    display: inline-block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--bnb-text-muted);
    border: 1px dashed var(--bnb-border);
    border-radius: 999px;
    padding: 5px 12px;
    white-space: nowrap;
}

.bgl-lez-chip.is-ok {
    border-style: solid;
    border-color: var(--bnb-online-color);
    color: var(--bnb-online-color);
}

/*
 * La lezione gratuita si vede da lontano: bordo verde e scritta verde su
 * bianco, non nera come le altre. E' l'unica eccezione al nero, e vale la pena
 * — «gratuito» e' l'informazione che si cerca con l'occhio, non leggendo.
 */
.bgl-cs-btn.is-buy.is-free,
.bgl-corso-scheda .bgl-cs-btn.is-buy.is-free {
    background-color: var(--bnb-online-color) !important;
    border-color: var(--bnb-online-color) !important;
    color: #ffffff !important;
}

.bgl-cs-btn.is-buy.is-free:hover,
.bgl-corso-scheda .bgl-cs-btn.is-buy.is-free:hover {
    background-color: var(--bnb-page) !important;
    color: var(--bnb-online-color) !important;
}

.bgl-lez-video {
    width: 100%;
    max-width: 320px;
    border-radius: 8px;
    display: block;
    background: #000;
}

/* La playlist unica, in cima al tab */
.bgl-play {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    margin-bottom: 16px;
    background: var(--bnb-surface-2);
    border: 1px solid var(--bnb-border);
    border-radius: 10px;
}

.bgl-play-txt {
    margin: 0;
    flex: 1 1 220px;
    min-width: 0;
    font-size: 0.88rem;
    line-height: 1.5;
}

@media (max-width: 640px) {
    /*
     * Su telefono la riga diventa due piani: numero e testo sopra, il pulsante
     * sotto a tutta larghezza. Tre colonne su 360 pixel darebbero un pulsante
     * largo un pollice e un titolo a una parola per riga.
     */
    .bgl-lez-riga {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
    }

    .bgl-lez-azione {
        grid-column: 1 / -1;
    }

    .bgl-lez-azione .bgl-cs-btn {
        display: block;
        width: 100%;
        text-align: center;
    }

    .bgl-lez-video { max-width: 100%; }
}

/* ══════════════════════════════════════════
   LA PAGINA DEL DOCENTE
   ══════════════════════════════════════════ */

.bgl-docp {
    display: grid;
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
    gap: 34px;
    align-items: start;
    margin: 0 0 34px;
    color: var(--bnb-text);
}

/*
 * La colonna di sinistra resta in vista mentre si scorrono i tab: il ritratto
 * e i contatti sono la risposta a «chi e' questa persona», e quella domanda
 * torna in mente proprio mentre si guarda l'elenco dei corsi. position: sticky
 * si spegne da solo quando la colonna e' piu' alta della finestra, quindi non
 * c'e' rischio di tagliarne un pezzo.
 */
@media (min-width: 861px) {
    .bgl-docp-side {
        position: sticky;
        top: 24px;
    }
}

.bgl-docp-photo {
    border-radius: 14px;
    overflow: hidden;
    background: var(--bnb-surface-2);
    margin-bottom: 16px;
}

.bgl-docp-photo img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.bgl-docp-role {
    margin: 0 0 14px;
    font-size: 0.92rem;
    color: var(--bnb-text-muted);
    line-height: 1.5;
}

/* ── Le iconcine ── */
.bgl-docp-icons {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.bgl-docp-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid var(--bnb-border);
    color: var(--bnb-text) !important;
    text-decoration: none !important;
    transition: var(--bnb-transition);
}

/*
 * 44 pixel per lato: e' la misura sotto la quale un bersaglio da toccare
 * diventa difficile da centrare con un dito. Vale la pena anche se il disegno
 * dentro e' molto piu' piccolo.
 */
.bgl-docp-icons a:hover,
.bgl-docp-icons a:focus-visible {
    background: var(--bnb-gold);
    border-color: var(--bnb-gold);
    color: var(--bnb-on-gold) !important;
}

.bgl-docp-icons svg { display: block; }

.bgl-docp .bgl-doc-contacts {
    margin: 0;
    padding: 16px 0 0;
    border-top: 1px solid var(--bnb-border);
    flex-direction: column;
    gap: 12px;
}

/* ── La colonna dei tab ── */
.bgl-docp-main {
    min-width: 0;
    border: 1px solid var(--bnb-border);
    border-radius: var(--bnb-radius);
    overflow: hidden;
    background: var(--bnb-surface);
}

.bgl-docp-main .bnb-percorso-tabs {
    border-bottom: 1px solid var(--bnb-border);
}

.bgl-docp-main .bnb-tab-panel {
    padding: 26px 30px 30px;
}

/* ── Il modulo per scrivere ── */
.bgl-docp-ask {
    padding: 28px 30px 30px;
    border: 1px solid var(--bnb-border);
    border-radius: var(--bnb-radius);
    background: var(--bnb-surface-2);
}

.bgl-docp-askintro {
    margin: 0 0 18px;
    font-size: 0.94rem;
    line-height: 1.6;
    color: var(--bnb-text-muted);
}

@media (max-width: 860px) {
    .bgl-docp {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    /* Il ritratto non prende tutta la larghezza: a 700 pixel sarebbe enorme. */
    .bgl-docp-photo { max-width: 260px; }

    .bgl-docp-main .bnb-tab-panel { padding: 20px 18px 24px; }
    .bgl-docp-ask { padding: 22px 18px 24px; }
}

/* ══════════════════════════════════════════
   IL DOCENTE — [bgl_docente]
   ══════════════════════════════════════════ */

/*
 * Due metà: testo a sinistra, ritratto a destra fino al bordo.
 *
 * Niente spazio fra le due colonne e niente angoli arrotondati sulla foto: e'
 * quello che le da' la forza. Un ritratto con la cornice e il margine sembra
 * una figurina incollata; un ritratto che arriva al bordo sembra una persona
 * che ti guarda dalla pagina.
 *
 * L'imbottitura sta tutta sul testo, non sul contenitore: se stesse sul
 * contenitore, la foto non potrebbe raggiungere il bordo.
 */
.bgl-doc {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: stretch;
    padding: 0;
    margin: 0;
    border-top: 1px solid var(--bnb-border);
    background: var(--bnb-surface);
    color: var(--bnb-text);
    overflow: hidden;
}

.bgl-doc.is-nophoto { grid-template-columns: minmax(0, 1fr); }

.bgl-doc-text {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 54px 44px;
    text-align: center;
}

.bgl-doc-inner {
    width: 100%;
    max-width: 520px;
}

.bgl-doc-tit {
    margin: 0 0 14px;
    line-height: 1.22;
    font-weight: 400;
}

.bgl-doc-kicker,
.bgl-doc-name {
    display: block;
}

.bgl-doc-kicker {
    font-size: clamp(1.3rem, 1rem + 1.1vw, 1.85rem);
    color: var(--bnb-text);
}

.bgl-doc-name {
    font-size: clamp(1.45rem, 1.05rem + 1.5vw, 2.15rem);
    color: var(--bnb-text);
    letter-spacing: -0.005em;
}

.bgl-doc-role {
    margin: 0 0 18px;
    font-size: 0.86rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bnb-text-muted);
}

.bgl-doc-bio {
    font-size: 0.97rem;
    line-height: 1.72;
    color: var(--bnb-text);
    text-align: center;
}

.bgl-doc-bio > *:first-child { margin-top: 0; }
.bgl-doc-bio > *:last-child  { margin-bottom: 0; }

/* ────────────────────────────────────────────────────────────
   «Leggi tutto»: la biografia si apre dov'e', senza cambiare
   pagina. Due strade, e non sono un doppione: se la biografia
   ha piu' paragrafi il seguito sta in .bgl-doc-resto e si
   scopre; se invece e' scritta in un blocco solo non esiste un
   punto dove separarla, e allora si accorcia a vista con
   l'altezza massima e la sfumatura in fondo. La sfumatura
   serve a dire che il testo continua: un taglio netto sembra
   la fine della biografia, e chi crede di aver finito non
   preme niente.
   ──────────────────────────────────────────────────────────── */
.bgl-doc-bio.is-clamped {
    position: relative;
    overflow: hidden;
    max-height: calc(var(--bgl-doc-righe, 5) * 1.72em);
}

.bgl-doc-bio.is-clamped::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3.2em;
    background: linear-gradient(to bottom, transparent, var(--bnb-surface));
    pointer-events: none;
}

.bgl-doc-resto[hidden] { display: none; }
.bgl-doc-resto > *:last-child { margin-bottom: 0; }

.bgl-doc-more {
    margin: 18px 0 0;
    text-align: center;
}

/*
 * Un pulsante vero, non un link travestito: apre e chiude una cosa che sta
 * nella pagina, non porta da nessuna parte. Chi naviga da tastiera lo
 * raggiunge con il tabulatore e lo apre con la barra spaziatrice — cosa che
 * su un link non funziona, ed e' il modo classico di rendere inutilizzabile
 * un comando che a vedersi sembrava a posto.
 *
 * Bianco con il bordo nero, e sotto il puntatore si inverte: e' l'opposto
 * esatto di «Scopri chi sono», che e' nero pieno. I due pulsanti stanno uno
 * sopra l'altro e devono dire due cose diverse — uno apre del testo qui, uno
 * porta via da questa pagina — quindi non possono avere lo stesso peso.
 *
 * I colori sono dichiarati !important perche' i temi (Kadence in testa)
 * disegnano di loro iniziativa OGNI <button> della pagina: senza, il pulsante
 * si presenta con il colore del tema, che qui era un beige comparso dal nulla.
 */
.bgl-doc-more-btn {
    display: inline-block;
    padding: 13px 30px;
    background: var(--bnb-surface) !important;
    border: 1px solid var(--bnb-invert-bg) !important;
    border-radius: 0 !important;
    color: var(--bnb-invert-bg) !important;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    box-shadow: none !important;
    cursor: pointer;
    transition: var(--bnb-transition);
}

.bgl-doc-more-btn:hover,
.bgl-doc-more-btn:focus-visible {
    background: var(--bnb-invert-bg) !important;
    border-color: var(--bnb-invert-bg) !important;
    color: var(--bnb-invert-fg) !important;
}

/* Le iconcine, centrate sotto il testo. */
.bgl-doc .bgl-docp-icons {
    justify-content: center;
    margin: 22px 0 0;
}

/* ── Il pulsante ── */
/*
 * Un po' piu' d'aria sopra: sotto ci sono le targhette e le iconcine, e con
 * ventiquattro pixel il pulsante nero sembrava attaccato all'ultima riga di
 * icone. Un pulsante che chiude un blocco ha bisogno di stare staccato da
 * quello che lo precede, altrimenti si legge come parte di quella fila.
 */
.bgl-doc-cta {
    margin: 34px 0 0;
}

.bgl-doc-btn {
    display: inline-block;
    /* Staccato da quello che ha sopra e sotto: incollato sembrava
       la continuazione del testo invece di un invito a premere. */
    margin: 18px 0 6px;
    padding: 16px 34px;
    background: var(--bnb-gold) !important;
    border: 1px solid var(--bnb-gold) !important;
    color: var(--bnb-on-gold) !important;
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: var(--bnb-transition);
}

.bgl-doc-btn:hover,
.bgl-doc-btn:focus-visible {
    background: var(--bnb-page) !important;
    color: var(--bnb-gold) !important;
    border-color: var(--bnb-gold) !important;
}

/* ── Il ritratto ── */
.bgl-doc-photo {
    display: block;
    position: relative;
    min-height: 100%;
    background: var(--bnb-surface-2);
    text-decoration: none !important;
    overflow: hidden;
}

/*
 * position: absolute e inset: 0 e non height 100%.
 *
 * Una immagine con height: 100% dentro una cella di griglia alta «quanto la
 * riga» non sa quanto sia alta la riga finche' la riga non e' stata misurata,
 * e in certi browser finisce per essere alta quanto se stessa — cioe' tanto,
 * allungando la riga e poi tutta la sezione. Con l'assoluto la foto riempie
 * quello che c'e', qualunque sia, e non partecipa alla misura.
 */
.bgl-doc-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    transition: transform 0.6s ease;
}

.bgl-doc-photo:hover img { transform: scale(1.03); }

@media (prefers-reduced-motion: reduce) {
    .bgl-doc-photo img,
    .bgl-doc-photo:hover img { transition: none; transform: none; }
}

/* Senza foto il testo non resta appeso a mezz'aria in una colonna sola. */
.bgl-doc.is-nophoto .bgl-doc-text { padding: 44px 30px; }

@media (max-width: 900px) {
    /*
     * Sul telefono la foto sale sopra e prende un'altezza sua: affiancata a un
     * testo su 400 pixel diventerebbe una striscia verticale in cui non si
     * riconosce piu' un volto.
     */
    .bgl-doc {
        grid-template-columns: minmax(0, 1fr);
    }

    .bgl-doc-photo {
        order: -1;
        min-height: 0;
        aspect-ratio: 4 / 3;
    }

    .bgl-doc-text { padding: 34px 22px 38px; }
    .bgl-doc .bgl-docp-icons { margin-top: 18px; }
}

@media (max-width: 480px) {
    .bgl-doc-photo { aspect-ratio: 1 / 1; }
    .bgl-doc-btn { display: block; padding: 15px 20px; }
}

/* ── I contatti scritti per esteso (pagina del docente) ── */
.bgl-doc-contacts {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 26px;
}

.bgl-doc-contacts li {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.bgl-doc-ckind {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--bnb-text-muted);
}

.bgl-doc-contacts a {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--bnb-gold) !important;
    text-decoration: none !important;
    overflow-wrap: anywhere;
}

.bgl-doc-contacts a:hover {
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

/* ══════════════════════════════════════════
   LA PAGINA DEL DOCENTE, IN NERO E BIANCO
   ══════════════════════════════════════════ */

/*
 * Il modulo di contatto porta il colore scelto nelle impostazioni generali —
 * il viola del sito. Qui dentro stona: la pagina e' costruita in nero e
 * bianco, e un pulsante viola in mezzo sembra arrivato da un'altra pagina.
 * Si forza il nero solo dentro questa sezione, senza toccare il colore che il
 * modulo usa in tutto il resto del sito.
 */
.bgl-docp-ask .bgl-widget {
    --bgl-accent: #16181c;
}

.bgl-docp-ask .bgl-btn,
.bgl-docp-ask button[type="submit"] {
    background-color: var(--bnb-gold) !important;
    border-color: var(--bnb-gold) !important;
    color: var(--bnb-on-gold) !important;
}

.bgl-docp-ask .bgl-btn:hover,
.bgl-docp-ask button[type="submit"]:hover {
    background-color: var(--bnb-page) !important;
    color: var(--bnb-gold) !important;
}

/* I tab della pagina docente seguono lo stesso nero di tutti gli altri. */
.bgl-docp-main .bnb-tab-btn.active {
    border-bottom-color: var(--bnb-gold);
    color: var(--bnb-text);
}

.bgl-docp-main .bnb-tab-count {
    background: var(--bnb-gold);
    color: var(--bnb-on-gold);
}

/* ══════════════════════════════════════════
   IL TAB CERTIFICAZIONE
   ══════════════════════════════════════════ */

.bgl-cert {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(120px, 180px);
    gap: 28px;
    align-items: center;
}

.bgl-cert:not(:has(.bgl-cert-logo)) { grid-template-columns: minmax(0, 1fr); }

.bgl-cert-testo { min-width: 0; }

.bgl-cert-ente {
    margin: 0 0 10px;
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--bnb-text);
}

.bgl-cert-p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--bnb-text);
}

.bgl-cert-cta { margin: 18px 0 0; }

.bgl-cert-nota {
    margin: 16px 0 0;
    padding: 11px 14px;
    background: var(--bnb-surface-2);
    border-left: 3px solid var(--bnb-border);
    border-radius: 0 6px 6px 0;
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--bnb-text-muted);
}

/*
 * Il marchio dell'ente in scala di grigi, e a colori quando ci si passa sopra.
 * Non e' vezzo: un logo a colori pieni in mezzo a una pagina in bianco e nero
 * si mangia l'attenzione che dovrebbe andare al testo. Cosi' c'e', si vede,
 * ma non urla.
 */
.bgl-cert-logo img {
    width: 100%;
    height: auto;
    display: block;
    filter: grayscale(1);
    opacity: 0.82;
    transition: filter 0.3s ease, opacity 0.3s ease;
}

.bgl-cert:hover .bgl-cert-logo img {
    filter: grayscale(0);
    opacity: 1;
}

@media (max-width: 640px) {
    .bgl-cert { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .bgl-cert-logo { max-width: 150px; }
}

/* ══════════════════════════════════════════
   LE CERTIFICAZIONI DEL DOCENTE
   ══════════════════════════════════════════ */

.bgl-doc-titoli {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.bgl-doc .bgl-doc-titoli { justify-content: center; }

.bgl-doc-titoli li {
    border: 1px solid var(--bnb-border);
    border-radius: 999px;
    padding: 5px 13px;
    font-size: 0.75rem;
    letter-spacing: 0.03em;
    color: var(--bnb-text-muted);
    white-space: nowrap;
}

/* ══════════════════════════════════════════
   LA STRISCIA DEL PARTNER — [bgl_partner]
   ══════════════════════════════════════════ */

/*
 * Nessuna misura fissa da nessuna parte.
 *
 * Una striscia con le larghezze scritte a mano e' la prima cosa che si rompe
 * quando la si mette in una colonna stretta, in un piede di pagina o dentro
 * un'altra griglia. Qui i tre pezzi si dividono lo spazio che c'e', e quando
 * non ce n'e' piu' abbastanza vanno a capo da soli — flex-wrap fa tutto,
 * senza bisogno di sapere in anticipo dove finiranno.
 */
.bgl-partner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 20px 32px;
    padding: 22px 26px;
    border: 1px solid var(--bnb-border);
    border-radius: var(--bnb-radius);
    background: var(--bnb-surface);
    color: var(--bnb-text);
}

.bgl-partner-logo,
.bgl-partner-ente {
    flex: 0 1 auto;
    /*
     * L'altezza la comanda il testo accanto, non il file: due immagini di
     * dimensioni diverse — e lo sono sempre — starebbero altrimenti una alta
     * il doppio dell'altra.
     */
    max-width: 170px;
}

.bgl-partner-logo img,
.bgl-partner-ente img {
    width: 100%;
    height: auto;
    max-height: 68px;
    object-fit: contain;
    display: block;
    filter: grayscale(1);
    opacity: 0.88;
    transition: filter 0.3s ease, opacity 0.3s ease;
}

.bgl-partner:hover .bgl-partner-logo img,
.bgl-partner:hover .bgl-partner-ente img {
    filter: grayscale(0);
    opacity: 1;
}

.bgl-partner-testo {
    flex: 1 1 200px;
    min-width: 0;
    text-align: center;
}

.bgl-partner-nome {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--bnb-text);
}

.bgl-partner-sub {
    margin: 3px 0 0;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--bnb-text-muted);
}

/* Su schermo largo il testo sta in mezzo e i due marchi ai lati. */
@media (min-width: 720px) {
    .bgl-partner { justify-content: space-between; }
    .bgl-partner-testo { text-align: center; }
}

@media (max-width: 480px) {
    .bgl-partner { padding: 18px 16px; gap: 14px; }
    .bgl-partner-logo,
    .bgl-partner-ente { max-width: 130px; }
    .bgl-partner-logo img,
    .bgl-partner-ente img { max-height: 52px; }
}

/* ══════════════════════════════════════════
   I PULSANTI DEL PERCORSO, RIFATTI
   ══════════════════════════════════════════ */

/*
 * Gli stessi del resto: nero pieno e nero vuoto, con l'inversione al
 * passaggio. Erano rimasti indietro perche' vengono dal vecchio plugin degli
 * eventi e usavano una loro serie di regole — piccoli, con il bordo sottile e
 * il testo in maiuscoletto stretto, l'aria di un pulsante di vent'anni fa.
 *
 * Un pulsante ha una misura minima sotto la quale diventa difficile da
 * centrare: 46 pixel di altezza, che e' anche la misura comoda per un dito.
 */
.bnb-percorso-cta .bnb-btn,
.bgl-inc-go .bgl-cs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 13px 26px;
    border-radius: 8px;
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: none;
    line-height: 1.2;
    transition: var(--bnb-transition);
}

.bnb-percorso-cta .bnb-btn-primary {
    background: var(--bnb-gold) !important;
    border: 1px solid var(--bnb-gold) !important;
    color: var(--bnb-on-gold) !important;
    text-decoration: none !important;
}

.bnb-percorso-cta .bnb-btn-primary:hover,
.bnb-percorso-cta .bnb-btn-primary:focus-visible {
    background: var(--bnb-page) !important;
    color: var(--bnb-gold) !important;
    border-color: var(--bnb-gold) !important;
}

.bnb-percorso-cta .bnb-btn-secondary {
    background: transparent !important;
    border: 1px solid var(--bnb-border) !important;
    color: var(--bnb-text) !important;
    text-decoration: none !important;
}

.bnb-percorso-cta .bnb-btn-secondary:hover,
.bnb-percorso-cta .bnb-btn-secondary:focus-visible {
    background: var(--bnb-gold) !important;
    border-color: var(--bnb-gold) !important;
    color: var(--bnb-on-gold) !important;
}

/* «Vai al corso» nell'elenco dei corsi inclusi. */
.bgl-inc-go .bgl-cs-btn {
    background: transparent !important;
    border: 1px solid var(--bnb-border) !important;
    color: var(--bnb-text) !important;
    text-decoration: none !important;
    padding: 11px 20px;
    min-height: 42px;
    font-size: 0.82rem;
}

.bgl-inc-go .bgl-cs-btn:hover,
.bgl-inc-go .bgl-cs-btn:focus-visible {
    background: var(--bnb-gold) !important;
    border-color: var(--bnb-gold) !important;
    color: var(--bnb-on-gold) !important;
    text-decoration: none !important;
}

/* ══════════════════════════════════════════
   IL PREZZO DEL PERCORSO, CON LA PROMOZIONE
   ══════════════════════════════════════════ */

.bnb-percorso-prezzo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin: 0 0 18px;
}

.bnb-percorso-prezzo .bgl-cs-promo {
    justify-content: center;
    margin: 0;
}

.bnb-percorso-prezzo .bgl-cs-price-now { font-size: 2rem; }

.bnb-percorso-prezzo .bgl-cs-saving { color: var(--bnb-gold); }

/* Il conto alla rovescia, centrato come tutto il resto dell'intestazione. */
.bnb-percorso-head .bgl-cd {
    max-width: 460px;
    margin: 0 auto 18px;
    text-align: center;
}

.bnb-percorso-head .bgl-cd-when { text-align: center; }

/* ────────────────────────────────────────────────────────────
   Il testo del programma sopra l'elenco dei corsi del percorso.
   Serve solo a staccarlo: senza, l'introduzione e la prima riga
   dell'elenco sembrano la stessa cosa.
   ──────────────────────────────────────────────────────────── */
.bnb-percorso-prog {
	margin-bottom: 28px;
	padding-bottom: 22px;
	border-bottom: 1px solid rgba(var(--bnb-ink-rgb), .10);
}

/* ────────────────────────────────────────────────────────────
   Prezzo e pulsanti nell'elenco dei corsi di un percorso.
   ──────────────────────────────────────────────────────────── */
.bgl-buy-price {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
	font-variant-numeric: tabular-nums;
}

.bgl-buy-now {
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--bnb-text);
	letter-spacing: -.01em;
}

.bgl-buy-was {
	font-size: .92rem;
	color: var(--bnb-muted);
	text-decoration: line-through;
}

.bgl-buy-save {
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: 3px 7px;
	border-radius: 4px;
	background: var(--bnb-gold);
	color: var(--bnb-on-gold);
}

/* La colonna di destra di ogni corso incluso: prezzo sopra, i due
   pulsanti sotto, in colonna sul telefono e affiancati da schermo largo. */
.bgl-inc-go {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
	min-width: 0;
}

.bgl-inc-go .bgl-buy-price {
	justify-content: center;
	margin-bottom: 2px;
}

/* Il prezzo nella riga dell'accordion, accanto al titolo del corso. */
.bnb-acc-price {
	margin-left: auto;
	padding-left: 14px;
	flex: 0 0 auto;
}

@media (max-width: 640px) {
	.bnb-acc-price {
		margin-left: 0;
		padding-left: 0;
		flex-basis: 100%;
		margin-top: 6px;
	}
}

/* Il pulsante di una singola lezione. */
.bnb-acc-session {
	align-items: flex-start;
}

.bnb-acc-session-go {
	margin-left: auto;
	padding-left: 14px;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}

@media (max-width: 640px) {
	.bnb-acc-session-go {
		margin-left: 0;
		padding-left: 0;
		flex-basis: 100%;
		margin-top: 8px;
	}
}

.bnb-acc-footer {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

/* ────────────────────────────────────────────────────────────
   «Cosa comprende» quando ha un titolo suo — nel tab Programma
   del percorso. Nel modulo di vendita il titolo non c'e' e il
   riquadro resta trasparente, quindi non cambia nulla di com'era.
   ──────────────────────────────────────────────────────────── */
.bgl-cs-incl-box:has(> .bgl-cs-incl-h) {
	background: rgba(var(--bnb-ink-rgb), .03);
	border: 1px solid rgba(var(--bnb-ink-rgb), .10);
	border-radius: 10px;
	padding: 18px 20px 4px;
	margin-bottom: 26px;
}

.bgl-cs-incl-h {
	margin: 0 0 14px;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--bnb-muted);
}

/*
 * Ripiego per i browser che non conoscono :has(). Li' il riquadro resta
 * senza sfondo: l'elenco si legge lo stesso, che e' quello che conta.
 */
@supports not selector(:has(*)) {
	.bgl-cs-incl-h {
		margin-top: 4px;
	}
}

/* A due colonne quando lo spazio c'e': un elenco di otto voci in colonna
   singola spinge il programma sotto la piega senza guadagnarci niente. */
@media (min-width: 720px) {
	.bgl-cs-incl-box:has(> .bgl-cs-incl-h) .bgl-cs-includes {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 26px;
	}
}

/* ────────────────────────────────────────────────────────────
   «Sei già iscritto?» sul percorso: lo stesso riquadro della
   scheda del corso, centrato e con una larghezza che non lo
   faccia sembrare un modulo di contatto.
   ──────────────────────────────────────────────────────────── */
.bnb-percorso-accesso {
	max-width: 520px;
	margin: 0 auto 30px;
	padding: 24px 26px 20px;
	background: rgba(var(--bnb-ink-rgb), .03);
	border: 1px solid rgba(var(--bnb-ink-rgb), .10);
	border-radius: 12px;
}

.bnb-percorso-accesso .bgl-cs-panel-intro {
	margin-top: 0;
	text-align: center;
}

/* ────────────────────────────────────────────────────────────
   Il modulo informazioni in fondo al percorso.
   ──────────────────────────────────────────────────────────── */
.bnb-percorso-info {
	max-width: 620px;
	margin: 34px auto 0;
	scroll-margin-top: 90px;
}

/* ────────────────────────────────────────────────────────────
   La striscia della prima lezione gratuita.

   Fatta come la riga di una lezione — riquadro chiaro, segno
   tondo a sinistra, testo al centro, pulsante a destra — perche'
   e' la forma che in questa scheda vuol dire «una lezione». Il
   verde e' l'unico colore diverso di tutta la pagina, e proprio
   per questo si vede: se lo usassimo anche altrove smetterebbe
   di voler dire «questa non la paghi».
   ──────────────────────────────────────────────────────────── */
:root {
	--bgl-verde: #0b7a45;
	--bgl-verde-scuro: #095c34;
	--bgl-verde-tenue: #eaf6ef;
}

.bgl-freebar {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 18px;
	margin: 0 0 22px;
	background: var(--bgl-verde-tenue);
	border: 1px solid rgba(11, 122, 69, .28);
	border-radius: 12px;
	flex-wrap: wrap;
}

.bgl-freebar-badge {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--bgl-verde);
	color: #fff;
}

.bgl-freebar-txt {
	flex: 1 1 220px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.bgl-freebar-kicker {
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--bgl-verde-scuro);
}

.bgl-freebar-course {
	font-size: .8rem;
	font-weight: 600;
	color: var(--bgl-verde-scuro);
}

.bgl-freebar-title {
	font-size: 1.02rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--bnb-text);
}

.bgl-freebar-when {
	font-size: .85rem;
	color: var(--bnb-muted);
	font-variant-numeric: tabular-nums;
}

/* Il pulsante verde. Le stesse misure degli altri pulsanti della
   scheda — cambia il colore, non la forma — e la stessa inversione
   sotto il puntatore, cosi' non sembra arrivato da un altro sito. */
.bgl-freebar .bgl-freebar-btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 12px 26px;
	border-radius: 8px;
	border: 2px solid var(--bgl-verde) !important;
	background: var(--bgl-verde) !important;
	color: #fff !important;
	font-size: .92rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none !important;
	box-shadow: none;
	transition: background .18s ease, color .18s ease;
}

.bgl-freebar .bgl-freebar-btn:hover,
.bgl-freebar .bgl-freebar-btn:focus-visible {
	background: transparent !important;
	color: var(--bgl-verde-scuro) !important;
	text-decoration: none !important;
}

@media (max-width: 620px) {
	.bgl-freebar-btn {
		flex: 1 1 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bgl-freebar .bgl-freebar-btn {
		transition: none;
	}
}

/* Sul fondo scuro il riquadro tenue sparirebbe: si tiene il verde
   solo sul pulsante e sul segno, e il riquadro diventa un bordo. */
.bnb-scuro .bgl-freebar {
	background: rgba(11, 122, 69, .14);
	border-color: rgba(255, 255, 255, .18);
}

.bnb-scuro .bgl-freebar-kicker,
.bnb-scuro .bgl-freebar-course {
	color: #7fd4a5;
}

.bnb-scuro .bgl-freebar-title {
	color: #fff;
}

.bnb-scuro .bgl-freebar .bgl-freebar-btn:hover,
.bnb-scuro .bgl-freebar .bgl-freebar-btn:focus-visible {
	color: #7fd4a5 !important;
}

/* ────────────────────────────────────────────────────────────
   Iscriversi in gruppo.
   ──────────────────────────────────────────────────────────── */
.bgl-gruppo {
	margin: 0 0 22px;
	padding: 18px 20px;
	background: rgba(var(--bnb-ink-rgb), .03);
	border: 1px solid rgba(var(--bnb-ink-rgb), .10);
	border-radius: 12px;
	scroll-margin-top: 90px;
}

.bgl-gruppo-intro {
	margin: 0 0 14px;
	font-size: .9rem;
	line-height: 1.5;
	color: var(--bnb-text);
}

.bgl-gruppo-intro strong {
	display: block;
	font-size: 1rem;
}

.bgl-gruppo-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.bgl-gruppo-quanti span,
.bgl-gruppo-riga span {
	display: block;
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--bnb-muted);
	margin-bottom: 4px;
}

.bgl-gruppo select,
.bgl-gruppo input[type="text"],
.bgl-gruppo input[type="email"] {
	width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	border: 1px solid rgba(var(--bnb-ink-rgb), .22);
	border-radius: 8px;
	background: #fff;
	color: var(--bnb-text);
	font-size: .95rem;
}

.bgl-gruppo select:focus-visible,
.bgl-gruppo input:focus-visible {
	outline: 2px solid var(--bnb-gold);
	outline-offset: 1px;
}

/* Una riga per compagno: nome e email affiancati dove c'e' spazio. */
.bgl-gruppo-riga {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
	gap: 10px;
}

@media (max-width: 520px) {
	.bgl-gruppo-riga {
		grid-template-columns: minmax(0, 1fr);
	}
}

.bgl-gruppo-riga[hidden] {
	display: none;
}

.bgl-gruppo-ok {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: .82rem;
	line-height: 1.45;
	color: var(--bnb-muted);
}

.bgl-gruppo-ok input {
	margin-top: 3px;
	flex: 0 0 auto;
}

.bnb-percorso-gruppo {
	max-width: 520px;
	margin: 0 auto 8px;
	text-align: left;
}

/* ────────────────────────────────────────────────────────────
   Il tab «Piani e prezzi».
   ──────────────────────────────────────────────────────────── */
.bgl-piani-lista {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.bgl-piano {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	padding: 14px 18px;
	border: 1px solid rgba(var(--bnb-ink-rgb), .12);
	border-radius: 10px;
	background: #fff;
}

/* La riga migliore si distingue con il bordo, non con il colore: in una
   lista di prezzi il colore diventa presto un semaforo che non si legge. */
.bgl-piano.is-top {
	border-color: var(--bnb-gold);
	border-width: 2px;
	padding: 13px 17px;
}

.bgl-piano-chi {
	flex: 1 1 180px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.bgl-piano-chi strong {
	font-size: 1rem;
	font-weight: 700;
	color: var(--bnb-text);
}

.bgl-piano-chi span {
	font-size: .8rem;
	color: var(--bnb-muted);
	line-height: 1.4;
}

.bgl-piano-cifre {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	text-align: right;
}

.bgl-piano-testa {
	font-size: 1.28rem;
	font-weight: 700;
	color: var(--bnb-text);
	font-variant-numeric: tabular-nums;
	letter-spacing: -.01em;
}

.bgl-piano-riga {
	font-size: .78rem;
	color: var(--bnb-muted);
	font-variant-numeric: tabular-nums;
}

.bgl-piano-meno {
	flex: 0 0 auto;
	min-width: 52px;
	text-align: center;
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .02em;
	padding: 5px 8px;
	border-radius: 5px;
	background: var(--bnb-gold);
	color: var(--bnb-on-gold);
	font-variant-numeric: tabular-nums;
}

.bgl-piano-meno.is-off {
	background: transparent;
}

.bgl-piani-nota {
	font-size: .82rem;
	line-height: 1.5;
	color: var(--bnb-muted);
	margin: 0;
}

@media (max-width: 560px) {
	.bgl-piano-cifre {
		align-items: flex-start;
		text-align: left;
	}

	.bgl-piano-meno {
		margin-left: auto;
	}
}

/* ────────────────────────────────────────────────────────────
   La scheda dell'abbonamento: prende quella del percorso e
   aggiunge solo quello che le serve.
   ──────────────────────────────────────────────────────────── */
.bgl-abb-nota {
	margin: 0 0 20px;
	padding: 12px 16px;
	background: rgba(var(--bnb-ink-rgb), .04);
	border-left: 3px solid var(--bnb-gold);
	border-radius: 0 8px 8px 0;
	font-size: .88rem;
	line-height: 1.55;
	color: var(--bnb-text);
}

.bgl-abb-h {
	margin: 26px 0 12px;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--bnb-muted);
}

.bgl-abb-h:first-of-type {
	margin-top: 0;
}

/* Il pulsante «Prenota il posto» sta in un modulo: senza questo
   il modulo aggiunge una riga vuota e la lezione sbanda. */
.bgl-lez-posto {
	margin: 0;
	display: inline-block;
}

/* ────────────────────────────────────────────────────────────
   La vetrina a carosello.

   Le schede sono le stesse della griglia: cambia solo come
   stanno in fila. Un carosello con schede diverse da quelle
   della griglia sarebbe una seconda vetrina da tenere allineata
   a mano, e a tenerne due allineate a mano si finisce sempre
   per averne una vecchia.
   ──────────────────────────────────────────────────────────── */
.bgl-vet-slider {
	position: relative;
}

.bgl-vet-slider .bgl-slider-track {
	display: grid;
	grid-auto-flow: column;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding: 2px 2px 14px;
	margin: -2px -2px 0;

	/* La barra di scorrimento non si nasconde: e' l'unico segno
	   che dice «qui si scorre» a chi usa il mouse e non trascina. */
	scrollbar-width: thin;
}

.bgl-vet-slider .bgl-slider-track > * {
	scroll-snap-align: start;
	min-width: 0;
}

/* Quante ne stanno in vista: la stessa cifra delle colonne
   della griglia, cosi' passare dall'una all'altra non cambia
   la misura delle schede. */
.bgl-vet-slider.is-2 .bgl-slider-track { grid-auto-columns: calc((100% - 20px) / 2); }
.bgl-vet-slider.is-3 .bgl-slider-track { grid-auto-columns: calc((100% - 40px) / 3); }
.bgl-vet-slider.is-4 .bgl-slider-track { grid-auto-columns: calc((100% - 60px) / 4); }
.bgl-vet-slider.is-5 .bgl-slider-track { grid-auto-columns: calc((100% - 80px) / 5); }

@media (max-width: 1024px) {
	.bgl-vet-slider .bgl-slider-track {
		grid-auto-columns: calc((100% - 20px) / 2) !important;
	}
}

@media (max-width: 640px) {
	.bgl-vet-slider .bgl-slider-track {
		grid-auto-columns: 82% !important;
		gap: 14px;
	}
}

.bgl-vet-slider .bgl-slider-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-top: 6px;
}

.bgl-vet-slider .bgl-slider-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 2px solid var(--bnb-gold);
	border-radius: 50%;
	background: transparent;
	color: var(--bnb-gold);
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
	transition: background .18s ease, color .18s ease;
}

.bgl-vet-slider .bgl-slider-btn:hover,
.bgl-vet-slider .bgl-slider-btn:focus-visible {
	background: var(--bnb-gold);
	color: var(--bnb-on-gold);
}

.bgl-vet-slider .bgl-slider-btn[disabled] {
	opacity: .32;
	cursor: default;
}

.bgl-vet-slider .bgl-slider-dots {
	display: flex;
	gap: 7px;
}

.bgl-vet-slider .bgl-slider-dots button {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(var(--bnb-ink-rgb), .22);
	cursor: pointer;
	transition: background .18s ease, transform .18s ease;
}

.bgl-vet-slider .bgl-slider-dots button.is-on {
	background: var(--bnb-gold);
	transform: scale(1.25);
}

@media (prefers-reduced-motion: reduce) {
	.bgl-vet-slider .bgl-slider-track {
		scroll-behavior: auto;
	}

	.bgl-vet-slider .bgl-slider-btn,
	.bgl-vet-slider .bgl-slider-dots button {
		transition: none;
	}
}

/* ────────────────────────────────────────────────────────────
   LA LEZIONE COME PAGINA SUA

   Due usi con lo stesso vestito: la pagina vera (indirizzo
   /corso/lezione/3-titolo/) e la scheda incastonata da
   [bgl_lezione]. La differenza la fa una classe sola, perche'
   una lezione deve avere lo stesso aspetto ovunque compaia:
   se la stessa cosa si presenta in due modi, chi legge crede
   che siano due cose.
   ──────────────────────────────────────────────────────────── */
.bgl-lezpg {
	max-width: 780px;
	margin: 0 auto;
	color: var(--bnb-text);
}

/*
 * Respiro in cima alla pagina della lezione (4.21.10).
 *
 * La lezione entra dentro l'area contenuti del tema, e li' non c'era nessuno
 * spazio suo: la prima riga finiva appiccicata all'intestazione, e con un
 * header trasparente o fisso ci finiva proprio sotto.
 *
 * La misura la da' Kadence: --global-kb-spacing-4xl e' la stessa scala che il
 * tema usa dappertutto, quindi il distacco resta coerente con il resto del
 * sito e segue le impostazioni del tema invece di litigarci. Il valore di
 * ripiego serve solo dove quella variabile non c'e'.
 */
.bgl-lezpg.is-pagina {
	padding-top: max( var(--global-kb-spacing-4xl, 5rem), 6rem );
	padding-bottom: var(--global-kb-spacing-lg, 2rem);
}

.bgl-lezpg:not(.is-pagina) {
	max-width: none;
	padding: 22px 24px;
	background: var(--bnb-surface-2);
	border: 1px solid var(--bnb-border);
	border-radius: 12px;
}

.bgl-lezpg-briciole {
	margin: 0 0 10px;
	font-size: 0.78rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--bnb-text-muted);
}

.bgl-lezpg-briciole a { color: inherit; }

.bgl-lezpg-tit {
	margin: 0 0 6px;
	font-size: 1.35rem;
	line-height: 1.3;
}

.bgl-lezpg-tit a {
	color: inherit;
	text-decoration: none;
}

.bgl-lezpg-tit a:hover { text-decoration: underline; }

.bgl-lezpg-quando {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 18px;
	font-size: 0.94rem;
	color: var(--bnb-text-muted);
}

/*
 * La targhetta della data (4.21.12). Stessa forma delle altre, ma con il
 * bordo pieno e non tratteggiato: il tratteggio dice «stato», la riga piena
 * dice «dato». Cosi' le due targhette non si confondono fra loro.
 */
.bgl-lez-chip.is-data {
	border-style: solid;
	color: var(--bnb-text);
	font-weight: 600;
}

/*
 * Il verde della lezione gratuita e' lo stesso della striscia in cima alla
 * scheda, e non e' un caso: e' l'unico colore diverso del sito e vuol dire
 * una cosa sola. Un secondo verde, anche di poco diverso, gli toglierebbe
 * quel significato.
 */
.bgl-lezpg-gratis {
	display: inline-block;
	margin: 0 0 12px;
	padding: 6px 12px;
	background: var(--bgl-verde-tenue);
	border: 1px solid rgba(11, 122, 69, .28);
	border-radius: 999px;
	color: var(--bgl-verde-scuro);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.bgl-lezpg-testo {
	font-size: 1rem;
	line-height: 1.75;
	margin-bottom: 22px;
}

.bgl-lezpg-testo > *:last-child { margin-bottom: 0; }

.bgl-lezpg-azioni {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 0 0 26px;
}

.bgl-lezpg-tutto {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
}

.bgl-lezpg-tutto-lab {
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bnb-text-muted);
}

/*
 * Il riquadro del codice dentro la pagina della lezione. Ha il fondo diverso
 * dal resto perche' e' l'unica cosa in pagina che chiede di fare qualcosa:
 * tutto il resto si legge, questo si compila.
 */
.bgl-lezpg-codice {
	margin: 0 0 26px;
	padding: 22px 24px;
	background: var(--bnb-surface-2);
	border: 1px solid var(--bnb-border);
	border-radius: 12px;
}

.bgl-lezpg-codice .bgl-cs-panel-intro {
	margin-top: 0;
}

/*
 * «Inclusa nel tuo accesso»: non e' un avviso e non e' un pulsante, e' una
 * conferma. Quindi verde tenue e pieno, senza bordo tratteggiato — il
 * tratteggio dice «in attesa», e qui non c'e' niente in attesa.
 */
.bgl-lezpg-ok {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 18px;
	background: var(--bgl-verde-tenue);
	border: 1px solid rgba(11, 122, 69, .28);
	border-radius: 999px;
	color: var(--bgl-verde-scuro);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.bgl-lezpg-ok::before {
	content: "\2713";
	font-size: 0.95rem;
	line-height: 1;
}

/* ── I titoli delle lezioni che portano alla loro pagina ──────
   Il tema colora e sottolinea di suo ogni collegamento dentro il
   contenuto: su un elenco di dodici lezioni diventano dodici
   righe blu sottolineate, che sembrano un indice di Wikipedia.
   Qui il titolo resta un titolo, e si accende solo quando ci
   passi sopra. */
.bgl-lez-tit a {
	color: inherit !important;
	text-decoration: none !important;
	box-shadow: none !important;
	border-bottom: 1px solid transparent;
	transition: var(--bnb-transition);
}

.bgl-lez-tit a:hover,
.bgl-lez-tit a:focus-visible {
	color: var(--bnb-gold) !important;
	border-bottom-color: currentColor;
}

.bgl-lezpg-briciole a,
.bgl-lezpg-torna a,
.bgl-lezpg-nav a {
	text-decoration: none !important;
	box-shadow: none !important;
}

/*
 * Il colore dei collegamenti dentro la lezione lo decide questa scheda, non
 * il tema. Su una pagina fatta di titoli, date e nomi di file, il blu del
 * tema su ogni riga la fa somigliare a un indice invece che a una lezione.
 */
.bgl-lezpg-briciole a,
.bgl-lezpg-torna a,
.bgl-lezpg-files a {
	color: inherit !important;
}

.bgl-lezpg-files a {
	font-weight: 600;
}

.bgl-lezpg-briciole a:hover,
.bgl-lezpg-torna a:hover,
.bgl-lezpg-files a:hover,
.bgl-lezpg-files a:focus-visible {
	color: var(--bnb-gold) !important;
	text-decoration: underline !important;
}

.bgl-lezpg-nav a strong { color: var(--bnb-text); }

.bgl-lezpg-h {
	margin: 0 0 12px;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--bnb-text-muted);
}

.bgl-lezpg-video,
.bgl-lezpg-mat {
	margin: 0 0 28px;
}

/* Il video tiene le sue proporzioni da solo: un riquadro che cambia forma
   con la larghezza della colonna e' il modo classico di ritrovarsi due bande
   nere su telefono. */
.bgl-lezpg-embed {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--bnb-surface-3);
	border-radius: 10px;
	overflow: hidden;
}

.bgl-lezpg-embed iframe,
.bgl-lezpg-embed video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.bgl-lezpg-files {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.bgl-lezpg-files li {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 12px 14px;
	background: var(--bnb-surface-2);
	border: 1px solid var(--bnb-border);
	border-radius: 8px;
}

.bgl-lezpg-peso {
	font-size: 0.78rem;
	color: var(--bnb-text-muted);
}

.bgl-lezpg-nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin: 32px 0 18px;
	padding-top: 22px;
	border-top: 1px solid var(--bnb-border);
}

.bgl-lezpg-nav a {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px 16px;
	background: var(--bnb-surface-2);
	border: 1px solid var(--bnb-border);
	border-radius: 10px;
	color: inherit;
	text-decoration: none;
	transition: var(--bnb-transition);
}

.bgl-lezpg-nav a:hover { border-color: var(--bnb-gold); }

.bgl-lezpg-nav span {
	font-size: 0.74rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--bnb-text-muted);
}

/* La successiva sta a destra anche quando la precedente non c'e': una freccia
   «avanti» allineata a sinistra fa cercare per un attimo quella indietro. */
.bgl-lezpg-nav .bgl-lezpg-succ {
	grid-column: 2;
	text-align: right;
}

.bgl-lezpg-torna {
	margin: 0;
	font-size: 0.88rem;
}

@media (max-width: 640px) {
	.bgl-lezpg-nav { grid-template-columns: 1fr; }
	.bgl-lezpg-nav .bgl-lezpg-succ { grid-column: 1; text-align: left; }
}

/* ── «E adesso dove vado»: la prossima lezione ──────────────── */
.bgl-prossima {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	margin: 0 0 22px;
	background: var(--bnb-surface-2);
	border: 1px solid var(--bnb-border);
	border-radius: 10px;
}

.bgl-prossima.is-oggi {
	background: var(--bgl-verde-tenue);
	border-color: rgba(11, 122, 69, .28);
}

.bgl-prossima-testo {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
	flex: 1 1 240px;
}

.bgl-prossima-lab {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bnb-text-muted);
}

.bgl-prossima.is-oggi .bgl-prossima-lab { color: var(--bgl-verde-scuro); }

.bgl-prossima-quando {
	font-size: 0.84rem;
	color: var(--bnb-text-muted);
}

.bgl-prossima-azioni {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-left: auto;
}

@media (max-width: 560px) {
	.bgl-prossima-azioni { margin-left: 0; width: 100%; }
	.bgl-prossima-azioni .bgl-cs-btn { flex: 1 1 auto; text-align: center; }
}

/* ────────────────────────────────────────────────────────────
   [bgl_prezzi] — la tabella dei prezzi da mettere altrove.

   Ha un riquadro suo perche' di solito atterra in mezzo a una
   pagina scritta da te: senza un bordo si confonderebbe con il
   testo intorno, e un prezzo che si confonde con il testo non
   lo legge nessuno.
   ──────────────────────────────────────────────────────────── */
.bgl-prezzi {
	max-width: 640px;
	margin: 28px auto;
	padding: 28px 30px;
	background: var(--bnb-surface);
	border: 1px solid var(--bnb-border);
	border-radius: 14px;
	color: var(--bnb-text);
	text-align: center;
}

.bgl-prezzi-tit {
	margin: 0 0 18px;
	font-size: 1.15rem;
	line-height: 1.3;
	font-weight: 400;
}

.bgl-prezzi-cifre {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: 12px;
}

/* Il pieno barrato resta piccolo e smorto: serve a dare la misura dello
   sconto, non a competere con la cifra che si paga davvero. */
.bgl-prezzi-pieno {
	font-size: 1.05rem;
	color: var(--bnb-text-muted);
	text-decoration: line-through;
}

.bgl-prezzi-ora {
	font-size: 2.4rem;
	font-weight: 600;
	line-height: 1;
}

.bgl-prezzi-meno {
	padding: 5px 10px;
	background: var(--bnb-invert-bg);
	border-radius: 999px;
	color: var(--bnb-invert-fg);
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.bgl-prezzi-motivo {
	margin: 12px 0 0;
	font-size: 0.9rem;
	color: var(--bnb-text-muted);
}

.bgl-prezzi .bgl-cd {
	margin: 20px 0 0;
}

.bgl-prezzi-riservato {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: 10px;
	margin: 18px 0 0;
	padding: 12px 14px;
	background: var(--bnb-surface-2);
	border: 1px dashed var(--bnb-border);
	border-radius: 10px;
	font-size: 0.88rem;
}

.bgl-prezzi-riservato-lab {
	letter-spacing: 0.07em;
	text-transform: uppercase;
	font-size: 0.74rem;
	color: var(--bnb-text-muted);
}

.bgl-prezzi-riservato-cifra { font-weight: 600; }

.bgl-prezzi-azione {
	margin: 24px 0 0;
}

.bgl-prezzi-azione .bgl-cs-btn {
	min-width: 240px;
}

.bgl-prezzi-piani {
	margin: 28px 0 0;
	padding-top: 24px;
	border-top: 1px solid var(--bnb-border);
	text-align: left;
}

.bgl-prezzi-h {
	margin: 0 0 14px;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--bnb-text-muted);
	text-align: center;
}

/*
 * La riga in fondo non e' una nota di servizio: e' una promessa che il
 * riquadro puo' mantenere. Chi incolla questa tabella in una pagina di
 * vendita ha bisogno di sapere che non dovra' tornarci sopra ogni volta che
 * cambia un prezzo — ed e' la ragione per cui la tabella esiste.
 */
.bgl-prezzi-nota {
	margin: 20px 0 0;
	font-size: 0.78rem;
	color: var(--bnb-text-muted);
}

@media (max-width: 560px) {
	.bgl-prezzi { padding: 22px 18px; }
	.bgl-prezzi-ora { font-size: 2rem; }
	.bgl-prezzi-azione .bgl-cs-btn { min-width: 0; width: 100%; }
}

/* ────────────────────────────────────────────────────────────
   IL CAROSELLO DEGLI EVENTI — la scheda essenziale.

   Nella griglia c'è spazio e le schede stanno ferme: data,
   orario, prezzo, posti, descrizione e due pulsanti si leggono.
   Nel carosello le stesse cose entrano in un terzo dello spazio
   e scorrono — diventano un muro, e un muro non lo legge
   nessuno. Qui resta il minimo per decidere se aprire: dove,
   quando, due righe di cosa è, e un pulsante solo.
   ──────────────────────────────────────────────────────────── */
.bnb-event-card.is-slim {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--bnb-surface);
	border: 1px solid var(--bnb-border);
	border-radius: 12px;
	overflow: hidden;
}

.bnb-event-card.is-slim .bnb-event-img-wrap {
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
}

.bnb-event-card.is-slim .bnb-event-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/*
 * «Dal vivo» o «online» è la prima domanda di chi guarda un evento — prima
 * ancora del quando. Sta sopra l'immagine, in alto a destra, piccola: si
 * risponde con l'occhio, senza leggere.
 */
.bgl-slim-mode {
	position: absolute;
	top: 10px;
	right: 10px;
	padding: 4px 9px;
	border-radius: 999px;
	background: rgba(var(--bnb-ink-rgb), .82);
	color: #fff;
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.4;
	backdrop-filter: blur(2px);
}

/* Online e dal vivo hanno colori loro: sono due esperienze diverse, e chi
   cerca l'una non vuole finire nell'altra. */
.bgl-slim-mode--online,
.bgl-slim-mode--webinar {
	background: rgba(76, 175, 138, .92);
}

.bgl-slim-mode--live,
.bgl-slim-mode--dal-vivo,
.bgl-slim-mode--presenza,
.bgl-slim-mode--in-presenza {
	background: rgba(224, 112, 112, .94);
}

.bnb-event-card.is-slim .bnb-event-date-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 44px;
	padding: 5px 6px;
	background: var(--bnb-surface);
	border-radius: 8px;
	line-height: 1.05;
	box-shadow: 0 2px 8px var(--bnb-shadow-color);
}

.bnb-event-card.is-slim .bnb-date-day {
	font-size: 1.05rem;
	font-weight: 700;
}

.bnb-event-card.is-slim .bnb-date-month {
	font-size: 0.62rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bnb-text-muted);
}

.bnb-event-card.is-slim .bnb-event-body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 16px 16px 18px;
	flex: 1 1 auto;
}

.bnb-event-card.is-slim .bnb-event-title {
	margin: 0;
	font-size: 1.02rem;
	line-height: 1.3;
}

.bnb-event-card.is-slim .bnb-event-title a {
	color: inherit !important;
	text-decoration: none !important;
}

.bnb-event-card.is-slim .bnb-event-title a:hover {
	color: var(--bnb-gold) !important;
}

.bgl-slim-quando,
.bgl-slim-dove {
	margin: 0;
	font-size: 0.82rem;
	color: var(--bnb-text-muted);
}

/* Il luogo in corsivo e non con un pallino davanti: il pallino sembrava un
   elenco puntato di una voce sola. */
.bgl-slim-dove {
	font-style: italic;
}

/* Due righe e non una in più: è quello che tiene tutte le schede della stessa
   altezza mentre scorrono. Una fila che ballonzola in altezza si nota più del
   contenuto che ci sta dentro. */
.bgl-slim-testo {
	margin: 4px 0 0;
	font-size: 0.86rem;
	line-height: 1.55;
	color: var(--bnb-text);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.bgl-slim-piede {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: auto;
	padding-top: 14px;
}

.bnb-event-card.is-slim .bnb-btn {
	flex: 1 1 auto;
	text-align: center;
	padding: 11px 14px;
	font-size: 0.78rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	border-radius: 0;
}

.bgl-slim-prezzo {
	flex: 0 0 auto;
	font-size: 0.94rem;
	font-weight: 600;
	white-space: nowrap;
}

.bgl-slim-prezzo.is-free {
	color: var(--bgl-verde);
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Nel carosello nessuna scheda deve crescere più delle altre. */
.bnb-events-slider .bgl-slider-track > * {
	height: auto;
}

@media (max-width: 560px) {
	.bnb-event-card.is-slim .bnb-event-body { padding: 14px 14px 16px; }
	.bgl-slim-testo { -webkit-line-clamp: 3; }
}

/* ────────────────────────────────────────────────────────────
   La targhetta della modalità, al centro della locandina.

   Online o dal vivo è quello che decide se una persona può
   venirci — prima ancora del prezzo. Negli angoli si perdeva
   fra le altre; al centro non si può non vederla. Le altre
   targhette restano dove sono: non è un rimescolamento, è una
   sola cosa portata in primo piano.
   ──────────────────────────────────────────────────────────── */
.bgl-vet-modo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	padding: 8px 18px;
	border-radius: 999px;
	background: rgba(0, 0, 0, .74);
	color: #fff;
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	white-space: nowrap;
	backdrop-filter: blur(3px);
	box-shadow: 0 2px 12px rgba(0, 0, 0, .28);
	transition: opacity .18s ease;
}

/* Al passaggio del mouse compare «Scopri»: la targhetta si fa da
   parte invece di sovrapporsi. Due scritte al centro della stessa
   immagine non si leggono né l'una né l'altra. */
.bgl-vet-card:hover .bgl-vet-modo,
.bgl-vet-card:focus-within .bgl-vet-modo {
	opacity: 0;
}

@media (max-width: 1024px) {
	/* Sul telefono «Scopri» è sempre visibile, quindi la targhetta
	   sale sopra il pulsante invece di stargli addosso. */
	.bgl-vet-modo {
		top: 34%;
	}

	.bgl-vet-card:hover .bgl-vet-modo {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bgl-vet-modo {
		transition: none;
	}
}

/* ────────────────────────────────────────────────────────────
   Il pulsante che scarica il programma, in fondo al tab.
   ──────────────────────────────────────────────────────────── */
.bgl-prog-scarica {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin: 26px 0 0;
	padding-top: 20px;
	border-top: 1px solid rgba(var(--bnb-ink-rgb), .10);
}

.bgl-prog-nota {
	font-size: .8rem;
	color: var(--bnb-muted);
	line-height: 1.4;
}

/* ────────────────────────────────────────────────────────────
   La pagina che verifica un attestato.
   ──────────────────────────────────────────────────────────── */
.bgl-verifica {
	max-width: 560px;
	margin: 0 auto;
	padding: 26px 28px;
	border: 1px solid rgba(var(--bnb-ink-rgb), .12);
	border-radius: 12px;
	background: #fff;
}

.bgl-verifica-tit {
	margin: 0 0 6px;
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--bnb-text);
}

.bgl-verifica-form label {
	display: block;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--bnb-muted);
	margin: 14px 0 6px;
}

.bgl-verifica-riga {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.bgl-verifica input[type="text"] {
	flex: 1 1 200px;
	min-height: 46px;
	padding: 10px 14px;
	border: 1px solid rgba(var(--bnb-ink-rgb), .22);
	border-radius: 8px;
	background: #fff;
	color: var(--bnb-text);
	font-size: 1.05rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
}

.bgl-verifica input[type="text"]:focus-visible {
	outline: 2px solid var(--bnb-gold);
	outline-offset: 1px;
}

/* L'esito. Verde e rosso sono l'unico posto del sito dove il colore
   dice qualcosa da solo — ma non è mai da solo: sopra c'è sempre la
   frase che lo ripete a parole, per chi i colori non li distingue. */
.bgl-verifica-ok,
.bgl-verifica-no {
	margin-top: 20px;
	padding: 16px 18px;
	border-radius: 10px;
	border-left: 4px solid;
}

.bgl-verifica-ok {
	background: rgba(11, 122, 69, .07);
	border-left-color: #0b7a45;
}

.bgl-verifica-no {
	background: rgba(179, 45, 46, .06);
	border-left-color: #b32d2e;
}

.bgl-verifica-ok > strong {
	display: block;
	margin-bottom: 12px;
	font-size: 1rem;
	color: #095c34;
}

.bgl-verifica-no > strong {
	display: block;
	margin-bottom: 6px;
	font-size: 1rem;
	color: #b32d2e;
}

.bgl-verifica-no p {
	margin: 0;
	font-size: .86rem;
	line-height: 1.5;
	color: var(--bnb-text);
}

.bgl-verifica dl {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 6px 18px;
	margin: 0;
}

.bgl-verifica dt {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--bnb-muted);
	align-self: center;
}

.bgl-verifica dd {
	margin: 0;
	font-size: .95rem;
	font-weight: 600;
	color: var(--bnb-text);
}

@media (max-width: 480px) {
	.bgl-verifica dl {
		grid-template-columns: 1fr;
		gap: 2px;
	}

	.bgl-verifica dd {
		margin-bottom: 10px;
	}
}