@charset "utf-8";
/* Photo Gallery CSS Document */
/*.gallery-wrap { position:relative; text-align:center;}
.grid-item { position:relative; float:left;}
.grid-sizer, .grid-item { width:33.333%;}
.grid-item img { max-width:100%; width:100%; height:auto; position:relative; display:block; transition:all 0.4s ease-in-out; -webkit-backface-visibility:hidden; backface-visibility:hidden;}
.gallery { text-align:center; position:relative; -webkit-transition:all 0.5s ease-in-out; transition:all 0.5s ease-in-out; margin:10px; overflow: hidden; }
.gallery-image { position:relative; overflow:hidden; display:block; }
.gallery-image:before { content:''; width:50%; height:50%; background-color:rgba(0, 0, 0, 0.8); position:absolute; top:0; left:0; opacity:0; -webkit-transition:all 0.5s ease 0s; transition:all 0.5s ease 0s;}
.gallery-image:after { content:''; width:50%; height:50%; background-color:rgba(0, 0, 0, 0.8); position:absolute; top:50%; left:0; opacity:0; -webkit-transition:all 0.5s ease 0s; transition:all 0.5s ease 0s;}

.gal-img-hover { position:absolute; left:0; right:0; top:0; bottom:0; display:flex; align-items:center; justify-content:center; opacity:0; -webkit-transition: all 300ms linear 0s; transition: all 300ms linear 0s;}

.gal-img-hover:before { content:''; width:50%; height:50%; background-color:rgba(0, 0, 0, 0.8); position:absolute; top:0; left:50%; opacity:0; -webkit-transition:all 0.5s ease 0s; transition:all 0.5s ease 0s;}
.gal-img-hover:after { content:''; width:50%; height:50%; background-color:rgba(0, 0, 0, 0.8); position:absolute; top:50%; left:50%; opacity:0; -webkit-transition:all 0.5s ease 0s; transition:all 0.5s ease 0s;}

.gal-icon { line-height:50px; text-align:center; width:50px; height:50px; -webkit-border-radius:50%; border-radius:50%; display:block; position:absolute; left:0; right:0; margin:0px auto; padding:0; z-index:100; -webkit-transition:all 300ms linear 0s; transition:all 300ms linear 0s; font-size:45px;}
.gal-icon a { color:#ffffff;}

.gallery-wrap .gal-rotator .gallery-image{ margin:0; }

.gallery:hover .gallery-image:before { left:50%; opacity:1; z-index:1;}
.gallery:hover .gallery-image:after { top:0; opacity:1;}
.gallery:hover .gal-img-hover { opacity:1;}
.gallery:hover .gal-img-hover:before { top:50%; opacity:1;}
.gallery:hover .gal-img-hover:after { left:0; opacity:1;}
.gallery-image:hover img { -webkit-transform:scale3d(1.2,1.2,1.2); -ms-transform:scale3d(1.2,1.2,1.2); transform:scale3d(1.2,1.2,1.2);  opacity:0.8; }

*/
/* ================================
Photo Gallery — Grid + Slider + Hover
--------------------------------
- Grid wrapper:   .gallery-wrap .photo-grid
- Slider wrapper: .gallery-wrap .photo-slider.swiper  (use with Swiper)
- Markup inside each item:
.gallery > .gallery-image > img + .gal-img-hover > .gal-icon > a > i
================================ */

.gallery-wrap {
	--radius: 12px;
	--shadow: 0 10px 30px rgba(0,0,0,.12);
	--hover-bg: rgba(0,0,0,.45);
	--icon-size: 52px;
	--icon-bg: rgba(255,255,255,.92);
	--icon-fg: #111;
	--dur: .35s;
	--easing: cubic-bezier(.2,.7,.3,1);
	position: relative;
}

/* ---------- GRID LAYOUT ---------- */
.gallery-wrap .photo-grid > [class^="col-"]{
	margin: 15px 0;
}
/* card */
.gallery-wrap .gallery {
	height: 100%;
	display: block;
	background: #fff;
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow);
	transform: translateZ(0);
}

/* image area (square by default; tweak if you want other ratio) */
.gallery-wrap .gallery-image {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	backface-visibility: hidden;
}

.gallery-wrap .gallery-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transform: scale(1);
	transition: transform var(--dur) var(--easing), filter var(--dur) var(--easing);
}

