/* =========================================
   1. CHI SIAMO (Bisezione Perfetta e Nuova Griglia)
   ========================================= */
.about-section {
    padding-top: 0;
}

/* Il wrapper gestisce il posizionamento esatto a metà e annulla lo spazio fantasma */
.about-manifesto-wrapper {
    position: relative;
    z-index: 10;
}

/*
   L'ancora `#chi-siamo` del menu sta sul wrapper, non sulla <section>: su
   desktop la box e traslata di meta della propria altezza sopra il posto che
   occupa in pagina, quindi fermarsi al bordo della sezione la lasciava sopra
   la piega, mezza nascosta dalla testata. Il rettangolo del wrapper tiene
   conto della `transform`, cosi il salto si ferma dove la box si vede davvero.
   Il valore e lo stesso di `section, footer` in `layout.css`.
*/
.about-manifesto-wrapper { scroll-margin-top: 80px; }

@media (min-width: 901px) {
    .about-manifesto-wrapper {
        /* Trasla la box verso l'alto esattamente della metà della sua altezza dinamica */
        transform: translateY(-50%);
        /* Margine negativo compensativo (circa metà altezza della box media)
           per far scorrere correttamente il contenuto sottostante */
        margin-bottom: -160px;
    }
}

@media (max-width: 900px) {
    .about-section { padding-top: 3rem; }
    .about-manifesto-wrapper {
        scroll-margin-top: 58px;
        transform: none;
        margin-bottom: 0;
        margin-top: -60px; /* Leggera sovrapposizione su mobile */
    }
}

