/* ==========================================================================
   Les Arts s'en Mêlent : galeries photos (shortcode [asm_galerie], plugin ASM Festival)
   Rangées justifiées sans recadrage : chaque photo prend une largeur proportionnelle
   à son format (--ar, posé par le shortcode), toutes les photos d'une rangée ont la
   même hauteur. Cadres façon sticker, ombres aux couleurs de la charte.
   ========================================================================== */

.asm-galerie {
	--asm-galerie-h: 250px;   /* hauteur visée des rangées */
	--asm-galerie-gap: 18px;
	--asm-galerie-bw: 3px;    /* épaisseur du cadre */
	--asm-galerie-border: var(--asm-anthracite, #333232);
	width: 100%;
}

.asm-galerie__grid {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--asm-galerie-gap);
}

/* Dernière rangée : garde la taille naturelle des photos (asm-galerie.js la centre ou l'étire selon son remplissage) */
.asm-galerie__grid::after {
	content: "";
	flex-grow: 1000000;
}
.asm-galerie--remplie .asm-galerie__grid::after,
.asm-galerie--centre .asm-galerie__grid::after { display: none; }
.asm-galerie--centre .asm-galerie__grid { justify-content: center; }
.asm-galerie--centre .asm-galerie__item.asm-galerie__item--fin { flex-grow: 0; }

.asm-galerie .asm-galerie__item {
	--asm-c: var(--asm-jaune, #FFB900);
	position: relative;
	display: block;
	flex-grow: var(--g, 100);
	flex-shrink: 1;
	/* largeur de base = format × hauteur, plus le cadre, pour que toutes les photos d'une rangée aient la même hauteur */
	flex-basis: calc(var(--ar, 1.5) * var(--asm-galerie-h) + 2 * var(--asm-galerie-bw));
	min-width: 0;
	border: var(--asm-galerie-bw) solid var(--asm-galerie-border);
	border-radius: 16px;
	overflow: hidden;
	background: var(--asm-anthracite, #333232);
	box-shadow: 6px 6px 0 var(--asm-c);
	transition: transform .25s var(--asm-ease, ease), box-shadow .25s ease;
}
.asm-galerie .asm-galerie__item:nth-child(5n+2) { --asm-c: var(--asm-rose, #F395D0); }
.asm-galerie .asm-galerie__item:nth-child(5n+3) { --asm-c: var(--asm-vert, #0ED69E); }
.asm-galerie .asm-galerie__item:nth-child(5n+4) { --asm-c: var(--asm-lavande, #A896FE); }
.asm-galerie .asm-galerie__item:nth-child(5n+5) { --asm-c: var(--asm-rouge, #ED5C43); }

.asm-galerie .asm-galerie__item img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--ar, 1.5);
	object-fit: cover;
	border-radius: 0;
	transition: transform .5s ease;
}

.asm-galerie .asm-galerie__item:hover,
.asm-galerie .asm-galerie__item:focus-visible {
	z-index: 2;
	transform: translate(-3px, -3px) rotate(-1deg);
	box-shadow: 9px 9px 0 var(--asm-c);
}
.asm-galerie .asm-galerie__item:nth-child(even):hover,
.asm-galerie .asm-galerie__item:nth-child(even):focus-visible { transform: translate(-3px, -3px) rotate(1deg); }
.asm-galerie .asm-galerie__item:hover img { transform: scale(1.04); }
.asm-galerie .asm-galerie__item:focus-visible { outline: 3px solid var(--asm-jaune, #FFB900); outline-offset: 3px; }

.asm-galerie__credit {
	margin: 20px 0 0;
	font-size: 12px;
	line-height: 1.4;
	letter-spacing: .02em;
	text-align: right;
	opacity: .7;
}
.asm-galerie--credit-gauche .asm-galerie__credit { text-align: left; }

/* Sur fond sombre (fiche artiste) : cadre et texte crème */
.asm-artist .asm-galerie,
.asm-galerie--sombre {
	--asm-galerie-border: var(--asm-creme, #F4F2E7);
	color: var(--asm-creme, #F4F2E7);
}

/* Fiche artiste : le bloc « Le concert en images » disparaît quand l'artiste n'a pas de photos live */
.asm-artist__live:not(:has(.asm-galerie__item)) { display: none !important; }

@media (max-width: 1024px) {
	.asm-galerie { --asm-galerie-h: 200px; --asm-galerie-gap: 16px; }
}
@media (max-width: 767px) {
	.asm-galerie { --asm-galerie-h: 130px; --asm-galerie-gap: 12px; --asm-galerie-bw: 2px; }
	.asm-galerie .asm-galerie__item { border-radius: 12px; box-shadow: 4px 4px 0 var(--asm-c); }
	.asm-galerie .asm-galerie__item:hover,
	.asm-galerie .asm-galerie__item:focus-visible { box-shadow: 6px 6px 0 var(--asm-c); }
	.asm-galerie__credit { margin-top: 14px; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
	.asm-galerie .asm-galerie__item,
	.asm-galerie .asm-galerie__item img { transition: none; }
	.asm-galerie .asm-galerie__item:hover,
	.asm-galerie .asm-galerie__item:nth-child(even):hover,
	.asm-galerie .asm-galerie__item:hover img { transform: none; }
}