/* Pixel Speed Slider v4.2.1 — by jayakrissh */

/* ── Wrapper ── */
.pixel-speed-slider-wrap{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  font-size:0;
  line-height:0;
}

/* ── Stage ── */
.pss-stage{
  position:relative;
  width:100%;
  overflow:hidden;
  background:#111;
  display:block;
  /* height set inline on desktop */
}

/* ── FIX 3: Mobile — use aspect ratio instead of fixed height ── */
/* So full image shows without cutting sides */
@media(max-width:768px){
  .pss-stage{
    height:auto !important;          /* override inline height */
    aspect-ratio:16/9;               /* maintain proportion */
  }
  /* fallback for old browsers that don't support aspect-ratio */
  @supports not (aspect-ratio:1){
    .pss-stage{ height:220px !important; }
  }
}

/* ── Track fills stage ── */
.pss-track{
  position:absolute;
  top:0;right:0;bottom:0;left:0;
}

/* ── Slides ── */
.pss-slide{
  position:absolute;
  top:0;right:0;bottom:0;left:0;
  display:block;
  overflow:hidden;
  transform:translateX(100%);
  will-change:transform;
  z-index:0;
}
.pss-slide:first-child{ transform:translateX(0); }

/* Fade mode */
.pss-mode-fade .pss-slide{
  transform:none !important;
  opacity:0;
  transition:opacity .65s ease;
  pointer-events:none;
}
.pss-mode-fade .pss-slide:first-child{
  opacity:1;
  pointer-events:auto;
}

/* ── Image wrapper ── */
.pss-bg-wrap{
  position:absolute;
  top:0;right:0;bottom:0;left:0;
  overflow:hidden;
  z-index:0;
}

/* ── The image ── */
.pss-bg-wrap img{
  position:absolute;
  top:0;left:0;
  width:100%;
  height:100%;
  /* Desktop: cover fills stage, center crop */
  object-fit:cover;
  object-position:center center;
  display:block;
  transition:transform 7s ease;
}

/* FIX 3: Mobile — show full image, no cropping ── */
@media(max-width:768px){
  .pss-bg-wrap img{
    object-fit:contain;   /* full image visible, no crop */
    object-position:center center;
    background:#111;      /* letterbox colour */
  }
}

/* Ken Burns — desktop only */
.pss-stage:hover .pss-bg-wrap img{
  transform:scale(1.04);
}
@media(max-width:768px){
  .pss-stage:hover .pss-bg-wrap img{ transform:none; }
}

.pss-kenburns img{
  animation:pss-kb 9s ease-in-out infinite alternate;
  transition:none !important;
}
@keyframes pss-kb{
  0%  { transform:scale(1)    translate(0,0);        }
  33% { transform:scale(1.06) translate(-1%,-1%);    }
  66% { transform:scale(1.04) translate(1%,.5%);     }
  100%{ transform:scale(1.08) translate(-.5%,1%);    }
}

/* ── Overlay ── */
.pss-overlay{
  position:absolute;
  top:0;right:0;bottom:0;left:0;
  z-index:1;
  pointer-events:none;
}

/* ── Text content ── */
.pss-content{
  position:absolute;
  bottom:0;left:0;right:0;
  z-index:3;
  padding:14px 16px;
  color:#fff;
  font-size:16px;
  line-height:1.4;
}
.pss-bottom-bar{
  position:absolute;
  bottom:0;left:0;right:0;
  z-index:3;
  padding:10px 16px 13px;
  font-size:16px;
  line-height:1.4;
}
.pss-bar-dark{
  background:rgba(0,0,0,.68);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.pss-bar-light{
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.pss-bar-light .pss-title,
.pss-bar-light .pss-caption{
  color:#1a202c !important;
  text-shadow:none !important;
}
.pss-bar-gradient{
  background:linear-gradient(to top,rgba(0,0,0,.82) 0%,transparent 100%);
}
.pss-title{
  display:block;
  font-size:1.25rem;
  font-weight:700;
  color:#fff;
  margin:0 0 4px;
  line-height:1.3;
  text-shadow:0 1px 6px rgba(0,0,0,.55);
}
.pss-caption{
  display:block;
  font-size:.88rem;
  color:#fff;
  margin:0;
  opacity:.9;
  text-shadow:0 1px 4px rgba(0,0,0,.45);
}
@media(max-width:768px){
  .pss-title{ font-size:.95rem; }
  .pss-caption{ font-size:.78rem; }
}

/* ── Link ── */
.pss-link{
  position:absolute;
  top:0;right:0;bottom:0;left:0;
  display:block;
  z-index:2;
  text-decoration:none;
}

/* ── FIX 2: Arrows — always above slides (z-index:100) ── */
.pss-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:100;                          /* above slides z-index:2 */
  width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.22);
  border:1.5px solid rgba(255,255,255,.5);
  border-radius:50%;
  color:#fff;
  font-size:26px;
  font-weight:300;
  cursor:pointer;
  transition:background .2s,transform .2s;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  padding:0;line-height:1;
  outline:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  box-sizing:border-box;
  pointer-events:auto;           /* always clickable */
}
.pss-arrow:hover{
  background:rgba(255,255,255,.45);
  transform:translateY(-50%) scale(1.1);
}
.pss-prev{ left:10px; }
.pss-next{ right:10px; }

/* Arrow style variants */
.pss-arrow-square{ border-radius:7px !important; }
.pss-arrow-minimal{
  background:transparent !important;
  border:none !important;
  font-size:36px !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  text-shadow:0 1px 5px rgba(0,0,0,.6);
}
.pss-arrow-minimal:hover{
  background:rgba(255,255,255,.12) !important;
  transform:translateY(-50%) !important;
}

/* Mobile arrows — smaller */
@media(max-width:768px){
  .pss-arrow{ width:32px;height:32px;font-size:20px; }
  .pss-prev{ left:6px; }
  .pss-next{ right:6px; }
}

/* ── Progress bar ── */
.pss-progress-bar{
  position:absolute;
  bottom:0;left:0;right:0;
  height:3px;
  z-index:100;
  background:rgba(255,255,255,.15);
}
.pss-bar-fill{
  display:block;
  height:100%;
  width:0%;
  background:rgba(255,255,255,.8);
  transition:none;
}

/* ── Dots ── */
.pss-dots{
  position:absolute;
  bottom:15px;
  left:50%;
  transform:translateX(-50%);
  z-index:100;
  display:flex;
  gap:8px;
  align-items:center;
}
.pss-dot{
  width:8px;height:8px;
  background:rgba(255,255,255,.4);
  border:none;
  border-radius:50%;
  padding:0;
  cursor:pointer;
  transition:all .25s;
  box-shadow:0 1px 3px rgba(0,0,0,.3);
}
.pss-dot-active{
  background:#fff;
  transform:scale(1.3);
  width:18px;
  border-radius:4px;
}
.pss-dot:hover{ background:rgba(255,255,255,.8); }

/* ── Shadow variants ── */
.pss-shadow-sm  { box-shadow:0 2px 12px rgba(0,0,0,.2);  }
.pss-shadow-md  { box-shadow:0 6px 24px rgba(0,0,0,.3);  }
.pss-shadow-lg  { box-shadow:0 12px 40px rgba(0,0,0,.4); }
.pss-shadow-glow{ box-shadow:0 0 0 1px rgba(255,255,255,.05),0 8px 32px rgba(0,0,0,.35); }