/*
 * Full-Res Lightbox Wrapper
 * - Forces a clean black/white, flat PhotoSwipe UI
 * - Ensures alignwide/alignfull work even when blocks are nested inside this wrapper
 */

/* Only affects images inside the wrapper block */
.frlb-wrapper a.frlb-item {
	text-decoration: none;
}

/* Preserve custom content-image block layouts after wrapping images in anchors */
.frlb-wrapper .content-image .aspect-ratio-wrapper > a.frlb-item {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
}

.frlb-wrapper .content-image .content-image__figure {
	margin: 0;
}

.frlb-wrapper .content-image .content-image__main-wrapper > div > a.frlb-item,
.frlb-wrapper .content-image .content-image__secondary-wrapper > div > a.frlb-item,
.frlb-wrapper .content-image .content-image__main-wrapper > div > figure > a.frlb-item,
.frlb-wrapper .content-image .content-image__secondary-wrapper > div > figure > a.frlb-item {
	display: block;
	width: 100%;
}

.frlb-wrapper .content-image .aspect-ratio-wrapper > a.frlb-item img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

.frlb-wrapper .content-image .content-image__main-wrapper > div > a.frlb-item img,
.frlb-wrapper .content-image .content-image__secondary-wrapper > div > a.frlb-item img,
.frlb-wrapper .content-image .content-image__main-wrapper > div > figure > a.frlb-item img,
.frlb-wrapper .content-image .content-image__secondary-wrapper > div > figure > a.frlb-item img {
	width: 100%;
	height: auto;
	display: block;
}

.frlb-wrapper .content-image .content-image__overlay {
	pointer-events: none;
}

.frlb-wrapper a.frlb-item img {
	cursor: zoom-in;
}

/* --- Nested alignment fixes (themes often only style .entry-content > .alignwide/.alignfull) --- */
.frlb-wrapper .alignwide,
.frlb-wrapper .alignfull {
	clear: both;
}

/* Full width */
.frlb-wrapper .alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/*
 * Preserve the original Content Image Block width when wrapped.
 * The theme constrains direct .entry-content children, so the wrapper must
 * adopt the block's intended width instead of forcing a viewport breakout.
 */
.entry-content > .frlb-wrapper.frlb-wrapper--content-image-full,
.entry-content > .frlb-wrapper.frlb-wrapper--content-image-double {
	width: 100% !important;
	max-width: 100% !important;
	overflow: hidden;
}

/* Wide width (fallback sizes; many themes provide CSS vars) */
.frlb-wrapper .alignwide {
	width: min(100%, var(--wp--style--global--wide-size, 1200px));
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-left: auto;
	margin-right: auto;
}

/* --- PhotoSwipe (v5) black/white flat theme overrides --- */

/* Backdrop: black w/ opacity + optional blur */
.pswp {
	--pswp-bg: rgba(0, 0, 0, 0.82);
	--pswp-icon-color: #fff;
	--pswp-icon-color-secondary: #fff;
	--pswp-icon-stroke-color: #fff;
	--pswp-icon-stroke-width: 0;
	--pswp-error-text-color: #fff;
	--pswp-placeholder-bg: rgba(255,255,255,0.08);
	--pswp-preloader-color: rgba(255,255,255,0.75);
	--pswp-preloader-color-secondary: rgba(255,255,255,0.35);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.pswp__bg {
	background: rgba(0, 0, 0, 0.82) !important;
}

/* Remove any theme styling bleeding into PhotoSwipe buttons */
.pswp button,
.pswp [type="button"],
.pswp [type="submit"],
.pswp [type="reset"] {
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	font: inherit !important;
}

.pswp__button--frlb-zoom{
	display: flex !important;
	justify-content: center !important;
}

.pswp__button--frlb-zoom svg{
	max-width: 30px !important;
}

.pswp__button--frlb-zoom + .pswp__button--zoom{
	display: none !important;
}

/* Flat black buttons with white icons */
.pswp button.pswp__button {
	background: rgba(0, 0, 0, 0.3) !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	outline: none !important;
	opacity: 1 !important;
	transition: all 0.3s ease !important;
}

.pswp button.pswp__button:hover {
	background: rgba(0, 0, 0, 1) !important;
}

.pswp.pswp--zoomed-in .pswp__button--frlb-zoom svg.zoomin {
	display: none !important;
}

.pswp:not(.pswp--zoomed-in) .pswp__button--frlb-zoom svg.zoomout {
	display: none !important;
}

.pswp__button:focus,
.pswp__button:focus-visible {
	outline: none !important;
	box-shadow: none !important;
}

.pswp__button .pswp__icn {
	fill: #fff !important;
	stroke: #fff !important;
}

/* Make top bar transparent (controls are already black) */
.pswp__top-bar {
	background: transparent !important;
}

.pswp__counter {
	color: #fff !important;
	text-shadow: none !important;
}

/* Prev/next arrows: flat squares, centered vertically */
.pswp__button--arrow--prev,
.pswp__button--arrow--next {
	width: 56px !important;
	height: 56px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
}

.pswp__button--arrow--prev {
	left: 0 !important;
}

.pswp__button--arrow--next {
	right: 0 !important;
}

/* Caption stays minimal and readable */
.pswp__caption {
	position: absolute !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	padding: 0 2rem 2rem !important;
	color: #fff !important;
	background: transparent !important;
	pointer-events: none !important;
}

.pswp__caption__center {
	max-width: 72rem;
	margin: 0 auto;
	padding: 1.2rem 1.6rem;
	background: rgba(0, 0, 0, 0.72);
	font-size: 1.4rem;
	line-height: 1.5;
	text-align: center;
	border-radius: 2px;
	box-sizing: border-box;
}

/* Reduce any borders/outlines injected by theme */
.pswp * {
	outline: none !important;
}