/*
 * Les réalisations : la page /inspirations et la page d'une réalisation.
 * Balisage : inc/realisations.php. Pas de maquette avant l'intégration :
 * planches dessinées après (p8.py). Cartes de réalisation :
 * pel-inspiration-card, css/evenement.css ; cartes produit : css/carte.css ;
 * étiquettes du filtre : pel-tag, css/elements.css.
 */

/* --- La page /inspirations ------------------------------------------------------- */
.pel-inspirations__titre,
.pel-realisation__titre {
	margin: var(--pel-space-s) 0;
	font-size: var(--pel-fs-display);
	line-height: var(--pel-lh-titre);
}

.pel-inspirations__intro,
.pel-realisation__intro {
	max-width: calc(var(--pel-container) * 0.55);
	margin: 0 0 var(--pel-space-m);
	color: var(--pel-encre-douce);
	line-height: var(--pel-lh-texte);
}

.pel-inspirations__filtre {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pel-space-xs);
	margin: 0 0 var(--pel-space-m);
}

/* Les grilles de cartes : trois colonnes, comme sur la page mariage. */
.pel-inspirations__grille {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--pel-space-m);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* --- Une réalisation ------------------------------------------------------------- */
.pel-realisation__ligne {
	margin: 0;
	color: var(--pel-encre-douce);
	font-weight: 600;
}

/* Le texte et la galerie, posés dans l'éditeur de WordPress. */
.pel-realisation__texte {
	max-width: calc(var(--pel-container) * 0.75);
	line-height: var(--pel-lh-texte);
}

.pel-realisation__texte img {
	max-width: 100%;
	height: auto;
	border-radius: var(--pel-radius-m);
}

.pel-realisation__articles {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--pel-space-m);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 991px) {
	.pel-inspirations__grille,
	.pel-realisation__articles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.pel-inspirations__grille {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 478px) {
	.pel-realisation__articles {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --- Vue en situation, sur la fiche (planche E2, issue 186) --------------------- */
/* [pel_vue_en_situation] : les réalisations où l'article a servi. Photos : pel-photo, css/photo.css. */
.pel-situation {
	scroll-margin-top: calc(var(--header-h, var(--pel-entete-h)) + var(--pel-space-s));
}

.pel-situation__titre-section {
	margin: 0 0 var(--pel-space-2xs);
}

.pel-situation__intro {
	max-width: calc(var(--pel-container) * 0.55);
	margin: 0 0 var(--pel-space-m);
	color: var(--pel-encre-douce);
	line-height: var(--pel-lh-texte);
}

.pel-situation__realisation {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--pel-space-2xs);
	padding: var(--pel-space-s);
	border: var(--pel-filet) solid var(--pel-lin);
	border-radius: var(--pel-radius-l);
	background: var(--pel-blanc);
}

/* Les photos : une grande à gauche, deux empilées à droite ; moins de trois, elles se partagent la ligne. */
.pel-situation__photos {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	grid-template-rows: repeat(2, minmax(0, 1fr));
	gap: var(--pel-space-xs);
	width: 100%;
	aspect-ratio: 5 / 2;
	margin-bottom: var(--pel-space-xs);
}

.pel-situation__photo--haute {
	grid-row: span 2;
}

.pel-situation__photos--1 {
	grid-template-columns: minmax(0, 1fr);
}

.pel-situation__photos--2 {
	grid-template-rows: minmax(0, 1fr);
}

.pel-situation__titre {
	margin: 0;
	padding-inline: var(--pel-space-2xs);
}

.pel-situation__ligne {
	margin: 0;
	padding-inline: var(--pel-space-2xs);
	color: var(--pel-encre-douce);
	font-size: var(--pel-fs-small);
}

.pel-situation__lien {
	display: inline-flex;
	align-items: center;
	min-height: var(--pel-cible);
	padding-inline: var(--pel-space-2xs);
}

.pel-situation__liste {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--pel-space-m);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 767px) {
	/* La grande photo sur toute la largeur, les deux autres côte à côte dessous. */
	.pel-situation__photos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: auto;
		aspect-ratio: auto;
	}

	.pel-situation__photo {
		aspect-ratio: 4 / 3;
	}

	/* La première passe en pleine largeur, et perd ses deux rangs. */
	.pel-situation__photo--premiere {
		grid-column: 1 / -1;
		aspect-ratio: 3 / 2;
	}

	.pel-situation__photo--haute {
		grid-row: auto;
	}

	.pel-situation__liste {
		grid-template-columns: minmax(0, 1fr);
	}
}