.about-manifesto {
    background: linear-gradient(135deg, #002050 0%, #004578 100%);
    border-radius: 12px;
    padding: 3rem 2.5rem;
    color: white;
    display: grid;
    /* Nuova Griglia: Testo largo (2.2), Statistiche (1), Logo (1) */
    grid-template-columns: 2.2fr 1fr 1fr;
    gap: 2.5rem;
    align-items: center;
    box-shadow: 0 12px 30px rgba(0, 32, 80, 0.25);
}

.about-manifesto h3 { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.8rem; }
.about-manifesto p { font-size: 0.96rem; color: #E1DFDD; line-height: 1.65; }
.about-manifesto p + p { margin-top: 0.8rem; }

/*
   `base.css` fa ereditare colore e decorazione ai link, il che qui li rendeva
   identici al testo intorno: dentro un paragrafo scuro un link di iscrizione
   invisibile non serve a niente. Stesso ciano delle statistiche, che su questo
   fondo ha contrasto abbondante, piu la sottolineatura — il colore da solo non
   basta a chi non distingue le tinte.
*/
.about-manifesto a {
    color: #50E6FF;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.about-manifesto a:hover { color: #FFFFFF; }

.about-manifesto a:focus-visible {
    outline: 2px solid #50E6FF;
    outline-offset: 2px;
    border-radius: 2px;
}

.manifesto-stats {
    display: flex;
    flex-direction: column; /* Impilati uno sopra l'altro */
    gap: 2rem;
    border-left: 1px solid rgba(255,255,255,0.18);
    padding-left: 2.5rem;
    justify-content: center;
}

.stat-item h4 { font-size: 2.2rem; font-weight: 800; color: #50E6FF; line-height: 1; margin-bottom: 4px; }
.stat-item p { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: #C7E0F4; }

.manifesto-logo {
    display: flex;
    justify-content: center;
    align-items: center;
}

.manifesto-logo img {
    width: 150px;
    height: 150px;
    object-fit: contain;
    background: #FFFFFF;
    padding: 8px;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}

/* Adattamento Mobile Griglia Chi Siamo */
@media (max-width: 900px) {
    .about-manifesto {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 2rem 1.5rem;
        gap: 2rem;
    }
    /* Il titolo centrato sta bene, il paragrafo no: su schermo stretto sono
       dieci righe centrate, sfrangiate da tutt'e due i lati. */
    .about-manifesto p { text-align: left; }
    .manifesto-stats {
        border-left: none;
        border-top: 1px solid rgba(255,255,255,0.18);
        padding: 1.5rem 0 0 0;
        flex-direction: row; /* Su mobile li mettiamo affiancati */
        justify-content: space-around;
        gap: 1rem;
    }
    .manifesto-logo img {
        width: 120px;
        height: 120px;
    }
}

/* =========================================
   2. STAFF (Carosello limitato con Sfumatura in CSS Mask)
   ========================================= */
.team-carousel-container {
    max-width: 1280px;
    margin: 0 auto;
    position: relative;
    padding: 10px 0;
    overflow: hidden;

    /* Maschera di sfumatura orizzontale */
    -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
    mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}

.swiper-team {
    width: 100%;
    overflow: visible;
}

.swiper-team .swiper-wrapper {
    transition-timing-function: linear !important;
}

.swiper-team .swiper-slide {
    width: 230px !important;
    height: auto;
    flex-shrink: 0;
    cursor: pointer;
}

.member-card {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1.25rem 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
    position: relative;
    height: 100%;
}

.member-card:hover {
    transform: translateY(-4px);
    border-color: var(--azure-blue);
    box-shadow: var(--shadow-md);
}

.member-corner-link {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    transition: var(--transition);
    z-index: 2;
}

.member-card:hover .member-corner-link {
    background: var(--azure-blue);
    color: white;
    border-color: var(--azure-blue);
    transform: scale(1.1);
}

.member-avatar-wrapper { margin-bottom: 0.75rem; pointer-events: none; }

.member-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--azure-light);
    transition: var(--transition);
}

.member-card:hover .member-avatar { border-color: var(--azure-blue); }

.member-role-tag {
    font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
    padding: 2px 7px; border-radius: 20px; background: var(--azure-light); color: var(--azure-dark);
    margin-bottom: 0.4rem;
}

.member-name { font-size: 0.98rem; font-weight: 700; color: var(--azure-dark); line-height: 1.2; margin-bottom: 2px; }
.member-nick { font-size: 0.78rem; color: var(--azure-blue); font-weight: 500; margin-bottom: 0.45rem; }
.member-bio { font-size: 0.8rem; color: var(--text-muted); line-height: 1.35; }

/* =========================================
   3. CALENDARIO EVENTI
   I tasti Meetup e Sessionize stanno nella hero.
   ========================================= */
.swiper-container-wrapper {
    max-width: 1280px;
    margin: 0 auto;
    position: relative;
    padding: 0 45px;
    width: 100%;
    box-sizing: border-box;
}

.swiper-events {
    width: 100%; height: 100%; overflow: hidden; padding: 15px 0 25px 0 !important;
}

/*
   Le card di una fila devono finire tutte alla stessa altezza.
   Swiper mette le slide a `height: 100%`, che dentro un contenitore di altezza
   automatica vuol dire "quanto il tuo contenuto": con un titolo di tre righe e
   uno di una la fila risultava sfrangiata. Con `auto` torna a decidere il
   flex, che le stira tutte quanto la piu alta, e `.card { height: 100% }` fa
   il resto. E il motivo per cui il luogo ha `margin-top: auto`: senza slide
   stirate non avrebbe niente contro cui spingersi.
*/
.swiper-events .swiper-slide { height: auto; }

.card {
    background: var(--bg-white); border: 1px solid var(--border-color); border-radius: 8px;
    overflow: hidden; display: flex; flex-direction: column; height: 100%; width: 100%;
    transition: var(--transition); box-shadow: var(--shadow-sm);
}

.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--azure-blue); }

.card-img-wrapper { position: relative; height: 140px; overflow: hidden; background: #eaeaea; }
.card-img-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); }
.card:hover .card-img-wrapper img { transform: scale(1.04); }

.card.event-past .card-img-wrapper img { filter: grayscale(100%); opacity: 0.85; }
.card.event-past:hover .card-img-wrapper img { filter: grayscale(30%); opacity: 1; }

