/* ============================================================
   Галерея + лайтбокс со свайпом — 3D Contructions
   ============================================================ */
.gallery,.lightbox{
  --g-ink:#0b0d10;
  --g-paper:#ffffff;
  --g-yellow:#FFD400;
  --g-amber:#E8A90C;
  --g-green:#17A34A;
  --g-red:#D93025;
  --g-blue:#1A73E8;
  --g-track:#20242b;
  --g-thumb:#FFD400;
}

/* -----------inline галерея ---------- */
.gallery{margin:6px 0 22px}
.gallery__main{
  position:relative;background:#0b0d10;border:3px solid #111214;border-radius:16px;overflow:hidden;
  box-shadow:0 4px 0 rgba(17,18,20,.9),0 14px 30px rgba(17,18,20,.14);
  touch-action:pan-y;
}
.shot{display:none;width:100%;border:0;padding:0;background:none;cursor:zoom-in;line-height:0}
.shot.is-active{display:block;animation:shot-in .26s ease}
@keyframes shot-in{from{opacity:0;transform:scale(.995)}}
.shot img{width:100%;max-height:min(70vh,760px);object-fit:contain;display:block;-webkit-user-drag:none;user-select:none}
.shot__zoom{
  position:absolute;right:12px;bottom:12px;display:inline-flex;align-items:center;gap:6px;
  background:rgba(11,13,16,.78);color:#fff;border:2px solid rgba(255,255,255,.22);
  padding:7px 12px;border-radius:999px;font:700 12.5px/1 system-ui,sans-serif;
  backdrop-filter:blur(6px);pointer-events:none;
}
.gallery__count{
  position:absolute;left:12px;top:12px;
  background:var(--g-yellow);color:#111214;border:2px solid #111214;border-radius:999px;
  padding:5px 11px;font:800 12px/1 ui-monospace,Consolas,monospace;pointer-events:none;
}
.gallery__arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:42px;height:56px;display:grid;place-items:center;
  border:2px solid #111214;background:rgba(255,255,255,.9);color:#111214;
  font:800 24px/1 system-ui,sans-serif;cursor:pointer;opacity:0;transition:opacity .18s ease,background-color .15s ease;
}
.gallery__main:hover .gallery__arrow{opacity:1}
.gallery__arrow:hover{background:var(--g-yellow)}
.gallery__arrow--prev{left:0;border-radius:0 12px 12px 0;border-left:0}
.gallery__arrow--next{right:0;border-radius:12px 0 0 12px;border-right:0}

