/* ============================================================
   core.css — CCF Balduina
   Homepage and Chi Siamo page styles
   PAGINE: core/index.html (Home) e chi_siamo/index.html — vedi
   l'attribuzione specifica in cima a ciascuna sezione: molte sezioni
   sono esclusive di una sola delle due pagine.
   ============================================================ */


/* === SPAZIATURA SEZIONI — solo Home e Chi Siamo === */
/* PAGINE: core/index.html e chi_siamo/index.html (entrambe caricano core.css). */
/* Richiesta di Jim: -10px top e -10px bottom rispetto al valore globale
   (96px, definito in .section su global.css) solo su queste due pagine —
   le altre pagine del sito restano a 96px. Scoped qui (non in global.css)
   perché core.css è caricato solo da Home e Chi Siamo.
   Solo desktop: sotto i 768px restano i valori già ridotti di global.css
   (64px tablet, 48px mobile), che qui non vanno toccati. */
@media (min-width: 769px) {
    .section {
        padding-block: 5.375rem; /* 86px, invece di 96px globali */
    }
}


/* === HERO — sfondo crema, testo centrato === */
/* PAGINA: solo core/index.html (Home), partial _hero.html. */
.hero {
    background-color: var(--color-cream);
    padding-block: var(--space-3xl) var(--space-2xl);
    text-align: center;               /* Testo centrato come nel mockup */
}

.hero-content {
    /* 960px (non 700px) — a 64px il titolo su 2 righe ("Una famiglia che" /
       "cresce insieme, da 57 anni.") ha bisogno di più spazio orizzontale,
       altrimenti la seconda riga va a capo di nuovo da sola diventando 3.
       Il sottotitolo resta stretto lo stesso: ha un suo max-width (52ch). */
    max-width: 960px;
    margin-inline: auto;              /* Blocco contenuto centrato */
}

/* Eyebrow hero — font Caveat corsivo, minuscolo, rosso */
.hero-eyebrow {
    font-family: 'Caveat', cursive;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-red);          /* Rosso — come le label di sezione */
    display: block;
    margin-bottom: var(--space-sm);
    letter-spacing: 0;
    text-transform: none;
}

.hero-title {
    font-size: var(--text-6xl);
    color: var(--color-dark);
    line-height: 1.1;
    margin-bottom: var(--space-lg);
}

/* Corsivo ROSSO nel titolo hero — come da richiesta esplicita.
   Anche su "i": CKEditor5 genera <i> per il corsivo (non <em>) quando il
   testo viene modificato da admin invece che scritto a mano nel template —
   senza questo, il testo restava corsivo (stile di default del browser
   per entrambi i tag) ma perdeva il colore rosso. */
.hero-title em,
.hero-title i {
    font-style: italic;
    color: var(--color-red);
}

.hero-subtitle {
    font-size: var(--text-xl);
    color: var(--color-gray);
    line-height: 1.6;
    margin-bottom: var(--space-xl);
    max-width: 52ch;
    margin-inline: auto;              /* Sottotitolo centrato */
}

.hero-actions {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
    justify-content: center;          /* Bottoni centrati */
}


/* === STATS STRIP — sotto l'hero, stesso sfondo crema === */
/* PAGINA: solo core/index.html (Home), partial _stats.html. */
.section-stats {
    background-color: var(--color-cream);
    padding-block: var(--space-xl);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);   /* 4 numeri in riga: cambiando il numero, meno/più colonne prima di andare a capo */
    gap: var(--space-lg);
    text-align: center;
    /* Linea che separa hero dalle cifre — larga quanto il container, non tutta la viewport */
    border-top: 1px solid var(--color-line);
    padding-top: var(--space-xl);
}

.stat-item {
    padding: var(--space-md);
}

.stat-number {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--text-5xl);
    font-weight: 900;
    color: var(--color-dark);
    line-height: 1;
}

/* Ultimo stat ("4 coppe recenti") in rosso */
.stats-grid .stat-item:last-child .stat-number {
    color: var(--color-red);
}

.stat-label {
    display: block;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-gray);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: var(--space-xs);
}


/* === CATEGORY CARDS === */
/* PAGINA: solo core/index.html (Home), partial _categorie.html. */
.section-categorie {
    background-color: var(--color-cream-alt);  /* Sfondo alternato */
}

