/* upholstery1066.uk — gallery & browsing enhancements
 *
 * Global site behaviour. Namespaced `u1066-` so it cannot collide with the theme and
 * can be lifted into the Bolt 6 theme unchanged.
 *
 * Theme breakpoints are min-width 640 / 768 / 1280, so "mobile" here is max-width 767px,
 * matching the theme's own boundary rather than inventing a new one.
 */

/* ── 1. Category tiles: the whole card is one clickable target ──────────────── */
.u1066-tile { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.u1066-tile .category--project__photo {
  transition: transform .35s cubic-bezier(.22,.61,.36,1),
              box-shadow .35s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
  transform-origin: center center;
}
.u1066-tile:hover .category--project__photo,
.u1066-tile:focus-within .category--project__photo {
  transform: scale(1.015);
  box-shadow: 0 10px 34px rgba(0,0,0,.30);
}
.u1066-tile:active .category--project__photo { transform: scale(.995); }
/* The magnifier promised a viewer that never opened; on a card whose job is
   navigation it was actively misleading. */
.u1066-tile .b-photo-hover { display: none !important; }
.u1066-tile .category--project__link { pointer-events: none; }
.u1066-tile:focus-visible { outline: 3px solid #f03d00; outline-offset: 3px; }
.u1066-tile { max-width: 100%; }

.u1066-openable { cursor: zoom-in; }

/* ── 2. MOBILE ONLY: one frame, swiped like a carousel ─────────────────────────
 * The theme lays photos out as `display:flex; flex-wrap:wrap`, which on a phone
 * stacks every photograph vertically — up to 29 of them before the customer reaches
 * the price. Switching to nowrap + scroll-snap turns the same markup into a single
 * frame without touching the HTML, and native scroll-snap gives momentum and glide
 * for free (no JS animation loop, so it stays smooth on old phones).
 * Desktop is deliberately untouched: the grid works well there.
 */
@media (max-width: 767px) {
  ul.project--photos.u1066-strip {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    min-height: 0;
    padding: 4px;
    overscroll-behavior-x: contain;
  }
  ul.project--photos.u1066-strip::-webkit-scrollbar { display: none; }

  .u1066-strip > li.project--photos__photo {
    flex: 0 0 100%;
    max-width: 100%;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }
  .u1066-strip .project--photos__photo-container {
    margin: 0;
    min-height: 0;
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
  }
  .u1066-strip .project--photos__photo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  /* The hover magnifier is meaningless on touch and covers the photo. */
  .u1066-strip .b-photo-hover { display: none !important; }

  /* Counter + dots under the frame */
  .u1066-strip-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .7rem;
    padding: .6rem .8rem .9rem;
    background: #181516;
    color: #fff;
    font: 500 .8rem/1 system-ui, sans-serif;
  }
  .u1066-strip-count { font-variant-numeric: tabular-nums; letter-spacing: .06em; opacity: .85; }
  .u1066-strip-dots { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; max-width: 60%; }
  .u1066-strip-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: rgba(255,255,255,.32);
    transition: background .2s ease, transform .2s ease;
  }
  .u1066-strip-dot.is-on { background: #f03d00; transform: scale(1.35); }
  .u1066-strip-hint { opacity: .6; font-size: .72rem; }
}

/* Desktop keeps the original stacked grid. */
@media (min-width: 768px) { .u1066-strip-bar { display: none; } }

/* ── 3. The viewer ─────────────────────────────────────────────────────────── */
.u1066-lb {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(8,8,10,.96);
  display: none; opacity: 0;
  touch-action: none;
  user-select: none; -webkit-user-select: none;
  transition: opacity .22s ease;
}
.u1066-lb.is-open { display: block; }
.u1066-lb.is-visible { opacity: 1; }

.u1066-lb__track { position: absolute; inset: 0; display: flex; will-change: transform; }
.u1066-lb__slide {
  position: relative; flex: 0 0 100%; height: 100%;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.u1066-lb__img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  will-change: transform;
  -webkit-user-drag: none;
}
.u1066-lb__slide.is-zoomed { cursor: grab; }
.u1066-lb__slide.is-panning { cursor: grabbing; }

.u1066-lb__bar {
  position: absolute; left: 0; right: 0; top: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: .85rem 1rem; color: #fff;
  font: 500 .85rem/1.4 system-ui, sans-serif;
  background: linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,0));
  pointer-events: none;
}
.u1066-lb__count { font-variant-numeric: tabular-nums; letter-spacing: .05em; }
.u1066-lb__zoomhint { opacity: .75; font-size: .78rem; }

.u1066-lb__btn {
  position: absolute;
  background: rgba(255,255,255,.10); border: none; color: #fff;
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; pointer-events: auto;
  transition: background .2s ease;
}
.u1066-lb__btn:hover { background: rgba(255,255,255,.22); }
.u1066-lb__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.u1066-lb__btn svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2.2; }
.u1066-lb__close { top: .7rem; right: .7rem; }
.u1066-lb__prev  { left: .7rem;  top: 50%; transform: translateY(-50%); }
.u1066-lb__next  { right: .7rem; top: 50%; transform: translateY(-50%); }
.u1066-lb__btn[hidden] { display: none; }

.u1066-lb__caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1rem 1.2rem; text-align: center;
  color: rgba(255,255,255,.9);
  font: 400 .85rem/1.45 system-ui, sans-serif;
  background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.6));
  pointer-events: none;
}

.u1066-lb__spinner {
  position: absolute; top: 50%; left: 50%;
  width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border: 3px solid rgba(255,255,255,.25); border-top-color: #fff;
  border-radius: 50%; animation: u1066-spin .8s linear infinite;
}
@keyframes u1066-spin { to { transform: rotate(360deg); } }

html.u1066-lb-open, body.u1066-lb-open { overflow: hidden !important; }

@media (max-width: 767px) {
  /* Swipe replaces the arrows at 1x... */
  .u1066-lb__prev, .u1066-lb__next { display: none; }
  /* ...but while zoomed, swipe pans the photo, so the arrows must come back or the
     customer would have to zoom out just to reach the next picture. */
  .u1066-lb.is-zoomed .u1066-lb__prev,
  .u1066-lb.is-zoomed .u1066-lb__next { display: flex; }
  .u1066-lb.is-zoomed .u1066-lb__prev[hidden],
  .u1066-lb.is-zoomed .u1066-lb__next[hidden] { display: none; }
  .u1066-lb__zoomhint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .u1066-lb, .u1066-lb__track, .u1066-lb__img,
  .u1066-tile .category--project__photo { transition: none !important; }
  ul.project--photos.u1066-strip { scroll-behavior: auto; }
  .u1066-lb__spinner { animation-duration: 2s; }
}