/* ============================================================
   pages/gallery.css — Before/after compare sliders, gallery grid
   ============================================================ */

.gallery-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   28px;
}

.gallery-item {
  background: var(--surface);
  border:     1px solid var(--border);
  overflow:   hidden;
  position:   relative;
}

/* ---------- Compare slider ---------- */
.compare-slider {
  position:  relative;
  aspect-ratio: 4/3;
  overflow:  hidden;
  cursor:    ew-resize;
  user-select: none;
  background: var(--bg);
}

.compare-img {
  position:        absolute; inset: 0;
  width:           100%; height: 100%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  overflow:        hidden;
}

.compare-img img {
  width:          100%;
  height:         100%;
  object-fit:     cover;
  display:        block;
  pointer-events: none;
  user-select:    none;
  -webkit-user-drag: none;
  draggable:      false;
}

.compare-img.after  { background: linear-gradient(135deg, #1A1814 0%, #2A2620 50%, #1A1814 100%); }
.compare-img.before { background: linear-gradient(135deg, #2B2418 0%, #3A3022 50%, #2B2418 100%); clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%); }
.compare-img.before::after {
  content:  '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(120, 90,  60, 0.40) 0%, transparent 18%),
    radial-gradient(circle at 70% 60%, rgba(140, 110, 70, 0.35) 0%, transparent 22%),
    radial-gradient(circle at 40% 80%, rgba(100, 80,  50, 0.50) 0%, transparent 15%),
    radial-gradient(circle at 85% 25%, rgba(110, 85,  55, 0.40) 0%, transparent 12%);
  mix-blend-mode: overlay;
}

.compare-handle {
  position:        absolute; top: 0; bottom: 0; left: 50%;
  width:           2px;
  background:      var(--accent);
  pointer-events:  none;
  z-index:         3;
}
.compare-handle::before {
  content:          '';
  position:         absolute; top: 50%; left: 50%;
  transform:        translate(-50%, -50%);
  width:            44px; height: 44px;
  border-radius:    50%;
  background:       var(--accent);
}
.compare-handle::after {
  content:   '◀ ▶';
  position:  absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color:       var(--bg);
  font-size:   11px;
  letter-spacing: 4px;
  font-weight: 600;
  z-index:     1;
}

.compare-label {
  position:       absolute; top: 16px;
  padding:        6px 14px;
  background:     rgba(14, 13, 11, 0.85);
  color:          var(--text-primary);
  font-size:      10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight:    500;
  border:         1px solid var(--border-strong);
  z-index:        2;
  pointer-events: none;
}
.compare-label.before { left:  16px; }
.compare-label.after  { right: 16px; }

/* ---------- Gallery meta ---------- */
.gallery-meta {
  padding:         20px 24px;
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  border-top:      1px solid var(--border);
}

.gallery-title-text { font-family: var(--font-serif); font-size: 20px; font-weight: 500; }

.gallery-tag {
  color:          var(--accent);
  font-size:      11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.gallery-cta { text-align: center; margin-top: 50px; }

@media (max-width: 880px) {
  .gallery-grid { grid-template-columns: 1fr; }
}