.categorie-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);   /* 3 card (Bambini/Giovani/Adulti): cambiando il numero le card si stringono/allargano */
    gap: var(--space-lg);
    margin-top: var(--space-2xl);
}

.categoria-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    text-align: left;
    text-decoration: none;
    color: var(--color-dark);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

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

.categoria-card__icon {
    font-size: 2.5rem;
    line-height: 1;
}

.categoria-card__title {
    font-size: var(--text-xl);
    color: var(--color-dark);
}

/* Selettore su tag <ul>/<li> (non su classe) — il contenuto arriva da
   CKEditor 5 (Testi pagine → homepage_categoria_*), che non garantisce
   di mantenere classi custom quando Benedetta modifica e salva il testo. */
.categoria-card ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.categoria-card ul li {
    font-size: var(--text-sm);
    color: var(--color-gray);              /* Lista corsi in grigio */
    padding-left: var(--space-sm);
    position: relative;
}

.categoria-card ul li::before {
    content: '–';
    position: absolute;
    left: 0;
    color: var(--color-line);
}


/* === STORIA / FONDATORI === */
/* PAGINA: solo core/index.html (Home), partial _storia.html — versione
   breve della storia; la sezione fondatori più estesa di chi_siamo/index.html
   usa invece le classi .fondatori-* più in basso in questo file. */
.section-storia {
    background-color: var(--color-cream);  /* Più chiaro rispetto a Categorie — alternanza visiva */
}

.storia-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
    align-items: start;   /* Allinea il testo al bordo superiore della foto (non centrato) */
}

