/*
 * se-gallery
 *
 * Figma Gallery 2026 158:232. The film block, a line of text filters, then the
 * mosaic: a 120 column grid at a 6px gap, edge to edge, no container and no
 * rounded corners. Every band in the frame adds up to 120 columns, so the rows
 * land on the exact widths the design sets at any viewport.
 */

.se-gallery {
	background: var(--se-black);
}

/* ------------------------------------------------------------------ film */

.se-gallery__film {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(30rem, 52.08vw, 62.5rem);
	overflow: hidden;
	background: var(--se-night);
}

.se-gallery__film-media {
	position: absolute;
	inset: 0;
}

.se-gallery__film-media .se-shade-top {
	height: 34%;
}

.se-gallery__film-shade {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	height: 76%;
	background: linear-gradient(
		180deg,
		rgba(11, 10, 9, 0) 0%,
		rgba(11, 10, 9, 0.42) 34%,
		rgba(11, 10, 9, 0.84) 70%,
		var(--se-black) 100%
	);
	pointer-events: none;
}

.se-gallery__film-inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: clamp(1.5rem, 3vw, 4rem);
	width: 100%;
	padding-block-end: clamp(2.5rem, 4.375vw, 5.25rem);
}

.se-gallery__film-eyebrow {
	margin: 0 0 clamp(0.75rem, 1.04vw, 1.25rem);
	font-size: clamp(0.75rem, 0.78vw, 0.9375rem);
	letter-spacing: 0.1em;
	color: var(--se-bone);
}

.se-gallery__film-title {
	display: flex;
	flex-direction: column;
	margin: 0;
	margin-inline-start: -0.03em;
	font-family: var(--se-font-display);
	font-weight: 900;
	font-size: clamp(2.5rem, 11.98vw, 14.375rem);
	line-height: 0.87;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--se-bone);
}

.se-gallery__film-line,
.se-gallery__film-line > .se-line,
.se-gallery__film-title .se-line {
	display: block;
}

/* ------------------------------------------------------------ play ring */

.se-gallery__play {
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: clamp(0.75rem, 1.15vw, 1.375rem);
	padding: 0;
	background: none;
	border: 0;
	color: var(--se-bone);
	cursor: pointer;
}

.se-gallery__play-label {
	font-size: clamp(0.75rem, 0.78vw, 0.9375rem);
	letter-spacing: 0.1em;
	color: var(--se-bone);
	transition: color var(--se-dur) var(--se-ease);
}

.se-gallery__ring {
	display: block;
	width: clamp(4.5rem, 7.81vw, 9.375rem);
	height: clamp(4.5rem, 7.81vw, 9.375rem);
	transition: transform 320ms var(--se-ease), color var(--se-dur) var(--se-ease);
}

.se-gallery__ring svg {
	display: block;
	width: 100%;
	height: 100%;
}

.se-gallery__play:hover .se-gallery__ring,
.se-gallery__play:focus-visible .se-gallery__ring {
	transform: scale(1.06);
	color: var(--se-red-hot);
}

.se-gallery__play:hover .se-gallery__play-label {
	color: var(--se-red-hot);
}

.se-gallery__play:focus-visible {
	outline: 2px solid var(--se-red-hot);
	outline-offset: 6px;
}

/* --------------------------------------------------------------- filters */

.se-gallery__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding-block: clamp(1.5rem, 2.81vw, 3.375rem);
}

.se-gallery__filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(1.25rem, 2.4vw, 2.875rem);
}

.se-gallery__filter {
	padding: 0;
	background: none;
	border: 0;
	font-family: var(--se-font-display);
	font-weight: 700;
	font-size: clamp(1.125rem, 1.46vw, 1.75rem);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	/* QA-MOBILE: 0.45 measured 4.05:1 on black at 18px, which is small text
	   under AA. 0.55 reads the same way beside the active filter and is 5.56:1. */
	color: rgba(243, 238, 229, 0.55);
	cursor: pointer;
	transition: color var(--se-dur) var(--se-ease);
}

.se-gallery__filter:hover {
	color: var(--se-bone);
}

.se-gallery__filter.is-active {
	/* QA-MOBILE: 18px red, so the AA safe red rather than --se-red-hot. */
	color: var(--se-red-text);
}

.se-gallery__filter:focus-visible {
	outline: 2px solid var(--se-red-hot);
	outline-offset: 4px;
}

.se-gallery__count {
	flex: none;
	margin: 0;
	color: var(--se-grey);
}

/* ---------------------------------------------------------------- mosaic */

.se-gallery__mosaic {
	display: grid;
	/* QA-MOBILE: 1fr is minmax(auto, 1fr), so a track can grow past its share to
	   fit its content. At 768 that pushed the last tile of a four across row 6px
	   off the screen. minmax(0, 1fr) holds every track to its share. */
	grid-template-columns: repeat(120, minmax(0, 1fr));
	gap: 0.375rem;
	align-items: stretch;
}

.se-gallery__item {
	position: relative;
	grid-column: span var(--se-span, 40);
	aspect-ratio: var(--se-ar, 3 / 2);
	padding: 0;
	overflow: hidden;
	background: var(--se-night);
	border: 0;
	cursor: pointer;
	isolation: isolate;
}

body.se-site .se-gallery__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 700ms var(--se-ease);
}

.se-gallery__item:hover .se-gallery__img,
.se-gallery__item:focus-visible .se-gallery__img {
	transform: scale(1.04);
}

.se-gallery__item:focus-visible {
	outline: 2px solid var(--se-red-hot);
	outline-offset: -2px;
}

