/* Listing des evenements - Exoride
   ---------------------------------------------------------------------------
   Grille du listing agenda, des resultats de recherche et des listes de
   categories. La vignette elle-meme est habillee par eventgrid.min.css et
   peek-fade.css, partages avec le slider : on ne s'occupe ici que de la
   disposition.
   --------------------------------------------------------------------------- */

/* Separateur de mois, repris a l'identique de l'ancien gabarit : le libelle en
   pastille rouge, prolonge d'un filet jusqu'au bord. Il etait declare en CSS
   inline dans le fichier PHP ; il vit desormais ici, avec le reste. */
.eb-month-separator {
	display: flex;
	align-items: center;
	text-align: center;
	width: 100%;
	margin: 40px 0 20px;
}

.eb-month-separator span {
	padding: 5px 15px;
	border-radius: 4px;
	background: #bb022e;
	color: #fff;
	font-size: 1.5rem;
	font-weight: 700;
	text-transform: uppercase;
}

/* Un filet de chaque cote, tous deux extensibles a parts egales : le libelle se
   retrouve au centre de la ligne. L'ancien separateur n'avait qu'un filet a
   droite, ce qui plaquait le mois contre le bord gauche. */
.eb-month-separator::before,
.eb-month-separator::after {
	content: '';
	flex-grow: 1;
	flex-basis: 0;
	height: 2px;
	margin: 0 15px;
	background: #bb022e;
	font-size: 0;
	line-height: 0;
}

.exo-event-listing {
	display: grid;
	/* minmax(0, 1fr) et non 1fr : sans cela une vignette au contenu large
	   repousserait sa colonne au-dela du conteneur. */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
	align-items: start;
}

.exo-event-cell {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* Un sejour occupe la ligne entiere. Son image est la banniere de l'evenement,
   un 16:9 natif de 1920x1080 : aucun rapport n'est impose ici, elle garde le
   sien. C'est en la contraignant que je l'avais etiree. Le choix entre banniere
   et portrait est fait par le <picture> du gabarit de vignette, selon la
   largeur d'ecran. */
.exo-event-cell--sejour {
	grid-column: 1 / -1;
}

/* La banniere en 16:9 pleine largeur donnait une fiche de 608 px, contre 433
   pour une vignette classique : trop dominante quand un tiers du listing est
   fait de sejours. On la rogne en 21:9, ce qui ramene la hauteur autour de
   460 px - assez pour rester une mise en avant, sans ecraser le reste.

   La regle est reservee aux largeurs ou la banniere est effectivement affichee ;
   en dessous, <picture> a deja retenu le portrait et il ne faut rien contraindre. */
@media (min-width: 768px) {
	.exo-event-cell--sejour .eb-event-thumb {
		aspect-ratio: 21 / 9;
		object-fit: cover;
	}
}

/* Mentions MTB / EMTB. La rangee est repartie en space-around, ce qui convient a
   la largeur d'une vignette classique - 98 px, donc 7 px entre les deux - mais
   les eloigne de 131 px sur un sejour, dont la colonne fait 343 px. On les
   centre avec le meme ecart qu'ailleurs.

   !important est necessaire : la regle space-around est posee en style en ligne
   par le gabarit de vignette, et primerait sinon. */
.exo-event-cell--sejour .eb-bike-types {
	justify-content: center !important;
	gap: 7px;
}

@media (max-width: 1199px) {
	.exo-event-listing {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Telephone : une colonne, et le sejour revient au format commun. Le <picture>
   y retient l'image portrait, donc la fiche retrouve d'elle-meme la hauteur des
   autres - rien a corriger en CSS. */
@media (max-width: 767px) {
	.exo-event-listing {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.25rem;
	}

	.exo-event-cell--sejour {
		grid-column: auto;
	}
}