/* Before and after sliders (24 Oct 2026). From a reel Sam sent: on a home-improvement site the
   gallery should be a slidable before and after, because a visitor relates to the before ("mine
   looks like that"). Behaviour is assets/js/wl-ba.js, the markup comes from tools/ba-sliders.py,
   and the photo pairs are the ba-* crops in tools/make-crops.py (docs/photo-catalogue.md).
   Kept out of wl.css on purpose: only the pages that carry a slider load this file.

   The before is the left of the divider, the after the right, as in the reel. The before layer is
   the full photo clipped at the divider, so neither photo is ever stretched or squeezed.
   The existing .wl-ba chip class in wl.css (the Before and After labels on side-by-side pairs) is a
   different thing; every class here starts wl-ba- so the two never meet. */

/* The divider position, animatable so a keyboard step or a click glides (no effect where the
   browser lacks @property: the divider then jumps, which is fine) */
@property --wl-ba-pos{syntax:'<percentage>';inherits:true;initial-value:50%}

.wl-ba-slider{--wl-ba-pos:50%;--wl-ba-ratio:1;position:relative;margin:0;transition:--wl-ba-pos .25s ease}
.wl-ba-slider.is-dragging{transition:none}
/* the one-off nudge when a slider first comes into view (wl-ba.js; never under reduced motion) */
.wl-ba-slider.is-hinting{transition:--wl-ba-pos .6s cubic-bezier(.45,0,.55,1)}

/* touch-action: a mostly vertical swipe scrolls the page as usual, a sideways one drags the divider
   (the browser cancels the drag the moment it starts a vertical scroll), and pinch zoom still works */
.wl-ba-slider_frame{position:relative;overflow:hidden;isolation:isolate;aspect-ratio:var(--wl-ba-ratio);
  border-radius:.5em;background-color:var(--swatch--dark-tan,#EEE1D3);cursor:ew-resize;
  touch-action:pan-y pinch-zoom;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent}
.wl-ba-slider_img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;
  pointer-events:none;-webkit-user-drag:none;user-select:none}
.wl-ba-slider_before{position:absolute;inset:0;z-index:1;clip-path:inset(0 calc(100% - var(--wl-ba-pos)) 0 0)}

/* Tags: the shape and type of the site's tag chip (.project_category_item.heading-12), in two
   colours so the halves read at a glance: slate for the before, the logo orange for the after,
   with the deep slate that the site puts on orange (4.8:1). Each tag sits in its own layer, so the
   divider covers it as it passes, the same as the photo under it. */
.wl-ba-slider_tag{position:absolute;top:1.25em;padding:.667em 1em;border-radius:.333em;
  font-family:var(--font-family--heading,Poppins,Arial,sans-serif);font-size:.75em;font-weight:600;line-height:1.2;
  letter-spacing:.02em;text-transform:uppercase;pointer-events:none;box-shadow:0 1px 6px rgba(31,38,43,.35)}
