/**
 * Bloc « Fiches » — styles (front + éditeur).
 *
 * Convention : BEM (.tcg-fiches / .tcg-fiche__element--modifier).
 *
 * Disposition : conteneur pleine largeur, grille en flex-wrap centrée, 3 cartes
 * par ligne (desktop) → 2 (tablette) → 1 (mobile). Les cartes d'une même ligne
 * ont toujours la même hauteur (align stretch + corps en colonne, lien collé en
 * bas). Tout contenu reste dans la carte (overflow masqué + césure des mots).
 *
 * RÈGLE COULEURS : aucune couleur en dur. Tout vient des variables de palette
 * du thème (var(--wp--preset--color--*)). Les nuances translucides (ombre,
 * description à 55 %) sont dérivées de la couleur de texte via color-mix().
 *
 * Les tokens absents du thème (rayon 16px, hauteur d'image 240px, gaps, ombre,
 * nombre de colonnes) sont définis en custom properties scopées au bloc.
 */

.tcg-fiches {
	--tcg-fiches-cols: 3;
	--tcg-fiches-gap: var(--wp--preset--spacing--30, 2rem);

	width: 100%;
}

/*
 * Cover à position de contenu personnalisée en haut à gauche : le cœur de WP
 * passe .wp-block-cover__inner-container en width:auto. On rétablit 100%.
 */
.wp-block-cover.has-custom-content-position.has-custom-content-position.is-position-top-left .wp-block-cover__inner-container {
	width: 100% !important;
}

.tcg-fiches__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch; /* toutes les cartes d'une ligne à la même hauteur. */
	gap: var(--tcg-fiches-gap);
	width: 100%;
}

/* --------------------------------------------------------------------------
 * Carte
 * ----------------------------------------------------------------------- */
.tcg-fiche {
	/* --- Tokens scopés au bloc (absents du thème) --- */
	--tcg-fiche-radius: 16px;
	--tcg-fiche-img-height: 300px;
	--tcg-fiche-pad: var(--wp--preset--spacing--20, 1.5rem); /* 24px max */
	--tcg-fiche-gap: 2rem;        /* 32px : entre le texte et le lien */
	--tcg-fiche-text-gap: 0.5rem; /* 8px : entre titre et description */
	--tcg-fiche-muted: color-mix(in srgb, var(--wp--preset--color--contrast) 55%, var(--wp--preset--color--base));
	--tcg-fiche-shadow:
		0 4px 8px color-mix(in srgb, var(--wp--preset--color--contrast) 2%, transparent),
		0 6px 12px color-mix(in srgb, var(--wp--preset--color--contrast) 3%, transparent);

	/* Largeur : 3 par ligne en tenant compte des gouttières. flex-grow 1 → les
	   cartes prennent toute la place disponible, mais sont plafonnées à 360px
	   (max-width). Les lignes incomplètes restent centrées (justify-content).
	   min-width 0 autorise le rétrécissement sans débordement. */
	flex: 1 1 calc((100% - (var(--tcg-fiches-cols) - 1) * var(--tcg-fiches-gap)) / var(--tcg-fiches-cols));
	min-width: 0;
	max-width: 600px; /* largeur maximale de la carte. */

	position: relative; /* ancre le lien étiré (::after). */
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	overflow: hidden; /* aucun contenu ne dépasse de la carte. */
	background-color: var(--wp--preset--color--base);
	border-radius: var(--tcg-fiche-radius);
	box-shadow: var(--tcg-fiche-shadow);
	color: var(--wp--preset--color--contrast);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Affordance « cliquable » : léger soulèvement au survol. */
.tcg-fiche:has(.tcg-fiche__link):hover,
.tcg-fiche:focus-within {
	transform: translateY(-4px);
	box-shadow:
		0 8px 16px color-mix(in srgb, var(--wp--preset--color--contrast) 4%, transparent),
		0 12px 24px color-mix(in srgb, var(--wp--preset--color--contrast) 6%, transparent);
}

/* --------------------------------------------------------------------------
 * Image
 * ----------------------------------------------------------------------- */
.tcg-fiche__image {
	width: 100%;
	overflow: hidden;
}

.tcg-fiche__image img {
	display: block;
	width: 100%;
	max-height: var(--tcg-fiche-img-height); /* au minimum 240px de hauteur. */
	object-fit: cover; /* recadre l'image pour remplir la zone. */
}

/* --------------------------------------------------------------------------
 * Corps — en colonne, prend toute la hauteur restante pour coller le lien en bas.
 * ----------------------------------------------------------------------- */
.tcg-fiche__body {
	display: flex;
	flex: 1; /* occupe la hauteur restante → cartes de même hauteur alignées. */
	flex-direction: column;
	gap: var(--tcg-fiche-gap);
	width: 100%;
	padding: var(--tcg-fiche-pad);
	box-sizing: border-box;
}

.tcg-fiche__text {
	display: flex;
	flex-direction: column;
	gap: var(--tcg-fiche-text-gap);
}

.tcg-fiche__title,
.tcg-fiche__description,
.tcg-fiche__link {
	overflow-wrap: break-word; /* les mots longs ne débordent jamais. */
	word-break: break-word;
}

.tcg-fiche__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--contrast);
}

.tcg-fiche__description {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	line-height: 1.4;
	color: var(--tcg-fiche-muted);
}

/* --------------------------------------------------------------------------
 * Lien (appel à l'action) — toute la carte est cliquable, collé en bas.
 * ----------------------------------------------------------------------- */
.tcg-fiche__cta {
	margin: auto 0 0; /* pousse le lien en bas de la carte. */
}

.tcg-fiche__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	line-height: 1.45;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	transition: color 0.2s ease;
}

/* Flèche ajoutée automatiquement (translation au survol). */
.tcg-fiche__link::before {
	content: "\2192"; /* → */
	order: 1;
	transition: transform 0.25s ease;
}

.tcg-fiche:hover .tcg-fiche__link::before,
.tcg-fiche:focus-within .tcg-fiche__link::before {
	transform: translateX(4px);
}

/* Lien étiré : couvre toute la carte sans dupliquer de lien dans le DOM. */
.tcg-fiche__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.tcg-fiche__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* Au survol : passage en couleur primaire, sans soulignement. */
.tcg-fiche:hover .tcg-fiche__link,
.tcg-fiche__link:hover,
.tcg-fiche__link:focus-visible {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

/* --------------------------------------------------------------------------
 * Responsive : 3 → 2 → 1 colonne.
 * ----------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.tcg-fiches {
		--tcg-fiches-cols: 2;
	}
}

@media (max-width: 600px) {
	.tcg-fiches {
		--tcg-fiches-cols: 1;
	}
}