.storia-text {
    position: relative;   /* Ancora per il pre-titolo in position:absolute qui sotto */
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* Il pre-titolo ("la nostra storia") esce dal flusso e si posiziona sopra il
   blocco: così è il TITOLO (h2, ora primo elemento nel flusso) ad allinearsi
   al bordo superiore della foto tramite .storia-layout { align-items: start },
   e non il pre-titolo — richiesta esplicita di Jim (08/09). */
.storia-text .section-label {
    position: absolute;
    left: 0;
    top: 0;
    transform: translateY(calc(-100% - var(--space-xs)));
}

.storia-text p {
    font-size: var(--text-lg);
    color: var(--color-dark);
    line-height: 1.8;
}

.storia-figure {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.storia-figure img {
    width: 100%;
    border-radius: var(--radius-lg);
    object-fit: cover;
}

.storia-figure figcaption {
    font-size: var(--text-sm);
    color: var(--color-gray);              /* Didascalia fondatori in grigio */
    text-align: center;
    font-style: italic;
}


/* === I NOSTRI ULTIMI SUCCESSI — sfondo scuro, card ambra calde === */
/* PAGINE: core/index.html (Home, partial _risultati.html — mostra solo le
   ultime 4 card) e core/risultati_agonistici.html ("Vedi tutti i successi"
   — stessa sezione ma con .risultati-grid-scroll per lo storico completo). */
.section-risultati {
    background-color: #1a1008;   /* Marrone scurissimo — tono caldo, fallback se l'immagine non carica */
    /* Tre livelli sovrapposti (il primo elencato sta sopra a tutti):
       1) sfumatura scura a SX — QUASI LINEARE (due soli tratti, pendenza
          simile) da opaca a trasparente, niente più plateau+calo brusco:
          i due tentativi precedenti erano o troppo piatti all'inizio (si
          restava scuri ben oltre il bordo del box) o troppo ripidi subito
          dopo (sembrava un taglio netto, non una sfumatura) — qui la
          pendenza è quasi costante lungo tutto il tratto 0%->52%, con
          solo un lieve rallentamento verso la fine (l'"esponenziale
          debole" richiesto);
       2) velo scuro uniforme su tutta la foto, per tenerla soffusa dietro
          testo/card ("molta opacità" richiesta da Jim — l'80% qui è il
          livello del velo, la foto stessa resta al 20% di visibilità);
       3) la foto vera e propria. */
    background-image:
        linear-gradient(to right,
            #1a1008 0%,
            rgba(26, 16, 8, 0.55) 28%,
            transparent 52%),
        linear-gradient(rgba(26, 16, 8, 0.8), rgba(26, 16, 8, 0.8)),
        url("../images/successi-bg.df1759b1e48e.jpg");
    background-size: cover;
    /* Tornato a "center" (l'inquadratura iniziale, quella che Jim preferisce)
       invece di spostare l'ancoraggio verso il basso — l'aggiustamento
       precedente per recuperare le coppe dei ripiani bassi tagliava troppo
       il resto della foto ("zoommata"), perdendo contenuto sul lato SX. */
    background-position: center;
    background-repeat: no-repeat;
}

.risultati-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
    margin-top: var(--space-2xl);
}

/* Solo nella pagina "Vedi tutti i successi" (risultati_agonistici.html) —
   contiene la griglia in un'altezza fissa (circa 2 righe) con scroll interno,
   così la foto di sfondo di .section-risultati resta della stessa altezza
   invece di allungarsi all'infinito quando lo storico cresce con gli anni.
   La sezione home non usa questa classe: mostra sempre solo 4 card, non le
   serve scorrere. */
.risultati-grid-scroll {
    max-height: 820px;
    overflow-y: auto;
    /* Spazio per la scrollbar senza spingere l'ultima colonna di card contro
       il bordo del container. */
    padding-right: var(--space-sm);
}

/* Card base — grigio scuro poco trasparente (0.65) anche per le card senza
   podio: prima restava quasi invisibile (0.04) sullo sfondo scuro pieno, ma
   con la foto sotto (più "rumorosa" di un colore piatto) serve più corpo
   per staccarsi bene — stessa esigenza già risolta per --podio qui sotto. */
.risultato-card {
    display: block;
    background-color: rgba(38, 38, 42, 0.65);
    border: 1px solid rgba(160, 160, 165, 0.15);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    text-align: center;
    text-decoration: none;
    transition: background-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
}

/* Card collegata a un Evento — bordo/sfondo ambra al hover invece della sola
   ombra scura, che su sfondo già scuro si vedeva pochissimo (richiesta Jim
   2026-09-09: serve un segnale luminoso, non un'ombra, per capire che la
   card è cliccabile). */
.risultato-card--link:hover,
.risultato-card--link:focus-visible {
    transform: translateY(-4px);
    /* Blu royal e arancione del logo ufficiale (#1E3FA3 / #E1642E, vedi
       logo_ccf_primario.svg) invece dell'ambra generica del sito — blu vicino
       al bordo (dentro), arancione che si allarga e sfuma verso l'esterno.
       Il bordo/inset blu è quasi opaco (90%) apposta: mescolato con lo sfondo
       scurissimo della sezione (#1a1008), a opacità bassa (40-50%) il blu vero
       (#1E3FA3) diventava un navy molto più scuro e spento (~#1C2346) — un
       bordo sottile può permettersi più opacità senza appesantire la card,
       mentre l'alone arancione (più esteso) resta volutamente trasparente.
       NIENTE background-color qui apposta: deve restare quello della card
       (grigio scuro per --podio, quasi trasparente per le altre) anche in
       hover — solo bordo/ombra segnalano il passaggio del mouse. */
    border-color: rgba(30, 63, 163, 0.9);
    box-shadow:
        inset 0 0 0 1px rgba(30, 63, 163, 0.85),  /* rinforza il blu appena dentro il bordo */
        0 0 16px 2px rgba(225, 100, 46, 0.45),    /* glow arancione vicino al bordo */
        0 0 40px 10px rgba(225, 100, 46, 0.2),    /* glow arancione più ampio, sfumato */
        0 12px 24px rgba(0, 0, 0, 0.3);           /* ombra di sollevamento, invariata */
}

/* Icona coppa/medaglia — emoji o immagine caricata, sopra il badge posizione */
.risultato-card__icon {
    display: block;
    font-size: var(--text-2xl);
    line-height: 1;
    margin-bottom: var(--space-sm);
}

.risultato-card__icon--foto {
    width: 40px;
    height: 40px;
    object-fit: contain;
    margin-left: auto;
    margin-right: auto;
}

/* Chi / gruppo — sotto il nome del successo, stesso grigio tenue */
.risultato-card__chi {
    font-size: var(--text-xs);
    color: rgba(247, 243, 236, 0.4);
    margin-top: var(--space-xs);
}

/* Card con un piazzamento oro/argento/bronzo (1°/2°/3°, o Successo.colore_
   medaglia impostato a mano) — sfondo grigio scuro solido invece del
   trasparente di base. Prima era selezionato con :nth-child(1)/(2), cioè "le
   prime due card nella griglia": funzionava solo quando i risultati erano
   inseriti a mano in ordine di piazzamento. Da quando i successi si ordinano
   per data più recente (vedi apps.core.views._successi), le "prime due"
   possono benissimo essere un 3° posto recente — la classe è invece
   assegnata dal template in base al vero colore (apps.core.views.
   _colore_successo), non alla posizione nella griglia. Opacità molto più
   alta (0.78 contro 0.28 della card base) per staccare bene dalla foto delle
   coppe sullo sfondo (vedi screenshot di Jim del 10/9). */
.risultato-card--oro,
.risultato-card--argento,
.risultato-card--bronzo {
    background-color: rgba(38, 38, 42, 0.78);
    border-color: rgba(160, 160, 165, 0.25);
}

/* Oro — badge: sfumatura radiale con highlight quasi bianco fuori centro
   (dove la luce "colpisce" la sfera) + anello scuro sul bordo, più le due
   inset-shadow che imitano una superficie curva reale (chiara in alto,
   scura in basso) invece di un cerchio piatto a un solo colore. */
.risultato-card--oro .risultato-card__pos {
    background: radial-gradient(circle at 32% 28%, #FFFBEF 0%, #FFEDA6 18%, #E8B923 48%, #9C6B0A 82%, #7A5405 100%);
    box-shadow:
        inset 0 -3px 4px rgba(0, 0, 0, .4),   /* ombra interna in basso — dà volume alla sfera */
        inset 0 2px 2px rgba(255, 255, 255, .55), /* luce interna in alto — il "riflesso" */
        0 2px 4px rgba(0, 0, 0, .45);           /* ombra proiettata sulla card sotto */
    color: #4A3200; /* testo scuro — sul giallo/oro chiaro un badge chiaro con testo chiaro sparirebbe */
}

/* Oro — testo dell'anno. color pieno PRIMA del background-clip: fallback
   per i pochissimi browser senza supporto, che altrimenti vedrebbero testo
   trasparente = invisibile. */
.risultato-card--oro .risultato-card__year {
    color: #E8B923;
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
    .risultato-card--oro .risultato-card__year {
        /* Verticale (to bottom), non diagonale: su un testo largo come
           "2026" un gradiente diagonale attraversa cifre diverse in punti
           diversi della sfumatura, risultando "a chiazze" invece che
           metallico (vedi screenshot di Jim del 17/9) — verticale fa sì che
           OGNI cifra riceva la stessa identica banda luce/ombra, come un
           riflesso reale su una superficie. Bande multiple luce-ombra-luce
           imitano la lucentezza "spazzolata" del metallo vero, non un
           semplice degradé a due colori. */
        background: linear-gradient(to bottom,
            #FFF8E0 0%, #F5D573 18%, #C9992E 38%,
            #7A5405 50%, #C9992E 62%, #F5D573 82%, #FFF8E0 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        /* Stack di ombre solide, ciascuna spostata di 1px in più — crea
           l'illusione di uno spessore/estrusione dietro la faccia frontale
           (effetto "3D block"), invece di un testo piatto con solo il
           riempimento colorato. L'ultima ombra (sfocata) è il vero drop
           shadow che stacca il blocco dalla card. */
        text-shadow:
            1px 1px 0 #8a6608,
            2px 2px 0 #755405,
            3px 3px 0 #604403,
            4px 4px 6px rgba(0, 0, 0, .55);
    }
}

/* Argento — stessa tecnica dell'oro, tonalità grigio/bianco metallico. */
.risultato-card--argento .risultato-card__pos {
    background: radial-gradient(circle at 32% 28%, #FFFFFF 0%, #F0F1F2 18%, #C7C9CC 48%, #7B7E82 82%, #5A5D61 100%);
    box-shadow:
        inset 0 -3px 4px rgba(0, 0, 0, .35),
        inset 0 2px 2px rgba(255, 255, 255, .6),
        0 2px 4px rgba(0, 0, 0, .4);
    color: #2A2C2E;
}
.risultato-card--argento .risultato-card__year {
    color: #C7C9CC;
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
    .risultato-card--argento .risultato-card__year {
        background: linear-gradient(to bottom,
            #FFFFFF 0%, #E4E5E7 18%, #A9ACAF 38%,
            #5A5D61 50%, #A9ACAF 62%, #E4E5E7 82%, #FFFFFF 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        text-shadow:
            1px 1px 0 #8a8d90,
            2px 2px 0 #737678,
            3px 3px 0 #5c5f61,
            4px 4px 6px rgba(0, 0, 0, .5);
    }
}

/* Bronzo — stessa tecnica, tonalità rame/marrone metallico. */
.risultato-card--bronzo .risultato-card__pos {
    background: radial-gradient(circle at 32% 28%, #FBE3CB 0%, #F0C097 18%, #C97C3E 48%, #7A431B 82%, #5C3210 100%);
    box-shadow:
        inset 0 -3px 4px rgba(0, 0, 0, .4),
        inset 0 2px 2px rgba(255, 255, 255, .45),
        0 2px 4px rgba(0, 0, 0, .45);
    color: #2E1500;
}
.risultato-card--bronzo .risultato-card__year {
    color: #C97C3E;
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
    .risultato-card--bronzo .risultato-card__year {
        background: linear-gradient(to bottom,
            #FBE3CB 0%, #E0A868 18%, #A85F2C 38%,
            #5C3210 50%, #A85F2C 62%, #E0A868 82%, #FBE3CB 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        text-shadow:
            1px 1px 0 #6b3a15,
            2px 2px 0 #572e10,
            3px 3px 0 #43230c,
            4px 4px 6px rgba(0, 0, 0, .55);
    }
}

/* Badge posizione — cerchietto piccolo in cima */
.risultato-card__pos {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.08);
    color: rgba(247, 243, 236, 0.5);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    margin-bottom: var(--space-md);
}

/* Anno — grande e prominente */
.risultato-card__year {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--text-4xl);
    font-weight: 900;
    color: rgba(247, 243, 236, 0.85);
    line-height: 1;
    margin-bottom: var(--space-xs);
}

/* Giorno + mese — sotto l'anno grande, solo quando l'evento ha una data precisa (non un periodo dedotto) */
.risultato-card__data {
    display: block;
    font-size: var(--text-xs);
    color: rgba(247, 243, 236, 0.4);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: var(--space-sm);
}

.risultato-card__nome {
    font-size: var(--text-sm);
    color: rgba(247, 243, 236, 0.5);
    line-height: 1.4;
}


/* === TEAM === */
/* PAGINE: core/index.html (Home, partial _team.html — solo anteprima,
   tagliata a 3/2 card via i breakpoint responsive più sotto) e
   chi_siamo/index.html (elenco completo istruttori, stesse classi
   .team-grid/.team-card riusate direttamente nel template). */
.section-team {
    background-color: var(--color-cream);
}

/* Ancora per il link "Conosci il team" dalla Homepage — offset per non
   finire nascosta sotto il nav sticky quando la pagina scrolla fin qui. */
#team {
    scroll-margin-top: calc(var(--nav-height) + var(--space-lg));
}

/* auto-fit invece di un numero fisso di colonne: si adatta da sola a
   quanti istruttori sono davvero configurati, mai colonne vuote (se ce ne
   sono meno delle previste, le card esistenti si allargano per riempire
   la riga invece di lasciare uno spazio bianco). A 1272px di contenuto
   (container 1320px) esce ~4 colonne, a 1552px (container 1600px, monitor
   grandi) ~5 — i breakpoint sotto regolano la larghezza minima per tablet
   e mobile, dove serve una card più stretta. */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-lg);
}

.team-card {
    display: block;                             /* La card è un <a> — di default inline */
    min-width: 0;                               /* Come sopra: senza questo, l'elemento grid ha un minimo "auto" legato al contenuto e può sfondare la colonna */
    text-align: center;
    background-color: var(--color-white);      /* Card bianca su sfondo crema */
    border-radius: var(--radius-lg);
    padding: var(--space-xl) var(--space-lg);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.team-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
}

.team-card__photo {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid var(--color-line);
    margin-bottom: var(--space-md);
    background-color: var(--color-cream-alt);
}

/* Avatar con iniziale — usato quando non c'è foto */
.team-card__avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: var(--color-red);    /* Sfondo rosso per avatar */
    color: var(--color-white);             /* Iniziale bianca */
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-md);
}

