/*
 * pel-photo — une photo d'événement réel, à une proportion fixe (issue 186,
 * planche E3). Balisage : inc/photo.php.
 *
 * --ambiance 3:2 : ouverture, réalisations, univers ; --portrait 4:5 :
 * détails de table ; --article 1:1 : packshots, sur fond blanc ; --libre :
 * la case qui la contient décide de la hauteur (mosaïques).
 */

.pel-photo {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--pel-space-2xs);
	min-height: 0;
	margin: 0;
}

.pel-photo__image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--pel-radius-l);
	background: var(--pel-sable);
	object-fit: cover;
}

.pel-photo__image--ambiance {
	aspect-ratio: 3 / 2;
}

.pel-photo__image--portrait {
	aspect-ratio: 4 / 5;
}

.pel-photo__image--article {
	aspect-ratio: 1 / 1;
	background: var(--pel-blanc);
	object-fit: contain;
}

/* --libre : la photo remplit sa case, sans peser sur sa taille (la grille la décide). */
.pel-photo--libre {
	overflow: hidden;
	border-radius: var(--pel-radius-l);
}

.pel-photo__image--libre {
	position: absolute;
	inset: 0;
	height: 100%;
}

.pel-photo__legende {
	color: var(--pel-gris-chaud);
	font-size: var(--pel-fs-small);
	line-height: var(--pel-lh-texte);
}

/* --posee : la légende en pastille sur la photo (l'ouverture de l'accueil). */
.pel-photo__legende--posee {
	position: absolute;
	bottom: var(--pel-space-s);
	left: var(--pel-space-s);
	display: flex;
	align-items: center;
	box-sizing: border-box;
	max-width: calc(100% - 2 * var(--pel-space-s));
	min-height: var(--pel-cible);   /* la légende est un lien : cible de 44 px */
	padding: 0 var(--pel-space-s);
	border-radius: var(--pel-radius-pill);
	background: var(--pel-ivoire);
	color: var(--pel-encre);
	font-weight: 600;
}

.pel-photo__lien {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: var(--pel-soulignement);
}

/* Posée, la légende-lien occupe toute la pastille : la cible fait 44 px, pas la ligne de texte. */
.pel-photo__lien--posee {
	display: flex;
	align-items: center;
	min-height: var(--pel-cible);
}

.pel-photo__lien:hover {
	color: var(--pel-terre-foncee);
}

/* Mobile : la légende ne se pose plus sur la photo, elle passe dessous, en
   petite ligne discrète comme un crédit (#255, puis #272 : même réduite, la
   pastille gâchait la photo). Le lien garde une cible de 32 px. */
@media (max-width: 767px) {
	.pel-photo__legende--posee {
		position: static;
		display: block;
		max-width: none;
		min-height: 0;
		padding: 0;
		border-radius: 0;
		background: none;
		color: var(--pel-gris-chaud);
		font-size: var(--pel-fs-small);
		font-weight: 400;
		line-height: var(--pel-lh-texte);
	}

	.pel-photo__lien--posee {
		display: inline-flex;
		min-height: var(--pel-space-l);
		color: inherit;
	}
}

/* --- pel-galerie (#277) ------------------------------------------------------
   « En images » sur les pages des publics : une grande photo et quatre petites.
   Liste ul > li > img, posée dans Bricks avec des classes simples. Sur mobile,
   la grande photo en pleine largeur, puis deux colonnes. --duo : deux photos
   côte à côte (le showroom). */
.pel-galerie {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--pel-space-s);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pel-galerie__item {
	overflow: hidden;
	aspect-ratio: 1 / 1;
	border-radius: var(--pel-radius-m);
	background: var(--pel-sable);
}

.pel-galerie__item:first-child {
	grid-column: span 2;
	grid-row: span 2;
	aspect-ratio: auto;
}

.pel-galerie__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pel-galerie--duo {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pel-galerie--duo .pel-galerie__item,
.pel-galerie--duo .pel-galerie__item:first-child {
	grid-column: auto;
	grid-row: auto;
	aspect-ratio: 4 / 3;
}

@media (max-width: 767px) {
	.pel-galerie {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--pel-space-xs);
	}

	.pel-galerie__item:first-child {
		grid-row: auto;
		aspect-ratio: 3 / 2;
	}

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