/*
 * blocks/media-col-grid.css — colonnes image + texte incrusté (titre/desc en bas).
 * Complète guest.css, ne redéfinit aucune primitive existante.
 */

.media-col {
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
	aspect-ratio: 3 / 4;
	display: flex;
	align-items: flex-start;
}
.media-col img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}
.media-col::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(16,23,19,.88) 0%, rgba(16,23,19,.45) 42%, rgba(16,23,19,.05) 68%);
	z-index: 1;
}
.media-col__body { position: relative; z-index: 2; padding: var(--s6); }
.media-col__body .eyebrow { background: rgba(216,255,84,.16); }
.media-col__title { margin-top: var(--s4); color: #fff; }
.media-col__desc { margin-top: var(--s2); color: rgba(255,255,255,.85); }

.media-col--warn .media-col__body .eyebrow { background: rgba(217,103,74,.22); color: #ff9d81; }

/* Variante fond noir dégradé pour l'en-tête de section (usage optionnel, prop $dark) */
.section--dark-grad { background: radial-gradient(900px 460px at 50% -15%, rgba(216,255,84,.16), transparent 60%), var(--ink); color: #fff; }
.section--dark-grad .eyebrow { background: rgba(216,255,84,.14); color: var(--signal); }
.section--dark-grad h2 { color: #fff; }