/* ===== JoLash Before–After (no scale, mask) ===== */

/* KONTENER */
.jl-ba{
  position: relative;
  width: 100%;
  max-width: 900px;         /* dostosuj: np. 900px / 100% */
  margin: 2rem auto;
  user-select: none;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  background: #000;
  box-sizing: border-box;
}

/* OBRAZ 'PO' – definiuje wysokość kontenera (responsywnie) */
.jl-ba__img--after{
  display: block;
  width: 100%;
  height: auto;
  max-width: none !important;
  transform: none !important;
  transition: none !important;
}

/* WARSTWA 'PRZED' – pełen rozmiar, maskujemy clip-pathem */
.jl-ba__resize{
  position: absolute;
  inset: 0;
  overflow: hidden;
  clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
  will-change: clip-path;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);   /* stabilizuje piksel przy krawędzi maski */
  will-change: clip-path;
}

/* OBRAZ 'PRZED' – przypięty do rogów; brak skalowania przy suwaku */
.jl-ba__resize .jl-ba__img--before{
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;          /* obie foty powinny mieć te same proporcje */
  max-width: none !important;
  transform: none !important;
  transition: none !important;
}

/* pionowa linia jako gradient w TLE uchwytu (zero cieni = zero „drugiej” kreski) */
.jl-ba__handle::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      to right,
      transparent calc(50% - 1px),
      #fff        calc(50% - 1px),
      #fff        calc(50% + 1px),
      transparent calc(50% + 1px)
    );
  pointer-events:none;
}

/* kapsułka z podwójną strzałką <--->  */
.jl-ba__handle::after{
  content:"";
  position:absolute;
  top:50%; left:50%;
  transform: translate(-50%, -50%);
  width:40px; height:28px;
  border-radius:999px;
  background: rgba(0,0,0,.35);           /* półprzezroczyste tło pod ikonę */
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
  pointer-events:none;

  /* biała ikona w SVG jako tło (zakodowany data URI) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='28' viewBox='0 0 40 28' fill='none'%3E%3Cpath d='M5 14h30' stroke='white' stroke-width='2'/%3E%3Cpath d='M15 14l-6-6v12l6-6z' fill='white'/%3E%3Cpath d='M25 14l6-6v12l-6-6z' fill='white'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 26px 18px;
}

/* kółko */
.jl-ba__handle:after{
  content:"";
  position:absolute;
  top:50%; left:50%;
  transform: translate(-50%, -50%);
  width:36px; height:36px;
  border-radius:50%;
  background:#fff;
  box-shadow: 0 6px 16px rgba(0,0,0,.15), inset 0 0 0 1px rgba(0,0,0,.06);
  pointer-events:none;
}

/* Focus klawiatury */
.jl-ba:has(.jl-ba__handle:focus-visible) .jl-ba__handle:after{
  box-shadow: 0 0 0 3px rgba(33,150,243,.35), 0 6px 16px rgba(0,0,0,.15);
}

/* Fallback bez JS */
.no-js .jl-ba { display: grid; }
.no-js .jl-ba .jl-ba__resize,
.no-js .jl-ba .jl-ba__handle{ display: none; }

/* (opcjonalnie) eliminacja niechcianych highlightów na mobile */
.jl-ba img{
  -webkit-user-drag: none;
  -webkit-tap-highlight-color: transparent;
}

/* === MODYFIKATORY ROZMIARU DLA JO-LASH BEFORE/AFTER === */

/* Standardowy rozmiar (pełny) */
.jl-ba {
  max-width: 900px;
  width: 100%;
  margin: 2rem auto;
}

/* Mniejszy wariant — ~50% szerokości pierwotnego */
.jl-ba--small {
  max-width: 450px;      /* lub dowolna wartość w px */
  width: 50%;            /* działa elastycznie w układach grid/flex */
  margin: 2rem auto;     /* centrowanie */
}

/* Możesz dodać też wersję mini, gdybyś chciał coś jeszcze mniejszego */
.jl-ba--mini {
  max-width: 300px;
  width: 33%;
  margin: 2rem auto;
}

/* Responsywność: poniżej 768 px slider zawsze pełnej szerokości */
@media (max-width: 768px) {
  .jl-ba,
  .jl-ba--small,
  .jl-ba--mini {
    width: 100%;
    max-width: none;
    margin: 1.5rem auto;
  }
}