/* =====================================================================
   BEFORE & AFTER SLIDER (homepage only)
   Two photos stacked on top of each other. The "after" photo is cut off
   with clip-path, and the cut moves with the --pos number (0% to 100%)
   that assets/js/before-after.js updates while you drag the gold line.
   Colors come from the variables in styles.css (--gold, --line, etc.).
   ===================================================================== */

/* Compact section so it sits snugly under the hero */
.section.ba-section { padding: 56px 0 64px; }
.ba-section .section-head { margin-bottom: 28px; }
.ba-section .section-head h2 { margin-bottom: 6px; }
.ba-section .section-head p { margin: 0; }

/* Desktop: the two sliders side by side. Phones: stacked (see bottom). */
.ba-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 1080px;
  margin-inline: auto;
}
.ba-figure { margin: 0; }
.ba-figure figcaption {
  margin-top: 12px; text-align: center;
  font-size: 0.92rem; color: var(--muted);
}

/* The slider box itself */
.ba-slider {
  --pos: 50%;
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  background: #222;
  cursor: ew-resize;
  touch-action: pan-y;          /* phones: up/down still scrolls the page, left/right moves the line */
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.ba-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;            /* fills the same 4:3 frame even if a photo is a bit different */
  pointer-events: none;
  -webkit-user-drag: none;
}
/* "After" photo: only the part to the RIGHT of the line shows */
.ba-after { clip-path: inset(0 0 0 var(--pos)); }

/* Garage "before" photo was taken from a step farther back than the "after" photo.
   Zooming it in a little lines up the back wall, furnace, post and step. */
.ba-before.ba-zoom-garage { transform: scale(1.32); transform-origin: 33.5% 68.2%; }

/* Gold divider line */
.ba-divider {
  position: absolute; top: 0; bottom: 0; left: var(--pos);
  width: 3px; margin-left: -1.5px;
  background: var(--gold-light);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.25), 0 0 12px rgba(0,0,0,0.45);
  pointer-events: none;
}

/* Round gold handle with arrows (this is the keyboard-focusable slider) */
.ba-handle {
  position: absolute; top: 50%; left: var(--pos);
  width: 52px; height: 52px; margin: -26px 0 0 -26px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gold);
  color: #121317;
  border: 2px solid var(--gold-pale);
  box-shadow: 0 6px 18px rgba(0,0,0,0.5);
  cursor: ew-resize;
  outline: none;
}
.ba-handle svg { width: 28px; height: 28px; display: block; }
.ba-handle:focus-visible { box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px var(--gold-pale), 0 6px 18px rgba(0,0,0,0.5); }
.ba-slider.is-dragging .ba-handle { background: var(--gold-light); }

/* "Before" / "After" corner labels */
.ba-label {
  position: absolute; top: 14px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(12,12,14,0.78);
  border: 1px solid var(--line);
  color: var(--white);
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  line-height: 1.4;
  pointer-events: none;
  transition: opacity .2s;
}
.ba-label-before { left: 14px; }
.ba-label-after { right: 14px; color: var(--gold-pale); }
/* Hide a label when the line is pushed over it */
.ba-slider.hide-before .ba-label-before,
.ba-slider.hide-after .ba-label-after { opacity: 0; }

.ba-more { text-align: center; margin: 28px 0 0; }

/* Phones and small tablets: one slider per row */
@media (max-width: 760px) {
  .section.ba-section { padding: 44px 0 52px; }
  .ba-section .section-head { margin-bottom: 22px; }
  .ba-grid { grid-template-columns: 1fr; gap: 28px; }
  .ba-handle { width: 46px; height: 46px; margin: -23px 0 0 -23px; }
  .ba-label { top: 10px; font-size: 0.7rem; padding: 4px 10px; }
  .ba-label-before { left: 10px; }
  .ba-label-after { right: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .ba-label { transition: none; }
}