/* Фото карточки: отдельный файл, подключается только на страницах с фото. Без фото страница и её адрес стиля те же, байт в байт. */
/* Рядом с биркой, когда есть место; на телефоне — над ней. */
.s-foto { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 22px; align-items: start; min-width: 0; }
.foto { background: var(--paper); padding: 10px; min-width: 0; }
.foto-b { display: flex; justify-content: center; align-items: center; min-width: 0; cursor: zoom-in; }
.foto-b img { display: block; width: auto; height: auto; max-width: 100%; max-height: 440px; }
/* Большие стоят первой строкой, под ними ряд маленьких; видна только большая отмеченного переключателя. */
.foto-g { position: relative; display: flex; flex-wrap: wrap; gap: 8px; }
.foto-g .foto-b { display: none; order: -1; flex: 0 0 100%; margin-bottom: 2px; }
.foto-p { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.foto-p:checked + .foto-m + .foto-b { display: flex; }
.foto-m { display: block; width: 68px; height: 68px; padding: 2px; border: 1px solid var(--line); background: var(--paper); cursor: pointer; }
.foto-m img { display: block; width: 100%; height: 100%; object-fit: contain; }
.foto-m:hover { border-color: var(--ink); }
.foto-p:checked + .foto-m { border: 2px solid var(--black); padding: 1px; }
.foto-p:focus-visible + .foto-m { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Рядом с фото бирка уже, номер в ней мельче, иначе он ломается посреди цифр. */
@media (min-width: 721px) {
  .s-foto .tag .num { font-size: clamp(26px, 2.6vw, 38px); }
  .s-foto .tag .num.m { font-size: clamp(22px, 2.1vw, 30px); }
  .s-foto .tag .num.s { font-size: clamp(18px, 1.6vw, 22px); }
}
@media (max-width: 720px) {
  .s-foto { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .foto-b img { max-height: 360px; }
}

/* Просмотр поверх страницы, static/foto.js. Окно во весь экран; кнопки стоят в его полях и фото не закрывают. Размер фото считает скрипт по месту внутри полей. */
html.fv-otkryto { overflow: hidden; overscroll-behavior: none; }
.fv { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 60px 76px; overflow: hidden; overscroll-behavior: contain; touch-action: manipulation; background: rgba(0, 0, 0, .96); color: #fff; cursor: zoom-out; }
.fv[open] { display: flex; align-items: center; justify-content: center; }
.fv [hidden] { display: none; }
.fv-img { display: block; flex: none; max-width: 100%; max-height: 100%; }
.fv-img.fv-zhdem { opacity: .35; }
.fv-x, .fv-str { position: absolute; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 0; background: rgba(255, 255, 255, .14); color: #fff; }
.fv-x:hover, .fv-str:hover { background: rgba(255, 255, 255, .28); }
.fv-x:focus-visible, .fv-str:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.fv-x { top: max(6px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); font-size: 32px; line-height: 1; }
.fv-str { top: 50%; margin-top: -24px; }
.fv-nazad { left: max(14px, env(safe-area-inset-left)); }
.fv-vpered { right: max(14px, env(safe-area-inset-right)); }
.fv-str::before { content: ""; width: 14px; height: 14px; border-left: 3px solid; border-bottom: 3px solid; }
.fv-nazad::before { margin-left: 5px; transform: rotate(45deg); }
.fv-vpered::before { margin-right: 5px; transform: rotate(225deg); }
.fv-n { position: absolute; top: max(18px, env(safe-area-inset-top)); left: max(16px, env(safe-area-inset-left)); font-size: 15px; font-variant-numeric: tabular-nums; }
/* На телефоне фото во всю ширину, стрелки внизу, под большим пальцем, счётчик между ними. */
@media (max-width: 720px) {
  .fv { padding: 60px 0 calc(66px + env(safe-area-inset-bottom)); }
  .fv-str { top: auto; bottom: max(10px, env(safe-area-inset-bottom)); margin-top: 0; }
  .fv-n { top: auto; left: 0; right: 0; bottom: max(22px, calc(env(safe-area-inset-bottom) + 12px)); text-align: center; }
}
/* Телефон лёжа: высоты мало, сверху и снизу полей нет, кнопки стоят по бокам. */
@media (max-height: 500px) and (min-width: 721px) {
  .fv { padding: 8px 76px; }
}