/* Home rifatta (plugin dalla 1.7.0): caricato solo in Home, dopo il CSS del tema e strumenti.css.
   Composto da sito/proposta/home/componi_css_plugin.py: le regole comuni di proposta.css che la Home usa,
   poi home.css per intero. Non modificare qui a mano. */

/* Titolo della hero: la riga in evidenza più nera, come nella proposta */
.hero__title-line--accent { font-weight: 900; }

/* Sezioni (da proposta.css) */
.sez__inner { max-width: var(--container-max); margin: 0 auto; padding-inline: var(--gutter); }
.sez { padding: clamp(36px, 5vw, 90px) 0; color: var(--c-dark); }
.sez--scura { background: var(--c-dark); color: var(--c-cream); }
.sez__testa { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; border-bottom: 1.5px solid currentColor; padding-bottom: 14px; margin-bottom: clamp(22px, 3vw, 48px); }
.sez__titolo { margin: 0; font-size: clamp(1.8rem, 3.2vw, 3.4rem); font-weight: 900; line-height: 1.05; }
.sez__titolo em { font-weight: 200; font-style: italic; }
.sez__intro { max-width: 760px; margin: 0 0 clamp(22px, 3vw, 44px); font-size: clamp(1.05rem, 1.3vw, 1.35rem); font-weight: 300; line-height: 1.5; }
.sez__intro em { font-style: italic; font-weight: 300; }
/* Modi per contribuire (Home e Sostienici): voci separate da una linea in alto, titolo nero,
   testo leggero, tasto a pillola in fondo. La griglia della Home (Dona grande + coppia) è in home.css. */
.sez__testa--senza-filo { border-bottom: 0; padding-bottom: 0; }
.modi { display: grid; gap: clamp(28px, 3vw, 48px) clamp(20px, 3.5vw, 64px); align-items: stretch; }
.modi--due { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.modo { display: flex; flex-direction: column; border-top: 1.5px solid var(--c-dark); padding-top: clamp(16px, 1.8vw, 26px); }
.modo__titolo { margin: 0 0 .4em; font-size: clamp(1.4rem, 2vw, 2.1rem); font-weight: 900; line-height: 1.05; }
.modo__testo { margin: 0 0 1.3em; font-weight: 300; font-size: clamp(1rem, 1.15vw, 1.2rem); line-height: 1.45; max-width: 44ch; }
.modo__testo strong { font-weight: 700; }
.modo .btn { margin-top: auto; align-self: flex-start; }
@media (max-width: 1024px) {
	.modi, .modi--due { grid-template-columns: 1fr; gap: 0; }
	.modo { padding-bottom: clamp(16px, 2vw, 26px); }
	.modi .modo:last-child { border-bottom: 1.5px solid var(--c-dark); }
}
@media (max-width: 768px) {
	.modo .btn { align-self: stretch; }
	/* su telefono niente linee tra le voci: le separa lo spazio */
	.modi, .modi--due { gap: clamp(30px, 8vw, 40px); }
	.modo { border-top: 0; padding-top: 0; padding-bottom: 0; }
	.modi .modo:last-child { border-bottom: 0; }
}

/* ---------- home.css ---------- */
/* Home — sopra il CSS del tema e proposta.css. Stessi token (--c-cream, --c-green, --c-dark, Inter, pillole).
   Hero e «I prossimi passi» sono quelli del tema (main.css): qui non c'è niente per loro.
   Principio delle sezioni nuove: tre grandezze, linee e spazio al posto delle scatole. */

/* Titolo senza filo (.sez__testa--senza-filo) e base delle voci «modo» stanno in proposta.css: le usa anche Sostienici */

/* ---------- 2. La nostra Mission: titolo e testo a sinistra, centrati in altezza; a destra i tre numeri in ovali verde chiaro ---------- */
.breve { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 5vw, 110px); align-items: center; }
.breve__titolo { margin: 0 0 .45em; }
.breve__testo { font-size: clamp(1.1rem, 1.65vw, 1.75rem); font-weight: 300; line-height: 1.45; max-width: 680px; }
.breve__testo p { margin: 0 0 .8em; }
.breve__testo p:last-child { margin-bottom: 0; }
.breve__testo strong { font-weight: 700; }
/* i tre ovali condividono le colonne (subgrid): le etichette partono tutte dallo stesso punto */
.numeri { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(12px, 1.3vw, 20px) clamp(16px, 2vw, 32px); }
.numero { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; padding: clamp(14px, 1.5vw, 22px) clamp(26px, 3vw, 48px); background: var(--c-green); color: var(--c-dark); border-radius: 999px; }
.numero__cifra { font-size: clamp(2.6rem, 4.4vw, 4.8rem); font-weight: 900; line-height: .95; letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.numero__cifra .stat__prefix { font-weight: 300; letter-spacing: 0; }
.numero__cosa { margin: 0; font-size: clamp(1rem, 1.2vw, 1.3rem); line-height: 1.3; font-weight: 700; }
.numero__cosa small { display: block; font-size: .85em; font-weight: 300; margin-top: .2em; }

/* ---------- 3. Cosa facciamo: titolo grande a sinistra, a destra quattro card chiare col disegno
   della pagina di ogni iniziativa (gli stessi disegni delle testate), su fondo scuro ---------- */
.cosa { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2fr); gap: clamp(28px, 5vw, 100px); align-items: start; }
.cosa__testa { position: sticky; top: 120px; }
.cosa__titolo { margin: 0; font-size: clamp(2.4rem, 4.6vw, 4.8rem); font-weight: 900; line-height: 1; letter-spacing: -.015em; }
.cosa__titolo em { display: block; font-style: italic; font-weight: 200; }
.cosa__intro { margin: clamp(16px, 2vw, 28px) 0 0; max-width: 30ch; font-size: clamp(1.1rem, 1.5vw, 1.55rem); font-weight: 300; line-height: 1.45; opacity: .92; }
.cosa__intro strong { font-weight: 800; color: var(--c-green); }
.cosa__griglia { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 32px); }
.iniz-card { position: relative; display: flex; flex-direction: column; height: 100%; padding: clamp(22px, 2.4vw, 36px); background: var(--c-cream); color: var(--c-dark); text-decoration: none; border-radius: 0 clamp(26px, 3vw, 48px) 0 clamp(26px, 3vw, 48px); box-shadow: 0 12px 28px rgba(0, 0, 0, .18); transition: transform var(--t-base) ease, box-shadow var(--t-base) ease; }
.iniz-card__disegno { display: flex; align-items: flex-end; justify-content: flex-start; height: clamp(48px, 4.2vw, 64px); margin-bottom: clamp(12px, 1.3vw, 18px); } /* piccoli, come un'icona sopra il numero */
.iniz-card__disegno svg { display: block; width: auto; height: 100%; max-width: 100%; transform-origin: left bottom; transition: transform var(--t-base) ease; }
.iniz-card__corpo { display: block; padding-right: clamp(54px, 5vw, 76px); }
.iniz-card__num { display: block; font-weight: 300; font-size: clamp(.9rem, 1vw, 1.05rem); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.iniz-card__titolo { display: block; margin-top: .1em; font-size: clamp(1.6rem, 2.4vw, 2.5rem); font-weight: 900; line-height: 1.05; }
.iniz-card__riga { display: block; margin-top: .45em; font-weight: 300; font-size: clamp(1rem, 1.15vw, 1.2rem); line-height: 1.4; }
.iniz-card .arrow-btn { position: absolute; right: clamp(18px, 2vw, 30px); bottom: clamp(18px, 2vw, 30px); width: clamp(46px, 4vw, 60px); margin: 0; }
.iniz-card:hover, .iniz-card:focus-visible { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(0, 0, 0, .26); }
.iniz-card:hover .iniz-card__disegno svg { transform: scale(1.05) rotate(-2deg); }
.iniz-card:hover .arrow-btn { transform: translateX(4px); }
.sez--scura .sez__intro { opacity: .9; }

/* ---------- 5. Cinque modi per contribuire: Dona grande a sinistra, eccedenze e volontario accanto;
   sotto, banchetti e Calendìmetri affiancati, metà pagina ciascuno ---------- */
.modi { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr); }
.modo--primo { border-top-width: 4px; }
.modi__coppia { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: inherit; }
.modo--primo .modo__titolo { font-size: clamp(1.9rem, 3vw, 3.2rem); }
.modo--primo .modo__testo { font-size: clamp(1.05rem, 1.35vw, 1.4rem); }

