/* ============================================================
   core.css — CCF Balduina
   Homepage and Chi Siamo page styles
   ============================================================ */


/* === HERO — sfondo crema, testo centrato === */
.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);
}

/* "insieme" in corsivo ROSSO — come da richiesta esplicita */
.hero-title em {
    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 === */
.section-stats {
    background-color: var(--color-cream);
    padding-block: var(--space-xl);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    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 === */
.section-categorie {
    background-color: var(--color-cream-alt);  /* Sfondo alternato */
}

.categorie-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    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 === */
.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 {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    position: relative;   /* ancora per il pre-titolo, posizionato fuori dal flusso qui sotto */
}

/* Il pre-titolo esce dal flusso normale e si posiziona sopra il blocco:
   così è il TITOLO (primo elemento nel flusso) ad allinearsi al bordo
   della foto tramite .storia-layout { align-items: start }, mentre il
   pre-titolo resta più in alto, oltre il bordo, come richiesto. */
.storia-text .section-label {
    position: absolute;
    bottom: calc(100% + var(--space-xs));
    left: 0;
}

.storia-text h2 {
    margin-top: 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;
}


/* === RISULTATI AGONISTICI — sfondo scuro, card ambra calde === */
.section-risultati {
    background-color: #1a1008;   /* Marrone scurissimo — tono caldo */
}

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

/* Card base */
.risultato-card {
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(247, 243, 236, 0.08);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    text-align: center;
    transition: background-color var(--transition-base);
}

/* Card per 1° e 2° posto — sfondo caldo marrone ambra */
.risultato-card:nth-child(1),
.risultato-card:nth-child(2) {
    background-color: rgba(140, 65, 12, 0.28);
    border-color: rgba(200, 110, 30, 0.18);
}

/* 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);
}

/* Badge ambra per 1° e 2° posto */
.risultato-card:nth-child(1) .risultato-card__pos,
.risultato-card:nth-child(2) .risultato-card__pos {
    background-color: var(--color-amber);
    color: #1a1008;
}

/* 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);
}

/* Anno ambra per 1° e 2° posto */
.risultato-card:nth-child(1) .risultato-card__year,
.risultato-card:nth-child(2) .risultato-card__year {
    color: var(--color-amber);
}

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


/* === TEAM === */
.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 */
    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);
}

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


/* === LOCATIONS PREVIEW === */
.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 */
.sede-preview-card__info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sede-preview-card__info p {
    font-size: var(--text-sm);
    color: var(--color-dark);
    line-height: 1.5;
}


/* === CENTRI ESTIVI === */
.section-centri-estivi {
    background-color: var(--color-cream);
}

/* Card orizzontale: immagine sinistra + testo destra — come nel mockup */
.centri-estivi-card {
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    display: flex;
    gap: var(--space-xl);
    align-items: center;
    box-shadow: var(--shadow-sm);
}

.centri-estivi-card__img {
    flex-shrink: 0;
    width: 280px;
}

.centri-estivi-card__img img {
    width: 100%;
    border-radius: var(--radius);
    object-fit: cover;
    display: block;
}

.centri-estivi-card__body {
    flex: 1;
}

.centri-estivi-card__body p {
    font-size: var(--text-base);
    color: var(--color-gray);
    line-height: 1.7;
}


/* === BLOG MACRO CARDS === */
.section-blog-preview {
    background-color: var(--color-cream-alt);
}

.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 === */
.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 === */
.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 === */
.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" === */
/* 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" === */
.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 — 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; }

    .centri-estivi-card { flex-direction: column; }
    .centri-estivi-card__img { width: 100%; }

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

    .team-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }  /* ~3 colonne, adattiva */

    .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(auto-fit, minmax(140px, 1fr)); }  /* ~2 colonne, adattiva */

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

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