/* =========================================================
   Коллажи: плитки-превью и просмотр во весь экран
   ========================================================= */
.gallery { columns: 3 260px; column-gap: 16px; margin-top: var(--gap); }
.gallery__item { break-inside: avoid; margin: 0 0 16px; }
.gallery__link {
  display: block; border-radius: var(--radius-m); overflow: hidden;
  background: var(--gray-1500); box-shadow: 0 0 0 1px var(--card-line);
}
.gallery__link img { width: 100%; height: auto; display: block; }
.gallery__link:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.gallery__caption { margin-top: 8px; font-size: calc(14px * var(--fs-s, 1)); line-height: 20px; color: var(--gray-400); }
@media (hover: hover) { .gallery__link:hover { box-shadow: 0 0 0 2px var(--primary); } }
@media (max-width: 767.98px) { .gallery { columns: 2 150px; column-gap: 12px; } .gallery__item { margin-bottom: 12px; } }

/* Просмотр: тёмный экран, картинка по размеру окна, стрелки по краям */
.lb { border: 0; padding: 0; margin: auto; width: 100vw; height: 100vh; max-width: none; max-height: none; background: transparent; color: var(--on-accent); }
.lb::backdrop { background: rgba(1, 4, 6, .94); }
.lb[open] { display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px; align-items: center; }
.lb__figure { grid-column: 2; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.lb__img { max-width: 100%; max-height: calc(100vh - 96px); height: auto; border-radius: var(--radius-s); object-fit: contain; }
.lb__caption { font-size: calc(15px * var(--fs-s, 1)); line-height: 22px; color: #cfd4d9; text-align: center; }
.lb__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%; color: #fff;
  background: rgba(255, 255, 255, .12); transition: background-color .2s var(--ease);
}
@media (hover: hover) { .lb__btn:hover { background: rgba(255, 255, 255, .24); } }
.lb__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lb__prev { grid-column: 1; justify-self: center; }
.lb__next { grid-column: 3; justify-self: center; }
.lb__close { position: fixed; top: 16px; right: 16px; }
.lb__x { font-size: 28px; line-height: 1; }
@media (max-width: 767.98px) {
  .lb[open] { grid-template-columns: minmax(0, 1fr); }
  .lb__figure { grid-column: 1; padding: 0 12px; }
  .lb__img { max-height: calc(100vh - 150px); }
  .lb__prev, .lb__next { position: fixed; bottom: 16px; }
  .lb__prev { left: 16px; } .lb__next { right: 16px; }
}
@media (min-width: 1101px) and (max-width: 1799px) { .lb { width: calc(100vw / .85); height: calc(100vh / .85); } .lb__img { max-height: calc(100vh / .85 - 96px); } }
@media (min-width: 768px) and (max-width: 1100.98px) { .lb { width: calc(100vw / .9); height: calc(100vh / .9); } .lb__img { max-height: calc(100vh / .9 - 96px); } }
.gallery__credit { margin-top: 2px; font-size: calc(12px * var(--fs-s, 1)); line-height: 16px; color: var(--gray-500); }
.gallery__note { margin-top: 8px; }
.gallery__note p { color: var(--gray-400); font-size: calc(15px * var(--fs-s, 1)); line-height: 24px; max-width: 80ch; }
.gallery__note a { color: var(--blue-600); text-decoration: underline; text-decoration-color: var(--link-line); text-underline-offset: 3px; }
.lb__caption { display: flex; flex-direction: column; gap: 2px; }
.lb__credit { font-size: calc(13px * var(--fs-s, 1)); line-height: 18px; color: #8793a0; }
.lb__credit:empty { display: none; }