/**
 * Componente: archivi — griglia di card degli articoli e conteggio delle colonne della
 * griglia dei progetti.
 *
 * Caricato su category/tag/author/date, sull'indice, sull'archivio dei progetti e sulle
 * tassonomie (inc/enqueue.php). La paginazione **non** è qui: sta in
 * assets/css/blocks/core-query.css, perché serve anche alla ricerca, che questo foglio
 * non lo carica.
 *
 * Misure da docs/baseline/components/categoria-radio.json e categoria-news.json: 4 colonne
 * da 1200px, 3 fino a 1199, 2 fino a 991, 1 sotto, gutter 30px.
 *
 * Una differenza di meccanismo, non di misura: in produzione le card hanno tutte la stessa
 * altezza perché uno script la impone (`js--post-grid`), qui si pareggiano per riga
 * (DEVIATIONS).
 */

/* -------------------------------------------------------------------------- */
/*  Griglia                                                                   */
/* -------------------------------------------------------------------------- */
.skuola-articoli .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 30px;
	padding: 0;
	list-style: none;
}

@media (max-width: 1199px) {
	.skuola-articoli .wp-block-post-template {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 991px) {
	.skuola-articoli .wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.skuola-articoli .wp-block-post-template {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* -------------------------------------------------------------------------- */
/*  Card                                                                      */
/* -------------------------------------------------------------------------- */
.skuola-archivio-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border-radius: 6px;
	background-color: var(--wp--preset--color--white);
}

/* L'area dell'immagine resta alta anche senza immagine: in produzione la pareggia uno script, qui
   il rapporto 3:2 del contenitore. Su `radio` sette articoli su dieci non ce l'hanno. */
.skuola-archivio-card__img {
	aspect-ratio: 3 / 2;
	overflow: hidden;
}

.skuola-archivio-card__img .wp-block-post-featured-image,
.skuola-archivio-card__img img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
}

.skuola-archivio-card__cnt {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 40px;
}

/* Pastiglia della categoria: sta a cavallo del bordo dell'immagine. */
.skuola-archivio-card__cat {
	position: absolute;
	top: -13px;
	left: 30px;
	margin: 0;
	font-size: 0;
}

.skuola-archivio-card__cat a {
	display: inline-block;
	padding: 7px 10px;
	border-radius: 24px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 12px;
	font-weight: 400;
	line-height: 12px;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	color: var(--wp--preset--color--white);
	background-color: var(--wp--preset--color--badge);
	text-decoration: none;
	transition: background-color 0.4s;
}

.skuola-archivio-card__cat a:hover {
	background-color: var(--wp--custom--link--hover);
}

.skuola-archivio-card__h {
	margin: 0 0 20px;
	font-size: 20px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: -0.4px;
}

.skuola-archivio-card__h a {
	color: var(--wp--preset--color--heading);
	text-decoration: none;
}

.skuola-archivio-card__h a:hover {
	color: var(--wp--preset--color--primary);
}

.skuola-archivio-card__txt {
	margin: 0;
	font-size: var(--wp--preset--font-size--30);
	line-height: 26px;
	color: var(--wp--preset--color--body);
}

/* `core/post-excerpt` avvolge il testo in un `<p>`: senza questa riga si somma il margine dei
   paragrafi e la card cresce di 25px. */
.skuola-archivio-card__txt p {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

/* `margin-top: auto` invece di `position: absolute`: la data resta in fondo alla card senza dover
   conoscere in anticipo l'altezza. */
.skuola-archivio-card__data {
	margin: auto 0 0;
	padding-top: 40px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--30);
	line-height: 14px;
	letter-spacing: -0.28px;
	color: var(--wp--preset--color--muted);
}

/* -------------------------------------------------------------------------- */
/*  Griglia dei progetti in archivio                                          */
/* -------------------------------------------------------------------------- */
/* `melinda_options[projects--columns] = 3`: archivio e tassonomie mostrano tre colonne, mentre
   `case-history` — che è uno shortcode con la sua opzione — ne mostra quattro. */
.skuola-progetti.is-archivio .wp-block-post-template {
	column-count: 3;
}

@media (max-width: 991px) {
	.skuola-progetti.is-archivio .wp-block-post-template {
		column-count: 2;
	}
}

@media (max-width: 767px) {
	.skuola-progetti.is-archivio .wp-block-post-template {
		column-count: 1;
	}
}