.vht-gallery { background:var(--vht-surface); }
.vht-gallery__heading { display:flex; justify-content:space-between; align-items:end; gap:32px; margin-bottom:32px; }
.vht-gallery__heading p { color:var(--vht-muted); max-width:65ch; margin-bottom:0; }
.vht-gallery__controls { display:flex; gap:10px; flex-shrink:0; }
.vht-gallery [hidden] { display:none; }
.vht-gallery button { display:grid; place-items:center; width:48px; height:48px; border:1px solid var(--vht-line); border-radius:8px; color:var(--vht-navy); background:white; cursor:pointer; }
.vht-gallery button:hover { background:var(--vht-red); border-color:var(--vht-red); color:white; }
.vht-gallery button:disabled { opacity:.4; cursor:default; }
.vht-gallery svg { width:24px; height:24px; }
.vht-gallery :focus-visible { outline:3px solid var(--vht-blue); outline-offset:4px; }
.vht-gallery__track { display:flex; gap:24px; width:100%; min-width:0; overflow-x:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory; scroll-padding-inline:2px; padding-bottom:16px; scrollbar-width:thin; scrollbar-color:var(--vht-blue) var(--vht-line); }
.vht-gallery__slide { flex:0 0 calc((100% - 48px)/3); margin:0; min-width:0; scroll-snap-align:start; }
.vht-gallery__track:has(> :nth-child(2):last-child) .vht-gallery__slide { flex-basis:calc((100% - 24px)/2); }
.vht-gallery__slide a { display:block; position:relative; background:var(--vht-navy); overflow:hidden; border-radius:12px; }
.vht-gallery__slide img { display:block; width:100%; height:320px; object-fit:cover; }
.vht-gallery__zoom { position:absolute; bottom:16px; right:16px; display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:6px; background:var(--vht-navy); color:white; font-size:13px; }
.vht-gallery__zoom svg { width:18px; height:18px; }
.vht-gallery figcaption { padding-top:16px; font-weight:600; color:var(--vht-navy); }
.vht-gallery__hint { margin:16px 0 0; color:var(--vht-muted); font-size:14px; }
.vht-gallery__dialog { width:min(1200px,96vw); max-width:96vw; max-height:94dvh; padding:0; border:0; border-radius:12px; background:#101828; color:white; }
.vht-gallery__dialog::backdrop { background:rgba(5,13,30,.9); }
.vht-gallery__viewer { padding:56px 20px 16px; position:relative; }
.vht-gallery__viewer>img { display:block; width:100%; height:calc(88dvh - 140px); object-fit:contain; }
.vht-gallery .vht-gallery__close { position:absolute; right:12px; top:8px; width:40px; height:40px; }
.vht-gallery__footer { display:flex; justify-content:space-between; align-items:center; gap:16px; padding-top:16px; }
.vht-gallery__footer p { margin:0; text-align:center; font-size:14px; }
.vht-gallery__footer button { flex-shrink:0; }
body.vht-gallery-open { overflow:hidden; }
@media(max-width:960px) { .vht-gallery__slide { flex-basis:calc((100% - 24px)/2); } }
@media(max-width:640px) {
  .vht-gallery__heading { align-items:start; gap:16px; flex-direction:column; }
  .vht-gallery__controls { align-self:flex-end; }
  .vht-gallery__slide { flex:0 0 min(calc(100vw - 48px), 380px); }
  .vht-gallery__slide img { width:100%; height:auto; aspect-ratio:4 / 3; object-fit:cover; }
  .vht-gallery__slide--portrait img { aspect-ratio:3 / 4; object-fit:cover; }
  .vht-gallery__track { gap:16px; padding:0 2px 16px; }
  .vht-gallery__slide a { border-radius:10px; }
  .vht-gallery__zoom { right:10px; bottom:10px; }
  .vht-gallery__viewer { padding:56px 10px 12px; }
  .vht-gallery__viewer>img { height:calc(82dvh - 110px); }
  .vht-gallery__footer { gap:10px; }
  .vht-gallery__footer button { width:44px; height:44px; }
  .vht-gallery figcaption { padding-top:12px; }
}
@media(max-width:640px) { .vht-gallery__track:has(> :nth-child(2):last-child) .vht-gallery__slide { flex-basis:86%; } }