	.c52-gallery-page {
		--c52-gallery-bg: #020d19;
		--c52-gallery-bg-light: #061729;
		--c52-gallery-card: #071b2e;
		--c52-gallery-border: rgba(110, 178, 235, 0.18);
		--c52-gallery-border-strong: rgba(43, 186, 217, 0.48);
		--c52-gallery-blue: #1589ff;
		--c52-gallery-cyan: #29c2ca;
		--c52-gallery-text: #f6f9fc;
		--c52-gallery-muted: #91a8bd;

		background:
			radial-gradient(
				circle at 80% 15%,
				rgba(21, 137, 255, 0.08),
				transparent 35%
			),
			var(--c52-gallery-bg);

		color: var(--c52-gallery-text);
		overflow: hidden;
	}

	.c52-gallery-page *,
	.c52-gallery-page *::before,
	.c52-gallery-page *::after {
		box-sizing: border-box;
	}

	.c52-gallery-hero {
		min-height: 470px;
		padding: 110px 0 90px;
		background:
			linear-gradient(
				90deg,
				rgba(1, 10, 20, 0.98) 0%,
				rgba(2, 14, 27, 0.88) 44%,
				rgba(3, 18, 34, 0.5) 100%
			),
			var(--c52-gallery-hero-image) center / cover no-repeat;
		isolation: isolate;
	}

	.c52-gallery-hero__overlay {
		z-index: -2;
		background:
			linear-gradient(
				180deg,
				rgba(1, 10, 18, 0.05) 0%,
				rgba(1, 10, 18, 0.72) 100%
			);
	}

	.c52-gallery-hero__grid {
		z-index: -1;
		opacity: 0.15;
		background-image:
			linear-gradient(
				rgba(69, 152, 220, 0.08) 1px,
				transparent 1px
			),
			linear-gradient(
				90deg,
				rgba(69, 152, 220, 0.08) 1px,
				transparent 1px
			);
		background-size: 48px 48px;
		mask-image: linear-gradient(to right, black, transparent 78%);
	}

	.c52-gallery-breadcrumb {
		font-size: 0.78rem;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--c52-gallery-muted);
	}

	.c52-gallery-breadcrumb a {
		color: var(--c52-gallery-muted);
		text-decoration: none;
		transition: color 0.2s ease;
	}

	.c52-gallery-breadcrumb a:hover,
	.c52-gallery-breadcrumb a:focus-visible {
		color: var(--c52-gallery-cyan);
	}

	.c52-gallery-eyebrow {
		color: var(--c52-gallery-blue);
		font-size: 0.76rem;
		font-weight: 800;
		letter-spacing: 0.14em;
		text-transform: uppercase;
	}

	.c52-gallery-eyebrow > span {
		width: 30px;
		height: 3px;
		background: linear-gradient(
			90deg,
			var(--c52-gallery-blue),
			var(--c52-gallery-cyan)
		);
	}

	.c52-gallery-hero h1 {
		max-width: 880px;
		font-size: clamp(3.15rem, 4.75vw, 4.35rem);
		line-height: 0.95;
		letter-spacing: -0.055em;
	}

	.c52-gallery-hero h1 strong {
		color: var(--c52-gallery-blue);
	}

	.c52-gallery-hero__lead {
		max-width: 720px;
		color: #b3c7d8;
		font-size: clamp(1rem, 1.7vw, 1.2rem);
		line-height: 1.75;
	}

	.c52-gallery-content {
		position: relative;
		padding: 90px 0 110px;
	}

	.c52-gallery-grid {
		margin-top: 42px;
	}

	.c52-gallery-item {
		position: relative;
		display: block;
		width: 100%;
		padding: 0;
		border: 1px solid var(--c52-gallery-border);
		border-radius: 0;
		background: var(--c52-gallery-card);
		color: inherit;
		overflow: hidden;
		text-align: left;
		cursor: pointer;
		transition:
			transform 0.3s ease,
			border-color 0.3s ease,
			box-shadow 0.3s ease;
	}

	.c52-gallery-item:hover,
	.c52-gallery-item:focus-visible {
		transform: translateY(-7px);
		border-color: var(--c52-gallery-border-strong);
		box-shadow: 0 22px 50px rgba(0, 0, 0, 0.28);
		outline: none;
	}

	.c52-gallery-item__image {
		position: relative;
		aspect-ratio: 4 / 3;
		overflow: hidden;
		background: #061322;
	}

	.c52-gallery-item__image::after {
		content: "";
		position: absolute;
		inset: 0;
		background:
			linear-gradient(
				180deg,
				transparent 35%,
				rgba(1, 11, 21, 0.92) 100%
			);
		pointer-events: none;
	}

	.c52-gallery-item__image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition:
			transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
			filter 0.3s ease;
	}

	.c52-gallery-item:hover .c52-gallery-item__image img,
	.c52-gallery-item:focus-visible .c52-gallery-item__image img {
		transform: scale(1.055);
		filter: brightness(1.08);
	}

	.c52-gallery-item__zoom {
		position: absolute;
		right: 18px;
		bottom: 18px;
		z-index: 2;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 46px;
		height: 46px;
		border: 1px solid rgba(255, 255, 255, 0.24);
		background: rgba(2, 14, 27, 0.82);
		color: #fff;
		transition:
			background-color 0.25s ease,
			border-color 0.25s ease,
			color 0.25s ease;
	}

	.c52-gallery-item:hover .c52-gallery-item__zoom,
	.c52-gallery-item:focus-visible .c52-gallery-item__zoom {
		border-color: var(--c52-gallery-cyan);
		background: var(--c52-gallery-cyan);
		color: #03101d;
	}

	.c52-gallery-item__zoom svg {
		width: 20px;
		height: 20px;
		fill: none;
		stroke: currentColor;
		stroke-width: 1.8;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	.c52-gallery-empty {
		padding: 55px 30px;
		border: 1px solid var(--c52-gallery-border);
		background: rgba(6, 23, 41, 0.7);
		text-align: center;
	}

	.c52-gallery-empty svg {
		width: 52px;
		height: 52px;
		margin-bottom: 18px;
		fill: none;
		stroke: var(--c52-gallery-cyan);
		stroke-width: 1.4;
	}

	.c52-gallery-empty p {
		max-width: 620px;
		margin-right: auto;
		margin-left: auto;
		color: var(--c52-gallery-muted);
	}

	.c52-gallery-cta {
		border-top: 1px solid var(--c52-gallery-border);
	}

	.c52-gallery-cta__inner {
		border: 1px solid var(--c52-gallery-border-strong);
	}

	.c52-gallery-cta__label {
		color: var(--c52-gallery-cyan);
		font-size: 0.75rem;
		letter-spacing: 0.12em;
	}

	.c52-gallery-cta p {
		color: var(--c52-gallery-muted);
	}

	.c52-gallery-btn {
		border-radius: 0;
		font-size: 0.82rem;
		font-weight: 800;
		letter-spacing: 0.035em;
		text-transform: uppercase;
	}

	.c52-gallery-btn--primary {
		border: 1px solid var(--c52-gallery-cyan);
		background: var(--c52-gallery-cyan);
		color: #03111d;
	}

	.c52-gallery-btn--primary:hover,
	.c52-gallery-btn--primary:focus-visible {
		border-color: #fff;
		background: #fff;
		color: #03111d;
	}

	.c52-gallery-modal {
		position: fixed;
		inset: 0;
		z-index: 99999;
		display: none;
		padding: 20px;
		overflow-x: hidden;
		overflow-y: auto;
		background: rgba(0, 7, 14, 0.95);
		backdrop-filter: blur(12px);
	}

	.c52-gallery-modal.is-open {
		display: block;
		animation: c52GalleryModalIn 0.24s ease both;
	}

	.c52-gallery-modal .modal-dialog {
		display: flex;
		align-items: center;
		width: min(1480px, 100%);
		min-height: calc(100vh - 40px);
		margin: 0 auto;
		pointer-events: auto;
	}

	.c52-gallery-modal .modal-content {
		width: 100%;
		border: 1px solid rgba(105, 190, 240, 0.25);
		border-radius: 0;
		background: #020d19;
		box-shadow: 0 30px 100px rgba(0, 0, 0, 0.65);
		overflow: hidden;
	}

	.c52-gallery-modal__header {
		min-height: 74px;
		padding: 16px 20px;
		border-bottom: 1px solid var(--c52-gallery-border);
		background: #061729;
	}

	.c52-gallery-modal__close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 1px solid var(--c52-gallery-border);
		border-radius: 0;
		background: transparent;
		color: #fff;
		transition:
			border-color 0.2s ease,
			background-color 0.2s ease,
			color 0.2s ease;
	}

	.c52-gallery-modal__close:hover,
	.c52-gallery-modal__close:focus-visible {
		border-color: var(--c52-gallery-cyan);
		background: var(--c52-gallery-cyan);
		color: #03111d;
		outline: none;
	}

	.c52-gallery-modal__close svg {
		width: 22px;
		height: 22px;
		fill: none;
		stroke: currentColor;
		stroke-width: 1.8;
		stroke-linecap: round;
	}

	.c52-gallery-slider {
		position: relative;
		background: #010912;
	}

	.c52-gallery-slide {
		display: none;
		margin: 0;
	}

	.c52-gallery-slide.is-active {
		display: block;
		animation: c52GallerySlideIn 0.3s ease both;
	}

	.c52-gallery-slide__image {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 300px;
		height: min(78vh, 860px);
		padding: 18px 90px;
		background:
			radial-gradient(
				circle at center,
				rgba(14, 57, 95, 0.34),
				transparent 55%
			),
			#010912;
	}

	.c52-gallery-slide__image img {
		display: block;
		width: auto;
		max-width: 100%;
		height: auto;
		max-height: 100%;
		margin: auto;
		object-fit: contain;
		box-shadow: 0 18px 70px rgba(0, 0, 0, 0.42);
	}

	.c52-gallery-slider__button {
		position: absolute;
		top: 50%;
		z-index: 10;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 56px;
		height: 56px;
		padding: 0;
		border: 1px solid rgba(83, 180, 231, 0.4);
		border-radius: 0;
		background: rgba(2, 15, 28, 0.88);
		color: #fff;
		transform: translateY(-50%);
		transition:
			background-color 0.2s ease,
			border-color 0.2s ease,
			color 0.2s ease;
	}

	.c52-gallery-slider__button:hover,
	.c52-gallery-slider__button:focus-visible {
		border-color: var(--c52-gallery-cyan);
		background: var(--c52-gallery-cyan);
		color: #03111d;
		outline: none;
	}

	.c52-gallery-slider__button--prev {
		left: 18px;
	}

	.c52-gallery-slider__button--next {
		right: 18px;
	}

	.c52-gallery-slider__button svg {
		width: 25px;
		height: 25px;
		fill: none;
		stroke: currentColor;
		stroke-width: 1.8;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	.c52-gallery-thumbnails {
		display: flex;
		gap: 10px;
		padding: 14px;
		overflow-x: auto;
		overflow-y: hidden;
		border-top: 1px solid var(--c52-gallery-border);
		background: #041321;
		scrollbar-width: thin;
		scrollbar-color: var(--c52-gallery-cyan) #041321;
	}

	.c52-gallery-thumbnails::-webkit-scrollbar {
		height: 7px;
	}

	.c52-gallery-thumbnails::-webkit-scrollbar-track {
		background: #041321;
	}

	.c52-gallery-thumbnails::-webkit-scrollbar-thumb {
		background: var(--c52-gallery-cyan);
	}

	.c52-gallery-thumbnail {
		flex: 0 0 96px;
		width: 96px;
		height: 70px;
		padding: 0;
		border: 2px solid transparent;
		border-radius: 0;
		background: #07192a;
		opacity: 0.55;
		overflow: hidden;
		transition:
			opacity 0.2s ease,
			border-color 0.2s ease,
			transform 0.2s ease;
	}

	.c52-gallery-thumbnail:hover,
	.c52-gallery-thumbnail:focus-visible,
	.c52-gallery-thumbnail.is-active {
		border-color: var(--c52-gallery-cyan);
		opacity: 1;
		outline: none;
		transform: translateY(-2px);
	}

	.c52-gallery-thumbnail img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	body.c52-gallery-modal-open {
		overflow: hidden;
	}

	@keyframes c52GalleryModalIn {
		from { opacity: 0; }
		to { opacity: 1; }
	}

	@keyframes c52GallerySlideIn {
		from {
			opacity: 0;
			transform: scale(0.985);
		}
		to {
			opacity: 1;
			transform: scale(1);
		}
	}

	@media (max-width: 991.98px) {
		.c52-gallery-hero {
			min-height: 410px;
			padding: 85px 0 70px;
			background-position: 60% center;
		}

		.c52-gallery-content {
			padding: 70px 0 85px;
		}

		.c52-gallery-slide__image {
			height: min(66vh, 700px);
			padding-right: 72px;
			padding-left: 72px;
		}
	}

	@media (max-width: 767.98px) {
		.c52-gallery-hero {
			min-height: 360px;
			padding: 65px 0;
			background:
				linear-gradient(
					90deg,
					rgba(1, 10, 20, 0.98),
					rgba(2, 14, 27, 0.76)
				),
				var(--c52-gallery-hero-image) 65% center / cover no-repeat;
		}

		.c52-gallery-hero h1 {
			font-size: clamp(2.5rem, 13vw, 4.1rem);
		}

		.c52-gallery-content {
			padding: 58px 0 72px;
		}

		.c52-gallery-grid {
			margin-top: 30px;
		}

		.c52-gallery-item__zoom {
			right: 12px;
			bottom: 12px;
			width: 40px;
			height: 40px;
		}

		.c52-gallery-modal {
			padding: 0;
		}

		.c52-gallery-modal .modal-dialog {
			width: 100%;
			min-height: 100vh;
		}

		.c52-gallery-modal .modal-content {
			min-height: 100vh;
			border: 0;
		}

		.c52-gallery-modal__header {
			min-height: 66px;
			padding: 11px 14px;
		}

		.c52-gallery-slide__image {
			height: calc(100vh - 170px);
			min-height: 280px;
			padding: 10px;
		}

		.c52-gallery-slider__button {
			top: auto;
			bottom: 94px;
			width: 46px;
			height: 46px;
			transform: none;
		}

		.c52-gallery-slider__button--prev {
			left: 12px;
		}

		.c52-gallery-slider__button--next {
			right: 12px;
		}

		.c52-gallery-thumbnail {
			flex-basis: 78px;
			width: 78px;
			height: 58px;
		}
	}

	@media (max-width: 479.98px) {
		.c52-gallery-item__image {
			aspect-ratio: 1 / 1;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.c52-gallery-page *,
		.c52-gallery-page *::before,
		.c52-gallery-page *::after {
			scroll-behavior: auto !important;
			transition-duration: 0.01ms !important;
			animation-duration: 0.01ms !important;
			animation-iteration-count: 1 !important;
		}
	}

/* Lżejszy obraz tła pobierany wyłącznie na telefonach. */
@media (max-width: 767.98px) {
	.c52-gallery-hero {
		--c52-gallery-hero-image: var(--c52-gallery-hero-image-mobile) !important;
	}
}