.team-card__avatar--amber {
    background-color: var(--color-amber);  /* Ambra per il secondo istruttore */
    color: var(--color-white);
}

.team-card__avatar--gray {
    background-color: var(--color-cream-alt);  /* Crema per il placeholder "+" */
    color: var(--color-gray);
}

.team-card__name {
    font-size: var(--text-lg);
    color: var(--color-dark);
    overflow-wrap: break-word;   /* Cognomi lunghi (es. "Marzattinocci") vanno a capo invece di sfondare la card */
}

.team-card__bio {
    font-size: var(--text-sm);
    color: var(--color-gray);
    margin-top: var(--space-xs);
    line-height: 1.5;
}


/* === LOCATIONS PREVIEW === */
/* PAGINA: solo core/index.html (Home), partial _sedi_preview.html. */
.section-sedi-preview {
    background-color: var(--color-cream-alt);
}

.sedi-preview-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
    margin-top: var(--space-2xl);
}

/* Card senza foto — solo testo, badge, divider, orari */
.sede-preview-card {
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.sede-preview-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

/* Badge colorato tipo "Sede principale" / "Centro sportivo" */
.sede-preview-card__badge {
    display: inline-block;
    padding: 0.3rem 0.875rem;
    border-radius: 100px;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-bottom: var(--space-md);
}

.sede-preview-card__badge--red {
    background-color: var(--color-red);
    color: var(--color-white);
}

.sede-preview-card__badge--amber {
    background-color: var(--color-amber);
    color: var(--color-white);
}

/* Indirizzo grande in Fraunces */
.sede-preview-card__address {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: var(--space-xs);
    line-height: 1.2;
}

.sede-preview-card__city {
    font-size: var(--text-sm);
    color: var(--color-gray);
    margin-bottom: var(--space-md);
}

/* Linea divisoria */
.sede-preview-card__divider {
    height: 1px;
    background-color: var(--color-line);
    margin-bottom: var(--space-md);
}

/* Orari e tel — stessi colori della pagina Le Sedi (.sede-contact-row):
   testo in grigio, giorni/etichette in scuro, telefono in rosso */
.sede-preview-card__info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sede-preview-card__info p {
    font-size: var(--text-sm);
    color: var(--color-gray);      /* Testo info in grigio, come .sede-contact-row */
    line-height: 1.5;
}

.sede-preview-card__info p strong {
    color: var(--color-dark);      /* Giorni/etichette in scuro, il grigio resta solo sull'orario */
}

.sede-preview-card__info p a {
    color: var(--color-red);       /* Link telefono in rosso, come .sede-contact-row a */
    transition: color var(--transition-fast);
}

.sede-preview-card__info p a:hover {
    color: var(--color-red-hover);
}


/* === BLOG MACRO CARDS === */
/* PAGINA: solo core/index.html (Home), partial _blog_preview.html. */
/* Crema (non crema-alt) — con la sezione Centri Estivi rimossa, questa è
   ora la sezione subito dopo Sedi (crema-alt): resta lei a mantenere
   l'alternanza di sfondo, prendendo il colore che prima aveva Centri Estivi. */
.section-blog-preview {
    background-color: var(--color-cream);
}

.blog-macro-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
    margin-top: var(--space-2xl);
}

