/**
 * Bloc : Grille Évènements (ri-grille-evenements)
 */

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

.ri-grille-evenements .container {
	display: flex;
	flex-direction: column;
	gap: 48px;
}

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

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

.ri-grille-evenements .titre {
	margin: 0;
	font: 700 var(--ri-size-title-h2) / 1.4 var(--ri-font-1);
	color: var(--ri-color-teal);
	max-width: 450px;
}

/* ========================================
   Grille 2 colonnes
   ======================================== */

.ri-grille-evenements .grille {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}

/* ========================================
   Carte évènement — styles dans card-evenement.css
   ======================================== */

/* ========================================
   Lien archive
   ======================================== */

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

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

@media (max-width: 1150px) {

	.ri-grille-evenements .grille {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 782px) {

	.ri-grille-evenements .grille {
		gap: 16px;
	}

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

/* ========================================
   Placeholder éditeur
   ======================================== */

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