/* Klickbara bilder i inläggsytan */
.bab-lb-trigger { cursor: zoom-in; }
.bab-lb-trigger:focus-visible { outline: 3px solid #0a58ca; outline-offset: 3px; }

/* Liten förstoringshint i bildens hörn */
.bab-lb-hint {
  position: absolute; right: 10px; bottom: 10px;
  width: 30px; height: 30px; border-radius: 999px;
  background: rgba(17,17,17,.62);
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; z-index: 2;
}
.bab-lb-hint svg {
  width: 15px; height: 15px; display: block;
  fill: none; stroke: #fff; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Overlayn */
.bab-lb {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483000 !important;
  display: none;
  background: rgba(10,10,10,.94);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: contain;
}
.bab-lb.is-open { display: block; }

.bab-lb__stage {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 56px 12px 72px;
  box-sizing: border-box;
  overflow: hidden;
  touch-action: none;
}
.bab-lb__img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  display: block;
  object-fit: contain;
  border-radius: 3px;
  user-select: none; -webkit-user-drag: none;
  transform-origin: center center;
  transition: transform .25s ease, opacity .2s ease;
  cursor: zoom-in;
}
.bab-lb.is-zoomed .bab-lb__img { cursor: grab; }
.bab-lb.is-dragging .bab-lb__img { transition: none; cursor: grabbing; }
.bab-lb.is-swiping .bab-lb__img { transition: none; }
.bab-lb__img.is-loading { opacity: .35; }

/* Knappar */
.bab-lb button {
  position: absolute;
  background: rgba(255,255,255,.1);
  border: 0; margin: 0; padding: 0;
  color: #fff; cursor: pointer;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  transition: background .18s ease;
  z-index: 3;
}
.bab-lb button:hover { background: rgba(255,255,255,.22); }
.bab-lb button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.bab-lb button svg {
  width: 22px; height: 22px;
  fill: none; stroke: #fff; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
}
.bab-lb__close { top: 12px; right: 12px; width: 46px; height: 46px; }
.bab-lb__nav { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; }
.bab-lb__prev { left: 12px; }
.bab-lb__next { right: 12px; }
.bab-lb.is-single .bab-lb__nav { display: none; }

/* Räknare och bildtext */
.bab-lb__bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 14px 16px 18px;
  text-align: center;
  color: rgba(255,255,255,.9);
  font-size: 14px; line-height: 1.4;
  pointer-events: none;
  z-index: 3;
}
.bab-lb__count { font-variant-numeric: tabular-nums; letter-spacing: .04em; opacity: .8; }
.bab-lb.is-single .bab-lb__count { display: none; }
.bab-lb__caption { display: block; max-width: 60ch; margin: 4px auto 0; }
.bab-lb__caption:empty { display: none; }

@media (max-width: 640px) {
  .bab-lb__stage { padding: 52px 0 64px; }
  .bab-lb__nav { display: none; }   /* på mobil bläddrar man med swipe */
  .bab-lb__close { top: 8px; right: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .bab-lb__img { transition: none; }
}