.se-gallery__hover {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	display: flex;
	align-items: center;
	height: clamp(2.5rem, 3.02vw, 3.625rem);
	padding-inline: clamp(1rem, 1.35vw, 1.625rem);
	background: linear-gradient(180deg, rgba(11, 10, 9, 0) 0%, rgba(11, 10, 9, 0.75) 100%);
	color: var(--se-bone);
	opacity: 0;
	transform: translateY(0.5rem);
	transition: opacity 240ms var(--se-ease), transform 240ms var(--se-ease);
	pointer-events: none;
}

.se-gallery__item:hover .se-gallery__hover,
.se-gallery__item:focus-visible .se-gallery__hover {
	opacity: 1;
	transform: translateY(0);
}

/* ------------------------------------------------------ nested columns */

.se-gallery__col {
	grid-column: span var(--se-span, 40);
	min-height: 0;
}

.se-gallery__col--pair {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.se-gallery__col--quad {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: repeat(2, minmax(0, 1fr));
	gap: 0.375rem;
}

.se-gallery__col .se-gallery__item {
	grid-column: auto;
	aspect-ratio: auto;
	min-height: 0;
}

.se-gallery__col--pair > .se-gallery__item {
	flex: 1 1 0;
}

/* ----------------------------------------------------- filtered and more */

.se-gallery__item.is-extra,
.se-gallery__item.is-out {
	display: none;
}

/*
 * QA-MOBILE: "Load more" is a script. With the script blocked the button does
 * nothing, so the photographs it would reveal must already be on the page. The
 * whole set prints, and the button hides itself instead.
 */
html:not(.se-js) .se-gallery__item.is-extra,
html:not(.se-js) .se-gallery__item.is-out {
	display: block;
}

html:not(.se-js) .se-gallery__more {
	display: none;
}

.se-gallery__mosaic.is-filtered .se-gallery__col {
	display: contents;
}

/* While a filter is on, every matching photograph shows, loaded or not. */
.se-gallery__mosaic.is-filtered .se-gallery__item.is-extra:not(.is-out) {
	display: block;
}

.se-gallery__mosaic.is-filtered .se-gallery__item {
	grid-column: span 30;
	aspect-ratio: 3 / 2;
	min-height: 0;
	animation: se-gallery-in 420ms var(--se-ease) both;
}

@keyframes se-gallery-in {
	from {
		opacity: 0;
		transform: translateY(0.75rem);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* ------------------------------------------------------------- load more */

.se-gallery__more {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(1.25rem, 1.88vw, 2.25rem);
	padding-block: clamp(3rem, 5vw, 6rem) clamp(3.5rem, 5.42vw, 6.5rem);
}

.se-gallery__more-btn {
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}

/* .se-link sets display, which would beat the browser's own [hidden] rule. */
.se-gallery__more-btn[hidden] {
	display: none;
}

.se-gallery__credit {
	margin: 0;
	/* QA-MOBILE: was --se-grey-dark, 2.81:1 on black at 12px. */
	color: var(--se-grey);
	text-align: center;
}

/* ------------------------------------------------------- small viewports */

@media (max-width: 1023px) {
	.se-gallery__film-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 2rem;
	}

	.se-gallery__play {
		flex-direction: row-reverse;
		align-items: center;
		gap: 1rem;
	}

	.se-gallery__ring {
		width: 3.5rem;
		height: 3.5rem;
	}
}

/*
 * QA-MOBILE: the 120 track mosaic needs room for its tracks to mean anything.
 * At 768 the 119 six pixel gaps take 714 of the 768, leaving 0.44px per track,
 * and the rounding across 120 of them pushed the last tile of one row six
 * pixels off the screen. Below 1024 the mosaic runs on a plain equal column
 * grid instead: three across on a tablet, two on a phone as SPEC-3 3.4 asks.
 */
@media (max-width: 1023px) {
	.se-gallery__mosaic {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.se-gallery__mosaic .se-gallery__col {
		display: contents;
	}

	.se-gallery__mosaic .se-gallery__item {
		grid-column: auto;
		aspect-ratio: 3 / 2;
	}

	.se-gallery__mosaic .se-gallery__item[style*="--se-ar: 1920"],
	.se-gallery__mosaic .se-gallery__item[style*="--se-ar:1920"] {
		grid-column: span 2;
	}
}

@media (max-width: 767px) {
	/* Two column mosaic, per SPEC-3 section 3.4. */
	.se-gallery__mosaic {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.se-gallery__bar {
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
	}

	.se-gallery__filters {
		width: 100%;
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.se-gallery__filters::-webkit-scrollbar {
		display: none;
	}

	.se-gallery__filter {
		white-space: nowrap;
	}
}

@media (prefers-reduced-motion: reduce) {
	.se-gallery__img,
	.se-gallery__hover,
	.se-gallery__ring {
		transition: none;
	}

	/*
	 * base.css forces `[data-se-reveal] > *` to opacity 1 under reduced motion,
	 * which would pin the hover caption open on every photograph. Put it back,
	 * at a specificity that beats that rule.
	 */
	body.se-site .se-gallery__item .se-gallery__hover {
		opacity: 0 !important;
	}

	body.se-site .se-gallery__item:hover .se-gallery__hover,
	body.se-site .se-gallery__item:focus-visible .se-gallery__hover {
		opacity: 1 !important;
	}

	.se-gallery__mosaic.is-filtered .se-gallery__item {
		animation: none;
	}
}

@media (max-width: 767px) {
	.se-gallery__film-title {
		font-size: clamp(2.25rem, 15vw, 4.5rem);
	}

	.se-gallery__filter {
		font-size: clamp(1rem, 5vw, 1.375rem);
	}
}