/* Страница альбома `/foto/`: сетка снимков. Слой полного экрана и кнопки — в `projects.css`. */

/* 🔴 ПОЛОТНО АЛЬБОМА ШИРИНОЙ С КАТАЛОГ, А НЕ С ТЕКСТОВУЮ КОЛОНКУ. Альбом — это сетка
   снимков, и в текстовой колонке (736 точек на любом окне) в ней помещалось бы два кадра
   в ряд на мониторе шириной 2213.

   Условие спрашивается снаружи `main`: полотно задаёт он, а `.foto-stranica` лежит внутри —
   переменная с потомка до предка не доходит. Та же величина, что берут каталог и плитка
   товара (`card.css`), поэтому кадры альбома стоят на той же вертикали, что плитки. */
body:has(.foto-stranica) {
  --width-page: var(--width-catalog);
}

.foto-stranica {
  padding-inline: var(--pole-okna);
}

.foto-kroshki {
  margin: 0 0 var(--o-4);
  font-size: var(--t-xs);
  color: var(--tekst-tihiy);
}

.foto-kroshki .kroshki__shag + .kroshki__shag::before {
  content: " / ";
  color: var(--tekst-tihiy);
  opacity: .7;
}

.foto-kroshki a {
  color: var(--tekst-tihiy);
  text-decoration: none;
}

.foto-kroshki a:hover {
  color: var(--tekst-myagkiy);
}

.foto-stranica__shapka {
  margin: 0 0 var(--o-6);
}

.foto-stranica__zagolovok {
  font-family: var(--shrift-antikva);
  font-size: clamp(30px, 3.1vw, 44px);
  font-weight: 400;
  line-height: 1.1;
  margin: 0 0 var(--o-5);
  text-align: center;
}

.foto-stranica__zagolovok.pod-tekstom,
.foto-stranica__lid.pod-tekstom {
  margin-inline: auto;
}

.foto-stranica__lid {
  color: var(--tekst-myagkiy);
  margin: 0 auto var(--o-5);
  max-width: 54ch;
  text-align: center;
}

.foto-setka {
  display: grid;
  gap: var(--o-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.foto-setka__karta {
  min-width: 0;
}

.foto-setka .foto__knopka {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: center;
  cursor: zoom-in;
}

/* Одна пропорция на всю сетку — как у киноленты и плитки товара: вертикальный 800×1066,
   горизонтальный обрезается по бокам, смысл кадра остаётся в центре. */
.foto-setka .foto__snimok {
  display: block;
  width: 100%;
  aspect-ratio: 800 / 1066;
  height: auto;
  object-fit: cover;
  border-radius: var(--r-m);
  border: 1px solid var(--akcent-detal);
  box-shadow: var(--ten-2);
}

.foto-setka .foto__knopka:hover .foto__snimok {
  border-color: var(--akcent-navedenie);
}

.foto-setka .foto__knopka:focus-visible .foto__snimok {
  outline: 3px solid var(--akcent);
  outline-offset: 3px;
}

@media (min-width: 640px) {
  .foto-setka { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .foto-setka { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}