@charset "utf-8";
/* Photo Gallery CSS Document */
.gallery-wrap {
	--radius: 12px;
	--shadow: 0 10px 30px rgba(0,0,0,.12);
	--hover-bg: rgba(0,0,0,.45);
	--icon-size: 52px;
	--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-color: var(--primary-bg); 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-color: var(--hover-bg); opacity: 0; transform: translateY(6px); transition: opacity var(--dur) var(--easing), transform var(--dur) var(--easing); pointer-events: none; }

/* 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-color: var(--primary-bg); color: var(--primary-text); 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; }

.gallery-wrap .gal-icon a:hover { transform: scale(1.0); box-shadow: 0 10px 26px rgba(0,0,0,.22); background-color: var(--secondary-bg); color: var(--secondary-text); }
.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; }

/* slide base */
.gallery-wrap .photo-slider .swiper-slide { height: auto; 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-color: var(--primary-bg); 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-color: 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-color: #111111; 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 #111111; outline-offset: 3px; }

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