/* ===== ТОМОЭ · Галерея (template-gallery.php + js/gallery-page.js) =====
   Здесь фото смотрят: никакой цветокоррекции, только честные снимки на тёмном. */

.gal{padding:clamp(28px,4vw,56px) clamp(4px,1.4vw,24px) clamp(72px,9vw,128px)}

/* --- строка: счётчик + альбомы --- */
.gal-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 32px;
  max-width:1680px;margin:0 auto clamp(20px,2.6vw,36px);padding:0 calc(var(--t-pad) - clamp(4px,1.4vw,24px))}
.gal-count{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin:0;color:var(--t-grey);
  font:500 12px/1.2 var(--t-sans);letter-spacing:.24em;text-transform:uppercase}
.gal-count__n{font-size:clamp(36px,4vw,56px);line-height:.9;letter-spacing:0;text-shadow:0 0 36px rgba(142,15,15,.5)}
.gal-count__sep{color:var(--t-red)}

.gal-chips{display:flex;flex-wrap:wrap;gap:8px;max-width:100%}
body.tomoe .gal-chip{display:inline-flex;align-items:baseline;gap:6px;padding:9px 16px;border:1px solid #2f2f2f;border-radius:999px;
  color:#cfcac2;text-decoration:none;font:500 13.5px/1.2 var(--t-sans);white-space:nowrap;
  transition:border-color .25s,color .25s,background .25s}
.gal-chip sup{top:0;font-size:11px;color:#6f6b66;vertical-align:baseline}
body.tomoe .gal-chip:hover,body.tomoe .gal-chip:focus-visible{border-color:var(--t-red);color:var(--t-white)}
body.tomoe .gal-chip.is-on{border-color:var(--t-red);background:var(--t-red);color:#fff}
.gal-chip.is-on sup{color:rgba(255,255,255,.75)}
.gal-chip:focus-visible{outline:2px solid var(--t-red);outline-offset:3px}

/* --- ровная сетка: ширина плитки ∝ соотношению сторон, все плитки ряда одной высоты; JS не нужен --- */
.gal-grid{--row:clamp(190px,21vw,340px);display:flex;flex-wrap:wrap;align-items:flex-start;gap:4px;max-width:2400px;margin:0 auto;
  transition:opacity .35s}
.gal-grid::after{content:"";flex:1000000 1 0;height:0} /* последний ряд не растягивается */
.gal-grid.is-loading{opacity:.35}
.gal-empty{margin:40px 0;text-align:center;color:var(--t-grey);font:400 16px/1.6 var(--t-sans)}

body.tomoe .gal-tile{position:relative;display:block;flex:var(--r) 1 calc(var(--r) * var(--row));aspect-ratio:var(--r);
  overflow:hidden;background:#111;color:inherit;text-decoration:none;cursor:zoom-in;-webkit-tap-highlight-color:transparent}
.gal-tile__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1s var(--t-ease),opacity .6s ease}
.gal-tile__img.is-wait{opacity:0}
.gal-tile::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px var(--t-red);opacity:0;transition:opacity .35s}
.gal-tile__meta{position:absolute;left:0;right:0;bottom:0;padding:28px 14px 11px;pointer-events:none;
  background:linear-gradient(transparent,rgba(0,0,0,.62));color:var(--t-white);
  font:500 11px/1.3 var(--t-sans);letter-spacing:.18em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transform:translateY(6px);transition:opacity .35s,transform .45s var(--t-ease)}
@media (hover:hover){
  .gal-tile:hover .gal-tile__img{transform:scale(1.035)}
  .gal-tile:hover::after{opacity:1}
  .gal-tile:hover .gal-tile__meta{opacity:1;transform:none}
}
.gal-tile:focus-visible{outline:none}
.gal-tile:focus-visible::after{opacity:1;box-shadow:inset 0 0 0 2px var(--t-red)}
.gal-tile.is-new{animation:gal-in .7s var(--t-ease) both}
@keyframes gal-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.gal-more{display:flex;justify-content:center;margin-top:clamp(28px,4vw,48px)}
.gal-more[hidden]{display:none}
body.tomoe .gal-more__btn{border:1px solid var(--t-red);color:var(--t-white);cursor:pointer;min-width:220px;justify-content:center}
.gal-more__btn.is-busy{pointer-events:none;opacity:.6}

@media (max-width:700px){
  .gal{padding-left:3px;padding-right:3px}
  .gal-bar{padding:0 calc(var(--t-pad) - 3px);gap:14px}
  .gal-grid{--row:118px;gap:3px}
  /* альбомы — одной лентой с прокруткой внутри, страница вбок не едет */
  .gal-chips{flex:none;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
    margin:0 calc(var(--t-pad) * -1 + 3px);padding:2px calc(var(--t-pad) - 3px);width:calc(100% + var(--t-pad) * 2 - 6px);
    -webkit-mask:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 22px),transparent)}
  .gal-chips::-webkit-scrollbar{display:none}
}