/* hover overlay */
.gallery-wrap .gal-img-hover {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: var(--hover-bg);
	opacity: 0;
	transform: translateY(6px);
	transition: opacity var(--dur) var(--easing), transform var(--dur) var(--easing);
	pointer-events: none; /* so only the icon is clickable */
}

/* center icon */
.gallery-wrap .gal-icon a {
	display: inline-flex;
	width: var(--icon-size);
	height: var(--icon-size);
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--icon-bg);
	color: var(--icon-fg);
	box-shadow: 0 6px 18px rgba(0,0,0,.15);
	transform: scale(.92);
	transition: transform var(--dur) var(--easing), box-shadow var(--dur) var(--easing), opacity var(--dur) var(--easing);
	pointer-events: auto; /* clickable */
}

.gallery-wrap .gal-icon a:hover {
	transform: scale(1.0);
	box-shadow: 0 10px 26px rgba(0,0,0,.22);
	color: var(--icon-bg);
}

.gallery-wrap .gal-icon i {
	font-size: 20px;
	line-height: 1;
}

/* reveal on hover */
.gallery-wrap .gallery:hover .gal-img-hover { opacity: 1; transform: translateY(0); }
.gallery-wrap .gallery:hover .gallery-image img { transform: scale(1.03); filter: saturate(1.05); }

/* ---------- SLIDER (SWIPER) ---------- */
/* Add class 'photo-slider swiper' on the Swiper container that holds .swiper-wrapper */
.gallery-wrap .photo-slider {
	--center-scale: 1.1;
	--side-scale: .6;
	padding-block: 40px; /* tiny breathing space so scaled slide won't clip */
}

/* slide base */
.gallery-wrap .photo-slider .swiper-slide {
	height: auto; /* allow card to size itself */
	transition: transform var(--dur) var(--easing), opacity var(--dur) var(--easing), box-shadow var(--dur) var(--easing);
	transform: scale(var(--side-scale));
	opacity: .9;
	will-change: transform;
}

/* center/active slide bigger */
.gallery-wrap .photo-slider .swiper-slide-active {
	transform: scale(var(--center-scale));
	opacity: 1;
	z-index: 2;
}

/* optional: neighbors slightly raised */
.gallery-wrap .photo-slider .swiper-slide-next,
.gallery-wrap .photo-slider .swiper-slide-prev {
	transform: scale(calc((var(--center-scale) + var(--side-scale)) / 2));
}

/* ensure the same card visuals apply in slider */
.gallery-wrap .photo-slider .gallery {
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow);
}

/* Swiper navigation (uses default classes) */
.gallery-wrap .photo-slider .swiper-button-next,
.gallery-wrap .photo-slider .swiper-button-prev {
	width: 44px; height: 44px;
	border-radius: 50%;
	background: rgba(255,255,255,.95);
	box-shadow: 0 6px 20px rgba(0,0,0,.15);
	transition: transform var(--dur) var(--easing), box-shadow var(--dur) var(--easing), opacity var(--dur) var(--easing);
}

.gallery-wrap .photo-slider .swiper-button-next:hover,
.gallery-wrap .photo-slider .swiper-button-prev:hover {
	transform: scale(1.06);
	box-shadow: 0 10px 28px rgba(0,0,0,.22);
}

.gallery-wrap .photo-slider .swiper-button-disabled {
	opacity: .45;
	cursor: default;
	transform: none;
}

/* Swiper pagination */
.gallery-wrap .photo-slider .swiper-pagination-bullets .swiper-pagination-bullet {
	background: rgba(0,0,0,.35);
	opacity: 1;
	transition: transform var(--dur) var(--easing), background var(--dur) var(--easing);
}

.gallery-wrap .photo-slider .swiper-pagination-bullet-active {
	background: #111;
	transform: scale(1.15);
}

/* ---------- Accessibility tweaks ---------- */
.gallery-wrap .gal-icon a:focus-visible,
.gallery-wrap .photo-slider .swiper-button-next:focus-visible,
.gallery-wrap .photo-slider .swiper-button-prev:focus-visible {
	outline: 2px solid #111;
	outline-offset: 3px;
}

/* (Optional) reduce motion */
@media (prefers-reduced-motion: reduce) {
	.gallery-wrap * { transition: none !important; animation: none !important; }
}