/* ---------- Schermi medi ---------- */
@media (max-width: 1024px) {
	.cosa { grid-template-columns: 1fr; }
	.cosa__testa { position: static; }
	.breve { grid-template-columns: 1fr; }
	.breve__testo { max-width: none; }
	.modi { grid-template-columns: 1fr; gap: 0; } /* serve qui: la regola a tre colonne sopra viene dopo proposta.css */
	.modo--primo { border-top-width: 1.5px; }
	.modi__coppia { grid-template-columns: 1fr; gap: 0; }
}

/* ---------- Telefono ---------- */
@media (max-width: 768px) {
	.numero__cifra { font-size: clamp(2.4rem, 11vw, 3.2rem); }

	.cosa { grid-template-columns: 1fr; }
	.cosa__testa { position: static; }
	.cosa__griglia { grid-template-columns: 1fr; gap: 14px; }
	.iniz-card { flex-direction: row; align-items: center; gap: 16px; padding: 16px 18px; }
	.iniz-card__disegno { flex: 0 0 52px; height: 42px; margin: 0; justify-content: center; }
	.iniz-card__disegno svg { max-width: 100%; }
	.iniz-card__corpo { padding-right: 0; }
	.iniz-card__titolo { font-size: clamp(1.3rem, 6vw, 1.6rem); }
	.iniz-card__riga { font-size: .95rem; margin-top: .25em; }
	.iniz-card .arrow-btn { display: none; }

	/* cinque modi su telefono: niente linee, le voci staccate dallo spazio (la base è in proposta.css) */
	.modi, .modi__coppia { gap: clamp(30px, 8vw, 40px); }
	.modo--primo { border-top: 0; }
}