/**
 * Bloc : Texte & Image (ri-text-image)
 * Convention : Classe complète sur la section, classes courtes scopées dedans.
 * Utilise les variables globales de root.css (--ri-*)
 */

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

.ri-texte-image {
	width: 100%;
	padding-block: var(--ri-block-padding-xl);
	background-color: var(--ri-color-white);
}

/* Le conteneur utilise .ri-container de root.css */
.ri-texte-image > .ri-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr auto;
	grid-template-areas:
		"content media"
		"link    media";
	gap: 24px;
}

/* ========================================
   Colonne Texte
   ======================================== */

.ri-texte-image .content {
	grid-area: content;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.ri-single-post .ri-texte-image .content {
	justify-content: center;
}

.ri-texte-image .title {
	margin: 0;
	font: 700 var(--ri-size-title-h2) / 1.4 var(--ri-font-1);
}

.ri-texte-image .title p {
	margin: 0;
}

.ri-texte-image .title strong {
	color: var(--ri-color-yellow);
	font-weight: inherit;
}

.ri-texte-image .description {
	font: 400 var(--ri-size-text-body) / 1.5 var(--ri-font-1);
}

.ri-texte-image .description p:first-child {
	margin-top: 0;
}

.ri-texte-image .description p:last-child {
	margin-bottom: 0;
}

.ri-texte-image .link-wrapper {
	grid-area: link;
	padding-top: 40px;
}

/* ========================================
   Colonne Image
   ======================================== */

.ri-texte-image .media {
	grid-area: media;
	position: relative;
	align-self: stretch;
	overflow: hidden;
}

.ri-texte-image .figure {
	margin: 0;
	overflow: hidden;
	height: 100%;
}

.ri-texte-image .img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ========================================
   Variantes de fond
   ======================================== */

/* Couleur de texte sélectionnée dans l'inspecteur Gutenberg */
.ri-texte-image.has-text-color .title,
.ri-texte-image.has-text-color .description,
.ri-texte-image.has-text-color .link-arrow,
.ri-texte-image.has-text-color .link {
	color: inherit;
}

.ri-texte-image.has-color-2-background-color .title,
.ri-texte-image.has-color-2-background-color .description,
.ri-texte-image.has-color-2-background-color .link-arrow,
.ri-texte-image.has-color-2-background-color .link {
	color: var(--ri-color-violet-light);
}

.ri-texte-image.has-color-2-background-color .link:hover {
	text-decoration-color: var(--ri-color-violet-light);
}

.ri-texte-image.has-text-1-background-color {
	color: var(--ri-color-white);
}

.ri-texte-image.has-text-1-background-color .link:hover {
	text-decoration-color: var(--ri-color-white);
}

/* ========================================
   Modificateurs
   ======================================== */

/* Inversé : Image à gauche, texte à droite */
.ri-texte-image.is-inversed > .ri-container {
	grid-template-areas:
		"media content"
		"media link";
}

/* ========================================
   Spé : #contact-responsable
   Image (étroite, barre jaune) à gauche, texte à droite.
   ======================================== */

#contact-responsable.ri-texte-image {
	background-color: var(--ri-color-grey-soft);
}

/* Colonnes asymétriques : image étroite / texte large */
#contact-responsable.ri-texte-image > .ri-container {
	grid-template-columns: minmax(0, 417px) 1fr;
	grid-template-areas:
		"media content"
		"media link";
	gap: var(--ri-space-2xl);
	align-items: center;
}

#contact-responsable.ri-texte-image .content {
	justify-content: center;
}

/* Barre d'accent jaune le long de l'image */
#contact-responsable.ri-texte-image .media {
	border-left: 9px solid var(--ri-color-yellow);
}

#contact-responsable.ri-texte-image .link-wrapper {
	padding-top: 0;
}

/* Bouton jaune plein à la place du lien-flèche */
#contact-responsable.ri-texte-image .link-arrow {
	display: none;
}

#contact-responsable.ri-texte-image .link {
	display: inline-block;
	padding: 12px 16px;
	background-color: var(--ri-color-yellow);
	font: 700 var(--ri-size-text-body-sm) / 1.4 var(--ri-font-1);
	text-align: center;
	text-decoration: none;
	transition: background-color var(--ri-transition-base);
}

#contact-responsable.ri-texte-image .link:hover {
	background-color: color-mix(in srgb, var(--ri-color-yellow) 85%, var(--ri-color-black));
}

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

@media (max-width: 782px) {

	.ri-texte-image > .ri-container {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		grid-template-areas:
			"content"
			"media"
			"link";
		gap: 24px;
		max-width: 100%;
	}

	.ri-texte-image.is-inversed > .ri-container {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		grid-template-areas:
			"media"
			"content"
			"link";
		gap: 24px;
		max-width: 100%;
	}

	.ri-texte-image .media {
		align-self: auto;
	}

	.ri-texte-image .figure {
		height: auto;
	}

	.ri-texte-image .img {
		height: auto;
	}

	.ri-texte-image .link-wrapper {
		padding-top: 0;
	}

	/* Spé #contact-responsable : empilage image puis texte */
	#contact-responsable.ri-texte-image > .ri-container {
		grid-template-columns: 1fr;
		grid-template-areas:
			"media"
			"content"
			"link";
		gap: var(--ri-space-md);
	}
}

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

.ri-texte-image.is-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 200px;
	padding: var(--ri-space-lg);
	background-color: var(--ri-color-grey-light);
	border: 2px dashed var(--ri-color-gray);
	text-align: center;
	color: var(--ri-color-dark);
}