.gallery__thumbs{
  display:flex;gap:9px;overflow-x:auto;padding:12px 2px 8px;scroll-behavior:smooth;
  scrollbar-width:thin;scrollbar-color:var(--g-amber) #e9edf2;
}
.thumb{
  flex:0 0 104px;height:78px;padding:0;border:3px solid transparent;border-radius:11px;overflow:hidden;
  background:#eceff2;cursor:pointer;transition:border-color .15s ease,transform .15s ease;
}
.thumb:hover{transform:translateY(-2px)}
.thumb.is-active{border-color:var(--g-yellow);box-shadow:0 0 0 2px #111214}
.thumb img{width:100%;height:100%;object-fit:cover;display:block;-webkit-user-drag:none}
.gallery__thumbs::-webkit-scrollbar{height:9px}
.gallery__thumbs::-webkit-scrollbar-track{background:#e9edf2;border-radius:999px}
.gallery__thumbs::-webkit-scrollbar-thumb{background:var(--g-amber);border:2px solid #111214;border-radius:999px}
.gallery__thumbs::-webkit-scrollbar-thumb:hover{background:var(--g-green)}

/* ---------- лайтбокс ---------- */
.lightbox{
  position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;height:100vh;height:100dvh;
  background:
    radial-gradient(circle at 18px 18px, rgba(255,255,255,.03) 2.3px, transparent 2.9px) 0 0/34px 34px,
    radial-gradient(130% 95% at 50% -10%, #1c212a 0%, #0c0f13 58%, #06070a 100%);
  animation:lb-in .2s ease-out;
}
.lightbox[hidden]{display:none !important}
@keyframes lb-in{from{opacity:0}}
.lightbox.is-closing{animation:lb-out .18s ease forwards}
@keyframes lb-out{to{opacity:0}}

.lightbox__bar{
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  padding:10px 12px;padding-top:max(10px,env(safe-area-inset-top));
  border-bottom:2px solid rgba(255,255,255,.09);
  background:linear-gradient(180deg,rgba(10,12,16,.92),rgba(10,12,16,.55));
  backdrop-filter:blur(8px);
}
.lb-cluster{display:flex;align-items:center;gap:6px}
.lb-cluster--nav{margin-right:auto}
.lb-cluster--zoom{margin-left:auto}
.lb-btn{
  min-width:42px;height:40px;padding:0 11px;display:inline-grid;place-items:center;
  background:#fff;color:#111214;border:2px solid #111214;border-radius:10px;
  font:800 16px/1 system-ui,sans-serif;cursor:pointer;
  transition:background-color .14s ease,transform .08s ease,box-shadow .14s ease;
}
.lb-btn:hover{background:var(--g-yellow);box-shadow:0 3px 0 #111214}
.lb-btn:active{transform:translateY(2px);box-shadow:none}
.lb-btn[disabled]{opacity:.35;pointer-events:none}
.lb-btn--wide{font-size:13px;letter-spacing:.4px}
.lb-btn--close{background:#ffd9d5}
.lb-btn--close:hover{background:#ffb3aa}
.lb-counter,.lb-scale{
  min-width:62px;text-align:center;color:#fff;
  font:800 13px/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.4px;
}
.lb-scale{min-width:56px;color:var(--g-yellow)}

.lb-viewport{
  position:relative;flex:1 1 auto;min-height:0;overflow:hidden;
  touch-action:none;overscroll-behavior:contain;cursor:grab;
}
.lb-viewport.is-dragging{cursor:grabbing}
.lb-viewport.is-zoomed{cursor:grab}
.lb-track{display:flex;height:100%;width:100%;will-change:transform}
.lb-track.is-animated{transition:transform .3s cubic-bezier(.22,.9,.28,1)}
.lb-slide{flex:0 0 100%;height:100%;display:grid;place-items:center;padding:10px}
.lb-slide img{
  max-width:100%;max-height:100%;object-fit:contain;display:block;
  transform-origin:center center;will-change:transform;
  -webkit-user-drag:none;user-select:none;border-radius:6px;
  box-shadow:0 20px 60px rgba(0,0,0,.55);
}
.lb-slide img.is-animated{transition:transform .26s cubic-bezier(.22,.9,.28,1)}
.lb-slide.is-empty::after{
  content:"";width:38px;height:38px;border-radius:50%;
  border:4px solid rgba(255,255,255,.18);border-top-color:var(--g-yellow);
  animation:lb-spin .8s linear infinite;
}
@keyframes lb-spin{to{transform:rotate(360deg)}}

.lb-hint{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  max-width:min(560px,92%);text-align:center;
  padding:9px 15px;border-radius:999px;border:2px solid rgba(255,255,255,.18);
  background:rgba(11,13,16,.82);backdrop-filter:blur(8px);
  color:#dfe4ea;font:600 12px/1.45 system-ui,sans-serif;pointer-events:none;
  animation:hint-in .3s ease-out;
}
.lb-hint b{color:var(--g-yellow);font-weight:800}
.lb-hint.is-out{animation:hint-out .4s ease forwards}
@keyframes hint-in{from{opacity:0;transform:translate(-50%,10px)}}
@keyframes hint-out{to{opacity:0;transform:translate(-50%,10px)}}

.lb-foot{
  padding:10px 14px;padding-bottom:max(12px,env(safe-area-inset-bottom));
  border-top:2px solid rgba(255,255,255,.09);
  background:linear-gradient(0deg,rgba(10,12,16,.92),rgba(10,12,16,.45));
}
.lb-dots{display:flex;justify-content:center;gap:7px;margin-bottom:8px}
.lb-dot{
  width:26px;height:12px;padding:0;border:2px solid rgba(255,255,255,.35);border-radius:4px;
  background:rgba(255,255,255,.12);cursor:pointer;transition:all .16s ease;
}
.lb-dot:hover{background:rgba(255,255,255,.3)}
.lb-dot.is-active{background:var(--g-yellow);border-color:#111214;width:38px;box-shadow:0 0 12px rgba(255,212,0,.5)}
.lb-caption{
  margin:0;text-align:center;color:#c8ced6;font:600 13.5px/1.45 system-ui,sans-serif;
  min-height:20px;max-width:760px;margin-inline:auto;
}

.lightbox a:focus-visible,.lightbox button:focus-visible{outline:3px solid var(--g-blue);outline-offset:2px}

@media (max-width:640px){
  .gallery__main{border-radius:13px;border-width:2px}
  .shot img{max-height:56vh}
  .shot__zoom{right:8px;bottom:8px;padding:6px 10px;font-size:11.5px}
  .gallery__arrow{display:none}
  .thumb{flex:0 0 84px;height:64px;border-width:2px}
  .lightbox__bar{gap:7px;padding:8px 9px;padding-top:max(8px,env(safe-area-inset-top))}
  .lb-cluster--nav{margin-right:0;order:1}
  .lb-btn--close{order:2;margin-left:auto}
  .lb-cluster--zoom{order:3;flex:1 1 100%;justify-content:center;margin-left:0}
  .lb-btn{min-width:44px;height:40px}
  .lb-counter{min-width:56px;font-size:12.5px}
  .lb-slide{padding:4px}
  .lb-hint{font-size:11px;padding:8px 12px;bottom:8px}
  .lb-caption{font-size:12.5px}
}
@media (hover:none){
  .gallery__arrow{display:none}
}
@media (prefers-reduced-motion:reduce){
  .gallery *,.lightbox *,.gallery *::before,.lightbox *::before{animation:none !important;transition:none !important}
  .gallery__thumbs{scroll-behavior:auto}
}