/* ═══════════════════════════════════════
   Kayan Slider — Frontend CSS
   Dynamic values come from CSS Custom
   Properties set by PHP inline style.
═══════════════════════════════════════ */

.kayan-slider-wrapper {
  width: 100%;
  padding: 0;
  /* ── Default Custom Properties (overridden by PHP) ── */
  --ks-height:          clamp(500px, 65vh, 820px);
  --ks-panel-w:         90px;
  --ks-gap:             6px;
  --ks-anim:            0.6s;
  --ks-side-bg:         linear-gradient(to bottom, #F5F5F5 0%, rgba(182,187,187,0.27) 100%);
  --ks-num-size:        40px;
  --ks-num-weight:      800;
  --ks-num-family:      inherit;
  --ks-num-stroke:      #555;
  --ks-num-stroke-w:    1.5px;
  --ks-label-size:      20px;
  --ks-label-weight:    500;
  --ks-label-family:    inherit;
  --ks-label-color:     #555;
  --ks-overlay:         linear-gradient(to bottom, rgba(35,31,32,0) 0%, rgba(35,31,32,0.41) 53%, rgba(35,31,32,1) 100%);
  --ks-title-size:      42px;
  --ks-title-weight:    800;
  --ks-title-family:    inherit;
  --ks-title-color:     #fff;
  --ks-title-hl:        #f2e020;
  --ks-desc-size:       14px;
  --ks-desc-weight:     400;
  --ks-desc-family:     inherit;
  --ks-desc-color:      rgba(255,255,255,0.84);
  --ks-bgnum-size:      205px;
  --ks-bgnum-color:     rgba(170,170,170,0.38);
  --ks-dot-size:        8px;
  --ks-dot-color:       #b0ac88;
  --ks-dot-active:      #4a4720;
  --ks-arrow-color:     #4a4720;
  --ks-arrow-hover-bg:  #4a4720;
  --ks-arrow-hover-text:#ffffff;
}

/* ── Slider Track ── */
.kayan-slider {
  display: flex;
  height: var(--ks-height);
  overflow: hidden;
  gap: var(--ks-gap);
}

/* ── Panels ── */
.ks-panel {
  position: relative;
  overflow: hidden;
  flex: 0 0 var(--ks-panel-w);
  cursor: pointer;
  transition: flex var(--ks-anim) cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.4s ease;
}

.ks-panel.active {
  flex: 1 1 auto;
  cursor: default;
}

/* ── Side (inactive) layer ── */
.ks-side {
  position: absolute;
  inset: 0;
  background: var(--ks-side-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0 28px;
  transition: opacity 0.25s ease;
  z-index: 2;
}

.ks-panel.active .ks-side {
  opacity: 0;
  pointer-events: none;
}

.ks-side-num {
  font-size:           var(--ks-num-size);
  font-weight:         var(--ks-num-weight);
  font-family:         var(--ks-num-family);
  color:               transparent;
  -webkit-text-stroke: var(--ks-num-stroke-w) var(--ks-num-stroke);
  letter-spacing:      1px;
}

.ks-side-label {
  writing-mode:     vertical-rl;
  text-orientation: mixed;
  transform:        rotate(180deg);
  font-size:        var(--ks-label-size);
  font-weight:      var(--ks-label-weight);
  font-family:      var(--ks-label-family);
  color:            var(--ks-label-color);
  letter-spacing:   0.2px;
  line-height:      1.5;
  text-align:       center;
}

/* ── Active (center) layer ── */
.ks-active {
  position:       absolute;
  inset:          0;
  opacity:        0;
  pointer-events: none;
  transition:     opacity 0.45s ease 0.28s;
  z-index:        1;
}

.ks-panel.active .ks-active {
  opacity:        1;
  pointer-events: auto;
}

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

.ks-overlay {
  position:   absolute;
  inset:      0;
  background: var(--ks-overlay);
  z-index:    1;
}

.ks-info {
  position:   absolute;
  bottom:     42px;
  left:       42px;
  z-index:    3;
  max-width:  420px;
}

.ks-title {
  font-size:     var(--ks-title-size);
  font-weight:   var(--ks-title-weight);
  font-family:   var(--ks-title-family);
  color:         var(--ks-title-color);
  line-height:   1.07;
  margin-bottom: 14px;
  text-shadow:   0 2px 12px rgba(0,0,0,0.35);
}

.ks-title em {
  font-style: normal;
  color:      var(--ks-title-hl);
}

.ks-desc {
  font-size:   var(--ks-desc-size);
  font-weight: var(--ks-desc-weight);
  font-family: var(--ks-desc-family);
  color:       var(--ks-desc-color);
  line-height: 1.7;
}

.ks-bgnumber {
  position:      absolute;
  bottom:        -18px;
  right:         8px;
  font-size:     var(--ks-bgnum-size);
  font-weight:   900;
  color:         var(--ks-bgnum-color);
  line-height:   1;
  pointer-events:none;
  user-select:   none;
  z-index:       2;
}

/* ── Controls ── */
.ks-controls {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             16px;
  padding:         16px 0;
}

.ks-dots { display: flex; gap: 8px; }

.ks-dot {
  width:         var(--ks-dot-size);
  height:        var(--ks-dot-size);
  border-radius: 50%;
  background:    var(--ks-dot-color);
  cursor:        pointer;
  transition:    background 0.3s, transform 0.3s;
  flex-shrink:   0;
}

.ks-dot.active {
  background: var(--ks-dot-active);
  transform:  scale(1.35);
}

.ks-arrows { display: none; gap: 12px; }

.ks-arrow {
  width:         44px;
  height:        44px;
  border-radius: 50%;
  border:        2px solid var(--ks-arrow-color);
  background:    transparent;
  color:         var(--ks-arrow-color);
  font-size:     22px;
  line-height:   1;
  cursor:        pointer;
  display:       flex;
  align-items:   center;
  justify-content: center;
  transition:    background 0.2s, color 0.2s;
}

.ks-arrow:hover {
  background: var(--ks-arrow-hover-bg);
  color:      var(--ks-arrow-hover-text);
}

/* ═══════════════════════════════════════
   RESPONSIVE BREAKPOINTS
═══════════════════════════════════════ */

/* ── 1441px+  Large screens ── */
@media (min-width: 1441px) {
  .kayan-slider { height: clamp(560px, 65vh, 820px); }
  .ks-panel     { flex: 0 0 110px; }
  .ks-side-num  { font-size: 46px; }
  .ks-side-label{ font-size: 22px; }
  .ks-title     { font-size: 52px; }
  .ks-bgnumber  { font-size: 240px; }
  .ks-info      { left: 52px; bottom: 52px; max-width: 520px; }
  .ks-desc      { font-size: 15px; }
}

/* ── 1440px  Laptop ── */
@media (max-width: 1440px) {
  .kayan-slider { height: clamp(460px, 58vh, 700px); }
  .ks-panel     { flex: 0 0 88px; }
  .ks-side-num  { font-size: 38px; }
  .ks-side-label{ font-size: 19px; }
  .ks-title     { font-size: 40px; }
  .ks-bgnumber  { font-size: 195px; }
  .ks-info      { left: 40px; bottom: 40px; }
}

/* ── 1200px  Tablet Landscape ── */
@media (max-width: 1200px) {
  .kayan-slider { height: 420px; }
  .ks-panel     { flex: 0 0 80px; }
  .ks-side-num  { font-size: 34px; }
  .ks-side-label{ font-size: 17px; }
  .ks-title     { font-size: 36px; }
  .ks-bgnumber  { font-size: 170px; }
  .ks-info      { left: 34px; bottom: 34px; max-width: 380px; }
  .ks-desc      { font-size: 13.5px; }
}

/* ── 1024px  Tablet Portrait ── */
@media (max-width: 1024px) {
  .kayan-slider { height: 390px; }
  .ks-panel     { flex: 0 0 72px; }
  .ks-side-num  { font-size: 28px; }
  .ks-side-label{ font-size: 15px; }
  .ks-title     { font-size: 30px; margin-bottom: 10px; }
  .ks-bgnumber  { font-size: 148px; }
  .ks-info      { left: 28px; bottom: 28px; max-width: 340px; }
  .ks-desc      { font-size: 13px; }
}

/* ── 880px  Mobile Landscape — 3 panels ── */
@media (max-width: 880px) {
  .kayan-slider { height: 360px; gap: 5px; }
  .ks-panel     { flex: 0 0 66px; }
  .ks-side-num  { font-size: 24px; }
  .ks-side-label{ font-size: 13px; }
  .ks-title     { font-size: 26px; margin-bottom: 8px; }
  .ks-bgnumber  { font-size: 128px; }
  .ks-info      { left: 22px; bottom: 22px; max-width: 300px; }
  .ks-desc      { font-size: 12.5px; }

  .ks-panel.ks-outer {
    flex: 0 0 0 !important;
    overflow: hidden;
    pointer-events: none;
  }
}

/* ── 767px  Mobile Portrait — full width + arrows ── */
@media (max-width: 767px) {
  .kayan-slider { height: 300px; gap: 0; }

  .ks-panel {
    flex: 0 0 0 !important;
    overflow: hidden;
    pointer-events: none;
  }
  .ks-panel.active {
    flex: 1 1 auto !important;
    pointer-events: auto;
    cursor: default;
  }

  .ks-title     { font-size: 22px; margin-bottom: 6px; }
  .ks-bgnumber  { font-size: 100px; }
  .ks-info      { left: 18px; bottom: 18px; max-width: 300px; }
  .ks-desc      { font-size: 12px; }
  .ks-arrows    { display: flex; }
}