/* ======================= Просмотрщик ======================= */
html.gv-open,html.gv-open body{overflow:hidden!important;overscroll-behavior:none}
.gv{position:fixed;inset:0;z-index:10050;display:none;background:#050505;color:var(--t-white);
  touch-action:none;user-select:none;-webkit-user-select:none;opacity:0;transition:opacity .25s ease}
.gv.is-open{display:block}
.gv.is-shown{opacity:1}
.gv__track{position:absolute;inset:0;display:flex;will-change:transform}
.gv__slide{position:relative;flex:0 0 100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}
.gv__img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;
  -webkit-user-drag:none;user-select:none;opacity:0;transition:opacity .3s}
.gv__img.is-ready{opacity:1}
.gv__slide.is-loading::before{content:"";position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;
  border:2px solid rgba(255,255,255,.12);border-top-color:var(--t-red);animation:gv-spin .8s linear infinite}
@keyframes gv-spin{to{transform:rotate(360deg)}}

.gv__top{position:absolute;left:0;right:0;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;
  padding:max(10px,env(safe-area-inset-top)) 12px 10px 20px;background:linear-gradient(rgba(0,0,0,.55),transparent);pointer-events:none;transition:opacity .3s}
.gv__count{font:500 12px/1 var(--t-sans);letter-spacing:.24em;color:var(--t-grey)}
.gv__count b{color:var(--t-white);font-weight:600}
.gv__btn{pointer-events:auto;position:relative;display:flex;align-items:center;justify-content:center;width:48px;height:48px;
  padding:0!important;margin:0;border:1px solid rgba(244,241,236,.16);border-radius:50%;background:rgba(20,20,20,.55);
  color:#fff;cursor:pointer;box-shadow:none;transition:background .25s,border-color .25s;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.gv__btn:hover,.gv__btn:focus-visible{background:var(--t-red);border-color:var(--t-red);outline:none}
.gv__btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.gv__nav{position:absolute;top:50%;z-index:2;margin-top:-26px;width:52px;height:52px}
.gv__prev{left:18px}
.gv__next{right:18px}
.gv__nav[disabled]{opacity:0;pointer-events:none}

.gv__cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:40px 20px max(16px,env(safe-area-inset-bottom));pointer-events:none;
  background:linear-gradient(transparent,rgba(0,0,0,.6));text-align:center;transition:opacity .3s}
.gv__album{display:block;font:600 11px/1.3 var(--t-sans);letter-spacing:.24em;text-transform:uppercase;color:var(--t-red)}
.gv__text{display:block;max-width:44em;margin:6px auto 0;font:400 14px/1.5 var(--t-sans);color:#d9d4cc}
.gv__text:empty,.gv__album:empty{display:none}
.gv.is-zoomed .gv__cap,.gv.is-zoomed .gv__nav,.gv.is-ui-off .gv__cap,.gv.is-ui-off .gv__nav,.gv.is-ui-off .gv__top{opacity:0;pointer-events:none}
.gv.is-zoomed .gv__img{cursor:grab}
.gv:not(.is-zoomed) .gv__img{cursor:zoom-in}

@media (hover:none),(max-width:700px){
  .gv__nav{display:none}
  .gv__top{padding-left:16px;padding-right:8px}
  .gv__btn{width:44px;height:44px}
}
@media (prefers-reduced-motion:reduce){
  .gal-tile__img,.gal-tile__meta,.gv,.gv__img{transition:none}
  .gal-tile.is-new{animation:none}
}