/*
 * Before and after projects gallery.
 *
 * Loads after lps.css. The Work section shows one big before/after viewer (the
 * verbatim .ba slider from lps.css) plus a row of project thumbnails below it.
 * Clicking a thumbnail loads that project into the big viewer. Thumbnails match
 * the mockup's original gallery cells and theme off the same CSS variables, so
 * the two color pickers restyle this section too.
 */

/*
 * Thumbnail strip. One horizontal row that scrolls when there are more projects
 * than fit across (Lance runs 9+), and just centers itself when they all fit.
 * width:fit-content + max-width:100% + margin auto gives "center when few,
 * scroll when many" without the first thumbnail getting clipped. The vertical
 * padding leaves room for the hover lift and the drop shadows, which the y-axis
 * overflow clip would otherwise cut off.
 */
.lps-thumbs{
  display:flex;
  gap:14px;
  margin:32px auto 0;
  width:-webkit-fit-content;
  width:fit-content;
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  padding:10px 2px 16px;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:var(--blue) var(--sky-2);
  cursor:grab;
  user-select:none;
}
.lps-thumbs:active{cursor:grabbing}
.lps-thumbs::-webkit-scrollbar{height:8px}
.lps-thumbs::-webkit-scrollbar-track{background:var(--sky-2);border-radius:8px}
.lps-thumbs::-webkit-scrollbar-thumb{background:var(--blue);border-radius:8px}
.lps-thumb{
  position:relative;
  flex:none;
  scroll-snap-align:start;
  width:170px;
  aspect-ratio:4/3;
  padding:0;
  margin:0;
  border:3px solid #fff;
  border-radius:12px;
  overflow:hidden;
  cursor:pointer;
  background:none;
  box-shadow:0 12px 26px -16px rgba(13,35,59,.4);
  transition:transform .2s,box-shadow .2s;
}
/*
 * The thumbnail is a <button> whose height comes from aspect-ratio. Keep the
 * image absolutely positioned and filling the box so a lazy-loaded image can
 * never resolve its height against an indefinite box and blow the thumbnail up
 * to full size. This is the same pattern the big slider uses (.ba .layer).
 */
.lps-thumb img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  /* Parking-lot photos have the work along the bottom, so anchor the crop low
     to keep it in frame instead of centering (which cuts the bottom off). */
  object-position:50% 80%;
  /* Let drag-to-scroll and clicks land on the button, and stop the browser's
     native image-drag ghost while dragging the strip. */
  pointer-events:none;
  display:block;
}
.lps-thumb:hover{
  transform:translateY(-3px);
}
.lps-thumb:focus-visible{
  outline:3px solid var(--blue);
  outline-offset:2px;
}
.lps-thumb.active{
  border-color:var(--amber);
  box-shadow:0 0 0 2px var(--amber),0 12px 26px -16px rgba(13,35,59,.4);
}

@media(max-width:560px){
  .lps-thumb{width:140px}
}