/* ============================================================
   system118 — gallery.css
   Галерея зала (раскрытая) по макету Claude Design «Тур KrPano — Галерея».
   Матовая стеклянная панель над нижней навигацией; ключевые работы
   текущего зала (у которых есть карточка) в рамках-паспарту, выровнены
   по общей высоте, разноформатные. Клик → карточка объекта (RMCard).
   Заменяет старую krpano-полосу превью (pnl_thumbnails). Рендер: js/gallery.js.
   Токены из panels.css (:root --s118-*).
   ============================================================ */

:root { --s118-frame: #d7d2c8; }

@keyframes s118-gal-in { from { opacity: 0; transform: translateX(-50%) translateY(12px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
@keyframes s118-gal-in-m { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: translateY(0); } }

#s118-gallery {
  position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%);
  width: min(1360px, calc(100vw - 96px));
  z-index: 8700;                       /* над туром, под панелями(9000) и карточкой */
  padding: 18px 22px 20px; border-radius: 22px;
  font-family: 'PT Sans', system-ui, sans-serif; color: var(--s118-panel-text, #161616);
  background: var(--s118-panel-bg, rgba(250,250,248,0.46));
  -webkit-backdrop-filter: blur(38px) saturate(150%); backdrop-filter: blur(38px) saturate(150%);
  border: 1px solid var(--s118-panel-border, rgba(20,20,20,0.1));
  box-shadow: 0 22px 64px rgba(0,0,0,0.34);
  user-select: none; display: none;
}
#s118-gallery.is-on { display: block; animation: s118-gal-in 0.22s ease-out; }

/* шапка */
.s118-gal-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.s118-gal-head-l { display: flex; align-items: center; gap: 13px; min-width: 0; }
.s118-gal-head-l > svg { flex: none; }
.s118-gal-eyebrow { font: 700 9px/1.3 'PT Sans'; letter-spacing: 0.2em; color: var(--s118-panel-sub, rgba(22,22,22,0.52)); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s118-gal-head-r { display: flex; align-items: center; gap: 10px; flex: none; }
.s118-gal-arrow {
  width: 38px; height: 38px; border: 1px solid var(--s118-hair, rgba(20,20,20,0.1)); border-radius: 50%;
  background: rgba(255,255,255,0.4); color: var(--s118-panel-text, #161616);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  /* плавные переходы — чтобы стрелки не «мигали» при быстрой прокрутке/драге ленты */
  transition: opacity .28s ease, background .15s, transform .13s cubic-bezier(.2,.7,.3,1);
}
@media (hover:hover){ .s118-gal-arrow:hover:not(.is-off) { background: rgba(255,255,255,0.72); transform: translateY(-1.5px); } }
.s118-gal-arrow:active:not(.is-off) { transform: translateY(1px) scale(.93); background: rgba(20,20,20,0.08); }
.s118-gal-arrow.is-off { opacity: 0.28; pointer-events: none; }
.s118-gal-arrow svg { display: block; }
.s118-gal-sep { width: 1px; height: 24px; background: var(--s118-hair, rgba(20,20,20,0.1)); margin: 0 4px; flex: none; }
.s118-gal-close {
  width: 38px; height: 38px; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--s118-icon-bg, #161616); color: var(--s118-icon-fg, #fafaf8);
  display: flex; align-items: center; justify-content: center;
}
.s118-gal-close:hover { filter: brightness(1.3); }
.s118-gal-close svg { display: block; }

/* лента работ (тащится мышью/пальцем + стрелками).
   justify: safe center — мало работ → по центру (не тянуться вбок);
   много → к началу + скролл (safe не даёт обрезать левый край). */
.s118-gal-strip { display: flex; align-items: flex-start; justify-content: safe center; gap: 22px; overflow-x: auto; padding: 4px 2px 10px; cursor: grab; }
.s118-gal-strip:active { cursor: grabbing; }
.s118-gal-strip::-webkit-scrollbar { height: 8px; }
.s118-gal-strip::-webkit-scrollbar-track { background: transparent; }
.s118-gal-strip::-webkit-scrollbar-thumb { background: rgba(20,20,20,0.2); border-radius: 8px; }

.s118-gal-card { flex: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; min-width: 96px; transition: transform 0.16s ease; }
/* наведение — современный подъём карточки + углубление тени (без «кольца») */
.s118-gal-card:hover { transform: translateY(-5px); }

/* без рамки-паспарту и бейджа — только само фото (мягкая тень + скругление) */
.s118-gal-frame { position: relative; height: 150px; }
/* фото: высота фиксирована, ширина по натуральному формату → разные форматы
   выравниваются по общей высоте. pointer-events/user-drag — нельзя утащить. */
.s118-gal-frame img {
  display: block; height: 150px; width: auto; border-radius: 3px; object-fit: cover;
  box-shadow: 0 6px 18px rgba(0,0,0,0.28);
  transition: box-shadow 0.16s ease;
  pointer-events: none; -webkit-user-drag: none;
}
.s118-gal-card:hover .s118-gal-frame img { box-shadow: 0 14px 30px rgba(0,0,0,0.36); }
/* если фото не загрузилось — заглушка-штриховка */
.s118-gal-frame .s118-gal-ph {
  display: block; width: 116px; height: 150px; border-radius: 3px; box-shadow: 0 6px 18px rgba(0,0,0,0.28);
  background-image: repeating-linear-gradient(45deg, rgba(22,22,22,.14) 0 7px, rgba(22,22,22,.05) 7px 14px);
}

.s118-gal-cap { font: 700 13px/1.2 'PT Sans'; color: var(--s118-panel-text, #161616); margin-top: 15px; text-align: center; max-width: 172px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s118-gal-auth { font: 400 11px/1.2 'PT Sans'; color: var(--s118-panel-sub, rgba(22,22,22,0.52)); margin-top: 5px; text-align: center; max-width: 172px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 13px; }

/* кнопка «Галерея зала» в кластере: красная = ОТКРЫТА (стиль .s118-round.is-active из
   panels.css, единый с картой/автоповоротом). Здесь — приглушение (нет работ) и badge. */
#s118-cluster .s118-round.is-dim { opacity: 0.4; pointer-events: none; }
#s118-cluster .s118-round { position: relative; }   /* якорь для badge */
.s118-gal-badge {
  position: absolute; top: -4px; right: -4px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px; background: var(--s118-accent, #c00d0d); color: #fff; box-sizing: border-box;
  font: 700 10px/17px 'PT Sans', sans-serif; text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.35); border: 1.5px solid #fff; pointer-events: none;
  transition: opacity .3s, transform .3s;
}
/* на мобилке кнопка меньше (40px) — уменьшаем бейдж, чтобы не перекрывал значок */
@media (max-width: 820px), (max-height: 500px) {
  .s118-gal-badge { min-width: 15px; height: 15px; padding: 0 3px; font-size: 9px; line-height: 15px; top: -3px; right: -3px; }
}
.s118-gal-badge.is-hidden { opacity: 0; transform: scale(.5); }

/* гасим браузерный оверлей на превью (Яндекс и др. — «Скачать» поверх <img>);
   клик по работе ловит .s118-gal-card, поэтому pointer-events:none безопасен */
.s118-gal-frame img { pointer-events: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }

/* ═══════════ мобилка: шторка снизу ═══════════ */
@media (max-width: 820px), (max-height: 560px) {
  #s118-gallery {
    left: 0; right: 0; bottom: 0; width: auto; transform: none;
    border-radius: 26px 26px 0 0; padding: 12px 0 78px;   /* низ: место под кластер кнопок (галерея/карта/шеринг), он остаётся */
  }
  /* в открытой галерее нижняя навигация тура (автоповорот + стрелки точек) лишняя — прячем.
     Паддинг снизу НЕ уменьшаем: он держит подписи выше кластера #s118-cluster (снизу-справа). */
  body.s118-gal-open #s118-nav { display: none; }
  #s118-gallery.is-on { animation: s118-gal-in-m 0.26s ease-out; }
  #s118-gallery.is-on::before { content: ''; display: block; width: 40px; height: 5px; border-radius: 3px; background: rgba(22,22,22,0.18); margin: 0 auto 12px; }
  .s118-gal-head { padding: 0 18px; margin-bottom: 6px; }
  .s118-gal-arrow, .s118-gal-sep { display: none; }   /* на тач — свайп */
  .s118-gal-strip { padding: 14px 18px 4px; }
  .s118-gal-strip::-webkit-scrollbar { display: none; }
  .s118-gal-frame { height: 118px; }
  .s118-gal-frame img { height: 118px; }
  .s118-gal-frame .s118-gal-ph { height: 118px; width: 92px; }
}