/**
 * Cartes secteurs — une liste sans boîte ni cadre. Photo en tête,
 * titre et texte en dessous. Pas de numérotation : ce sont des secteurs,
 * pas des étapes.
 *
 * Le style porte sur .wp-block-column et non sur une classe à poser à la
 * main : une colonne ajoutée depuis l'éditeur devient une carte sans autre
 * intervention. Seule la classe du bloc de colonnes compte.
 */

.wp-block-columns.cards-numbered {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(var(--card-min, 18rem), 100%), 1fr));
	gap: var(--space-3xl) var(--space-2xl);
	margin-block: 0;
}

/* Densité explicite : six secteurs sur deux rangées de trois. */
.wp-block-columns.cards-numbered.cards-numbered--3 {
	grid-template-columns: repeat(3, 1fr);
}

.wp-block-columns.cards-numbered.cards-numbered--2 {
	grid-template-columns: repeat(2, 1fr);
}

.cards-numbered > .wp-block-column {
	/* Le bloc natif calcule des bases en pourcentage pour un rang flex ;
	   en grille elles fausseraient la répartition des pistes. */
	flex-basis: auto !important;
	display: flex;
	flex-direction: column;
	padding: 0;
	transition: border-color var(--duration-base) var(--ease);
}

.cards-numbered > .wp-block-column > .placeholder-media,
.cards-numbered > .wp-block-column > .wp-block-image {
	margin: var(--space-md) 0 var(--space-sm);
}

.cards-numbered > .wp-block-column > .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.cards-numbered > .wp-block-column > :is(h2, h3, h4) {
	font-size: var(--font-size-xl);
	margin-block-start: var(--space-md);
}

.cards-numbered > .wp-block-column > :is(h2, h3, h4):first-child {
	margin-block-start: 0;
}

.cards-numbered > .wp-block-column > p {
	margin-block-start: var(--space-sm);
}

/* L'état de survol n'apparaît que si la carte mène quelque part. */
.cards-numbered > .wp-block-column:has(a):hover,
.cards-numbered > .wp-block-column:focus-within {
	border-color: var(--color-accent);
}

@media (max-width: 767px) {
	.wp-block-columns.cards-numbered {
		gap: var(--space-2xl);
	}
}

@media (max-width: 1023px) {
	.wp-block-columns.cards-numbered.cards-numbered--3 {
		grid-template-columns: repeat(2, 1fr);
	}

	.wp-block-columns.cards-numbered.cards-numbered--2 {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 479px) {
	.wp-block-columns.cards-numbered.cards-numbered--3 {
		grid-template-columns: 1fr;
	}
}