.badge {
    position: absolute; top: 10px; right: 10px; padding: 4px 8px; border-radius: 4px;
    font-size: 0.68rem; font-weight: 700; color: white; z-index: 10; text-transform: uppercase; letter-spacing: 0.04em;
}
.badge.upcoming { background-color: #107C10; }
.badge.past { background-color: var(--text-muted); }

.card-body { padding: 1rem; display: flex; flex-direction: column; flex-grow: 1; gap: 0.4rem; }
.card-title {
    font-size: 0.92rem; font-weight: 600; color: var(--text-dark); line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* Data e luogo dell'evento. Il luogo sta in fondo alla card, qualunque sia la
   lunghezza del titolo, cosi le card di una stessa riga si allineano. */
.card-meta {
    display: flex; align-items: center; gap: 6px; margin: 0;
    font-size: 0.76rem; font-weight: 500; color: var(--text-muted); line-height: 1.3;
}
.card-meta i { font-size: 0.85rem; flex-shrink: 0; color: var(--azure-blue); }
/*
   "ven 16 ott 2026" con la maiuscola iniziale e basta. `capitalize`
   maiuscolerebbe anche il mese ("16 Ott"), che in italiano non si scrive cosi;
   `::first-letter` vuole un elemento non inline, da qui inline-block.
*/
.card-meta time { display: inline-block; }
.card-meta time::first-letter { text-transform: uppercase; }
.card-place { margin-top: auto; padding-top: 0.35rem; }

/* Solo in griglia: nel carosello non c'e spazio e la descrizione viene tolta
   dal renderer, non nascosta qui. */
.card-excerpt {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.card-place span, .card-place { min-width: 0; }
.card.event-past .card-meta i { color: var(--text-muted); }

.swiper-button-next, .swiper-button-prev {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;
    background: none !important; border: none !important; color: #A19F9D !important;
    width: 32px !important; height: 60px !important; margin-top: 0 !important; display: flex;
    align-items: center; justify-content: center; transition: var(--transition);
}
.swiper-button-prev { left: 5px !important; }
.swiper-button-next { right: 5px !important; }
.swiper-button-next:hover, .swiper-button-prev:hover { color: var(--azure-blue) !important; }
.swiper-button-next:hover { transform: translateY(-50%) translateX(3px); }
.swiper-button-prev:hover { transform: translateY(-50%) translateX(-3px); }
.swiper-button-next::after, .swiper-button-prev::after { font-size: 1.4rem !important; }
.swiper-button-disabled { opacity: 0 !important; pointer-events: none; }

/* ---------- Link all'archivio (home) ---------- */
.events-all {
    text-align: center;
    margin-top: 1.5rem;
}

.btn-all-events {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.7rem 1.6rem;
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--azure-dark);
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.btn-all-events:hover {
    border-color: var(--azure-blue);
    color: var(--azure-blue);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-all-events:focus-visible {
    outline: 2px solid var(--azure-blue);
    outline-offset: 2px;
}

.btn-all-events i { font-size: 0.9rem; transition: var(--transition); }
.btn-all-events:hover i { transform: translateX(3px); }

/* Il totale lo scrive main.js: e un dato, non un'etichetta. */
.events-total { color: var(--text-muted); font-weight: 600; }
.btn-all-events:hover .events-total { color: inherit; }

@media (prefers-reduced-motion: reduce) {
    .btn-all-events, .btn-all-events i { transition: none; }
    .btn-all-events:hover { transform: none; }
    .btn-all-events:hover i { transform: none; }
}

/* =========================================
   4. SPONSOR
   ========================================= */
/* Le fasce, nell'ordine deciso da render-sponsors.js. Quelle senza sponsor non
   vengono proprio emesse: nessun titolo sospeso su una griglia vuota. */
.sponsor-tiers {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

/* Le fasce sono <section> annidate: senza questo azzeramento prendono il
   `padding: 4rem 1.5rem` e lo sfondo alternato che layout.css riserva alle
   sezioni di primo livello. Erano ~8 rem di vuoto per fascia, quattro volte. */
section.sponsor-tier {
    padding: 0;
    background-color: transparent;
}

.sponsor-tier-title {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-align: center;
    margin-bottom: 1rem;
}

/* Flex e non griglia: con `auto-fill` una fascia da un solo sponsor lasciava
   in piedi le colonne vuote accanto, e l'ultima riga restava spaiata a
   sinistra. Cosi le card si centrano e le righe parziali non fanno buchi. */
.sponsors-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 1.25rem;
}

/* La card cresce per riempire la riga, ma il tetto le impedisce di diventare
   un cartellone quando nella fascia c'e un logo solo. */
.sponsor-card {
    flex: 1 1 200px;
    max-width: 260px;
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    min-height: 92px;
    padding: 1rem 1.2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
}

.sponsor-card svg,
.sponsor-card img {
    max-width: 100%;
    height: 40px;
    object-fit: contain;
    transition: var(--transition);
}

/* LA DIMENSIONE DEL LOGO LA DECIDE IL TIER.
   E tutto quello che serve per aggiungere uno sponsor senza toccare il CSS:
   l'editor sceglie la fascia, il resto viene da qui. */
.sponsor-card[data-tier="diamond"] {
    flex-basis: 260px;
    max-width: 300px;
    min-height: 128px;
}
.sponsor-card[data-tier="diamond"] img,
.sponsor-card[data-tier="diamond"] svg { height: 76px; }

.sponsor-card[data-tier="platinum"] {
    flex-basis: 250px;
    max-width: 290px;
    min-height: 122px;
}
.sponsor-card[data-tier="platinum"] img,
.sponsor-card[data-tier="platinum"] svg { height: 68px; }

.sponsor-card[data-tier="gold"] {
    flex-basis: 230px;
    max-width: 280px;
    min-height: 116px;
}
.sponsor-card[data-tier="gold"] img,
.sponsor-card[data-tier="gold"] svg { height: 62px; }

.sponsor-card[data-tier="silver"] {
    flex-basis: 210px;
    max-width: 260px;
    min-height: 102px;
}
.sponsor-card[data-tier="silver"] img,
.sponsor-card[data-tier="silver"] svg { height: 48px; }

.sponsor-card[data-tier="bronze"] {
    flex-basis: 160px;
    max-width: 210px;
}

.sponsor-card[data-tier="bronze"] img,
.sponsor-card[data-tier="bronze"] svg { height: 32px; }

.sponsor-since {
    font-size: 0.7rem;
    color: var(--text-muted);
    letter-spacing: 0.04em;
}

.sponsor-card:hover {
    border-color: var(--azure-blue);
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

.sponsor-card:hover svg,
.sponsor-card:hover img {
    transform: scale(1.05);
}

/* =========================================
   5. CONTATTI & FOOTER
   ========================================= */
.contact-channels {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin: 2rem 0 1.5rem 0;
}

.channel-btn {
    display: inline-flex; align-items: center; gap: 8px; padding: 0.7rem 1.2rem; border-radius: 8px;
    font-size: 0.88rem; font-weight: 600; color: white; transition: var(--transition);
}

.channel-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.25); }

.btn-telegram { background: #229ED9; }
.btn-telegram:hover { background: #1C87BA; }

.btn-whatsapp { background: #25D366; }
.btn-whatsapp:hover { background: #1EBE5D; }

.btn-email { background: #0078D4; }
.btn-email:hover { background: #005A9E; }

.email-copy-bar {
    background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 6px;
    display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px; font-size: 0.85rem; color: #E1DFDD;
    margin-top: 0.5rem; cursor: pointer; transition: var(--transition);
    /* Ora è un <button> per essere raggiungibile da tastiera: vanno ripuliti i default */
    font-family: inherit; line-height: inherit; text-align: left;
}
.email-copy-bar:hover { background: rgba(255, 255, 255, 0.15); color: #FFF; }

footer {
    background-color: var(--azure-dark); color: white; padding: 3.5rem 1.5rem 2.5rem 1.5rem; text-align: center;
}
.footer-brand { font-size: 1.3rem; font-weight: 700; margin-bottom: 0.3rem; }

/* Sostituiscono gli attributi style= inline, vietati dalla CSP */
.footer-intro { color: var(--azure-light); font-size: 0.9rem; }
.footer-legal { font-size: 0.78rem; margin-top: 1.2rem; color: #A19F9D; }
.copy-ok { color: #50E6FF; }

.social-links { margin: 1.2rem 0; display: flex; justify-content: center; gap: 0.8rem; }
.social-links a {
    color: white; font-size: 1.1rem; background: rgba(255,255,255,0.08); width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; transition: var(--transition);
}
.social-links a:hover { background: var(--azure-blue); transform: translateY(-3px); }

/* =========================================
   6. STATO DI ERRORE DEI DATI
   ========================================= */
.data-error {
    max-width: 760px;
    margin: 0 auto;
    padding: 1.5rem;
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-muted);
    background: var(--bg-white);
    border: 1px dashed var(--border-color);
    border-radius: 8px;
}
.data-error a { color: var(--azure-blue); font-weight: 600; }

/* =========================================
   7. RIDUZIONE DEL MOVIMENTO
   Il marquee del team scorre in loop continuo: per chi chiede
   meno movimento va fermato (trigger vestibolare).
   ========================================= */
@media (prefers-reduced-motion: reduce) {
    .swiper-team .swiper-wrapper {
        transition-duration: 0ms !important;
    }
    .card,
    .member-card,
    .sponsor-card,
    .channel-btn {
        transition: none;
    }
}

/* Canali senza un colore di marca proprio (Discord, Slack, Meetup, sito web). */
.btn-generic { background: var(--azure-accent); }
.btn-generic:hover { background: var(--azure-dark); }

/* =========================================
   8. SCHERMO STRETTO
   ========================================= */
@media (max-width: 900px) {
    /* I 45 px di margine laterale servivano alle frecce del carosello, che qui
       non ci sono: su 375 px si mangiavano un quarto della larghezza. */
    .swiper-container-wrapper { padding: 0 1rem; }

    /* Con lo swipe le frecce sono un doppione che copre le card. */
    .swiper-button-next-events,
    .swiper-button-prev-events { display: none !important; }

    /* La sfumatura ai lati del marquee valeva l'8% di 1280 px; sulla stessa
       proporzione di uno schermo stretto sbiadirebbe mezza scheda. */
    .team-carousel-container {
        -webkit-mask-image: linear-gradient(to right, transparent, black 4%, black 96%, transparent);
        mask-image: linear-gradient(to right, transparent, black 4%, black 96%, transparent);
    }

    /* Un logo di testa su un telefono non puo essere alto quanto su un monitor:
       sopra il gold le fasce si appiattiscono tutte sulla stessa misura. */
    .sponsor-card[data-tier="diamond"],
    .sponsor-card[data-tier="platinum"],
    .sponsor-card[data-tier="gold"] { min-height: 110px; }
    .sponsor-card[data-tier="diamond"] img,
    .sponsor-card[data-tier="diamond"] svg,
    .sponsor-card[data-tier="platinum"] img,
    .sponsor-card[data-tier="platinum"] svg,
    .sponsor-card[data-tier="gold"] img,
    .sponsor-card[data-tier="gold"] svg { height: 46px; }

    /* Due per riga: con 130 px di base e 12 px di spazio ci stanno in 293 px di
       larghezza utile, e il tetto va tolto o resterebbero due monconi. */
    .sponsors-grid { gap: 0.75rem; }
    .sponsor-card {
        flex-basis: 130px;
        max-width: 220px;
    }

    /* Le fasce di testa restano una per riga: la prominenza e tutto il loro senso. */
    .sponsor-card[data-tier="diamond"],
    .sponsor-card[data-tier="platinum"],
    .sponsor-card[data-tier="gold"] {
        flex-basis: 100%;
        max-width: none;
    }

    .sponsor-tiers { gap: 1.5rem; }

    /* Il footer: i bottoni a tutta larghezza si toccano senza mirare. */
    .contact-channels { flex-direction: column; align-items: stretch; }
    .channel-btn { justify-content: center; }
}

@media (max-width: 480px) {
    /* Sotto i 480 px il nome accanto al logo manda a capo la testata: resta
       il logo, che e la stessa identita. */
    .logo span { display: none; }

    .about-manifesto h3 { font-size: 1.3rem; }
    .stat-item h4 { font-size: 1.8rem; }
    .manifesto-logo img { width: 96px; height: 96px; }
}

/* =========================================
   TEASER GLOBAL AZURE (home)
   Un solo banner scuro in una pagina chiara: deve farsi notare, e
   anticipare l'aspetto della pagina /global-azure/ a cui porta.
   ========================================= */
section.ga-teaser-section { padding: 1rem 1.5rem 3rem; background: var(--bg-light); }

.ga-teaser {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 2rem 2.4rem;
    border-radius: 20px;
    color: #FFFFFF;
    background:
        radial-gradient(90% 140% at 100% 0%, rgba(80, 230, 255, 0.3) 0%, transparent 55%),
        radial-gradient(70% 120% at 0% 100%, rgba(134, 97, 197, 0.45) 0%, transparent 60%),
        linear-gradient(135deg, #062B63 0%, #020A1C 100%);
    box-shadow: 0 24px 60px rgba(2, 10, 28, 0.25);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ga-teaser::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(rgba(255, 255, 255, 0.2) 1px, transparent 1.4px);
    background-size: 22px 22px;
    mask-image: linear-gradient(90deg, transparent 30%, #000 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 100%);
}

.ga-teaser:hover { transform: translateY(-3px); box-shadow: 0 30px 70px rgba(2, 10, 28, 0.32); }

.ga-teaser:focus-visible { outline: 3px solid var(--azure-blue); outline-offset: 3px; }

.ga-teaser-year {
    font-size: clamp(3.5rem, 9vw, 6rem);
    font-weight: 800;
    letter-spacing: -0.06em;
    line-height: 0.9;
    background: linear-gradient(100deg, #FFFFFF, #50E6FF 60%, #A18AFF);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Evento speciale: giorno e mese al posto dell'anno. */
.ga-teaser-date { display: flex; flex-direction: column; align-items: center; min-width: 2.2ch; }
.ga-teaser-date small { font-size: 0.3em; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1.4; }

.ga-teaser-body { display: flex; flex-direction: column; gap: 0.3rem; flex: 1; min-width: 0; }

.ga-teaser-eyebrow {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #50E6FF;
}

.ga-teaser-body strong { font-size: 1.35rem; }

.ga-teaser-text { font-size: 0.92rem; color: #C9DBF2; }

.ga-teaser-cta {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.8rem 1.2rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-weight: 700;
    font-size: 0.92rem;
}

@media (max-width: 900px) {
    section.ga-teaser-section { padding: 0.5rem 1rem 2rem; }
    .ga-teaser { flex-direction: column; align-items: flex-start; gap: 1rem; padding: 1.6rem; }
}