/* Before & After Gallery – Clinic scope (v0.472 from 0.466)
   Path: static/rightme/css/clinic/beforeafter.css
   Prefix: .pk-ba- */
:root{
  --pk-ba-gap:14px;
  --pk-ba-item-w:320px;
  --pk-ba-item-ratio:4/3;
  --pk-ba-radius:14px;
  --pk-ba-shadow:0 4px 20px rgba(0,0,0,.08);
}
.pk-ba-section{padding:16px 0 8px;background:#fff;}
.pk-ba-shell{position:relative; overflow:hidden;} /* prevent page-level horizontal scroll */
.pk-ba-viewport{
  overflow-x:auto; overflow-y:hidden; scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;
}
.pk-ba-track{display:grid; grid-auto-flow:column; grid-auto-columns:var(--pk-ba-item-w); gap:var(--pk-ba-gap); padding:2px 6px 6px;}
.pk-ba-item{background:#f7f7f8; border-radius:var(--pk-ba-radius); box-shadow:var(--pk-ba-shadow); overflow:hidden; position:relative;}
.pk-ba-imgwrap{aspect-ratio:var(--pk-ba-item-ratio); width:100%; background:#eee; display:block;}
.pk-ba-imgwrap img{width:100%; height:100%; object-fit:cover; display:block;}
.pk-ba-caption{padding:8px 10px 10px; font-size:12px; color:#374151; line-height:1.4;}

/* arrows */
.pk-ba-arrow{position:absolute; top:50%; transform:translateY(-50%); border:0; width:40px; height:40px; border-radius:999px; background:rgba(255,255,255,.92); box-shadow:0 6px 20px rgba(0,0,0,.12); display:grid; place-items:center; cursor:pointer; transition:transform .15s ease,opacity .15s ease; z-index:3;}
.pk-ba-arrow svg{width:20px; height:20px;}
.pk-ba-arrow:hover{transform:translateY(-50%) scale(1.04);}
.pk-ba-prev{left:6px;} .pk-ba-next{right:6px;}
.pk-ba-arrow[disabled]{opacity:.45; pointer-events:none;}

/* gradient edges (optional visual hint) */
.pk-ba-edge{position:absolute; inset:0; pointer-events:none; z-index:2;}
.pk-ba-edge::before,.pk-ba-edge::after{content:""; position:absolute; top:0; bottom:0; width:36px; transition:opacity .2s ease;}
.pk-ba-edge::before{left:0; background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); opacity:.8;}
.pk-ba-edge::after{right:0; background:linear-gradient(-90deg,#fff,rgba(255,255,255,0)); opacity:.8;}
.pk-ba-edge.is-left-end::before{opacity:0;} .pk-ba-edge.is-right-end::after{opacity:0;}

/* responsive */
@media (max-width:640px){:root{--pk-ba-item-w:78vw;}}

/* v0.475 additions */
.pk-ba-viewport{ cursor: grab; -webkit-user-select:none; user-select:none; }
.pk-ba-imgwrap img{ -webkit-user-drag:none; user-drag:none; }

/* v0.476 – Lightbox */
body.pk-noscroll{ overflow:hidden; }
.pk-lightbox[hidden]{ display:none !important; }
.pk-lightbox{
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center;
}
.pk-lightbox__backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,.6);
}
.pk-lightbox__content{
  position:relative; z-index:1; max-width:min(96vw, 1280px); max-height:90vh;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  border-radius:12px; overflow:hidden; background:#000;
  display:flex; align-items:center; justify-content:center;
}
.pk-lightbox__img{
  display:block; max-width:100%; max-height:90vh; width:auto; height:auto;
}
.pk-lightbox__close{
  position:absolute; top:8px; right:8px; width:40px; height:40px; border:0;
  border-radius:999px; background:rgba(255,255,255,.9); cursor:pointer;
  display:grid; place-items:center; box-shadow:0 6px 20px rgba(0,0,0,.3);
}
.pk-lightbox__close svg{ width:20px; height:20px; }