/* ============================================================
   GALLERY.CSS — before/after comparison sliders

   Mechanics:
   - .img-after fills the card (the "after" photo).
   - .img-before-wrap clips the "before" photo; its WIDTH is the
     reveal amount, updated by gallery.js (default 50%).
   - .img-before is locked to the full CARD width via --card-w
     (set by gallery.js on load + resize) so it never squashes
     as the wrapper narrows.
============================================================= */

.gallery-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.slider-container {
  position: relative;
  width: 100%;
  aspect-ratio: 8 / 5;
  border-radius: var(--radius);
  overflow: hidden;
  user-select: none;
  touch-action: pan-y;
  background-color: var(--color-surface);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* AFTER image — full card, underneath */
.slider-container .img-after {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* BEFORE wrapper — clips horizontally; width = reveal position */
.img-before-wrap {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 50%;                 /* gallery.js overrides */
  overflow: hidden;
  will-change: width;
}

/* BEFORE image — locked to full card width so alignment holds */
.img-before-wrap .img-before {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: var(--card-w, 100%);
  max-width: none;
  object-fit: cover;
}

/* Labels */
.label {
  position: absolute;
  top: 0.75rem;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--color-green);
  background-color: rgba(13, 13, 13, 0.72);
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  z-index: 3;
  pointer-events: none;
}
.label-before { left: 0.75rem; }
.label-after  { right: 0.75rem; }

/* Drag handle / divider */
.slider-handle {
  position: absolute;
  top: 0;
  left: 50%;                  /* gallery.js overrides */
  transform: translateX(-50%);
  height: 100%;
  width: 44px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: ew-resize;
  touch-action: none;
}
.slider-handle::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  transform: translateX(-50%);
  background-color: var(--color-green);
}

/* Round grip with chevrons */
.handle-grip {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: var(--color-green);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.handle-grip::before,
.handle-grip::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  border-block: 6px solid transparent;
}
.handle-grip::before {
  left: 8px;
  transform: translateY(-50%);
  border-right: 7px solid var(--color-bg);
}
.handle-grip::after {
  right: 8px;
  transform: translateY(-50%);
  border-left: 7px solid var(--color-bg);
}

/* ============================================================
   RESPONSIVE
============================================================= */
@media (min-width: 600px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .gallery-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}