/* ==========================================================================
   CRÉA — Portfolio
   Chargée uniquement sur le portfolio (voir inc/enqueue.php).

   Les primitives partagées — motifs, en-tête éditorial, mouvements, citation,
   étapes — vivent dans components.css : elles servent aussi à la page À
   propos. Il ne reste ici que la galerie et ses vignettes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Galerie éditoriale
   Rythme alterné plutôt qu'une grille uniforme : deux grands formats en tête
   de chaque série de cinq, puis des décalages verticaux pour que la grille
   cesse d'être une ligne d'alignement.
   -------------------------------------------------------------------------- */

@media (min-width: 1000px) {
	.crea-portfolio-grid--edito {
		grid-template-columns: repeat(6, 1fr);
		gap: clamp(1.5rem, .5rem + 2vw, 3rem);
		align-items: start;
	}
	.crea-portfolio-grid--edito > * { grid-column: span 2; }

	.crea-portfolio-grid--edito > :nth-child(5n + 1),
	.crea-portfolio-grid--edito > :nth-child(5n + 2) { grid-column: span 3; }

	.crea-portfolio-grid--edito > :nth-child(5n + 2) { margin-top: var(--crea-sp-8); }
	.crea-portfolio-grid--edito > :nth-child(5n + 4) { margin-top: var(--crea-sp-6); }
}

/*
 * .crea-piece__media est un <a>, donc inline par défaut : sans display block,
 * position et overflow ne tiennent pas de façon fiable et le voile déborde.
 */
.crea-piece__media { display: block; }
.crea-piece__media .crea-split__placeholder { display: block; }

/* Voile au survol, pour asseoir la légende */
.crea-piece__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 28, 64, .34), transparent 46%);
	opacity: 0;
	transition: opacity var(--crea-dur) var(--crea-ease);
	pointer-events: none;
}
.crea-piece:hover .crea-piece__media::after { opacity: 1; }

/* Numéro d'inventaire */
.crea-piece__index {
	position: absolute;
	top: var(--crea-sp-4);
	left: var(--crea-sp-4);
	z-index: 1;
	padding: .3rem .65rem;
	background: rgba(251, 246, 236, .93);
	color: var(--crea-navy);
	font-size: var(--crea-fs-micro);
	letter-spacing: .16em;
}