/**
 * Vlad Samoylik Wordpress Theme — PhotoSwipe theme overrides.
 */

:root {
	--lightbox-bg: var(--nav-surface-bg, #ffffff);
	--lightbox-stage-padding: 2.4rem;
	--lightbox-image-radius: var(--content-image-radius, var(--post-card-radius, 16px));
	--lightbox-image-shadow:
		0 2px 6px rgba(0, 0, 0, 0.09),
		0 6px 18px rgba(0, 0, 0, 0.10),
		0 14px 32px -4px rgba(0, 0, 0, 0.12);
	--lightbox-image-frame: var(--lightbox-image-shadow);
	--lightbox-control-color: #111111;
	--lightbox-control-hover: var(--theme-accent, #b35a3c);
}

@media (min-width: 700px) {
	:root {
		--lightbox-stage-padding: 3.6rem;
		--lightbox-image-shadow:
			0 2px 6px rgba(0, 0, 0, 0.09),
			0 8px 22px rgba(0, 0, 0, 0.11),
			0 18px 42px -4px rgba(0, 0, 0, 0.13),
			0 30px 60px -10px rgba(0, 0, 0, 0.10);
	}
}

@media (prefers-color-scheme: dark) {
	:root {
		--lightbox-image-shadow:
			0 4px 14px rgba(0, 0, 0, 0.45),
			0 10px 28px rgba(255, 255, 255, 0.04);
		--lightbox-control-color: #e0e0e0;
	}
}

@media (prefers-color-scheme: dark) and (min-width: 700px) {
	:root {
		--lightbox-image-shadow:
			0 4px 16px rgba(0, 0, 0, 0.50),
			0 12px 32px rgba(255, 255, 255, 0.05),
			0 20px 48px -6px rgba(0, 0, 0, 0.55);
	}
}

.pswp {
	--pswp-bg: var(--lightbox-bg);
	--pswp-icon-color: var(--lightbox-control-color);
	--pswp-icon-color-secondary: var(--lightbox-control-color);
	--pswp-placeholder-bg: transparent;
	--lightbox-image-radius: var(--content-image-radius, var(--post-card-radius, 16px));
}

@media (prefers-color-scheme: dark) {
	.pswp {
		--pswp-placeholder-bg: transparent;
	}
}

.pswp__zoom-wrap {
	overflow: visible;
	box-shadow: none;
	border-radius: 0;
}

.pswp__img {
	border-radius: var(--lightbox-image-radius);
	box-shadow: var(--lightbox-image-frame);
}

div.pswp__img--placeholder,
img.pswp__img--placeholder {
	border-radius: var(--lightbox-image-radius);
	box-shadow: none;
	background: transparent;
}

.pswp__counter {
	display: none !important;
}

.pswp__top-bar {
	align-items: flex-start;
	height: auto;
	justify-content: flex-end;
	min-height: 0;
	padding: var(--header-padding-top, 1.6rem) var(--layout-gutter-x, 2.8rem) 0 0;
}

.pswp__button {
	transition: opacity 0.15s linear, background-color 0.15s linear;
}

.pswp__button:hover,
.pswp__button:focus-visible {
	opacity: 1;
}

.pswp__button.vsamoylik-pswp-close {
	align-items: center;
	background: none;
	border: 0;
	cursor: pointer;
	display: flex;
	height: auto;
	justify-content: center;
	margin: 0;
	min-width: 0;
	opacity: 1;
	overflow: visible;
	padding: 0;
	width: auto;
}

/* Mobile: hide arrows (swipe to navigate); close aligns to .nav-toggle via JS */
@media (max-width: 1019px) {

	.pswp__button--arrow--prev,
	.pswp__button--arrow--next {
		display: none !important;
	}
}

.pswp__button--arrow--prev,
.pswp__button--arrow--next {
	width: 4.8rem;
	height: 4.8rem;
	margin-top: -2.4rem;
	background-color: var(--lightbox-control-color);
	background-image: none;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 2.4rem 1.8rem;
	mask-size: 2.4rem 1.8rem;
}

.pswp__button--arrow--prev {
	-webkit-mask-image: url('../images/icons/arrow-left.svg');
	mask-image: url('../images/icons/arrow-left.svg');
	left: 1.6rem;
}

.pswp__button--arrow--next {
	-webkit-mask-image: url('../images/icons/arrow-right.svg');
	mask-image: url('../images/icons/arrow-right.svg');
	right: 1.6rem;
}

.pswp__button--arrow--prev:hover,
.pswp__button--arrow--next:hover,
.pswp__button--arrow--prev:focus-visible,
.pswp__button--arrow--next:focus-visible {
	background-color: var(--lightbox-control-hover);
}

.pswp__button--arrow--prev svg,
.pswp__button--arrow--next svg {
	display: none;
}

.pswp__button--close {
	display: none !important;
}

.pswp__icn {
	opacity: 1;
}

@media (min-width: 1020px) {
	.pswp__top-bar {
		padding-right: var(--layout-gutter-x, 4rem);
	}
}

/* Compact phones – tighter stage inset */
@media (max-width: 440px) {
	:root {
		--lightbox-stage-padding: 1.2rem;
		--lightbox-image-shadow:
			0 1px 4px rgba(0, 0, 0, 0.08),
			0 4px 12px rgba(0, 0, 0, 0.09),
			0 8px 20px -4px rgba(0, 0, 0, 0.10);
	}
}