/* =====================================================================
   Галерея (gallery.html, глава VI) — только то, чего нет в base.css.
   Открытие главы → строка разделов → коллаж на всю ширину контейнера
   (он и есть «первое крупное фото» главы). Мозаику и просмотр даёт base.css (§19).
   ===================================================================== */

/* ---------- Разделы: строка капителей, выбранный подчёркнут, между ними золотая точка ---------- */
.gal__filter {
  display: flex; flex-wrap: wrap; align-items: center;
  min-height: 44px;                                   /* место занято, пока скрипт рисует кнопки */
  margin: 0 0 clamp(32px, 1rem + 2.4vw, 64px) var(--hang);
}
.gal__cat {
  min-height: 44px; padding: 0; border: 0; background: none;
  font-family: var(--font-sc); font-size: 1.0625rem; line-height: 1.3;
  letter-spacing: .07em; text-transform: lowercase;
  color: var(--ink-2);
  text-decoration-line: underline; text-decoration-color: transparent;
  text-decoration-thickness: 1px; text-underline-offset: .42em;
  transition: color .25s var(--ease-out), text-decoration-color .25s var(--ease-out);
}
.gal__cat:hover { color: var(--ink); text-decoration-color: var(--rule-strong); }
.gal__cat[aria-pressed="true"] { color: var(--ink); text-decoration-color: currentColor; }
.gal__filter .sep { padding-inline: .75em; }

/* ---------- Коллаж: геометрия рамок (те же числа — в pages/gallery.js) ----------
   --cw — ширина колонки; ряд = кадр ячейки 4:3 (K = .75) + строка подписи.
   Отсюда: ячейка ≈ 4:3, широкая (две колонки) ≈ 2,8:1 — для панорам, высокая (два ряда) ≈ 1:1,8. */
.gal__grid {
  --cw: calc((var(--container) - 3 * var(--gutter)) / 4);
  --cap: calc(var(--s-3) + 1.45 * var(--fs-small));
  grid-auto-rows: calc(var(--cw) * .75 + var(--cap));
  row-gap: clamp(24px, .5rem + 2vw, 48px);
}
.gal__grid:empty { min-height: 60vh; }                     /* до прихода данных подвал не прыгает */
.gal__grid:has(> .state) { display: block; }               /* пустой раздел, загрузка, ошибка — строкой */
.gal__grid > .state { margin-left: var(--hang); }            /* на колонке текста, как строка разделов */
.gal__grid > .state .link { margin-left: .5em; }

/* Заключительный кадр во всю ширину (≈ 2,4:1): его ставит pages/gallery.js (closeRow), чтобы коллаж
   не обрывался одиноким кадром у подвала */
.gal__grid .collage__item--full { grid-column: 1 / -1; grid-row: span 2; }

@media (prefers-reduced-motion: no-preference) {
  .gal__grid { transition: opacity .45s var(--ease-out); }
  .gal__grid.is-fading { opacity: 0; transition-duration: .2s; }
}

/* ---------- Адаптив ---------- */
@media (max-width: 900px) {
  .gal__filter, .gal__grid > .state { margin-left: 0; }
  .gal__grid { --cw: calc((var(--container) - var(--gutter)) / 2); }   /* две колонки (base.css) */
}
@media (max-width: 640px) {
  /* строка разделов переносится — точки у края строки повисли бы, поэтому здесь просто воздух */
  .gal__filter { column-gap: 1.3em; }
  .gal__filter .sep { display: none; }
  /* Одна колонка: снимки крупно, порядок на экране = порядок в просмотре; рамка — по пропорциям снимка */
  .gal__grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; grid-auto-flow: row; row-gap: var(--s-6); }
  .gal__grid .collage__item--wide, .gal__grid .collage__item--tall,
  .gal__grid .collage__item--full { grid-column: auto; grid-row: auto; }
  .gal__grid .collage__open { flex: none; aspect-ratio: var(--ar, 4 / 3); }
}