/* ============================================================
   Bandi e contributi (home) - trascrizione di components.css
   (.iniziative-intro, .iniziative-cards, .bando-card,
   .bando-cat, .bando-desc, .news-more) dell'HTML di
   riferimento, dove la sezione ha id="iniziative" e il titolo
   visibile "Bandi e contributi".
   .news-link sta in style.css: e' condiviso con il carosello.
   ============================================================ */

.iniziative-intro {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px 24px;
	text-align: left;
	margin-bottom: 48px;
}

.iniziative-intro h2 {
	font-size: clamp(1.8rem, 4vw, 2.8rem);
	line-height: 1.2;
}

.news-more {
	margin-top: 28px;
	text-align: center;
}

.iniziative-intro .news-more {
	text-align: left;
	margin-top: 0;
}

.news-more .news-link {
	font-size: 1rem;
}

.iniziative-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	align-items: stretch;
}

/* La card e' la voce della griglia, e si veste come tale.
   Non .bando-card: quella classe la mette post_class(), che in pagina gira ma
   nell'anteprima dell'editor no - agganciarsi a lei voleva dire scrivere ogni
   regola due volte. Il <li> invece c'e' da entrambe le parti. .bando-card
   resta come appiglio per reveal.js e per i filtri, che leggono le classi. */
.iniziative-cards > li {
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border-line);
	border-radius: var(--wp--custom--radius-lg);
	padding: 40px 32px;
	min-height: 420px;
	transition: border-color var(--wp--custom--transition);
	/* ancora per il link a tutta card: vedi .bando-card h3 a::after */
	position: relative;
}

.iniziative-cards > li:hover {
	border-color: var(--wp--preset--color--text-base);
}

.bando-cat {
	font-size: .95rem;
	color: var(--wp--preset--color--text-base);
	margin-bottom: 14px;
}

/* theme.json colora i titoli di verde: qui il riferimento li vuole neri */
.iniziative-cards > li h3 {
	font-size: clamp(1.5rem, 2.4vw, 2.1rem);
	font-weight: 500;
	line-height: 1.05;
	color: var(--wp--preset--color--text-base);
}

/* Niente tetto di righe su titolo e testo: vanno letti per intero, anche
   quando il bando e' lungo. La card cresce di conseguenza, e le sorelle
   della stessa riga la seguono per via di align-items: stretch sulla
   griglia; min-height: 420px resta il pavimento quando il testo e' corto. */

/* Nel riferimento tutta la card e' un <a>. Con i blocchi core il link sta sul
   titolo e si estende all'intera card: stessa area cliccabile, e il nome
   accessibile del link resta il titolo del bando. E' anche il motivo per cui
   ai titoli delle card non serve il padding che allarga l'area cliccabile
   dei link piccoli: qui l'area e' gia' tutta la card. */
.iniziative-cards > li h3 a::after {
	content: '';
	position: absolute;
	inset: 0;
}

.bando-desc {
	margin-top: auto;
	padding-top: 48px;
	font-size: 1rem;
	color: var(--wp--preset--color--text-base);
	line-height: 1.45;
}

/* ─── RESPONSIVE ─────────────────────────────────────── */

/* Su telefono il testo parte subito sotto il titolo.
   Nel riferimento .bando-desc ha margin-top: auto e padding-top: 48px: su
   desktop l'auto si risolve a zero, perche' il testo riempie la card, e fra
   titolo e prima riga restano i 48px del padding. In colonna singola invece la
   card resta alta 420px con poco testo, l'auto diventa una quarantina di pixel
   e il distacco arriva a quasi novanta. Qui l'auto si spegne, il padding scende
   ai 14px che separano gia' categoria e titolo, e la card torna alta quanto il
   suo contenuto. Divergenza voluta dal proprietario. */
@media (max-width: 720px) {
	.iniziative-cards > li {
		min-height: 0;
	}

	.bando-desc {
		margin-top: 0;
		padding-top: 14px;
	}
}

@media (max-width: 960px) {
	.iniziative-cards {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}