/* Gallery grid */
.gallery__grid {
  gap: var(--grid-gap);
}

.gallery__title {
  text-align: center;
  margin-bottom: var(--space-4); /* uses your global spacing scale */
}

/* Each image link */
.gallery__item {
  display: block;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  transition: transform .2s ease, box-shadow .2s ease;
}
.gallery__item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-1h);
}

.gallery__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery__slider {
  position: relative;
}
.swiper-slide {
  display: flex;
  justify-content: center;
}

.gallery.section {
  background: var(--hero-overlay);
  color: var(--white); /* ensure text stays readable */
  padding: var(--sec-pad) 0;
}



/* force pagination below the slides */
.gallery__slider .swiper-pagination {
  position: relative;
  bottom: auto ;
  margin-top: 30px ;   /* distance from bottom of slides */
  text-align: center;
  z-index: 10;
}

.gallery__slider .swiper-pagination-bullet-active {
  background: var(--yellow)!important;
  opacity: 1;
  transform: scale(1.3); /* makes active dot pop */
}

.gallery__slider .swiper-pagination-bullet {
  background: var(--white);
  opacity: 0.6;
  transition: transform .2s ease, opacity .2s ease;
}

@media (min-width: 1024px) {

/* Bigger pagination dots */
.gallery__slider .swiper-pagination-bullet {
  width: 14px;
  height: 14px;
  background: var(--white);
  opacity: 0.6;
  margin: 0 15px !important; /* adds space between dots */
  transition: transform .2s ease, opacity .2s ease;
}

.gallery__slider .swiper-pagination-bullet-active {
  background: var(--yellow);
  opacity: 1;
  transform: scale(1.3); /* makes active dot pop */
}
}

@media (min-width: 768px) {

/* Bigger pagination dots */
.gallery__slider .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background: var(--white);
  opacity: 0.6;
  margin: 0 12px !important; /* adds space between dots */
  transition: transform .2s ease, opacity .2s ease;
}

.gallery__slider .swiper-pagination-bullet-active {
  background: var(--yellow);
  opacity: 1;
  transform: scale(1.3); /* makes active dot pop */
}
}


/* ================================
   GLightbox – simple visible arrows & close
   ================================ */



/* Close "X" button */
.glightbox-clean .gclose {
  color: #fff !important;
  opacity: 1 !important;
  font-size: 34px !important;
  text-shadow: 0 0 6px rgba(0,0,0,0.6);
}

/* Arrows */
.glightbox-clean .gnext,
.glightbox-clean .gprev {
  color: #fff !important;
  opacity: 1 !important;
  background: none !important;
  box-shadow: none !important;
  width: 600px !important;
  height: 60px !important;
}

/* Ensure arrow icons inside are white */
.glightbox-clean .gnext svg,
.glightbox-clean .gprev svg {
  fill: #fff !important;
  stroke: #fff !important;
  width: 28px !important;
  height: 28px !important;
}

/* Optional: prevent fading on hover */
.glightbox-clean .gbtn:hover {
  opacity: 1 !important;
  transform: none !important;
}

/* Custom injected close button for GLightbox */
.custom-gclose {
  position: fixed;
  top: 20px;
  right: 28px;
  z-index: 99999;
  background: none;
  border: none;
  font-size: 40px;
  color: #fff;
  line-height: 1;
  cursor: pointer;
  text-shadow: 0 0 8px rgba(0,0,0,0.7);
}
.custom-gclose:hover {
  color: var(--yellow);
}

/* wrapper anchors the outside arrows; slider remains clipped so 3-up works */
.gallery__wrap { position: relative; }

/* Keep the slider clipped so extra slides are hidden */
.gallery__slider { overflow: hidden; }

/* Arrows positioned against the wrapper (outside the slides) */
.gallery__wrap .swiper-button-prev,
.gallery__wrap .swiper-button-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  color: var(--primary-red);
  box-shadow: 0 4px 10px rgba(0,0,0,.15);
  transition: transform .2s ease, background .2s ease, color .2s ease;
}

.gallery__wrap .swiper-button-prev { left: -60px; }
.gallery__wrap .swiper-button-next { right: -60px; }

.gallery__wrap .swiper-button-prev:hover,
.gallery__wrap .swiper-button-next:hover {
  background: var(--yellow);
  color: var(--black);
  transform: translateY(-50%) scale(1.05);
}

/* Optional: hide arrows on small screens */
@media (max-width: 767px){
  .gallery__wrap .swiper-button-prev,
  .gallery__wrap .swiper-button-next { display: none; }
}

/* ================================
   Swiper – responsive arrow edge fixes (keeps arrows visible)
   ================================ */



/* Make sure wrapper doesn't crop positioned elements */
.gallery__wrap {
  position: relative;
  overflow: visible;
}

/* Desktop defaults (outside edges) */
.gallery__wrap .swiper-button-prev,
.gallery__wrap .swiper-button-next {
  width: 44px;
  height: 44px;
}

/* Tablet – bring arrows slightly inward so they stay in view */
@media (max-width: 1023px) {
  .gallery__wrap .swiper-button-prev { left: -35px; }
  .gallery__wrap .swiper-button-next { right: -35px; }
}

/* Mobile – move them fully inside and shrink for comfort */
@media (max-width: 1280px) {
  .gallery__wrap .swiper-button-prev,
  .gallery__wrap .swiper-button-next {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.85);
    color: var(--primary-red);
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  }
  .gallery__wrap .swiper-button-prev { left: 8px; }
  .gallery__wrap .swiper-button-next { right: 8px; }
}

/* ================================
   Swiper – refined arrow styling
   ================================ */

.gallery__wrap .swiper-button-prev,
.gallery__wrap .swiper-button-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;

  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(145deg, #fff 0%, #fef6f2 100%);
  color: var(--primary-red);
  box-shadow:
    0 4px 12px rgba(0,0,0,0.15),
    inset 0 2px 6px rgba(255,255,255,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  transition:
    transform 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease,
    color 0.25s ease;
}

/* Move outside slide edges */
.gallery__wrap .swiper-button-prev { left: -60px; }
.gallery__wrap .swiper-button-next { right: -60px; }

/* Hover: playful lift and yellow glow */
.gallery__wrap .swiper-button-prev:hover,
.gallery__wrap .swiper-button-next:hover {
  background: var(--yellow);
  color: var(--black);
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 6px 14px rgba(0,0,0,0.2);
}

/* Arrow icon sizing */
.gallery__wrap .swiper-button-prev::after,
.gallery__wrap .swiper-button-next::after {
  font-size: 18px;
  font-weight: 700;
}

/* Tablet: tuck arrows in a bit */
@media (max-width: 1023px) {
  .gallery__wrap .swiper-button-prev { left: -35px; }
  .gallery__wrap .swiper-button-next { right: -35px; }
}

/* Mobile: smaller, inside the frame */
@media (max-width: 1280px) {
  .gallery__wrap .swiper-button-prev,
  .gallery__wrap .swiper-button-next {
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.9);
    color: var(--primary-red);
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  }
  .gallery__wrap .swiper-button-prev { left: 8px; }
  .gallery__wrap .swiper-button-next { right: 8px; }
}