/**
 * Carte regard croisé — arrêt sur image puis bloc de texte coloré.
 *
 * Figma : carte 398 × 512 px, visuel 232 px (45 %), corps 280 px (55 %).
 * La hauteur n'est jamais fixée ici : les cartes s'égalisent via la piste du
 * carousel, ce qui absorbe les extraits de longueurs différentes.
 *
 * Emplacement : assets/css/components/card-regard.css
 */

.card-regard {
	/* width autant que height : la carte est posée dans un conteneur flex qui
	   lui laisse sa largeur de colonne, mais sans cette déclaration elle se
	   dimensionne sur son contenu. Une photographie étroite rétrécissait alors
	   toute la carte, et la rangée perdait son alignement. */
	width: 100%;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background-color: var(--color-surface);
	border-radius: var(--radius-lg);
}

/* ── Visuel ────────────────────────────────────────────────── */

/* flex: none + min-height: 0 : sans eux la zone s'étire à la hauteur
   intrinsèque de l'image et l'aspect-ratio n'est plus respecté. */
.card-regard__media {
	flex: none;
	min-height: 0;
	aspect-ratio: 398 / 232;   /* proportions Figma */
	overflow: hidden;
}

.card-regard__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ── Bloc coloré ───────────────────────────────────────────── */

.card-regard__corps {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-4);
	padding: var(--space-6) var(--space-5);
	text-align: center;
}

.card-regard__titre {
	font-size: var(--fs-lead);        /* Figma : 20 px */
	line-height: var(--lh-heading);
	text-transform: uppercase;
	color: var(--color-text-inverse);
}

.card-regard__desc {
	font-size: var(--fs-body);        /* Figma : 16 px */
	line-height: var(--lh-heading);
	color: var(--color-text-inverse);
}

.card-regard__bouton {
	align-self: center;
	margin-block-start: auto;   /* collé au bas, quelle que soit la longueur du texte */
}

/* ── Variantes de couleur ──────────────────────────────────── */

.card-regard--orange .card-regard__corps {
	background-color: var(--card-orange-bg);
}

.card-regard--gold .card-regard__corps {
	background-color: var(--card-gold-bg);
}

.card-regard--green .card-regard__corps {
	background-color: var(--card-green-bg);
}