/* ==========================================================================
   Модуль фотогалереи (media) — стиль сайта «Следуй за фокусом»
   Автоподключается CMS при module_key = photos / gallery_photo
   ========================================================================== */

.gallery-photos-list__empty,
.photo-album__empty {
  margin: 0;
  color: var(--gf-faint, #6b7380);
}

.gallery-photos-list__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.65rem;
}

.gallery-photos-list__item {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--gf-line, #2c333c);
  border-radius: var(--gf-radius-sm, 8px);
  overflow: hidden;
  background: var(--gf-surface, #1a1f26);
  transition:
    transform 200ms var(--gf-ease, ease),
    border-color 160ms ease,
    box-shadow 200ms ease;
}

.gallery-photos-list__item:hover {
  transform: translateY(-2px);
  border-color: rgba(77, 182, 165, 0.4);
  box-shadow: var(--gf-shadow-soft, 0 18px 50px rgba(0, 0, 0, 0.28));
}

.gallery-photos-list__cover img {
  display: block;
  width: 100%;
  height: 110px;
  object-fit: cover;
}

.gallery-photos-list__cover--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 110px;
  background: var(--gf-surface-2, #20262f);
  color: var(--gf-faint, #6b7380);
  font-size: 0.78rem;
}

.gallery-photos-list__info {
  padding: 0.55rem 0.65rem 0.7rem;
}

.gallery-photos-list__album-title {
  margin: 0 0 0.2rem;
  font-size: 0.9rem;
  font-weight: 650;
  color: var(--gf-ink, #e8eaed);
  line-height: 1.25;
}

.gallery-photos-list__count {
  margin: 0;
  font-size: 0.75rem;
  color: var(--gf-muted, #9aa3ad);
}

.gallery-photos-list__count--empty {
  color: var(--gf-faint, #6b7380);
}

.gallery-photos-list__description {
  margin: 0.35rem 0 0;
  font-size: 0.78rem;
  color: var(--gf-muted, #9aa3ad);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ——— Альбом ——— */

.photo-album__header {
  margin-bottom: 1rem;
}

.photo-album__back {
  display: inline-block;
  margin-bottom: 0.45rem;
  font-size: 0.9rem;
  color: var(--gf-accent-strong, #6fd0bf);
  text-decoration: none;
}

.photo-album__back:hover {
  color: #8fddd0;
}

.photo-album__title {
  margin: 0 0 0.35rem;
  font-family: var(--gf-font-display, Manrope, sans-serif);
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--gf-ink, #e8eaed);
}

.photo-album__description {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
  color: var(--gf-muted, #9aa3ad);
  line-height: 1.5;
}

.photo-album__meta {
  font-size: 0.82rem;
  color: var(--gf-faint, #6b7380);
}

.photo-album__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.55rem;
  margin-top: 0.85rem;
}

.photo-album__thumb {
  margin: 0;
  padding: 0;
  border: 1px solid var(--gf-line, #2c333c);
  border-radius: var(--gf-radius-sm, 8px);
  background: var(--gf-surface, #1a1f26);
  overflow: hidden;
  cursor: zoom-in;
  transition:
    transform 200ms var(--gf-ease, ease),
    border-color 160ms ease;
}

.photo-album__thumb:hover,
.photo-album__thumb:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(77, 182, 165, 0.4);
}

.photo-album__thumb img {
  display: block;
  width: 100%;
  height: 108px;
  object-fit: cover;
  transition: transform 320ms var(--gf-ease, ease), filter 200ms ease;
  filter: saturate(0.95) brightness(0.94);
}

.photo-album__thumb:hover img,
.photo-album__thumb:focus-visible img {
  transform: scale(1.04);
  filter: saturate(1.05) brightness(1.06);
}

/* ——— Лайтбокс ——— */

.photo-album-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.photo-album-modal--open {
  display: flex;
}

.photo-album-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 8, 12, 0.86);
  backdrop-filter: blur(8px);
}

.photo-album-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 64rem);
  max-height: 90svh;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--gf-radius, 10px);
  background: #0a0d12;
  box-shadow: var(--gf-shadow-soft, 0 18px 50px rgba(0, 0, 0, 0.28));
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.photo-album-modal__image-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  max-height: 72svh;
}

#photo-album-modal-image {
  max-width: 100%;
  max-height: 72svh;
  width: auto;
  height: auto;
  object-fit: contain;
}

.photo-album-modal__caption {
  color: var(--gf-ink-soft, #dfe3e8);
  font-size: 0.92rem;
}

.photo-album-modal__caption-title {
  font-weight: 600;
  color: var(--gf-ink, #e8eaed);
  margin-bottom: 0.2rem;
}

.photo-album-modal__caption-desc {
  font-size: 0.85rem;
  color: var(--gf-muted, #9aa3ad);
}

.photo-album-modal__close,
.photo-album-modal__nav {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(18, 22, 28, 0.82);
  color: var(--gf-ink, #e8eaed);
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}

.photo-album-modal__close:hover,
.photo-album-modal__nav:hover {
  background: rgba(28, 34, 42, 0.95);
  border-color: rgba(77, 182, 165, 0.4);
}

.photo-album-modal__close {
  top: 0.65rem;
  right: 0.65rem;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 999px;
  font-size: 1.4rem;
  line-height: 1;
  z-index: 2;
}

.photo-album-modal__nav {
  top: 50%;
  transform: translateY(-50%);
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  font-size: 1.5rem;
  line-height: 1;
  z-index: 2;
}

.photo-album-modal__nav--prev { left: 0.5rem; }
.photo-album-modal__nav--next { right: 0.5rem; }

@media (max-width: 640px) {
  .gallery-photos-list__grid,
  .photo-album__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
  }

  .gallery-photos-list__cover img,
  .gallery-photos-list__cover--empty,
  .photo-album__thumb img {
    height: 92px;
  }

  .photo-album-modal__dialog {
    width: 100%;
    max-height: none;
    border-radius: 0;
    min-height: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-photos-list__item,
  .photo-album__thumb,
  .photo-album__thumb img {
    transition: none !important;
  }

  .gallery-photos-list__item:hover,
  .photo-album__thumb:hover,
  .photo-album__thumb:hover img {
    transform: none;
  }
}