/* ===========================
   KRS Slider — Clean Styles
   =========================== */

.krs-slider {
  --r: 12px;
  --thumb-gap: 1vh;     /* internal gaps between thumbs */
  --thumbs: 5;          /* default visible thumbs; overridden by data-thumbs */
  font: inherit;
}

/* Allow widget setting to override visible thumbs */
.krs-slider[data-thumbs="3"] { --thumbs: 3; }
.krs-slider[data-thumbs="4"] { --thumbs: 4; }
.krs-slider[data-thumbs="5"] { --thumbs: 5; }

/* --- Main / Lightbox aspect wrappers --- */
.krs-slider__main[data-aspect="16x9"],
.krs-lightbox__stage[data-aspect="16x9"] {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #111;
  border-radius: var(--r);
  overflow: hidden;
}

.krs-slider__main img,
.krs-lightbox__stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Viewport: full-width image; arrows overlay --- */
.krs-slider__viewport {
  position: relative;
  display: block;
  margin-bottom: 1vh;
}

/* Slider arrows: white, 3rem, transparent */
.krs-slider__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: transparent !important;
  color: #fff;
  font-size: 3rem!important;
  line-height: 1;
  border: none!important;
  padding: 0;
  width: auto;
  height: auto;
  cursor: pointer;
  z-index: 3;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.krs-slider__nav--prev { 
    left: 5vw; 
}

.krs-slider__nav--next { 
    right: 5vw; 
}

.krs-slider[data-arrows="0"] .krs-slider__nav { 
    display: none; 
}


.krs-slider__main-inner {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 100% 100%;
  transition: transform .35s ease;
}
.krs-slide { 
    position: relative;
}

.krs-slide img { 
    position: absolute; 
    inset: 0; 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}

/* -------------------------------------------------
   Thumbnails: single row that aligns to main edges
   -------------------------------------------------
   We remove side padding and size each thumb so:
   N * width + (N-1) * gap = 100% → edges align.
*/
.krs-slider__thumbs {
  display: flex;
  justify-content: flex-start;     /* no space added outside edges */
  align-items: stretch;
  gap: var(--thumb-gap);           /* internal gaps only */
  padding: var(--thumb-gap) 0 0;   /* top only; NO side padding */
  background: transparent;
  overflow: hidden;                 /* no scroll needed; we render exactly N thumbs */
}

button.krs-thumb{
   background: transparent!important;
  border: none!important;   
}


.krs-thumb {
  flex: 0 0 calc((100% - (var(--thumbs) - 1) * var(--thumb-gap)) / var(--thumbs));
  aspect-ratio: 16 / 9;            /* height derives from width */
  background: transparent;
  border: none!important;
  border-radius: 8px;
  overflow: hidden;
  padding: 0;
  cursor: pointer;
  outline: 2px solid transparent;
  outline-offset: 0;
  min-width: 0;                     /* prevent rounding overflow */
}

.krs-thumb img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    display: block; 
}

.krs-thumb.is-active,
.krs-thumb.is-next {                /* optional: style the “next” (leftmost) thumb too */
  outline-color: #fff;
}

/* --- Lightbox --- */
.krs-lightbox {
  position: fixed;
  inset: 0;
  z-index: 8999;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.88);
}
.krs-lightbox[hidden] { display: none; }


.krs-lightbox__stage[data-aspect="16x9"] {
  width: min(90vw, calc(90vh * (16 / 9)));
  max-width: 90vw;
  max-height: 90vh;
  border-radius: var(--r);
  position: relative;
  overflow: hidden;
}

.krs-lightbox__close{
  background-color: transparent !important;
  color: #fff;
  font-size: 2rem!important;
  padding: 2vw;
  line-height: 1;
  border: none!important;
  cursor: pointer;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
  z-index: 10000;
}


.krs-lightbox__close { 
    position: absolute; 
    top: 2vw; 
    right: 4vw; 
}

button.krs-lightbox__nav.krs-lightbox__nav--next,
button.krs-lightbox__nav.krs-lightbox__nav--prev{
  z-index: 10000;    
  border: none!important;
  background:none!important;
  background-color: none!important;
}

.krs-lightbox__nav { 
    font-size: 3rem!important;
  border: none!important;    
    padding: 2vw;    
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
}

.krs-lightbox__nav:hover{
    cursor: pointer;
} 

.krs-lightbox__nav--prev { 
    left: 4vw; 
  border: none!important;    
}

.krs-lightbox__nav--next { 
    right: 4vw; 
  border: none!important;    
}