/* Common Skin Conditions: photo galleries and enlarge view.
   Uses the site's existing theme tokens (ripple blues, navy). */

.sk-gallery{
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid var(--line);
}
.sk-gallery-label{
  margin:0 0 12px;
  font-size:0.72rem;
  font-weight:700;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--warm);
}
.sk-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(132px, 1fr));
  gap:10px;
}
.sk-thumb{
  display:block;
  padding:0;
  border:1px solid var(--line-strong);
  border-radius:8px;
  background:var(--surface-2);
  overflow:hidden;
  aspect-ratio:1 / 1;
  cursor:zoom-in;
}
.sk-thumb img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform 0.35s ease;
}
.sk-thumb:hover img{ transform:scale(1.05); }
.sk-thumb:focus-visible{ outline:2px solid var(--r-500); outline-offset:2px; }

/* ---------- enlarge view ---------- */
body.sk-lb-open{ overflow:hidden; }
.sk-lightbox{
  position:fixed; inset:0; z-index:90;
  padding:16px;
}
.sk-lightbox:not([hidden]){
  display:flex; align-items:center; justify-content:center;
}
.sk-lb-backdrop{
  position:absolute; inset:0;
  background:rgba(8,24,40,0.86);
}
.sk-lb-figure{
  position:relative; z-index:1;
  margin:0;
  max-width:min(920px, 100%);
  max-height:100%;
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.sk-lb-figure img{
  display:block;
  max-width:100%;
  max-height:calc(100vh - 110px);
  border-radius:10px;
  background:var(--surface);
  box-shadow:0 24px 60px -20px rgba(0,0,0,0.6);
}
.sk-lb-figure figcaption{
  color:var(--on-dark);
  font-size:0.86rem;
  text-align:center;
}
.sk-lb-close,
.sk-lb-nav{
  position:absolute;
  width:38px; height:38px;
  border-radius:50%;
  border:1px solid var(--line-strong);
  background:var(--surface);
  color:var(--ink);
  font-size:1.5rem; line-height:1;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.sk-lb-close{ top:-6px; right:-6px; z-index:2; }
.sk-lb-nav{ top:calc(50% - 40px); z-index:2; }
.sk-lb-nav.prev{ left:8px; }
.sk-lb-nav.next{ right:8px; }
.sk-lb-close:hover, .sk-lb-close:focus-visible,
.sk-lb-nav:hover, .sk-lb-nav:focus-visible{ background:var(--r-200); outline:none; }
.sk-lb-nav[hidden]{ display:none; }

@media (max-width:520px){
  .sk-grid{ grid-template-columns:repeat(auto-fill, minmax(104px, 1fr)); gap:8px; }
  .sk-lb-close{ top:6px; right:6px; }
}
@media (prefers-reduced-motion:reduce){
  .sk-thumb img{ transition:none; }
  .sk-thumb:hover img{ transform:none; }
}

/* ---------- before & after slideshow inside a condition ---------- */
.ba-show{
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid var(--line);
}
.ba-show-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:14px;
}
.ba-show-head .sk-gallery-label{ margin:0; }
.ba-show-ctrl{ display:flex; align-items:center; gap:10px; }
.ba-show-btn{
  width:34px; height:34px;
  border-radius:50%;
  border:1px solid var(--line-strong);
  background:var(--surface);
  color:var(--ink);
  font-size:1.35rem; line-height:1;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.ba-show-btn:hover, .ba-show-btn:focus-visible{ background:var(--r-200); outline:none; }
.ba-show-count{
  min-width:3.2em; text-align:center;
  font-size:0.84rem; color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}
.ba-show .ba-case{ margin-bottom:0; }
.ba-show.is-js .ba-slide:not(.is-active){ display:none; }
.ba-show:not(.is-js) .ba-slide + .ba-slide{ margin-top:36px; }
.ba-show .ba-case h3{ font-size:1.05rem; }
.ba-show-more{ margin:18px 0 0; font-size:0.9rem; }
.ba-show-more a{ color:var(--r-700); font-weight:600; }