/**
 * Galerie de la fiche animal.
 *
 * Comme le reste du plugin, les couleurs sont lues dans les variables du thème
 * avec un repli codé en dur, pour que la galerie reste présentable si le thème
 * change un jour.
 */

.calinac-galerie {
	margin-block: 3rem 0;
}

.calinac-galerie__titre {
	margin: 0 0 0.35rem;
	font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem);
	color: var(--wp--preset--color--principale-tres-sombre, #213933);
}

/* Le seul vert lisible en petit corps sur blanc : #95C9BC plafonne à 3,06:1.
   Ici on reste sur le gris doux du thème, à 6,3:1. */
.calinac-galerie__aide {
	margin: 0 0 1.25rem;
	font-size: 0.9rem;
	color: var(--wp--preset--color--texte-doux, #656565);
}

/* Rien ici ne dépend de JavaScript, sauf la visionneuse. Sans elle, le bouton
   loupe n'ouvre plus rien et l'invitation à cliquer serait un mensonge : on
   masque les deux tant que la visionneuse n'a pas pris la main.
 *
   Le repère est le bouton lui-même. Le serveur le rend sans attribut `style` ;
   c'est l'API d'interactivité qui, une fois en route, y écrit sa position
   (`right`/`top`). Un bouton porteur d'un `style` est donc un bouton branché —
   un test que le CSS sait faire seul, sans qu'on ajoute la moindre ligne de
   script pour poser une classe. */
.calinac-galerie__aide,
.calinac-galerie__grille .lightbox-trigger:not([style]) {
	display: none;
}

.calinac-galerie:has(.lightbox-trigger[style]) .calinac-galerie__aide {
	display: block;
}

/* Grille fluide sans point de rupture : les colonnes se comptent toutes seules
   selon la largeur disponible, de quatre sur un écran large à une sur mobile.
   `auto-fill` et non `auto-fit` : les colonnes vides sont conservées, si bien
   que les deux photos des fiches détaillées gardent la taille qu'elles
   auraient eue à trois, au lieu de s'étirer sur toute la largeur et de
   dépasser la photo principale.
 *
   20rem par colonne, et non 15 : sur la trame à 84 rem, un minimum plus petit
   découpait la rangée en cinq colonnes et réduisait les deux photos à des
   vignettes perdues à gauche. */
.calinac-galerie__grille {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
	gap: 1.25rem;
}

/* Chaque photo est une carte blanche, dans le même vocabulaire que les cartes
   d'animaux : coins arrondis, bordure fine, ombre teintée de vert. */
.calinac-galerie__grille .wp-block-image {
	margin: 0;
	border-radius: 16px;
	border: 1px solid var(--wp--preset--color--bordure, #95C9BC);
	background: #FFFFFF;
	padding: 0;
	overflow: hidden;
	box-shadow: 0 1px 2px rgb(33 57 51 / 7%);
	transition:
		transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.calinac-galerie__grille .wp-block-image img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 0;
}

/* Le bloc image insère un conteneur autour de l'image quand la visionneuse est
   active ; il doit remplir la carte, sinon la photo se recroqueville. */
.calinac-galerie__grille .wp-lightbox-container {
	display: block;
	height: 100%;
}

.calinac-galerie__grille .wp-block-image:hover,
.calinac-galerie__grille .wp-block-image:focus-within {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgb(33 57 51 / 14%);
}

/* Le bouton loupe du cœur : on l'accorde à la charte plutôt que de le laisser
   en noir semi-transparent. */
.calinac-galerie__grille .lightbox-trigger {
	background: rgb(255 255 255 / 88%);
	border: 1px solid var(--wp--preset--color--bordure, #95C9BC);
	color: var(--wp--preset--color--principale-sombre, #487D70);
	transition: background 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.calinac-galerie__grille .lightbox-trigger:hover {
	background: #FFFFFF;
}

/* Focus visible : la bordure de la carte est claire, un liseré vert foncé
   doublé de blanc reste repérable quelle que soit la photo dessous. */
.calinac-galerie__grille .lightbox-trigger:focus-visible {
	outline: 3px solid var(--wp--preset--color--principale-sombre, #487D70);
	outline-offset: 2px;
}

.calinac-galerie__grille .wp-block-image:focus-within {
	outline: 3px solid var(--wp--preset--color--principale-sombre, #487D70);
	outline-offset: 2px;
}

/* Mouvement neutralisé : le survol garde son ombre, qui suffit à signaler
   l'interactivité, mais plus rien ne se déplace. */
@media (prefers-reduced-motion: reduce) {
	.calinac-galerie__grille .wp-block-image,
	.calinac-galerie__grille .lightbox-trigger {
		transition: none;
	}

	.calinac-galerie__grille .wp-block-image:hover,
	.calinac-galerie__grille .wp-block-image:focus-within {
		transform: none;
	}
}