/**
 * Bloc : Grille Talents (ri-grille-talents)
 * Convention : Classe complète sur la section, classes courtes scopées
 */

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

.ri-grille-talents {
	width: 100%;
	padding-block: var(--ri-block-padding-xl);
	overflow: hidden;
}

.ri-grille-talents .container {
	display: flex;
	flex-direction: column;
	gap: var(--ri-gap-lg);
}

/* ========================================
   En-tête
   ======================================== */

.ri-grille-talents .header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

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

/* ========================================
   Slider
   ======================================== */

.ri-grille-talents .slider-wrapper {
	display: flex;
	flex-direction: column;
	gap: 48px;
}

.ri-grille-talents .swiper {
	width: min(var(--ri-container-width), 100% - var(--ri-container-padding) * 2);
	margin-inline: auto;
	overflow: hidden;
}

.ri-grille-talents .swiper-slide {
	height: auto;
	width: calc((100% - 48px) / 3);
}

@media (max-width: 782px) {

	.ri-grille-talents .swiper {
		width: 100%;
		overflow: visible;
		margin-inline: 0;
	}

	.ri-grille-talents .slider-wrapper {
		gap: 20px;
	}

	.ri-grille-talents .swiper-slide {
		min-width: 280px;
		max-width: 80vw;
	}
}

/* ========================================
   Navigation : Pagination + Lien Archive
   ======================================== */


.ri-grille-talents .archive-link-wrapper {
	margin-left: auto;
}

.ri-grille-talents .archive-link {
	white-space: nowrap;
}

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

@media (max-width: 782px) {

	.ri-grille-talents .container {
		gap: var(--ri-gap-md);
	}
}

/* ========================================
   Placeholder
   ======================================== */

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