.blog-macro-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    display: flex;
    gap: var(--space-lg);
    align-items: flex-start;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.blog-macro-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.blog-macro-card__icon {
    font-size: 2rem;
    flex-shrink: 0;
    line-height: 1;
}

.blog-macro-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    flex: 1;
}

.blog-macro-card__tag {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-red);              /* Tag categoria in rosso */
}

.blog-macro-card__title {
    font-size: var(--text-xl);
    color: var(--color-dark);
    line-height: 1.3;
}

.blog-macro-card__desc {
    font-size: var(--text-sm);
    line-height: 1.6;
}


/* === FINAL CTA — red background === */
/* PAGINA: solo core/index.html (Home), blocco finale prima del footer. */
.section-cta-final {
    background-color: var(--color-red);    /* Sfondo rosso */
    padding-block: var(--space-3xl);
}

.section-cta-final h2 {
    color: var(--color-white);             /* Titolo bianco su rosso */
    font-size: var(--text-4xl);
    margin-bottom: var(--space-md);
}

.section-cta-final p {
    color: rgba(247, 243, 236, 0.85);      /* Sottotitolo semi-trasparente */
    font-size: var(--text-lg);
    margin-bottom: var(--space-xl);
}


/* === CHI SIAMO — sezione fondatori, immagini affiancate + testo centrato sotto === */
/* PAGINA: solo chi_siamo/index.html — sezione estesa sui fondatori, con
   biografia e box presidente (diversa dalla breve .section-storia di Home). */
