/* ==========================================================================
   Image Gallery — responsive grid, click to open in Magnific Popup lightbox
   ========================================================================== */

.sec-image-gallery {
    background: var(--clr-white);
    padding: 120px 0;
    background-color: var(--clr-primary-light);
}
.sec-image-gallery__inner {
	max-width: 1920px;
	margin: 0 auto;
	padding: 0 240px;
}

.sec-image-gallery__header {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	margin-bottom: 60px;
}

.sec-image-gallery__eyebrow {
	color: var(--clr-primary);
}

.sec-image-gallery__heading {
	font-size: var(--fs-h2);
	line-height: 1.12;
	color: var(--clr-white);
}
.bg-transprent .sec-image-gallery__heading {
	color:var(--clr-black);
}

.sec-image-gallery__grid {
	display: grid;
	gap: 20px;
}

.sec-image-gallery__grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.sec-image-gallery__grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.sec-image-gallery__grid--cols-4 { grid-template-columns: repeat(4, 1fr); }

.sec-image-gallery__item {
	position: relative;
	display: block;
	border-radius: 10px;
	overflow: hidden;
	cursor: pointer;
	aspect-ratio: 4 / 3;
	box-shadow: 0px 24px 40px 0px #00000026;
	transition: transform 0.3s ease;
}

.sec-image-gallery__item:hover { transform: translateY(-4px); }

.sec-image-gallery__item:focus-visible {
	outline: 2px solid var(--clr-primary, #078FD6);
	outline-offset: 3px;
}

.sec-image-gallery__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.sec-image-gallery__item:hover .sec-image-gallery__img { transform: scale(1.05); }

.sec-image-gallery__item::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55.02%, #000000 100%);
	opacity: 0;
	transition: opacity 0.3s ease;
	z-index: 1;
}

.sec-image-gallery__item:hover::before { opacity: 1; }

.sec-image-gallery__zoom {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.8);
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--clr-primary, #078FD6);
	opacity: 0;
	transition: all 0.3s ease;
	z-index: 2;
}

.sec-image-gallery__item:hover .sec-image-gallery__zoom {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

.sec-image-gallery__caption {
	position: absolute;
	left: 16px;
	bottom: 14px;
	color: var(--clr-white);
	font-family: var(--font-body);
	font-size: var(--fs-lg);
	max-width: calc(100% - 32px);
	line-height: 1.25;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
	z-index: 2;
}
section.sec-image-gallery.bg-transprent {
    background-color: transparent;
}

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 1279px) {
	.sec-image-gallery__inner { padding: 0 60px; }
}

@media (max-width: 1024px) {
	.sec-image-gallery { padding: 80px 0; }
	.sec-image-gallery__header { margin-bottom: 40px; }
	.sec-image-gallery__grid--cols-4 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 767px) {
	.sec-image-gallery { padding: 50px 0; }
	.sec-image-gallery__inner { padding: 0 24px; }
	.sec-image-gallery__grid--cols-3,
	.sec-image-gallery__grid--cols-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
	.sec-image-gallery__grid--cols-2,
	.sec-image-gallery__grid--cols-3,
	.sec-image-gallery__grid--cols-4 { grid-template-columns: 1fr; }
}