/* =========================================================
   GALLERY GRID
   ========================================================= */

.on-gallery-grid {
	position: relative;
	isolation: isolate;

	overflow: hidden;

	padding-block:
		clamp(
			5rem,
			7vw,
			8rem
		);

	color:
		var(--color-white, #ffffff);

	background:
		radial-gradient(
			circle at 50% -10rem,
			rgba(217, 180, 93, 0.055),
			transparent 34rem
		),
		linear-gradient(
			180deg,
			#080b0d 0%,
			#070a0c 100%
		);
}


/* =========================================================
   SUBTELNY GÓRNY AKCENT
   ========================================================= */

.on-gallery-grid::before {
	position: absolute;

	top: 0;
	left: 50%;

	width:
		min(
			46rem,
			75vw
		);

	height: 1px;

	content: "";

	pointer-events: none;

	background:
		linear-gradient(
			90deg,
			transparent,
			rgba(217, 180, 93, 0.42),
			transparent
		);

	transform:
		translateX(-50%);
}


/* =========================================================
   HEADER
   ========================================================= */

.on-gallery-grid__header {
	position: relative;

	max-width: 56rem;

	margin:
		0 auto
		clamp(
			3rem,
			5vw,
			4.75rem
		);

	text-align: center;
}


/* =========================================================
   EYEBROW
   ========================================================= */

.on-gallery-grid__eyebrow {
	display: flex;

	align-items: center;
	justify-content: center;

	gap: 0.8rem;

	margin:
		0 0
		1rem;

	color:
		var(--color-accent, #d9b45d);

	font-size: 0.72rem;
	font-weight: 800;

	line-height: 1;

	letter-spacing: 0.15em;

	text-transform: uppercase;
}


.on-gallery-grid__eyebrow::before,
.on-gallery-grid__eyebrow::after {
	width: 1.7rem;
	height: 1px;

	content: "";

	background:
		linear-gradient(
			90deg,
			transparent,
			rgba(217, 180, 93, 0.75)
		);
}


.on-gallery-grid__eyebrow::after {
	transform:
		scaleX(-1);
}


/* =========================================================
   TITLE
   ========================================================= */

.on-gallery-grid__title {
	margin: 0;

	color:
		var(--color-white, #ffffff);

	font-family:
		var(--font-heading, inherit);

	font-size:
		clamp(
			3rem,
			5vw,
			4.75rem
		);

	font-weight: 800;

	line-height: 0.96;

	letter-spacing: -0.055em;

	text-wrap: balance;
}


/* =========================================================
   INTRO
   ========================================================= */

.on-gallery-grid__intro {
	max-width: 43rem;

	margin:
		1.15rem auto 0;

	color:
		rgba(255, 255, 255, 0.52);

	font-size:
		clamp(
			0.92rem,
			1vw,
			1rem
		);

	line-height: 1.7;
}


.on-gallery-grid__intro > * {
	margin: 0;
}


/* =========================================================
   GRID CONTAINER
   ========================================================= */

.on-gallery-grid__items {
	position: relative;

	width: 100%;

	margin-inline: auto;
}


/* =========================================================
   EDITORIAL / BENTO DESKTOP
   ========================================================= */

.on-gallery-grid--editorial
.on-gallery-grid__items {
	display: grid;

	grid-template-columns:
		repeat(
			12,
			minmax(0, 1fr)
		);

	grid-auto-rows:
		clamp(
			4rem,
			4.6vw,
			5.25rem
		);

	grid-auto-flow: dense;

	gap:
		clamp(
			0.5rem,
			0.8vw,
			0.8rem
		);
}


/*
 * Pattern ma 10 zdjęć.
 *
 * Każdy zestaw domyka się bez pustych dziur.
 */


/* 1 — duże */

.on-gallery-grid--editorial
.on-gallery-grid__item:nth-child(10n + 1) {
	grid-column: span 7;
	grid-row: span 5;
}


/* 2 */

.on-gallery-grid--editorial
.on-gallery-grid__item:nth-child(10n + 2) {
	grid-column: span 5;
	grid-row: span 3;
}


/* 3 */

.on-gallery-grid--editorial
.on-gallery-grid__item:nth-child(10n + 3) {
	grid-column: span 5;
	grid-row: span 2;
}


/* 4 */

.on-gallery-grid--editorial
.on-gallery-grid__item:nth-child(10n + 4) {
	grid-column: span 4;
	grid-row: span 4;
}


/* 5 */

.on-gallery-grid--editorial
.on-gallery-grid__item:nth-child(10n + 5) {
	grid-column: span 8;
	grid-row: span 4;
}


/* 6 — duże po drugiej stronie */

.on-gallery-grid--editorial
.on-gallery-grid__item:nth-child(10n + 6) {
	grid-column: span 8;
	grid-row: span 5;
}


/* 7 */

.on-gallery-grid--editorial
.on-gallery-grid__item:nth-child(10n + 7) {
	grid-column: span 4;
	grid-row: span 3;
}


/* 8 */

.on-gallery-grid--editorial
.on-gallery-grid__item:nth-child(10n + 8) {
	grid-column: span 4;
	grid-row: span 2;
}


/* 9 */

.on-gallery-grid--editorial
.on-gallery-grid__item:nth-child(10n + 9) {
	grid-column: span 5;
	grid-row: span 4;
}


/* 10 */

.on-gallery-grid--editorial
.on-gallery-grid__item:nth-child(10n + 10) {
	grid-column: span 7;
	grid-row: span 4;
}


/* =========================================================
   UNIFORM
   ========================================================= */

.on-gallery-grid--uniform
.on-gallery-grid__items {
	display: grid;

	grid-template-columns:
		repeat(
			var(--gallery-columns, 3),
			minmax(0, 1fr)
		);

	gap:
		clamp(
			0.65rem,
			1vw,
			1rem
		);
}


.on-gallery-grid--uniform
.on-gallery-grid__item {
	aspect-ratio:
		4 / 3;
}


/* =========================================================
   CARD
   ========================================================= */

.on-gallery-grid__item {
	position: relative;
	isolation: isolate;

	min-width: 0;
	min-height: 0;

	margin: 0;

	overflow: hidden;

	border:
		1px solid
		rgba(255, 255, 255, 0.085);

	border-radius:
		clamp(
			0.35rem,
			0.55vw,
			0.6rem
		);

	background:
		#101416;

	box-shadow:
		0 1rem 3rem
		rgba(0, 0, 0, 0.12);

	transform:
		translateZ(0);

	transition:
		border-color 350ms ease,
		box-shadow 450ms ease;
}


/* =========================================================
   CINEMATIC OVERLAY
   ========================================================= */

.on-gallery-grid__item::after {
	position: absolute;

	z-index: 3;

	inset: 0;

	content: "";

	pointer-events: none;

	background:
		linear-gradient(
			0deg,
			rgba(5, 7, 8, 0.55) 0%,
			rgba(5, 7, 8, 0.04) 38%,
			transparent 70%
		);

	opacity: 0.28;

	transition:
		opacity 400ms ease;
}




/* =========================================================
   BUTTON
   ========================================================= */

.on-gallery-grid__button {
	position: relative;

	display: block;

	width: 100%;
	height: 100%;

	margin: 0;
	padding: 0;

	overflow: hidden;

	color: inherit;

	font: inherit;

	cursor: zoom-in;

	border: 0;

	border-radius: inherit;

	background: transparent;

	appearance: none;
	-webkit-appearance: none;
}


.on-gallery-grid__button:focus-visible {
	outline:
		2px solid
		var(--color-accent, #d9b45d);

	outline-offset:
		-3px;
}


/* =========================================================
   IMAGE
   ========================================================= */

.on-gallery-grid__image {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;

	transform:
		scale(1.005);

	filter:
		saturate(0.94)
		contrast(1.025);

	will-change: transform;

	transition:
		transform
			900ms
			cubic-bezier(
				0.22,
				1,
				0.36,
				1
			),

		filter
			500ms ease;
}


.on-gallery-grid__item >
.on-gallery-grid__image {
	position: absolute;

	inset: 0;
}


/* =========================================================
   DELIKATNA RÓŻNORODNOŚĆ CROPÓW
   ========================================================= */

.on-gallery-grid__item:nth-child(5n + 2)
.on-gallery-grid__image {
	object-position:
		55% center;
}


.on-gallery-grid__item:nth-child(7n + 3)
.on-gallery-grid__image {
	object-position:
		center 42%;
}


.on-gallery-grid__item:nth-child(9n + 5)
.on-gallery-grid__image {
	object-position:
		45% center;
}


/* =========================================================
   ZOOM BUTTON
   ========================================================= */

.on-gallery-grid__zoom {
	position: absolute;

	z-index: 6;

	top: 0.8rem;
	right: 0.8rem;

	display: grid;

	width: 2.65rem;
	height: 2.65rem;

	place-items: center;

	pointer-events: none;

	border:
		1px solid
		rgba(255, 255, 255, 0.2);

	border-radius: 0.4rem;

	background:
		rgba(7, 10, 12, 0.7);

	-webkit-backdrop-filter:
		blur(0.8rem);

	backdrop-filter:
		blur(0.8rem);

	opacity: 0;

	transform:
		translateY(0.4rem)
		scale(0.96);

	transition:
		opacity 280ms ease,
		transform 400ms
			cubic-bezier(
				0.22,
				1,
				0.36,
				1
			),

		border-color 300ms ease;
}


.on-gallery-grid__zoom-icon {
	position: relative;

	display: block;

	width: 0.9rem;
	height: 0.9rem;
}


.on-gallery-grid__zoom-icon::before,
.on-gallery-grid__zoom-icon::after {
	position: absolute;

	top: 50%;
	left: 50%;

	content: "";

	background:
		var(--color-accent, #d9b45d);

	transform:
		translate(-50%, -50%);
}


.on-gallery-grid__zoom-icon::before {
	width: 100%;
	height: 1px;
}


.on-gallery-grid__zoom-icon::after {
	width: 1px;
	height: 100%;
}


/* =========================================================
   CAPTION
   ========================================================= */

.on-gallery-grid__caption {
	position: absolute;

	z-index: 6;

	right: 1rem;
	bottom: 0.9rem;
	left: 1rem;

	margin: 0;

	color:
		rgba(255, 255, 255, 0.9);

	font-size: 0.72rem;
	font-weight: 600;

	line-height: 1.4;

	pointer-events: none;

	text-shadow:
		0 0.15rem 1rem
		rgba(0, 0, 0, 0.8);
}


/* =========================================================
   HOVER
   ========================================================= */

@media (hover: hover) {

	.on-gallery-grid__item:hover {
		border-color:
			rgba(217, 180, 93, 0.28);

		box-shadow:
			0 1.8rem 4.5rem
			rgba(0, 0, 0, 0.2);
	}


	.on-gallery-grid__item:hover::after {
		opacity: 0.72;
	}


	.on-gallery-grid__item:hover
	.on-gallery-grid__image {
		transform:
			scale(1.055);

		filter:
			saturate(1)
			contrast(1.04);
	}


	.on-gallery-grid__item:hover
	.on-gallery-grid__zoom {
		opacity: 1;

		transform:
			translateY(0)
			scale(1);

		border-color:
			rgba(217, 180, 93, 0.4);
	}

}


/* =========================================================
   TABLET
   ========================================================= */

@media
	(max-width: 64rem)
	and
	(min-width: 48rem) {

	.on-gallery-grid {
		padding-block:
			4.5rem 5.5rem;
	}


	.on-gallery-grid--editorial
	.on-gallery-grid__items {
		grid-template-columns:
			repeat(
				6,
				minmax(0, 1fr)
			);

		grid-auto-rows:
			clamp(
				4.5rem,
				8vw,
				6rem
			);
	}


	.on-gallery-grid--editorial
	.on-gallery-grid__item:nth-child(n) {
		grid-column:
			span 3;

		grid-row:
			span 3;
	}


	.on-gallery-grid--editorial
	.on-gallery-grid__item:nth-child(6n + 1) {
		grid-column:
			span 6;

		grid-row:
			span 4;
	}


	.on-gallery-grid--editorial
	.on-gallery-grid__item:nth-child(6n + 4) {
		grid-column:
			span 6;

		grid-row:
			span 3;
	}


	.on-gallery-grid--uniform
	.on-gallery-grid__items {
		grid-template-columns:
			repeat(
				2,
				minmax(0, 1fr)
			);
	}

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 47.99rem) {

	.on-gallery-grid {
		padding-block:
			3.75rem 4.5rem;
	}


	/* HEADER */

	.on-gallery-grid__header {
		margin-bottom:
			2.5rem;

		text-align: left;
	}


	.on-gallery-grid__eyebrow {
		justify-content:
			flex-start;

		gap: 0.55rem;

		font-size:
			0.65rem;
	}


	.on-gallery-grid__eyebrow::before {
		width: 1.4rem;
	}


	.on-gallery-grid__eyebrow::after {
		display: none;
	}


	.on-gallery-grid__title {
		max-width: 11ch;

		font-size:
			clamp(
				2.7rem,
				11.5vw,
				3.65rem
			);
	}


	.on-gallery-grid__intro {
		max-width: none;

		margin:
			0.9rem 0 0;

		font-size: 0.85rem;

		line-height: 1.6;
	}


	/* =====================================================
	   MOBILE BENTO
	   ===================================================== */

	.on-gallery-grid--editorial
	.on-gallery-grid__items {
		grid-template-columns:
			repeat(
				2,
				minmax(0, 1fr)
			);

		grid-auto-rows:
			clamp(
				8.75rem,
				36vw,
				11rem
			);

		gap: 0.4rem;
	}


	.on-gallery-grid--editorial
	.on-gallery-grid__item:nth-child(n) {
		grid-column:
			span 1;

		grid-row:
			span 1;
	}


	/*
	 * Duże zdjęcie otwierające
	 * każdy fragment galerii.
	 */

	.on-gallery-grid--editorial
	.on-gallery-grid__item:nth-child(6n + 1) {
		grid-column:
			span 2;

		grid-row:
			span 2;
	}


	/*
	 * Szerokie przełamanie.
	 */

	.on-gallery-grid--editorial
	.on-gallery-grid__item:nth-child(6n + 4) {
		grid-column:
			span 2;

		grid-row:
			span 1;
	}


	/* UNIFORM */

	.on-gallery-grid--uniform
	.on-gallery-grid__items {
		grid-template-columns: 1fr;

		gap: 0.6rem;
	}


	/* CARD */

	.on-gallery-grid__item {
		border-radius: 0.35rem;
	}


	.on-gallery-grid__zoom {
		top: 0.55rem;
		right: 0.55rem;

		width: 2.3rem;
		height: 2.3rem;

		opacity: 0.86;

		transform: none;

		background:
			rgba(7, 10, 12, 0.7);
	}


	.on-gallery-grid__caption {
		right: 0.7rem;
		bottom: 0.6rem;
		left: 0.7rem;

		font-size: 0.65rem;
	}

}


/* =========================================================
   REVEAL
   ========================================================= */

.on-gallery-grid.is-enhanced
.on-gallery-grid__header,

.on-gallery-grid.is-enhanced
.on-gallery-grid__item {
	opacity: 0;

	transform:
		translateY(1.35rem);
}


.on-gallery-grid.is-enhanced
.on-gallery-grid__header.is-visible,

.on-gallery-grid.is-enhanced
.on-gallery-grid__item.is-visible {
	opacity: 1;

	transform:
		translateY(0);

	transition:
		opacity
			750ms
			cubic-bezier(
				0.22,
				1,
				0.36,
				1
			),

		transform
			800ms
			cubic-bezier(
				0.22,
				1,
				0.36,
				1
			),

		border-color
			350ms ease,

		box-shadow
			450ms ease;

	transition-delay:
		var(
			--gallery-reveal-delay,
			0ms
		);
}


/* =========================================================
   EMPTY
   ========================================================= */

.on-gallery-grid__empty {
	padding: 3rem;

	color:
		rgba(255, 255, 255, 0.45);

	text-align: center;

	border:
		1px dashed
		rgba(255, 255, 255, 0.15);

	border-radius: 0.5rem;
}


/* =========================================================
   LIGHTBOX
   ========================================================= */

.on-gallery-lightbox {
	position: fixed;

	inset: 0;

	z-index: 99999;

	width: 100vw;
	max-width: none;

	height: 100dvh;
	max-height: none;

	margin: 0;
	padding: 0;

	overflow: hidden;

	color: #ffffff;

	border: 0;

	background:
		rgba(4, 6, 7, 0.94);

	-webkit-backdrop-filter:
		blur(1.25rem);

	backdrop-filter:
		blur(1.25rem);

	opacity: 0;

	transition:
		opacity 280ms ease;
}


.on-gallery-lightbox::backdrop {
	background:
		rgba(4, 6, 7, 0.9);

	-webkit-backdrop-filter:
		blur(1rem);

	backdrop-filter:
		blur(1rem);
}


.on-gallery-lightbox[open] {
	display: block;
}


.on-gallery-lightbox.is-visible {
	opacity: 1;
}


/* =========================================================
   LIGHTBOX INNER
   ========================================================= */

.on-gallery-lightbox__inner {
	position: relative;

	display: grid;

	width: 100%;
	height: 100%;

	place-items: center;

	padding:
		5rem
		clamp(
			4.5rem,
			8vw,
			9rem
		)
		4rem;
}


/* =========================================================
   FIGURE
   ========================================================= */

.on-gallery-lightbox__figure {
	display: grid;

	gap: 0.8rem;

	place-items: center;

	width: 100%;
	height: 100%;

	margin: 0;
}


/* =========================================================
   LIGHTBOX IMAGE
   ========================================================= */

.on-gallery-lightbox__image {
	display: block;

	width: auto;
	height: auto;

	max-width: 100%;

	max-height:
		calc(
			100dvh -
			9rem
		);

	object-fit: contain;

	border:
		1px solid
		rgba(255, 255, 255, 0.08);

	border-radius: 0.45rem;

	box-shadow:
		0 2rem 7rem
		rgba(0, 0, 0, 0.48);

	opacity: 1;

	transform:
		scale(1);

	transition:
		opacity 180ms ease,
		transform 300ms
			cubic-bezier(
				0.22,
				1,
				0.36,
				1
			);
}


.on-gallery-lightbox__image.is-changing {
	opacity: 0;

	transform:
		scale(0.985);
}


/* =========================================================
   CAPTION LIGHTBOX
   ========================================================= */

.on-gallery-lightbox__caption {
	max-width: 48rem;

	min-height: 1.2rem;

	color:
		rgba(255, 255, 255, 0.52);

	font-size: 0.76rem;

	line-height: 1.5;

	text-align: center;
}


.on-gallery-lightbox__caption:empty {
	display: none;
}


/* =========================================================
   CLOSE
   ========================================================= */

.on-gallery-lightbox__close {
	position: absolute;

	z-index: 10;

	top: 1.25rem;
	right: 1.25rem;

	display: grid;

	width: 3rem;
	height: 3rem;

	place-items: center;

	padding: 0;

	color:
		rgba(255, 255, 255, 0.78);

	font-size: 1.5rem;

	cursor: pointer;

	border:
		1px solid
		rgba(255, 255, 255, 0.14);

	border-radius: 0.4rem;

	background:
		rgba(255, 255, 255, 0.035);

	transition:
		color 250ms ease,
		border-color 250ms ease,
		background-color 250ms ease,
		transform 350ms
			cubic-bezier(
				0.22,
				1,
				0.36,
				1
			);
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.on-gallery-lightbox__navigation {
	position: absolute;

	z-index: 10;

	top: 50%;

	display: grid;

	width: 3.25rem;
	height: 4.5rem;

	place-items: center;

	padding: 0;

	color:
		rgba(255, 255, 255, 0.7);

	font-size: 1.2rem;

	cursor: pointer;

	border:
		1px solid
		rgba(255, 255, 255, 0.11);

	border-radius: 0.4rem;

	background:
		rgba(255, 255, 255, 0.025);

	transform:
		translateY(-50%);

	transition:
		color 250ms ease,
		border-color 250ms ease,
		background-color 250ms ease;
}


.on-gallery-lightbox__navigation--previous {
	left: 1.25rem;
}


.on-gallery-lightbox__navigation--next {
	right: 1.25rem;
}


/* =========================================================
   COUNTER
   ========================================================= */

.on-gallery-lightbox__counter {
	position: absolute;

	z-index: 10;

	bottom: 1.4rem;
	left: 50%;

	margin: 0;

	color:
		rgba(255, 255, 255, 0.4);

	font-size: 0.65rem;
	font-weight: 800;

	letter-spacing: 0.14em;

	transform:
		translateX(-50%);
}


/* =========================================================
   LIGHTBOX HOVER
   ========================================================= */

@media (hover: hover) {

	.on-gallery-lightbox__close:hover,
	.on-gallery-lightbox__navigation:hover {
		color:
			var(--color-accent, #d9b45d);

		border-color:
			rgba(217, 180, 93, 0.36);

		background:
			rgba(217, 180, 93, 0.05);
	}


	.on-gallery-lightbox__close:hover {
		transform:
			rotate(5deg);
	}

}


/* =========================================================
   SCROLL LOCK
   ========================================================= */

html.on-gallery-lightbox-open,
html.on-gallery-lightbox-open body {
	overflow: hidden;
}


/* =========================================================
   LIGHTBOX MOBILE
   ========================================================= */

@media (max-width: 47.99rem) {

	.on-gallery-lightbox__inner {
		padding:
			4.5rem 0.6rem
			4.25rem;
	}


	.on-gallery-lightbox__image {
		max-height:
			calc(
				100dvh -
				9.5rem
			);

		border-radius: 0.25rem;
	}


	.on-gallery-lightbox__close {
		top: 0.75rem;
		right: 0.75rem;

		width: 2.7rem;
		height: 2.7rem;
	}


	.on-gallery-lightbox__navigation {
		top: auto;
		bottom: 0.7rem;

		width: 3.4rem;
		height: 2.7rem;

		transform: none;

		background:
			rgba(7, 10, 12, 0.88);
	}


	.on-gallery-lightbox__navigation--previous {
		left: 0.7rem;
	}


	.on-gallery-lightbox__navigation--next {
		right: 0.7rem;
	}


	.on-gallery-lightbox__counter {
		bottom: 1.6rem;
	}

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	.on-gallery-grid__header,
	.on-gallery-grid__item,
	.on-gallery-grid__image,
	.on-gallery-grid__zoom,
	.on-gallery-lightbox,
	.on-gallery-lightbox__image {
		transition: none !important;
	}


	.on-gallery-grid.is-enhanced
	.on-gallery-grid__header,

	.on-gallery-grid.is-enhanced
	.on-gallery-grid__item {
		opacity: 1;

		transform: none;
	}

}