.fondatori-images {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
    margin-bottom: var(--space-sm);
}

.fondatori-images img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-lg);
}

.fondatori-caption {
    text-align: center;
    font-size: var(--text-sm);
    color: var(--color-gray);
    font-style: italic;
    margin-bottom: var(--space-xl);
}

.fondatori-intestazione {
    text-align: center;
    margin-bottom: var(--space-xl);
}

.fondatori-nome {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-xl);
}

.fondatori-titolo {
    font-size: var(--text-xs);
    color: var(--color-gray);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 4px;
}

.fondatori-testo {
    /* Larghezza piena, come richiesto: dal bordo SX della foto SX al bordo
       DX della foto DX (stessa larghezza di .fondatori-images, nessun
       max-width proprio). */
    max-width: none;
}

.fondatori-testo p {
    font-size: var(--text-base);
    line-height: 1.8;
    color: var(--color-gray);
    margin-bottom: var(--space-md);
}

.fondatori-testo p.fondatori-testo--corsivo {
    font-style: italic;
}

/* Ultimo paragrafo — chiusura enfatica in rosso, come da mockup */
.fondatori-testo p.fondatori-testo--accento {
    color: var(--color-red);
    font-weight: 600;
    margin-bottom: 0;
}

.fondatori-presidente {
    text-align: center;
    margin-top: var(--space-xl);
}

