/* Tuplebits Thumbnail Viewer + Zoom Lightbox (Responsive v2)
   Fixes mobile overflow by enforcing min-width:0 in grid cards and constraining viewer/thumbnail rail widths.
*/

/* Prevent CSS grid children from overflowing on small screens */
.pgrid > .card{min-width:0}
.two > .card{min-width:0}

/* Component container behaves like a normal card interior */
.thumbnail-viewer{
  background:#f6f7f9;
  padding:12px;
  max-width:100%;
  overflow:hidden; /* critical: prevents horizontal spill */
  box-sizing:border-box;
}

/* Main viewer */
.thumbnail-viewer .viewer{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(2,6,23,.08);
  max-width:100%;
  box-sizing:border-box;
}

.thumbnail-viewer .viewer-img{
  display:block;
  width:100%;
  max-width:100%;
  height: clamp(240px, 70vw, 460px);
  object-fit: contain;
  background:#fff;
  cursor: zoom-in;
}

/* Arrows inside viewer */
.thumbnail-viewer .nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:40px;height:40px;border-radius:50%;
  border:1px solid rgba(2,6,23,.15);
  background:rgba(255,255,255,.92);
  font-size:24px;font-weight:700;line-height:36px;
  cursor:pointer;z-index:2
}
.thumbnail-viewer .prev{left:10px}
.thumbnail-viewer .next{right:10px}
.thumbnail-viewer .nav:focus{outline:2px solid rgba(2,132,199,.35);outline-offset:2px}

/* Thumbnails rail */
.thumbnail-viewer .thumbs-wrap{
  position:relative;
  margin-top:10px;
  max-width:100%;
  overflow:hidden; /* prevents rail from forcing page wider */
  box-sizing:border-box;
}

.thumbnail-viewer .thumbs{
  display:flex;
  gap:10px;
  padding:2px 38px;           /* room for nav buttons */
  overflow-x:auto;            /* allow navigation even on tiny screens */
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
  max-width:100%;
  box-sizing:border-box;
}

/* Hide scrollbar but keep scrolling */
.thumbnail-viewer .thumbs::-webkit-scrollbar{height:0px}
.thumbnail-viewer .thumbs{scrollbar-width:none}
.thumbnail-viewer .thumbs::-webkit-scrollbar-thumb{background:transparent}

.thumbnail-viewer .thumb{
  flex:0 0 auto;
  width:82px;
  border-radius:12px;
  border:1px solid rgba(2,6,23,.10);
  background:#fff;
  padding:6px;
  cursor:pointer;
  scroll-snap-align:start;
  box-sizing:border-box;
}

.thumbnail-viewer .thumb img{
  width:100%;
  height:54px;
  object-fit:cover;
  border-radius:8px;
  display:block;
}

.thumbnail-viewer .thumb.is-active{
  border-color: rgba(2,132,199,.55);
  box-shadow: 0 0 0 3px rgba(2,132,199,.12);
}

/* Thumbnail strip nav buttons */
.thumbnail-viewer .thumb-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:32px;
  height:32px;
  border-radius:999px;
  border:1px solid rgba(2,6,23,.15);
  background:rgba(255,255,255,.95);
  cursor:pointer;
  z-index:4
  pointer-events:none;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  font-weight:700;
  line-height:1;
}
.thumbnail-viewer .thumb-nav.prev{left:6px}
.thumbnail-viewer .thumb-nav.next{right:6px}
.thumbnail-viewer .thumb-nav[disabled]{opacity:.35;cursor:default}

/* Small screens: tighten everything */
@media (max-width: 520px){
  .thumbnail-viewer{padding:10px}
  .thumbnail-viewer .viewer-img{height: clamp(210px, 80vw, 360px)}
  .thumbnail-viewer .nav{width:36px;height:36px;font-size:22px;line-height:32px}
  .thumbnail-viewer .thumbs{gap:8px;padding:2px 34px}
  .thumbnail-viewer .thumb{width:72px;padding:6px}
  .thumbnail-viewer .thumb img{height:48px}
  .thumbnail-viewer .thumb-nav{width:30px;height:30px;font-size:17px}
}

/* Zoom Lightbox (unchanged) */
.lb{
  position:fixed;inset:0;display:none;z-index:9999;
  background:rgba(2,6,23,.82)
}
.lb.is-open{display:block}
.lb-close{
  position:absolute;top:18px;right:18px;
  width:44px;height:44px;border-radius:12px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  color:#fff;font-size:28px;line-height:40px;
  cursor:pointer;z-index:3
}
.lb-stage{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:118px; /* reserves space for hint + thumbnail strip */
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.lb-stage img{
  max-width:92vw;max-height:88vh;
  transform-origin:center center;
  cursor:zoom-in;
  user-select:none;-webkit-user-drag:none
}
.lb-stage img.is-zoomed{cursor:grab;pointer-events:none}
.lb-stage img.is-zoomed:active{cursor:grabbing}
.lb-hint{
  position:absolute;left:50%;bottom:84px;transform:translateX(-50%);
  color:rgba(255,255,255,.84);font-size:13px;
  padding:6px 10px;border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
  z-index:3
}

/* Lightbox navigation + thumbnails */
.lb-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;height:44px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:28px;
  line-height:40px;
  cursor:pointer;
  z-index:4;
}
.lb-nav.prev{left:16px}
.lb-nav.next{right:16px}
.lb-nav:focus{outline:2px solid rgba(255,255,255,.35);outline-offset:2px}

.lb-thumbs-wrap{
  position:absolute;
  left:0;right:0;
  bottom:10px;
  display:flex;
  justify-content:center;
  z-index:3;
  pointer-events:none; /* allow only inner thumbs to capture */
}
.lb-thumbs{
  pointer-events:auto;
  display:flex;
  gap:10px;
  padding:8px 12px;
  max-width:min(92vw, 980px);
  overflow:auto;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  -webkit-overflow-scrolling:touch;
}
.lb-thumbs::-webkit-scrollbar{height:0px}
.lb-thumbs{scrollbar-width:none}

.lb-thumb{
  width:64px;
  height:44px;
  border-radius:10px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  cursor:pointer;
  flex:0 0 auto;
  opacity:.78;
}
.lb-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.lb-thumb.is-active{
  opacity:1;
  border-color:rgba(255,255,255,.45);
  box-shadow:0 0 0 3px rgba(255,255,255,.10);
}

@media (max-width: 520px){
  .lb-nav{width:40px;height:40px;font-size:26px;line-height:36px}
  .lb-thumb{width:56px;height:40px}
  .lb-thumbs{gap:8px;padding:7px 10px}

  .lb-stage{bottom:112px}
  .lb-hint{bottom:78px}
}