.wl-ba-slider_tag.is-before{left:1.25em;background-color:var(--swatch--black,#303A42);color:var(--swatch--tan,#FFF5E8)}
.wl-ba-slider_tag.is-after{right:1.25em;z-index:0;background-color:var(--swatch--blue,#FD5722);color:var(--wl-on-orange,#1F262B)}

/* The divider and its round white handle with two arrows. The handle stays fully inside the frame
   at the ends; the line goes right to the edge. */
.wl-ba-slider_line{position:absolute;top:0;bottom:0;left:var(--wl-ba-pos);z-index:2;width:2px;margin-left:-1px;
  background-color:#FFF;box-shadow:0 0 6px rgba(31,38,43,.4);pointer-events:none}
.wl-ba-slider_handle{position:absolute;top:50%;left:clamp(1.5em,var(--wl-ba-pos),calc(100% - 1.5em));z-index:3;
  display:flex;align-items:center;justify-content:center;width:3em;height:3em;margin:-1.5em 0 0 -1.5em;border-radius:50%;
  background-color:#FFF;color:var(--swatch--black,#303A42);box-shadow:0 2px 10px rgba(31,38,43,.4);pointer-events:none;
  transition:transform .2s ease}
.wl-ba-slider_handle svg{display:block;width:1.75em;height:1.75em}
.wl-ba-slider.is-dragging .wl-ba-slider_handle{transform:scale(1.08)}

/* The accessible control: a native range input, invisible, sitting on the handle so a screen
   reader's focus box lands there. The arrow keys move it (wl-ba.js); the focus ring is drawn on
   the handle. It takes no pointer events: dragging is handled on the frame. A mouse press focuses
   it too (so the arrow keys work next) but sets is-pointer, which holds the ring back until a key
   is pressed or focus moves away. */
.wl-ba-slider_range{position:absolute;top:50%;left:clamp(1.5em,var(--wl-ba-pos),calc(100% - 1.5em));z-index:4;
  width:3em;height:3em;margin:-1.5em 0 0 -1.5em;padding:0;border:0;opacity:0;pointer-events:none;
  -webkit-appearance:none;appearance:none;background:none}
.wl-ba-slider:not(.is-pointer) .wl-ba-slider_range:focus-visible~.wl-ba-slider_handle{outline:3px solid var(--swatch--blue,#FD5722);outline-offset:3px}

/* A slider standing in for a pair in a job page's photos: the full row, square, capped at 85% of
   the screen height and centred (the same cap as a lone gallery photo), full width on phones */
.wl-ba-feature{width:min(100%,calc(85vh * var(--wl-ba-ratio,1)));margin-left:auto;margin-right:auto}
.wl-ba-feature+.project-gallery_list-wrapper{margin-top:var(--_responsive-variables---spacing--24,1.5em)}
@media (max-width:479px){.wl-ba-feature{width:100%}}

/* The heading and Finished / Before & after switch (Projects page, then Home's gallery) and the two
   views were removed on 24 Oct 2026 (Sam, on the live Home gallery: "or the finished + before/after
   tab"); that CSS is in ~/Downloads/Claude/_archive/white-lodge-home-gallery-finished-view-2026-10-24/wl-ba.css. */

/* The slider cards: two across, one on phones */
.wl-ba-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--_responsive-variables---spacing--64,4em) var(--_responsive-variables---spacing--40,2.5em);
  margin:0;padding:0;list-style:none}
@media (max-width:767px){.wl-ba-grid{grid-template-columns:minmax(0,1fr);gap:2.5em}}
.wl-ba-card{position:relative;min-width:0;margin:0;padding:0}
/* the starting problem, in the before's corner of the photo, as in the reel. Not on any page since 24 Oct
   2026 (Sam: "dont need black tags on each that say the issue"; tools/ba-sliders.py CHIPS) */
.wl-ba-card_problem{position:absolute;left:.875em;bottom:.875em;z-index:5;max-width:calc(100% - 1.75em);padding:.5em .75em;
  border-radius:.333em;background-color:rgba(31,38,43,.88);color:var(--swatch--tan,#FFF5E8);
  font-family:var(--font-family--heading,Poppins,Arial,sans-serif);font-size:.875em;font-weight:600;line-height:1.3;pointer-events:none}
/* the words under the photo open the job page; the photo itself is for dragging */
.wl-ba-card_body{position:relative;display:flex;flex-direction:column;gap:.625em;margin-top:1.25em}
.wl-ba-card_title{margin:0;color:var(--swatch--black,#303A42);font-family:var(--font-family--heading,Poppins,Arial,sans-serif);
  font-size:var(--_responsive-variables---heading--h-24,1.5em);font-weight:600;line-height:1.2;text-transform:uppercase}
.wl-ba-card_link{color:inherit;text-decoration:none;transition:color .2s ease}
.wl-ba-card_link::after{content:"";position:absolute;inset:-.5em 0}
.wl-ba-card_body:hover .wl-ba-card_link{color:var(--wl-orange-ink,#BC3005)}
.wl-ba-card_link:focus-visible{outline:none}
.wl-ba-card_link:focus-visible::after{outline:2px solid var(--swatch--black,#303A42);outline-offset:2px;border-radius:.25em}
.wl-ba-card_meta{display:flex;flex-wrap:wrap;align-items:center;gap:.375em 1em;margin:0;padding:0;list-style:none;
  color:var(--swatch--black,#303A42);font-size:var(--_responsive-variables---paragraph--text-14,.875em);line-height:1.5}
.wl-ba-card_meta li{display:flex;align-items:center;gap:.25em}
.wl-ba-card_meta svg{flex:none;width:1.125em;height:1.125em}
@media (max-width:767px){.wl-ba-card_title{font-size:var(--_responsive-variables---paragraph--text-18,1.125em)}}

/* A slider as the cover photo of a Services job card (6 Nov 2026, Harry). It fills the card's photo
   box, whatever shape that is, and sits above the card's stretched link: dragging moves the divider,
   a tap opens the job (wl-ba.js, data-wl-ba-open). A little smaller than a full slider. */
.wl-job-card_img:has(.wl-ba-slider){position:relative;z-index:2}
.wl-job-card_img .wl-ba-slider{height:100%;font-size:.8125rem}
.wl-job-card_img .wl-ba-slider_frame{height:100%;aspect-ratio:auto;border-radius:inherit;cursor:pointer}
.wl-job-card_img .wl-ba-slider.is-dragging .wl-ba-slider_frame{cursor:ew-resize}
.wl-job-card_img .wl-ba-slider_tag{top:.875em;padding:.5em .75em;font-size:.6875em}
.wl-job-card_img .wl-ba-slider_tag.is-before{left:.875em}
.wl-job-card_img .wl-ba-slider_tag.is-after{right:.875em}
.wl-job-card:hover .wl-job-card_img .wl-ba-slider_img{transform:none}

@media (prefers-reduced-motion:reduce){
  .wl-ba-slider,.wl-ba-slider.is-hinting,.wl-ba-slider_handle,.wl-ba-card_link{transition:none}
}