/*--------------------------------------------------------------
## Grille d'articles

Reprend la maquette validée avec Léa : toutes les images au même format,
recadrées plutôt que déformées, le titre plafonné à deux lignes et l'extrait
à trois, de sorte que les cartes gardent la même hauteur quelle que soit la
longueur des textes saisis.

Sans ces plafonds, la page d'accueil affichait trois cartes de 788, 562 et
492px pour trois ratios d'image différents, dont un portrait.

Le contenu reste au module `post-grid` de Beaver Builder : tout ce qui suit
est du style. Son CSS par nœud est chargé après cette feuille, d'où la classe
du module répétée dans les sélecteurs.
--------------------------------------------------------------*/

:root {
	--grille-or: #BC8E4E;
	--grille-ink: #23252B;
	--grille-soft: rgba(35, 37, 43, .62);
	--grille-hair: rgba(35, 37, 43, .12);
	--grille-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ===== La grille ===== */

.fl-module-post-grid.fl-module-post-grid .fl-post-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px;
	margin: 0;
}

/* Le « Read our articles » qui suit touchait le bas des cartes. Les hauteurs
   inégales masquaient le problème : le bouton tombait sous la carte la plus
   longue, donc loin des deux autres. Une fois les cartes alignées, il n'avait
   plus rien devant lui.

   Les 40px sont ceux de la section FAQ, entre sa dernière question et son
   propre bouton. */
.fl-module-post-grid.fl-module-post-grid > .fl-module-content {
	margin-bottom: 40px;
}

/* Le clearfix du module, `content: " "; display: table`, devient un élément
   de grille dès que le conteneur passe en `display: grid` : il prend la
   première cellule et décale les trois cartes d'un cran. */
.fl-module-post-grid.fl-module-post-grid .fl-post-grid:before,
.fl-module-post-grid.fl-module-post-grid .fl-post-grid:after {
	display: none;
}

.fl-module-post-grid.fl-module-post-grid .fl-post-column {
	width: auto;
	float: none;
	padding: 0;
}

.fl-module-post-grid.fl-module-post-grid .fl-post-grid-post {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

/* ===== L'image =====
Un cadre fixe au lieu du format du fichier : les trois textes démarrent à la
même hauteur, et une photo verticale ne fait plus descendre sa carte de 300px
sous les autres. */

.fl-module-post-grid.fl-module-post-grid .fl-post-grid-image {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	margin: 0 0 22px;
	background: rgba(35, 37, 43, .06);
}

/* Le lien est posé en absolu plutôt qu'en `height: 100%` : une hauteur en
   pourcentage se résout contre une hauteur déclarée, or le cadre tient la
   sienne d'un `aspect-ratio`. La chaîne cassait, et deux images sur trois
   gardaient leur hauteur d'origine au lieu de remplir. */
.fl-module-post-grid.fl-module-post-grid .fl-post-grid-image a {
	position: absolute;
	inset: 0;
	display: block;
}

/* Beaver Builder pose `height: auto !important` sur ces images : seul un
   `!important` le lève, et sans lui l'image garde sa hauteur d'origine au
   lieu de couvrir son cadre. */
.fl-module-post-grid.fl-module-post-grid .fl-post-grid-image img {
	display: block;
	width: 100%;
	height: 100% !important;
}

.fl-module-post-grid.fl-module-post-grid .fl-post-grid-image img {
	object-fit: cover;
	transition: transform .6s var(--grille-ease);
}

.fl-module-post-grid.fl-module-post-grid .fl-post-grid-post:hover .fl-post-grid-image img {
	transform: scale(1.04);
}

/* ===== Le texte =====
Le module rend le titre avant la date : l'ordre est inversé ici, la date
servant de surtitre comme les kickers du header. */

.fl-module-post-grid.fl-module-post-grid .fl-post-grid-text {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 0;
}

.fl-module-post-grid.fl-module-post-grid .fl-post-grid-meta {
	order: -1;
	margin: 0 0 14px;
	padding: 0;
	border: 0;
}

.fl-module-post-grid.fl-module-post-grid .fl-post-grid-date {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 1.1rem;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: .2em;
	color: var(--grille-or);
}

.fl-module-post-grid.fl-module-post-grid .fl-post-grid-title {
	margin: 0 0 14px;
	font-family: 'Prata', serif;
	font-size: 2.1rem;
	font-weight: 400;
	line-height: 1.3;
	/* deux lignes au plus : au-delà, les cartes se décalent les unes des
	   autres et la grille perd sa ligne de base */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.fl-module-post-grid.fl-module-post-grid .fl-post-grid-title a {
	color: var(--grille-ink);
	text-decoration: none;
	transition: color .3s var(--grille-ease);
}

/* Toute la carte devient cliquable, sans imbriquer de lien : le lien du titre
   s'étire par-dessus. Les autres liens de la carte restent au-dessus de lui. */
.fl-module-post-grid.fl-module-post-grid .fl-post-grid-title a:after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.fl-module-post-grid.fl-module-post-grid .fl-post-grid-post:hover .fl-post-grid-title a {
	color: var(--grille-or);
}

/* Les extraits font deux ou trois lignes selon l'article. Sans l'étirement,
   l'invite de lecture suivait la dernière ligne et les trois cartes
   l'affichaient à trois hauteurs différentes. */
.fl-module-post-grid.fl-module-post-grid .fl-post-grid-content {
	position: relative;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 0;
}

.fl-module-post-grid.fl-module-post-grid .fl-post-grid-content p {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 1.5rem;
	font-weight: 300;
	line-height: 1.65;
	color: var(--grille-soft);
	margin: 0 0 20px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* L'invitation à lire, posée en fin de carte. Elle n'existe pas dans le
   markup du module : c'est le lien du titre, étiré ci-dessus, qui la rend
   cliquable. */
.fl-module-post-grid.fl-module-post-grid .fl-post-grid-content:after {
	content: "Read the article";
	display: inline-block;
	/* cale l'invite sur le bas de la carte, quelle que soit la longueur de
	   l'extrait : les trois s'alignent sur la même ligne */
	margin-top: auto;
	align-self: flex-start;
	padding-right: 28px;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 1.2rem;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--grille-ink);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 8' fill='none'%3E%3Cpath d='M0 4h16M13 1l3 3-3 3' stroke='%2323252B'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right center;
	background-size: 18px 8px;
	transition: color .3s var(--grille-ease), background-position .3s var(--grille-ease);
}

.fl-module-post-grid.fl-module-post-grid .fl-post-grid-post:hover .fl-post-grid-content:after {
	color: var(--grille-or);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 8' fill='none'%3E%3Cpath d='M0 4h16M13 1l3 3-3 3' stroke='%23BC8E4E'/%3E%3C/svg%3E");
	background-position: right 5px center;
}

/* ===== Responsive ===== */
@media screen and (max-width: 1000px) {
	.fl-module-post-grid.fl-module-post-grid .fl-post-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media screen and (max-width: 640px) {
	.fl-module-post-grid.fl-module-post-grid .fl-post-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 36px;
	}
}