/* Before and after — LIVE, on /holistic-beauty and nowhere else.
   That page links this file and js/before-after.js directly; no other page
   loads either. It stays out of css/site.css because that file is fetched by
   every page and this component is on one of twenty-nine.

   History, because it went out and came back. The comparison was dropped on
   2026-09-03 and the six photographs were shown plainly as .photo-set. The
   client asked for the slider back on 2026-09-09, and was explicit that the
   earlier note was about the WORDING, not the mechanism. So the drag is back
   and the labels are not: no "before", no "after", no captions. The
   .ba__labels rules that used to sit here went with them, and .photo-set
   stays in site.css, unused by this page but still the right answer for a
   grid of photographs that are not a comparison.

   The aria-label on each range still says "Drag to compare", because that is
   what the control does and a control with no name is unusable. It is a
   control label, not copy on the page. */

/* ============================================================
   Before and after — a reveal the reader drags
   The stacked photographs are ONE frame with the after clipped at --split,
   and the reader moves that edge. No arrows and no dots: the seam is the
   affordance.

   The side-by-side layout is the stylesheet's DEFAULT. The overlay needs
   .ba--live, which js/before-after.js adds, and it is additionally fenced
   behind prefers-reduced-motion: no-preference, so reduced motion, no JS and
   an old browser all land on two photographs next to each other.
   Same shape as .hiw--live.

   The control is a real <input type="range">: arrow keys, Home and End,
   role and aria-valuenow all come from the platform rather than from a div
   pretending. It carries pointer-events: none and the stage handles pointer
   input itself, because a range thumb's centre cannot reach the first and
   last half-thumb of its track and the line would lag the finger at the
   edges. The stage sets the value back on the input as it drags, so what a
   screen reader announces is always what is on screen.

   touch-action: pan-y, so a vertical swipe still scrolls the page and only
   a horizontal drag belongs to the component.

   Nothing is written on the photograph, and nothing under it either: the
   labels came off on 2026-09-09 and the frame is the whole component.
   ============================================================ */

.ba-set {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gutter);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 900px) { .ba-set { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ba-set { grid-template-columns: minmax(0, 1fr); } }

.ba { margin: 0; }
.ba__stage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.ba__pane { min-width: 0; }
.ba__pane .img-slot { position: relative; height: auto; aspect-ratio: 3 / 4; }
.ba__handle,
.ba__range { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .ba--live .ba__stage {
    display: block;
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--slot-bg);
    touch-action: pan-y;
    cursor: ew-resize;
    /* A photograph is draggable by default, and pressing on one and moving
       starts a native image drag that cancels the pointer stream a few pixels
       into the gesture. That is the whole gesture here, so it is turned off.
       Touch never starts a native drag, which is why the reveal worked on a
       phone and stopped following the mouse on every desktop. js/before-after.js
       also cancels dragstart, for Firefox, which has no user-drag. */
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
  }
  .ba--live .ba__stage img { -webkit-user-drag: none; }
  .ba--live .ba__pane { position: absolute; inset: 0; }
  .ba--live .ba__pane .img-slot { height: 100%; aspect-ratio: auto; }
  .ba--live .ba__pane--after { clip-path: inset(0 0 0 var(--split, 50%)); }

  /* one hairline, the width of a rule, in paper so it reads against skin */
  .ba--live .ba__handle {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--split, 50%);
    width: 1px;
    transform: translateX(-0.5px);
    background: var(--paper);
    pointer-events: none;
  }

  /* keyboard and assistive tech only; the stage takes the pointer */
  .ba--live .ba__range {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    appearance: none;
    -webkit-appearance: none;
    pointer-events: none;
  }
  .ba--live .ba__range::-webkit-slider-runnable-track { height: 100%; background: transparent; border: 0; }
  .ba--live .ba__range::-moz-range-track { height: 100%; background: transparent; border: 0; }
  .ba--live .ba__range::-webkit-slider-thumb { -webkit-appearance: none; width: 1px; height: 100%; background: transparent; border: 0; }
  .ba--live .ba__range::-moz-range-thumb { width: 1px; height: 100%; background: transparent; border: 0; border-radius: 0; }
  .ba--live .ba__stage.is-focus { outline: 1px solid var(--ink); outline-offset: 4px; }
}