/* =========================
   custom.css (stable version)
   - Slick with standard arrows
   - variableWidth (photo-edge spacing looks good)
   - GLightbox: dark overlay + white frame (portrait + landscape)
   ========================= */

:root{
  --gap: 16px;         /* spacing between photos */
  --img-h: 360px;      /* gallery image height */
  --radius: 14px;      /* rounded corners in gallery */

  --lb-frame: 14px;    /* white frame thickness in lightbox */
  --lb-radius: 14px;   /* lightbox corner rounding */
}

body{ background:#fff; }

/* Wrapper: space for arrows outside */
.wrap.gallery-wrap{
  position: relative;
  max-width: 1240px;
  margin: 40px auto;
  padding: 0 70px;            /* space for standard slick arrows */
  box-sizing: border-box;
  overflow: visible;
}

.gallery{
  position: relative;
}

/* Keep slider visuals inside the gallery area */
.gallery .slick-list{
  margin: 0 !important;
  overflow: hidden !important;
}

/* No slide padding; spacing comes from track gap */
.gallery .slick-slide{
  padding: 0 !important;
  box-sizing: border-box;
}

/* Track as flex + consistent gap */
.gallery.slick-initialized .slick-track{
  display: flex !important;
  align-items: center !important;
  gap: var(--gap);
}

/* Disable float when using flex track */
.gallery.slick-initialized .slick-slide{
  float: none !important;
  height: auto !important;
  display: flex !important;
  align-items: center;
}

/* Gallery images */
.gallery .slide img{
  height: var(--img-h) !important;
  width: auto !important;
  max-width: none !important;      /* important for variableWidth */
  object-fit: contain !important;  /* no crop */
  display: block;

  border-radius: var(--radius);
  background: #fff;
}

/* Hide dots */
.gallery .slick-dots{
  display: none !important;
}

/* Standard slick arrows: visible + button-like */
.gallery .slick-prev,
.gallery .slick-next{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  border: 1px solid #d9d9d9;
  z-index: 50;
}

.gallery .slick-prev:before,
.gallery .slick-next:before{
  color: #111;
  opacity: 1;
  font-size: 22px;
  line-height: 44px;
}

/* Push arrows outside a bit */
.gallery .slick-prev{ left: -56px; }
.gallery .slick-next{ right: -56px; }

/* Mobile tweaks */
@media (max-width: 760px){
  .wrap.gallery-wrap{ padding: 0 16px; }
  :root{ --img-h: 260px; }
  .gallery .slick-prev{ left: 6px; }
  .gallery .slick-next{ right: 6px; }
}

/* =========================
   GLightbox styling
   ========================= */

/* Dark overlay */
.glightbox-container .goverlay{
  background: rgba(0,0,0,0.92) !important;
}

/* Avoid white "fill" panel around the image */
.glightbox-container .gslide-media{
  background: transparent !important;
  padding: 0 !important;
  overflow: visible !important; /* allow frame shadow */
}

/* White frame via box-shadow on the image (robust in portrait+landscape) */
.glightbox-container .gslide-media img{
  display: block;
  background: #fff !important;
  border-radius: calc(var(--lb-radius) - 4px) !important;
  box-shadow: 0 0 0 var(--lb-frame) #fff;
}

/* Landscape on phones/tablets: slightly different frame thickness (you set to 12px) */
@media (orientation: landscape) and (max-width: 1024px){
  :root{ --lb-frame: 12px; }
}

/* Make sure close button is visible */
.glightbox-container .gclose,
.glightbox-container .gbtn.gclose{
  opacity: 1 !important;
  visibility: visible !important;
  display: flex !important;
  pointer-events: auto !important;

  width: 44px;
  height: 44px;

  background: transparent !important;
  border: 1px solid #d9d9d9;
  border-radius: 999px;

  z-index: 99999 !important;
}

/* Zoom is off -> normal pointer */
.gallery a.glightbox img{ cursor: pointer; }