/* ─── Gallery (Swiss-style photographic grid) ──────────── */

/* A text-free, continuously-scrolling grid of big photos at varying sizes
   and ratios. Each tile carries a large mono index number bottom-left.
   Images cover their tile (object-fit, the modern background-size: cover),
   lazy-load via gallery.js, and gently fade in on load. Prefix: .gallery-*. */

.gallery										{	--gallery-gap: 6px; }


/* ─── 1. Hero ──────────────────────────────────────────── */

/* Full-bleed photo band: image covers, dual scrim darkens for legibility,
   two-tone display headline anchored lower-left, vertical geo-coords right. */

.gallery-hero									{	position: relative; isolation: isolate;
													display: flex; align-items: flex-end;
													min-height: clamp(420px, 70vh, 760px);
													overflow: hidden;
													background: var(--color-ink-0);

	.gallery-hero-img							{	position: absolute; inset: 0; z-index: 0;
													width: 100%; height: 100%;
													object-fit: cover; object-position: center 35%;
													filter: contrast(1.05) brightness(0.92);
													opacity: 0; transform: scale(1.04);
													animation: gallery-hero-in 900ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
	}

	/* Layer 1: bottom + left gradient scrim so the headline always reads. */
	&::after									{	content: ""; position: absolute; inset: 0; z-index: 1;
													background:
														linear-gradient(0deg, rgba(5, 6, 6, 0.85) 0%, rgba(5, 6, 6, 0.15) 45%, transparent 70%),
														linear-gradient(90deg, rgba(5, 6, 6, 0.55) 0%, transparent 45%);
													pointer-events: none;
	}

	.gallery-hero-overlay						{	position: relative; z-index: 2;
													padding: clamp(2.5em, 7vw, 6em) var(--shell-pad) clamp(2em, 5vw, 4em);
													max-width: 30ch;
	}

	.eyebrow									{	color: var(--color-brand); }

	.cfu-display-hero							{	margin: 0; width: 30rem; }

	.gallery-hero-coords						{	position: absolute; right: 1em; top: 50%; z-index: 2;
													transform: translateY(-50%);
													writing-mode: vertical-rl; margin: 0;
													font-family: var(--font-mono); font-size: 11px;
													letter-spacing: var(--track-mono); color: var(--color-brand);
													pointer-events: none;
	}
}

@keyframes gallery-hero-in {
	to											{	opacity: 1; transform: scale(1); }
}


/* ─── 2. Grid ──────────────────────────────────────────── */

/* 12-column Swiss grid; tiles claim column spans + an aspect-ratio per their
   layout modifier. Dense auto-flow packs mixed sizes without gaps. */

.gallery-grid									{	display: grid;
													grid-template-columns: repeat(12, 1fr);
													grid-auto-flow: dense;
													gap: var(--gallery-gap);
													counter-reset: gallery;
													background: var(--color-ink-1);
}

.gallery-tile									{	position: relative; isolation: isolate;
													counter-increment: gallery;
													grid-column: span 6;
													aspect-ratio: 4 / 3;
													margin: 0; overflow: hidden;
													background: var(--color-ink-2);

	img											{	position: absolute; inset: 0;
													width: 100%; height: 100%;
													object-fit: cover;
													filter: contrast(1.04) brightness(0.96);
													opacity: 0; transform: translateY(14px) scale(1.02);
													transition: opacity 600ms ease, transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
	}

	img.is-loaded								{	opacity: 1; transform: translateY(0) scale(1); }

	/* Bottom-left scrim so the index number reads on bright frames. */
	&::before									{	content: ""; position: absolute; inset: auto 0 0 0; z-index: 1;
													height: 45%;
													background: linear-gradient(0deg, rgba(5, 6, 6, 0.65) 0%, transparent 100%);
													pointer-events: none;
	}

	/* Big mono index number, bottom-left (01, 02, 03 ...). */
	&::after									{	content: counter(gallery, decimal-leading-zero);
													position: absolute; left: 0.5em; bottom: 0.25em; z-index: 2;
													font-family: var(--font-mono);
													font-size: clamp(1.75rem, 4vw, 3.5rem);
													font-weight: 500; line-height: 1;
													letter-spacing: var(--track-mono);
													color: var(--color-paper);
													text-shadow: 0 2px 18px rgba(5, 6, 6, 0.6);
													pointer-events: none;
	}

	/* Hover: subtle red wash, in keeping with the restrained motion brief. */
	&:hover img									{	filter: contrast(1.08) brightness(1); }
}

/* Layout modifiers — column span + ratio. */
.gallery-tile--full							{	grid-column: span 12; aspect-ratio: 16 / 7; }
.gallery-tile--wide							{	grid-column: span 8;  aspect-ratio: 3 / 2; }
.gallery-tile--half							{	grid-column: span 6;  aspect-ratio: 4 / 3; }
.gallery-tile--portrait						{	grid-column: span 6;  aspect-ratio: 4 / 5; }
.gallery-tile--tall							{	grid-column: span 4;  aspect-ratio: 3 / 4; }


/* ─── Responsive ───────────────────────────────────────── */

@media (max-width: 1100px) {
	.gallery-grid								{	grid-template-columns: repeat(6, 1fr); }

	.gallery-tile--full						{	grid-column: span 6; }
	.gallery-tile--wide						{	grid-column: span 6; }
	.gallery-tile--half						{	grid-column: span 6; }
	.gallery-tile--portrait					{	grid-column: span 3; }
	.gallery-tile--tall						{	grid-column: span 3; }
}

@media (max-width: 640px) {
	.gallery									{	--gallery-gap: 4px; }

	.gallery-tile--portrait					{	grid-column: span 6; }
	.gallery-tile--tall						{	grid-column: span 6; aspect-ratio: 3 / 4; }
}


/* ─── Reduced motion ───────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.gallery-hero .gallery-hero-img			{	animation: none; opacity: 1; transform: none; }
	.gallery-tile img						{	transition: opacity 200ms ease; transform: none; }
	.gallery-tile img.is-loaded				{	transform: none; }
}