/* ==========================================================================
   Kalyan Enterprises - "Our Work" gallery slider.

   Self contained (no bootstrap, no jquery, no owl carousel) so it looks the
   same on the new pages and on the older ones that still load css/style.css.
   The slides themselves are built in gallery.php from img/gallery-latest -
   drop a photo in that folder and it shows up here on its own.
   ========================================================================== */

.ke-gallery {
  --ke-navy: #0b2c67;
  --ke-blue: #14449b;
  --ke-sky: #7fb4ff;
  --ke-gap: 16px;
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  box-sizing: border-box;
  padding: 48px 0 56px;
  background: #f5f8fc;
}
.ke-gallery * { box-sizing: border-box; }

.ke-gallery .ke-gal-wrap {
  width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 15px;
}

/* ------------------------------------------------------------------ head */
.ke-gal-head { text-align: center; margin-bottom: 28px; }
.ke-gal-head h1 {
  font-size: 30px; font-weight: 700; text-transform: uppercase;
  color: var(--ke-blue); margin: 0 0 8px;
}
.ke-gal-head p { color: #5c7fbc; font-size: 14.5px; margin: 0; }

/* --------------------------------------------------------------- slider */
.ke-gal-slider { position: relative; }

.ke-gal-viewport { overflow: hidden; }

.ke-gal-track {
  display: flex;
  gap: var(--ke-gap);
  transition: transform .5s cubic-bezier(.4, .0, .2, 1);
  will-change: transform;
}

/* 3 up on desktop - the JS reads this same number from --ke-per */
.ke-gal-slide {
  flex: 0 0 calc((100% - 2 * var(--ke-gap)) / 3);
  max-width: calc((100% - 2 * var(--ke-gap)) / 3);
}
.ke-gal-slide img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 12px;
  background: #e7eef8;
  box-shadow: 0 6px 18px rgba(11, 44, 103, .12);
}

/* ---------------------------------------------------------------- arrows */
.ke-gal-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; border-radius: 50%;
  border: 0; cursor: pointer; z-index: 3;
  background: #fff; color: var(--ke-navy);
  font-size: 18px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(11, 44, 103, .22);
  transition: background .2s, color .2s;
}
.ke-gal-nav:hover { background: var(--ke-blue); color: #fff; }
.ke-gal-prev { left: -8px; }
.ke-gal-next { right: -8px; }

/* ------------------------------------------------------------------ dots */
.ke-gal-dots {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 8px; margin-top: 22px;
}
.ke-gal-dots button {
  width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%;
  background: #bcccE6; cursor: pointer; transition: background .2s, width .2s;
}
.ke-gal-dots button.is-on { background: var(--ke-blue); width: 24px; border-radius: 5px; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 991px) {
  .ke-gal-slide {
    flex: 0 0 calc((100% - var(--ke-gap)) / 2);
    max-width: calc((100% - var(--ke-gap)) / 2);
  }
}
@media (max-width: 575px) {
  .ke-gallery { padding: 32px 0 40px; }
  .ke-gal-head h1 { font-size: 23px; }
  .ke-gal-slide { flex: 0 0 100%; max-width: 100%; }
  .ke-gal-prev { left: 2px; }
  .ke-gal-next { right: 2px; }
  .ke-gal-nav { width: 36px; height: 36px; font-size: 16px; }
}

/* no photos in the folder yet */
.ke-gal-empty {
  text-align: center; color: #5c7fbc; font-size: 14px;
  padding: 30px 0; margin: 0;
}