/**
 * FONDAZIONE ARMANDO - HOME SECTIONS
 *
 * Sistema unificato per le sezioni contenuto della homepage (hero esclusa).
 * Definito in REFACTOR-HOMEPAGE-SEZIONI.md.
 *
 * Token desktop modificabili da ACF via custom property inline sul <section>:
 *   <section class="section section--news"
 *            style="--section-title-color: #333; --section-title-size: 36px;">
 *
 * Sul mobile (≤768px) i font-size sono fissi e ignorano le custom properties inline:
 * il cliente non gestisce la tipografia mobile da ACF (decisione §7).
 *
 * NIENTE !important. NIENTE <style> PHP-driven.
 */

/* ============================================================
   Token di default (desktop)
   ============================================================ */
:root {
  --section-padding-y: 3rem;
  --section-header-gap: 3.1rem;
  --section-eyebrow-size: 0.875rem;
  --section-eyebrow-color: #26BF94;
  --section-title-size: clamp(1.75rem, 3vw, 2rem);
  --section-title-color: #333333;
  --section-lead-size: 1.125rem;
  --section-lead-color: #666666;
  --section-lead-max-width: 600px;
}

/* ============================================================
   Wrapper sezione
   ============================================================ */
.section {
  padding: var(--section-padding-y) 0;
}

/* ============================================================
   Header sezione (eyebrow + title + lead)
   ============================================================ */
.section-header {
  margin-bottom: var(--section-header-gap);
  text-align: center;
}

.section-eyebrow {
  font-size: var(--section-eyebrow-size);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--section-eyebrow-color);
  margin: 0 0 0.75rem;
  line-height: 1.2;
}

.section-title {
  font-size: var(--section-title-size);
  color: var(--section-title-color);
  line-height: 1.25;
  margin: 0 0 1rem;
  text-transform: lowercase; /* decisione §7 — coerente con .section-title legacy */
}

.section-title::first-letter {
  text-transform: uppercase;
}

.section-lead {
  font-size: var(--section-lead-size);
  color: var(--section-lead-color);
  line-height: 1.6;
  max-width: var(--section-lead-max-width);
  margin: 0 auto;
}

/* ============================================================
   Body sezione (contenitore neutro)
   ============================================================ */
.section-body {
  /* nessuna regola forzata — ogni sezione definisce la propria griglia */
}

/* ============================================================
   Mobile (≤768px)
   I font-size sono override DIRETTI sulla proprietà,
   NON sui token :root. Questo permette alle custom properties
   inline ACF di restare attive su desktop senza essere
   sovrascritte dal cascade quando si va sotto i 768px.
   ============================================================ */
@media (max-width: 768px) {
  .section-header { margin-bottom: 1.5rem; }
  .section-eyebrow { font-size: 0.75rem; }
  .section-title  { font-size: 1.5rem; line-height: 1.25; }
  .section-lead   { font-size: 0.9375rem; line-height: 1.5; }
}

@media (max-width: 480px) {
  .section-title { font-size: 1.375rem; }
}

/* ============================================================
   Override per-section
   "Facciamolo insieme": il container è più largo (1400px) per
   non comprimere le card che storicamente erano max 1400px.
   Disattiva i constraint che la cards-grid si porta dietro
   da components.css per evitare padding/max-width doppi.
   ============================================================ */
.section--facciamolo > .container {
  max-width: 1400px;
  padding: 0 40px;
}

.section--facciamolo .facciamolo-cards-grid {
  max-width: none;
  padding: 0;
  margin: 0;
}

@media (max-width: 768px) {
  .section--facciamolo > .container {
    padding: 0 20px;
  }
}

/* ============================================================
   Header allineato a sinistra (custom media)
   ============================================================ */
.section-header--left {
  text-align: left;
}

.section-header--left .section-lead {
  margin-left: 0;
  margin-right: 0;
  max-width: none;
}

.section--media .section-header--left .section-title {
  text-align: left;
}

.section--media .section-eyebrow {
  margin-bottom: 0.75rem;
}

.section--media .section-title {
  margin-bottom: 1.5rem;
}

.section--media .section-lead {
  margin-bottom: 1.5rem;
}

/* ============================================================
   Barra donazioni — tipografia via token sezione
   ============================================================ */
.section--donazioni .barra-donazioni-content .section-title {
  font-weight: 700;
  margin-bottom: var(--spacing-lg, 1.5rem);
  line-height: 1.2;
  text-align: left;
}

.section--donazioni .barra-donazioni-content .section-lead {
  margin: 0;
  max-width: none;
  text-align: left;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .section--donazioni .barra-donazioni-content .section-title,
  .section--donazioni .barra-donazioni-content .section-lead {
    text-align: center;
  }
}