/* ============================================================================
   Лента выставок раздела «Галерея» (TASK-006, фаза 3; OPEN-074). Перенос
   принятого образца `образец-страница-галереи-2026-08-23.html` на модель
   переезда: юстированные ряды обложек, сгруппированные по темам. Тот же приём
   ряда, что в каталоге выставки (exhibition.css/js) — раздел и его страницы
   говорят на одном языке. Токены — из единого источника, литералов нет.
   Загружается только на архиве ph_exhibition (functions.php).
   ============================================================================ */

.main--gallery > .crumbs{ margin-block-start:0; margin-block-end:var(--space-4); }
.nav__top[href="/gallery"]{ font-weight:var(--wght-meta); box-shadow:inset 0 -2px 0 0 var(--ink); }
.main--gallery .lane{ max-width:var(--feed-width); }

/* Шапка раздела: имя, охват, фильтр. */
.topic__head{ padding-block-end:var(--space-4); border-block-end:1px solid var(--rule-strong); }
.topic__title{
  margin:var(--space-2) 0 0; max-width:calc(var(--step-6) * 40);
  font-size:var(--step-6); font-weight:var(--wght-display);
  font-variation-settings:"opsz" var(--opsz-display);
  line-height:var(--lh-display); letter-spacing:-.02em; text-wrap:balance;
}
.topic__scope{
  display:flex; flex-direction:column; gap:var(--space-1);
  margin:var(--space-3) 0 0;
  font-family:var(--font-apparatus); font-size:var(--step-1);
  line-height:var(--lh-meta); color:var(--ink-mute);
}
.topic__scope strong{ color:var(--ink-soft); font-weight:var(--wght-meta); }
@media (min-width:520px){
  .topic__scope{ flex-flow:row wrap; gap:0 .1em; }
  .topic__scope > *:not(:last-child)::after{ content:"\00B7"; color:var(--rule-strong); margin-inline:.55em; }
}

/* Фильтр по теме: якорные ссылки на бэнды; на узком экране свёрнут в кнопку. */
.filter{ margin-block-start:var(--space-5); font-family:var(--font-apparatus); }
.filter__label{ font-size:var(--step-1); color:var(--ink-mute); margin:0 0 var(--space-2); }
.filter__row{ display:flex; flex-wrap:wrap; gap:var(--space-2); list-style:none; margin:0; padding:0; }
.filter a{
  display:block; padding:.4em .7em; border:1px solid var(--rule); border-radius:2px;
  color:var(--ink); text-decoration:none; font-size:var(--step-1); white-space:nowrap;
}
.filter a:hover{ border-color:var(--ink-mute); }
.filter a:active{ background:var(--bg-sunk); }
.filter__n{ color:var(--ink-mute); font-weight:var(--wght-normal); }
.filter__switch{ display:none; }
.js .filter__switch{
  display:inline-flex; align-items:center; gap:.4em; padding:.4em .7em;
  border:1px solid var(--rule); border-radius:2px; font-family:var(--font-apparatus);
  font-size:var(--step-1); color:var(--ink); min-block-size:24px; cursor:pointer;
}
.js .filter__switch:hover{ border-color:var(--ink-mute); }
@media (pointer:coarse){
  .js .filter__switch{ min-block-size:var(--tap-min); }
  .filter a{ min-height:var(--tap-min); display:inline-flex; align-items:center; }
}
@media (min-width:40rem){
  .js .filter__switch{ display:none; }
}
@media (max-width:39.99rem){
  .js .filter__row[hidden]{ display:none; }
  .js .filter__row{ flex-direction:column; gap:var(--space-1); margin-block-start:var(--space-3); }
}

/* Группа темы: заголовок — опорная точка ленты без пагинации. */
.band{ margin-block-start:var(--space-6); scroll-margin-top:var(--space-6); }
.band__name{
  font-family:var(--font-apparatus); font-size:var(--step-2); font-weight:var(--wght-meta);
  line-height:var(--lh-meta); color:var(--ink);
  padding-block-end:var(--space-2); border-block-end:1px solid var(--rule-strong);
}
.band__n{ color:var(--ink-mute); font-weight:var(--wght-normal); }

/* Ряд обложек. Геометрию считает gallery.js; до готовности ряд скрыт — и только
   при работающем скрипте: без него обложки идут потоком и видны (критерий 8). */
.covers{ margin-block-start:var(--space-4); }
.covers .row{ display:flex; gap:var(--space-3); margin-block-end:var(--space-5); }
.covers .row:last-child{ margin-block-end:0; }
.js .covers:not(.ready){ visibility:hidden; }

/* Обложка выставки. Потолок по исходнику — то же правило, что в каталоге. */
.cover{ min-inline-size:0; margin:0; }
.cover > a{ display:block; color:inherit; outline-offset:3px; }
.cover > a:focus-visible{ outline:2px solid var(--accent); }
.cover img{
  inline-size:100%; block-size:auto; max-inline-size:min(100%, calc(var(--w) * 1px));
  outline:1px solid var(--rule-strong); outline-offset:-1px;
}
.cover > a:hover img{ outline-color:var(--ink-mute); }
.cover > a:active img{ outline-color:var(--ink); }
.cover figcaption{ margin-block-start:var(--space-2); }
.cover__name{ display:block; font-size:var(--step-2); line-height:var(--lh-tight); }
.cover__name a{ color:inherit; text-decoration:none; }
.cover__name a:hover{ text-decoration:underline; text-underline-offset:.16em; }
.cover__meta{
  display:block; font-family:var(--font-apparatus); font-size:var(--step-1);
  line-height:var(--lh-meta); color:var(--ink-mute); margin-block-start:var(--space-1);
}
.cover__meta a{ color:inherit; text-decoration:none; }
.cover__meta a:hover,
.cover__meta a:focus-visible{ color:var(--ink); text-decoration:underline; text-underline-offset:.16em; }

@media print{
  .covers .row{ break-inside:avoid; }
  .filter__switch{ display:none; }
}