/* BIAF — фото зрителей: список альбомов и альбом */

.photos-page{ padding-bottom: 80px; }
.photos-intro{ max-width: 760px; margin: -8px 0 36px; color: var(--biaf-beige, #f1eee8); font-size: 17px; line-height: 1.45; }

/* список альбомов */
.photos-list{
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px 28px;
}
@media (min-width: 640px){ .photos-list{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px){ .photos-list{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.photos-card{ display: block; color: #fff; text-decoration: none; }
.photos-card__cover{
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #161616;
  border: 1px solid rgba(255,255,255,.12);
}
.photos-card__cover img{ display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.photos-card:hover .photos-card__cover img{ transform: scale(1.03); }
.photos-card__soon{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--biaf-muted, #9a9a9a);
  font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
}
.photos-card__body{ padding-top: 14px; }
.photos-card__meta{ margin: 0 0 6px; color: var(--biaf-pink, #ff0085); font-size: 13px; letter-spacing: .05em; text-transform: uppercase; }
.photos-card__title{ margin: 0; font-size: 20px; font-weight: 400; line-height: 1.25; text-transform: uppercase; }
.photos-card:hover .photos-card__title{ color: var(--biaf-pink, #ff0085); }
.photos-card__count{ margin: 6px 0 0; color: var(--biaf-muted, #9a9a9a); font-size: 13px; }

/* альбом */
.photos-back{ display: inline-block; margin-bottom: 24px; color: #fff; text-decoration: none; font-size: 15px; }
.photos-back:hover{ color: var(--biaf-pink, #ff0085); }
.photos-album__meta{ margin: -8px 0 10px; color: var(--biaf-pink, #ff0085); font-size: 14px; letter-spacing: .05em; text-transform: uppercase; }
.photos-hint, .photos-empty{ margin: 0 0 24px; color: var(--biaf-muted, #9a9a9a); font-size: 14px; }
.photos-empty{ padding: 60px 0; font-size: 16px; }

.photo-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}
.photo-grid__item{ display: block; aspect-ratio: 3 / 2; overflow: hidden; background: #161616; cursor: zoom-in; }
.photo-grid__item img{ display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity .2s; }
.photo-grid__item:hover img{ opacity: .85; }
@media (max-width: 639px){
  .photo-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
}

/* просмотр фото */
.photo-viewer{
  position: fixed; inset: 0; z-index: 2147483000;
  display: none; flex-direction: column;
  background: rgba(0,0,0,.94);
}
.photo-viewer.is-open{ display: flex; }
.photo-viewer__stage{ position: relative; flex: 1; display: flex; align-items: center; justify-content: center; padding: 56px 64px 12px; min-height: 0; }
.photo-viewer__img{ display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.photo-viewer__bar{
  display: flex; justify-content: center; align-items: center; gap: 18px;
  padding: 14px 16px 22px; color: #fff;
}
.photo-viewer__count{ font-size: 14px; letter-spacing: .06em; min-width: 70px; text-align: center; }
.photo-viewer__download{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 24px; border-radius: 999px;
  background: var(--biaf-pink, #ff0085); color: #fff;
  font-size: 14px; letter-spacing: .05em; text-transform: uppercase; text-decoration: none;
}
.photo-viewer__download:hover{ opacity: .88; }
.photo-viewer__close, .photo-viewer__nav{
  position: absolute; border: 0; background: none; color: #fff; cursor: pointer; line-height: 1; padding: 8px;
}
.photo-viewer__close{ top: 10px; right: 14px; font-size: 40px; }
.photo-viewer__nav{ top: 50%; transform: translateY(-50%); font-size: 56px; }
.photo-viewer__nav--prev{ left: 8px; }
.photo-viewer__nav--next{ right: 8px; }
.photo-viewer__close:hover, .photo-viewer__nav:hover{ color: var(--biaf-pink, #ff0085); }
@media (max-width: 639px){
  .photo-viewer__stage{ padding: 52px 8px 8px; }
  .photo-viewer__nav{ font-size: 44px; }
}