/* ==========================================================================
   MEDLINE — LAYER 9: GALLERY
   Grid · masonry · carousel · before/after · lightbox
   ========================================================================== */

.gal { display: grid; gap: var(--sp-3); }
.gal--grid { grid-template-columns: repeat(3, 1fr); }
.gal--masonry { display: block; column-count: 3; column-gap: var(--sp-3); }
.gal--masonry .gal__item { break-inside: avoid; margin-bottom: var(--sp-3); }

.gal__item {
  position: relative; overflow: hidden;
  border-radius: var(--r-md);
  background: var(--surface-3);
  border: 0; padding: 0; cursor: zoom-in; display: block; width: 100%;
}
.gal__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-slow) var(--ease-out); }
.gal--grid .gal__item { aspect-ratio: 4 / 3; }
.gal__item:hover img { transform: scale(1.04); }
.gal__cap {
  position: absolute; inset-inline: 0; bottom: 0;
  padding: var(--sp-4) var(--sp-3) var(--sp-3);
  background: linear-gradient(transparent, rgba(3,16,27,.78));
  color: #fff; font-size: var(--fs-caption); text-align: start;
}

/* --- Carousel: scroll-snap, no JS required to work --- */
.gal--carousel {
  display: flex; gap: var(--sp-3);
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: thin; padding-bottom: var(--sp-2);
}
.gal--carousel .gal__item {
  flex: 0 0 min(420px, 82%); scroll-snap-align: start; aspect-ratio: 4 / 3;
}

/* --- Before / after: draggable divider --- */
.ba {
  position: relative; border-radius: var(--r-md); overflow: hidden;
  aspect-ratio: 4 / 3; background: var(--surface-3); touch-action: none;
}
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba__after { clip-path: inset(0 0 0 var(--split, 50%)); }
.ba__line {
  position: absolute; inset-block: 0; left: var(--split, 50%);
  width: 3px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.25);
  transform: translateX(-50%); pointer-events: none;
}
.ba__grip {
  position: absolute; top: 50%; left: var(--split, 50%);
  transform: translate(-50%, -50%);
  width: 42px; height: 42px; border-radius: 50%;
  background: #fff; color: var(--c-n-900);
  display: grid; place-items: center; font-size: 14px;
  box-shadow: var(--shadow-raised); pointer-events: none;
}
.ba__range {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: ew-resize; margin: 0;
}
.ba__range:focus-visible + .ba__line { outline: 3px solid var(--focus-ring); }
.ba__tag {
  position: absolute; top: var(--sp-3);
  padding: var(--sp-1) var(--sp-3); border-radius: var(--r-full);
  background: rgba(3,16,27,.6); color: #fff;
  font-size: var(--fs-caption); font-weight: var(--fw-bold);
}
.ba__tag--before { inset-inline-start: var(--sp-3); }
.ba__tag--after  { inset-inline-end: var(--sp-3); }

/* --- Lightbox --- */
.lb {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: grid; place-items: center;
  background: rgba(3,10,18,.92);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-slow) var(--ease-out), visibility var(--dur-slow);
}
.lb[data-open="true"] { opacity: 1; visibility: visible; }
.lb__img { max-width: 92vw; max-height: 82vh; object-fit: contain; border-radius: var(--r-sm); }
.lb__cap { color: #fff; margin-top: var(--sp-4); font-size: var(--fs-sm); text-align: center; max-width: 60ch; }
.lb__btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255,255,255,.14); color: #fff; border: 0;
  display: grid; place-items: center; font-size: 22px; cursor: pointer;
}
.lb__btn:hover { background: rgba(255,255,255,.26); }
.lb__prev { inset-inline-start: var(--sp-4); }
.lb__next { inset-inline-end: var(--sp-4); }
.lb__close { top: var(--sp-4); inset-inline-end: var(--sp-4); transform: none; width: 44px; height: 44px; }
.lb__count { position: absolute; top: var(--sp-6); inset-inline-start: var(--sp-6); color: rgba(255,255,255,.7); font-size: var(--fs-caption); }

@media (max-width: 900px) {
  .gal--grid { grid-template-columns: repeat(2, 1fr); }
  .gal--masonry { column-count: 2; }
}
@media (max-width: 600px) {
  .gal--grid { grid-template-columns: 1fr; }
  .gal--masonry { column-count: 1; }
  .lb__btn { width: 44px; height: 44px; }
}