.fondatori-presidente__label {
    font-size: var(--text-xs);
    color: var(--color-gray);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-sm);
    display: block;
}

/* Card grande — stessa idea delle card istruttore ma più ampia, con foto
   più grande e inizio del CV, come richiesto (non solo il nome). */
.fondatori-presidente__card {
    display: inline-flex;
    align-items: center;
    gap: var(--space-lg);
    text-align: left;
    max-width: 640px;
    background-color: var(--color-white);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-lg);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

a.fondatori-presidente__card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.fondatori-presidente__card--vuota {
    display: block;
    text-align: center;
    margin-inline: auto;   /* Centra il box (era rimasto a sinistra) */
}

.fondatori-presidente__foto {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.fondatori-presidente__foto--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-cream);
    color: var(--color-gray);
    font-size: var(--text-xs);
}

.fondatori-presidente__nome {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-lg);
    margin-bottom: var(--space-xs);
}

.fondatori-presidente__cv {
    font-size: var(--text-sm);
    color: var(--color-gray);
    line-height: 1.6;
    margin-bottom: var(--space-xs);
}


/* === TIMELINE TRAGUARDI — sezione scura con anni cerchiati === */
/* PAGINA: solo chi_siamo/index.html — storia dell'associazione anno per anno. */
.section-traguardi {
    background-color: var(--color-dark);
}

.timeline {
    max-width: 640px;
    margin-inline: auto;
}

.timeline-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.timeline-year {
    flex-shrink: 0;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background-color: var(--color-red);
    color: var(--color-white);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}

.timeline-desc {
    padding-top: var(--space-xs);
    font-size: var(--text-base);
    color: rgba(247, 243, 236, 0.75);
}


/* === TEAM — foto di gruppo + placeholder circolari "FOTO" === */
/* PAGINA: solo chi_siamo/index.html — foto di gruppo sopra l'elenco istruttori. */
/* Foto di gruppo reale — niente placeholder grafico finché non viene
   caricata: il tag <img> viene stampato nel template solo quando esiste
   davvero un'immagine (vedi chi_siamo/index.html). */
.team-group-photo {
    width: 100%;
    aspect-ratio: 16 / 6;
    object-fit: cover;
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-xl);
    display: block;
}

/* Stessa dimensione della foto reale (.team-card__photo, 100% larghezza
   della card) — prima era fissa a 64px e sembrava molto più piccola. */
.team-card__photo-placeholder {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    margin-bottom: var(--space-md);
    background: linear-gradient(150deg, #E8DDC8, #D8C9A8);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gray);
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}


/* === PUBBLICAZIONI — "Scritto da noi" === */
/* PAGINA: solo chi_siamo/index.html. */
.pubblicazioni-list {
    /* Affiancate sulla stessa riga, larghe quanto il resto del contenuto
       (nessun max-width proprio — stessa larghezza delle sezioni sopra). */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
    align-items: start;
}

.pubblicazione-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    padding: var(--space-md) var(--space-lg);
}

