/* ═══ ГАЛЕРЕИ — единый формат (А3, волна 06.08; п.9 списка клиента 31.07) ═══
   Подключается ПОСЛЕДНИМ в base.html (после site/design/money/trust) и при
   равных селекторах побеждает за счёт порядка файлов — site.css не трогаем,
   он заморожен за А4.

   Что было разнобоем: фотоплитки — masonry-колонки со «рваным» низом и
   кадрами в собственных пропорциях, мини-галереи текстовых блоков — без
   подписей и своей плиткой, видео — карточка с другим радиусом и тенью.
   Клиент попросил один ритм: единая сетка, одинаковые пропорции превью,
   подписи одним стилем, видео в том же характере. Кадр в плитке обрезается
   (object-fit: cover), целиком открывается кликом — как на фотостоках;
   точка кадра смещена выше центра: на фото лица, на сканах — шапка
   документа. */

/* ── сетка: авто-заполнение на десктопе, ровно 2 колонки на телефоне ── */
.band .gal, .gal{
  display:grid;
  columns:auto; column-gap:normal;      /* гасим masonry из site.css */
  grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
  gap:16px;
  align-items:start;
}
@media (max-width:640px){
  .band .gal, .gal{grid-template-columns:repeat(2, 1fr); gap:10px}
}

/* ── плитка: одинаковые пропорции, обрезка вместо растяжения ── */
.band .gal a, .gal a{display:block; margin:0; border-radius:16px; overflow:hidden}
.gal-i{margin:0; display:flex; flex-direction:column; gap:8px; min-width:0}
.band .gal img, .gal img{
  width:100%;
  aspect-ratio:4/3;
  height:auto;
  object-fit:cover;
  object-position:center 30%;
  border-radius:16px;
  border:1px solid var(--line);   /* белые сканы не сливаются с фоном */
  box-shadow:var(--sh);
  background:var(--mist2);
  display:block;
}

/* ── подписи: один стиль на всех страницах ── */
.gal-cap{font-size:14px; line-height:1.45; color:var(--muted)}
@media (max-width:560px){ .gal-cap{font-size:13px} }

/* ── видео — тот же характер, что у фотоплиток: радиус и тень плитки,
      пропорция у видео своя природная (16:9) ── */
.vid{border-radius:16px; box-shadow:var(--sh)}
.vid + .vid{margin-top:16px}            /* два видео подряд — ритм сетки */

/* ── фото из кабинета в тексте страницы ([фото:имя], п.4) ── */
.b-ph{margin:18px 0}
.b-ph img{
  display:block; width:100%; max-width:860px; height:auto;
  border-radius:16px; box-shadow:var(--sh); background:var(--mist2);
}
.b-ph figcaption{margin-top:8px; font-size:14px; color:var(--muted)}

/* ── Видеозаписи страницы (п.16): карточка со ссылками на площадки ──────────
   Не плеер: у записи бывает 2–4 адреса (YouTube, ВК, Дзен, Rutube), и
   встроить можно только один. Даём человеку выбрать, где смотреть, — и не
   тянем чужие скрипты на страницу. Сетка та же .gal, что у галерей. */
.gal-i.vid-card { display: flex; flex-direction: column; gap: 8px;
                  aspect-ratio: auto; padding: 16px 18px; }
.vid-card-t { font-weight: 600; line-height: 1.35; }
.vid-card-l { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.vid-card .gal-cap { margin: 0; }
.btn-sm { padding: 6px 12px; font-size: 13.5px; }

/* На телефоне видеокарточки — в ОДНУ колонку. В двух они выходили 163×417:
   узкий столбик с длинным названием и кнопками друг под другом. Фотоплитки
   в две колонки хороши (кадр квадратный), а карточка с текстом — нет. */
@media (max-width: 640px) {
  .gal:has(.vid-card) { grid-template-columns: 1fr; }
  .gal-i.vid-card { flex-direction: row; flex-wrap: wrap;
                    align-items: baseline; gap: 6px 10px; }
  .vid-card-t { flex: 1 1 100%; }
  .vid-card-l { margin-top: 4px; }
}

/* ── высокие кадры: портретная плитка вместо обрезки ─────────────────────
   Единый ритм плитки — просьба клиента (31.07), и он остаётся: все кадры
   в сетке одного семейства. Но у вертикальных — сканы благодарностей,
   сертификаты, портреты для СМИ — в рамке 4:3 оставалась одна шапка
   документа: понять, что это за письмо, было нельзя.
   Класс ставит site.js по пропорциям кадра (атрибуты width/height).
   3:4 против родных ~0.7 срезает считанные проценты — документ читается,
   лица не обрезаются, сетка не рассыпается.                              */
.band .gal img.gal-vysokiy, .gal img.gal-vysokiy{
  aspect-ratio:3/4;
  object-position:center top;   /* у документа главное — верх листа */
}

/* ── мелкий файл показываем в его собственном размере ────────────────────
   Класс ставит site.js по атрибуту width. Кадр 180×180, растянутый в
   колонку 500 px, — это мыло и обрезка; здесь он остаётся резким и целым,
   просто небольшим. max-width задаётся из разметки переменной --svoya.   */
.band img.img-melkiy{
  max-width:min(100%, 360px);
  aspect-ratio:auto;
  object-fit:contain;
  height:auto;
}