/* NECHAEV — галерея /gallery/. Подключается после /assets/site.css: токены, шапка, подвал, .tabs, .meta, .btn — оттуда.
   Разметку пишет tools/build-gallery.mjs. Без радиусов и теней — как сетка проектов и lightbox главной. */

/* ---------- Вводный блок ---------- */
/* хлебные крошки — общие .crumbs из /assets/site.css, как в блоге */
.gal-h1{font-size:clamp(2.25rem, 4.6vw, 4rem);max-width:10em}
/* /ky/gallery/: в site.css у html[lang="ky"] .h1 свой кегль (для первого экрана главной) — он сильнее .gal-h1, возвращаем кегль галереи */
html[lang="ky"] .gal-h1{font-size:clamp(2.25rem, 4.6vw, 4rem)}
.gal-lede{margin-top:24px;font-size:1rem;color:var(--c-steel);max-width:52ch}
.tabs.gal-tabs{margin-top:32px}
html:not(.js) .gal-tabs{display:none}

/* ---------- Сетка: ровные ряды, ширина фото — по пропорции кадра ---------- */
/* < 600 px — одна колонка во всю ширину. От 600 px — ряды: ширину карточки задают переменные из сборки
   (--wa-* для вида «Все», --wc-* для категории), сумма ширин в ряду = 100% контейнера. */
.gal-sec{padding:32px 0 96px}
.gal-grid{display:flex;flex-direction:column;gap:40px}
.gal-item{flex:none;min-width:0}
.gal-open{display:block;color:inherit;text-decoration:none;cursor:zoom-in}
.gal-open:focus-visible{outline-offset:4px}
.gal-ph{display:block;aspect-ratio:var(--a, .8);background:var(--c-surface);overflow:hidden}
.gal-ph img{display:block;width:100%;height:100%;object-fit:cover}
.gal-cap{margin-top:12px}
.gal-cap-t{color:var(--c-ink)}
.gal-empty{max-width:52ch}

@media (min-width: 600px){
.gal-grid{flex-direction:row;flex-wrap:wrap;align-items:flex-start;gap:48px var(--gap)}
.gal-item{width:var(--wa-m)}
.gal-grid.is-filtered .gal-item{width:var(--wc-m)}
}
@media (min-width: 768px){
.gal-sec{padding:40px 0 128px}
}
@media (min-width: 1024px){
.gal-lede{font-size:1.0625rem}
.tabs.gal-tabs{margin-top:40px}
.gal-sec{padding-top:48px}
.gal-grid{row-gap:56px}
.gal-item{width:var(--wa-l)}
.gal-grid.is-filtered .gal-item{width:var(--wc-l)}
}

/* ---------- Просмотр во весь экран ---------- */
.gal-lb{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;background:var(--c-bg);overscroll-behavior:contain}
.gal-lb-top{flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px;padding:0 calc(var(--pad) - 10px) 0 var(--pad)}
.gal-lb-count{font-family:var(--f-caps);font-size:.8125rem;line-height:1;letter-spacing:.12em;color:var(--c-steel);font-variant-numeric:tabular-nums}
.gal-lb-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;background:none;color:var(--c-ink);cursor:pointer}
.gal-lb-btn:disabled{opacity:.5;cursor:not-allowed}
.gal-lb-stage{position:relative;flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;padding:0 var(--pad);overflow:hidden}
.gal-lb-pic{display:block;flex:none;background:var(--c-surface)}
.gal-lb-pic img{display:block;width:100%;height:100%;transition:opacity .2s var(--ease)}
.gal-lb-pic.is-loading img{opacity:0;transition:none}
.gal-lb-bar{flex:none;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:12px calc(var(--pad) - 10px) calc(12px + env(safe-area-inset-bottom)) var(--pad)}
.gal-lb-text{flex:1 1 auto;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:24px}
.gal-lb-cap{margin:0;padding-block:12px 4px}
.gal-lb-wa{font-size:.875rem}
.gal-lb-nav{flex:none;display:flex;gap:4px}
.gal-lb-prev .icon{transform:rotate(180deg)}
@media (min-width: 768px){
.gal-lb-top{height:72px}
.gal-lb-bar{align-items:center;padding-block:16px calc(20px + env(safe-area-inset-bottom))}
.gal-lb-cap{padding-block:0}
}
@media (prefers-reduced-motion: no-preference){
.gal-lb{animation:gal-lb-in .2s var(--ease-out)}
@keyframes gal-lb-in{from{opacity:0}}
}