.pubblicazione-card__titolo {
    font-family: var(--font-heading);
    font-weight: 700;
    font-style: italic;
    font-size: var(--text-lg);
}

.pubblicazione-card__sottotitolo {
    font-size: var(--text-sm);
    color: var(--color-gray);
    margin: 4px 0 6px;
}

.pubblicazione-card__meta {
    font-size: var(--text-xs);
    color: var(--color-gray);
}


/* === RESPONSIVE — SCHERMI GRANDI, 2K+ (min-width: 1600px) === */
/* .hero-content ha un max-width proprio (960px), separato da --container-max:
   allargare il container generale (vedi global.css) NON allarga questo blocco
   in automatico. Va allargato esplicitamente qui, altrimenti il titolo resta
   troppo stretto e va a capo su 3 righe anche su schermi molto larghi. */
@media (min-width: 1600px) {
    .hero-content { max-width: 1150px; }

    /* .team-grid non serve qui: auto-fit sale già da solo a ~5 colonne
       quando il container si allarga a 1600px (vedi regola base sopra). */
}


/* === RESPONSIVE — DESKTOP/LAPTOP PICCOLI (769px–1599px) === */
/* PAGINA: core/index.html, anteprima team in homepage (.section-team).
   Sotto i 1600px il container resta a 1320px (vedi global.css) e
   .team-grid con minmax(260px, 1fr) non riesce a far stare 5 colonne
   nella riga (ne entrano al massimo 4, vedi nota nella regola base
   .team-grid più sopra): con 5 istruttori selezionati, senza questa
   regola il quinto andrebbe da solo a capo su una seconda riga (es. su
   un MacBook 14"). Nascondendo la 5ª card si forza la sezione a restare
   sempre su una riga sola su ogni schermo desktop/laptop, non solo sui
   monitor 2K+. La pagina Chi Siamo (elenco completo istruttori, nessuna
   classe .section-team) non viene toccata da questa regola. */
@media (min-width: 769px) and (max-width: 1599px) {
    .section-team .team-card:nth-child(n+5) { display: none; }
}


/* === RESPONSIVE — TABLET (max-width: 768px) === */
@media (max-width: 768px) {
    .hero-title { font-size: var(--text-5xl); }

    .stats-grid { grid-template-columns: repeat(2, 1fr); }

    .categorie-grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }

    .storia-layout { grid-template-columns: 1fr; }
    .storia-img { order: -1; }

    .risultati-grid { grid-template-columns: repeat(2, 1fr); }

    /* minmax(0, 1fr) e non solo 1fr: 1fr da solo equivale a minmax(auto, 1fr),
       quindi la colonna non può restringersi sotto il contenuto che non va a
       capo (es. "Marzattinocci" tutto attaccato) — a schermi stretti la
       griglia sfondava lateralmente invece di andare a capo. */
    .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }  /* Fisso, non auto-fit — su mobile Safari non si comportava come atteso */

    /* Sulla home la sezione team è solo un'anteprima (il bottone "Conosci
       il team" porta all'elenco completo in Chi Siamo, che NON va toccato
       da questa regola): su tablet mostriamo solo le prime 3 card, non
       tutte e 5 spezzate su due righe. */
    .section-team .team-card:nth-child(n+4) { display: none; }

    .sedi-preview-grid { grid-template-columns: 1fr; }

    .blog-macro-grid { grid-template-columns: 1fr; }

    .pubblicazioni-list { grid-template-columns: 1fr; }

    .fondatori-presidente__card { flex-direction: column; text-align: center; }

    .fondatori-images { grid-template-columns: 1fr; }

    .section-cta-final h2 { font-size: var(--text-3xl); }
}


/* === RESPONSIVE — MOBILE (max-width: 480px) === */
@media (max-width: 480px) {
    .hero-title { font-size: var(--text-4xl); }
    .hero-actions { flex-direction: column; }

    .stats-grid { grid-template-columns: repeat(2, 1fr); }

    .risultati-grid { grid-template-columns: repeat(2, 1fr); }

    .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }  /* Fisso, non auto-fit — su mobile Safari non si comportava come atteso */

    /* Su smartphone, solo 2 card in anteprima sulla home — vedi nota nel
       breakpoint tablet sopra. */
    .section-team .team-card:nth-child(n+3) { display: none; }

    .blog-macro-card { flex-direction: column; }

    .section-cta-final h2 { font-size: var(--text-2xl); }
}