/* ─────────────────────────────────────────────────────────────────────────────
   gallery — tap a photo, it opens big.

   For a barber the gallery IS the portfolio: nobody books a cut they cannot see
   properly at 300px wide. Same for a gardener's before/afters, a detailer's
   panels, a salon's lookbook. One component, every template.

   Any image inside a [data-gallery] container joins that gallery. No per-photo
   markup, no ids to keep in sync — add a photo to the grid and it is in.
   ───────────────────────────────────────────────────────────────────────── */

/* the affordance: without this nobody knows a photo opens */
/* The badge is a real button now — on cards that already do something (a style
   picker), it is the ONLY thing that opens the gallery. */
.ng-hint{ border:0; cursor:pointer; }
.ng-hint:focus-visible{ opacity:1; transform:none; outline:2px solid #fff; outline-offset:2px; }
@media (hover:none){ .ng-hint{ opacity:1; } }

.ng-hint{
  position:absolute; right:10px; top:10px; z-index:3;
  display:flex; align-items:center; gap:6px;
  padding:6px 9px; border-radius:8px;
  background:rgba(12,10,9,.66); backdrop-filter:blur(6px);
  color:#fff; font:600 11.5px/1 "Space Grotesk","Inter",sans-serif;
  /* ALWAYS visible. It was hover-only and Pawel looked straight at the page
     and reported "no gallery" — an affordance you find by accident is not one.
     It lifts on hover instead of appearing. */
  letter-spacing:.03em; opacity:.92;
  transition:opacity .18s, transform .18s, background .18s;
}
[data-gallery] *:hover > .ng-hint{ opacity:1; background:rgba(12,10,9,.86); }
.ng-hint:hover{ opacity:1; background:rgba(12,10,9,.92); }

/* ── the overlay ──────────────────────────────────────────────────────── */
.ng-lb{
  position:fixed; inset:0; z-index:9000;
  display:flex; align-items:center; justify-content:center;
  background:rgba(10,9,8,.94);
  opacity:0; pointer-events:none; transition:opacity .22s;
  padding:clamp(12px,3vw,48px);
}
.ng-lb.open{ opacity:1; pointer-events:auto; }

.ng-lb figure{
  margin:0; max-width:min(1180px,100%); max-height:100%;
  display:flex; flex-direction:column; gap:14px; align-items:center;
}
.ng-lb img{
  max-width:100%; max-height:calc(100vh - 190px);
  object-fit:contain; border-radius:10px; display:block;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.9);
  transform:scale(.985); transition:transform .22s;
}
.ng-lb.open img{ transform:none; }

.ng-lb figcaption{
  text-align:center; color:#fff; max-width:60ch;
  font-family:"Space Grotesk","Inter",sans-serif;
}
.ng-lb figcaption b{ display:block; font-size:17px; font-weight:600; letter-spacing:-.01em; }
.ng-lb figcaption span{ display:block; margin-top:4px; font-size:13.5px; color:#ffffff8c; }

/* ── controls ─────────────────────────────────────────────────────────── */
.ng-btn{
  position:absolute; z-index:2;
  width:46px; height:46px; border:0; cursor:pointer;
  border-radius:12px; background:rgba(255,255,255,.1);
  color:#fff; font-size:20px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:background .16s, transform .16s;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.ng-btn:hover{ background:rgba(255,255,255,.2); }
.ng-btn:active{ transform:scale(.94); }
.ng-prev{ left:clamp(10px,2.5vw,34px); }
.ng-next{ right:clamp(10px,2.5vw,34px); }
.ng-close{ top:clamp(10px,2.5vw,26px); right:clamp(10px,2.5vw,26px); font-size:22px; }

.ng-count{
  position:absolute; top:clamp(14px,2.5vw,30px); left:50%; transform:translateX(-50%);
  color:#ffffffa6; font:500 13px/1 "Space Grotesk","Inter",sans-serif;
  letter-spacing:.06em;
}

/* On a phone the arrows sit under the thumb instead of over the picture. */
@media (max-width:640px){
  .ng-btn{ width:44px; height:44px; }
  .ng-prev{ left:12px; top:auto; bottom:22px; }
  .ng-next{ right:12px; top:auto; bottom:22px; }
  .ng-lb img{ max-height:calc(100vh - 210px); }
}

@media (prefers-reduced-motion:reduce){
  .ng-lb, .ng-lb img, .ng-btn{ transition:none; }
  .ng-lb img{ transform:none; }
}