/**
 * Bloc : Cartes hover (ri-cartes-hover)
 * Toutes les cartes identiques au repos, état hover révèle description + lien.
 */

/* ========================================
   Base
   ======================================== */

.ri-cartes-hover {
	width: 100%;
	padding-block: var(--ri-block-padding-xl);
	background-color: var(--ri-color-grey-soft);
}

.ri-cartes-hover .titre {
	margin: 0 0 var(--ri-space-xl);
	font: 700 24px / 140% var(--ri-font-1);
	max-width: var(--ri-container-narrow);
}

/* ========================================
   Grille
   ======================================== */

.ri-cartes-hover .grille {
	display: flex;
	gap: 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ========================================
   Carte — état repos
   ======================================== */

.ri-cartes-hover .carte {
	flex: 1 1 0;
	min-width: 0;
	height: 500px;
	overflow: hidden;
	background-color: var(--ri-color-teal);
	transition: background-color 0.4s ease;
}

.ri-cartes-hover .carte-inner {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 100%;
	padding: 16px;
}

.ri-cartes-hover .carte-bottom {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.ri-cartes-hover .carte-item {
	margin: 0;
	padding-bottom: 0;
	font: 700 36px / 1 var(--ri-font-2);
	color: var(--ri-color-grey-soft);
	transition: color 0.4s ease, padding-bottom 0.45s ease;
}

/* ========================================
   Hover reveal — description + lien
   ======================================== */

.ri-cartes-hover .carte-hover {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.45s ease;
	overflow: hidden;
}

.ri-cartes-hover .carte-hover-inner {
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding-bottom: 4px;
}

.ri-cartes-hover .carte:hover .carte-hover,
.ri-cartes-hover .carte:focus-within .carte-hover {
	grid-template-rows: 1fr;
}

/* ========================================
   Hover — couleurs
   ======================================== */

.ri-cartes-hover .carte:hover,
.ri-cartes-hover .carte:focus-within {
	background-color: var(--ri-color-yellow);
}

.ri-cartes-hover .carte:hover .carte-item,
.ri-cartes-hover .carte:focus-within .carte-item {
	padding-bottom: 24px;
	color: var(--ri-color-teal);
}

.ri-cartes-hover .carte-description {
	margin: 0;
	font: 400 16px / 170% var(--ri-font-1);
	color: var(--ri-color-grey-soft);
	transition: color 0.4s ease;
}

.ri-cartes-hover .carte:hover .carte-description,
.ri-cartes-hover .carte:focus-within .carte-description {
	color: var(--ri-color-teal);
}

/* Repos (fond teal) : wrapper et lien en gris-soft */
.ri-cartes-hover .carte-lien-wrapper {
	color: var(--ri-color-grey-soft);
}

.ri-cartes-hover .carte-lien-wrapper .ri-link-cta {
	text-decoration-color: var(--ri-color-grey-soft);
	transition: color 0.4s ease, text-decoration-color 0.4s ease;
}

/* Hover carte (fond jaune) : wrapper et lien en teal */
.ri-cartes-hover .carte:hover .carte-lien-wrapper,
.ri-cartes-hover .carte:focus-within .carte-lien-wrapper {
	color: var(--ri-color-teal);
}

.ri-cartes-hover .carte:hover .carte-lien-wrapper .ri-link-cta,
.ri-cartes-hover .carte:focus-within .carte-lien-wrapper .ri-link-cta {
	text-decoration-color: var(--ri-color-teal);
}

/* ========================================
   Responsive
   ======================================== */

@media (max-width: 1024px) {

	.ri-cartes-hover .grille {
		flex-wrap: wrap;
	}

	.ri-cartes-hover .carte {
		flex: 1 1 calc(50% - 12px);
		height: 400px;
	}
}

@media (max-width: 782px) {

	.ri-cartes-hover .grille {
		flex-direction: column;
	}

	/* Repos : teal — hover fonctionne normalement (jaune) */
	.ri-cartes-hover .carte {
		display: flex;
		flex-direction: column;
		flex: none;
		height: auto;
		min-height: 220px;
		background-color: var(--ri-color-teal);
	}

	.ri-cartes-hover .carte-inner {
		flex: 1;
		height: auto;
		justify-content: flex-end;
	}

	.ri-cartes-hover .carte-item {
		font-size: 28px;
	}

	/* carte-hover toujours ouvert : affiche le lien */
	.ri-cartes-hover .carte .carte-hover,
	.ri-cartes-hover .carte:hover .carte-hover,
	.ri-cartes-hover .carte:focus-within .carte-hover {
		grid-template-rows: 1fr;
		transition: none;
	}

	/* Padding du titre fixe sur mobile (pas d'animation) */
	.ri-cartes-hover .carte .carte-item,
	.ri-cartes-hover .carte:hover .carte-item,
	.ri-cartes-hover .carte:focus-within .carte-item {
		padding-bottom: 16px;
	}

	/* Description masquée sur mobile */
	.ri-cartes-hover .carte-description {
		display: none;
	}

	.ri-cartes-hover .carte-hover-inner {
		gap: 0;
	}
}

/* ========================================
   Placeholder (éditeur)
   ======================================== */

.ri-cartes-hover.is-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 200px;
	padding: var(--ri-space-lg);
	background-color: var(--ri-color-grey-soft);
	border: 2px dashed var(--ri-color-teal);
	text-align: center;
}