/* =============================================
   Image Gallery Block
   ============================================= */

.image-gallery-block {
	margin: 0;
	margin-bottom: 24px;
	overflow-x: clip;
}


.image-gallery-block__swiper {
	overflow: visible;
	position: relative;
}

/* ---- Slide ---- */
.image-gallery-block__figure {
	margin: 0;
	overflow: hidden;
}

.image-gallery-block__img {
	display: block;
	height: auto;
	max-height: 330px;
	object-fit: cover;
	width: 100%;
}

@media ( min-width: 1024px ) {
	.image-gallery-block__img {
		max-height: 557px;
	}
}

/* ---- Active / inactive slide — dark overlay on non-active slides ---- */

.image-gallery-block__slide {
	position: relative;
}

.image-gallery-block__slide::after {
	background: rgba( 0, 0, 0, 0.3 );
	content: '';
	inset: 0;
	opacity: 1;
	pointer-events: none;
	position: absolute;
	transition: opacity 0.35s ease;
}

.image-gallery-block__slide.swiper-slide-active::after {
	opacity: 0;
}

.image-gallery-block__swiper .swiper-slide:not( .swiper-slide-active ) {
	cursor: pointer;
}

/* ---- Natural size mode — slides sized via aspect-ratio + fixed height ---- */

/* overflow: visible — block already clips with overflow-x: clip */
.image-gallery-block--natural .image-gallery-block__swiper {
	overflow: visible;
}

/* height drives the aspect-ratio width calculation */
.image-gallery-block--natural .swiper-slide {
	height: 330px;
}

.image-gallery-block--natural .image-gallery-block__figure {
	height: 100%;
}

.image-gallery-block--natural .image-gallery-block__img {
	height: 100%;
	max-height: none;
	object-fit: fill;
	width: 100%;
}

@media ( min-width: 1024px ) {
	.image-gallery-block--natural .swiper-slide {
		height: 557px;
	}
}

/* ---- Single-image: ghost duplicate slides ---- */

.image-gallery-block__slide--ghost {
	cursor: default;
	filter: blur( 4px );
	pointer-events: none;
	user-select: none;
}

.image-gallery-block__slide--ghost.swiper-slide-active {
	filter: none;
}

/* ---- Controls (progress bar) ---- */

.image-gallery-block__controls {
	align-items: center;
	display: flex;
	margin: 26px auto 24px;
	max-width: var( --wp--style--global--wide-size, 1512px );
	width: 100%;
}

@media ( min-width: 1024px ) {
	.image-gallery-block__controls {
		margin: 28px auto 50px;
	}
}

.single-projects .image-gallery-block__controls {
	margin: 0;
}

/* ---- Progress bar ---- */

.image-gallery-block__pagination.swiper-pagination-progressbar.swiper-pagination-horizontal {
	flex: 1;
	height: 2px;
	max-width: 210px;
	position: relative;
}

@media ( min-width: 1024px ) {
	.image-gallery-block__pagination.swiper-pagination-progressbar.swiper-pagination-horizontal {
		max-width: 330px;
	}
}

.image-gallery-block__pagination.swiper-pagination-progressbar {
	background: var( --wp--preset--color--cool-grey-medium, #e0e0e0 );
	border-radius: 2px;
	inset: auto;
}

.image-gallery-block__pagination .swiper-pagination-progressbar-fill {
	background: var( --wp--preset--color--navy-blue, #0c2853 );
	border-radius: 2px;
}

/* ---- Nav buttons — positioned over the carousel ---- */
.image-gallery-block__nav {
	bottom: 50%;
	left: 0;
	padding-inline: 67px;
	display: flex;
	gap: 10px;
	position: absolute;
	right: 4.25rem;
	z-index: 2;
	width: calc(100% - 8.5rem);
    justify-content: space-between;
	pointer-events: none;
}

.image-gallery-block__nav-btn {
	align-items: center;
	background: var( --wp--preset--color--white, #ffffff );
	color: var( --wp--preset--color--navy-blue, #0C2853 );
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	height: 48px;
	justify-content: center;
	padding: 0;
	transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
	width: 48px;
	pointer-events: all;
}

.image-gallery-block__nav-btn svg {
	display: block;
	flex-shrink: 0;
}

.image-gallery-block__nav-btn svg path {
	stroke: currentColor;
}

.image-gallery-block__nav-btn:hover {
	background: var( --wp--preset--color--white, #ffffff );
	color: var( --wp--preset--color--royal-blue, #2F6FC7 );
}

.image-gallery-block__nav-btn.swiper-button-disabled {
	cursor: default;
	opacity: 0.35;
	pointer-events: none;
}

.image-gallery-block__controls .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{
	background: var( --wp--preset--color--navy-blue, #0C2853 );
}