/* ============================================================
   pages/media.css — Медиа.
   Секции:
   1. .media-intro — заголовок + лид
   2. .gallery     — сетка превью (mobile 1 кол / tablet 2 / desktop 3)
   3. .lightbox    — модальное окно просмотра
                     (Desktop: только стрелки; Tablet: стрелки+свайп;
                      Mobile: только свайп; крестик 48×48px)
   ============================================================ */

/* ============================================================
   1. INTRO
   ============================================================ */
.media-intro {
  padding-block: 40px 24px;
}
.media-intro__title {
  margin: 0 0 16px;
  color: var(--color-text-main);
}
.media-intro__lead {
  margin: 0;
  color: var(--color-text-secondary);
  max-width: 640px;
}

@media (min-width: 768px) {
  .media-intro {
    padding-block: 60px 32px;
  }
}
@media (min-width: 1025px) {
  .media-intro {
    padding-block: 80px 40px;
  }
}

/* ============================================================
   2. GALLERY
   ============================================================ */
.gallery {
  padding-block: 16px 40px;
}
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);   /* mobile: 2 колонки */
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.gallery__item {
  margin: 0;
}
.gallery__btn {
  display: block;
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.25s ease-out, box-shadow 0.25s ease-out;
}
.gallery__btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(2, 83, 145, 0.18);
}
/* Hover-эффект — только на устройствах с реальным указателем (mouse),
   чтобы тап на тачскрине не оставлял «прилипший» подъём */
@media (hover: hover) and (pointer: fine) {
  .gallery__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(2, 83, 145, 0.18);
  }
}
.gallery__thumb {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

@media (min-width: 768px) {
  .gallery {
    padding-block: 24px 60px;
  }
  .gallery__grid {
    grid-template-columns: repeat(3, 1fr);   /* tablet: 3 колонки */
    gap: 18px;
  }
}
@media (min-width: 1025px) {
  .gallery {
    padding-block: 32px 80px;
  }
  .gallery__grid {
    grid-template-columns: repeat(4, 1fr);   /* desktop: 4 колонки */
    gap: 22px;
  }
}

/* ============================================================
   3. LIGHTBOX
   ============================================================ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  transition: opacity 0.3s ease-out;
}
.lightbox[hidden] {
  display: none;
}
.lightbox.is-open {
  opacity: 1;
}

.lightbox__overlay {
  position: absolute;
  inset: 0;
  background-color: var(--color-overlay);
  cursor: zoom-out;
}

/* Крестик закрытия — 48×48 (по ТЗ для mobile, тот же размер для всех) */
.lightbox__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  line-height: 1;
  color: #fff;
  background: rgba(0, 0, 0, 0.25);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.2s ease-out, color 0.2s ease-out;
  z-index: 2;
}
.lightbox__close:hover,
.lightbox__close:focus-visible {
  background: rgba(0, 0, 0, 0.5);
}

/* Стрелки навигации — base style: opacity 70% → 100% on hover */
.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  display: none;                    /* mobile: скрыты (только свайп) */
  align-items: center;
  justify-content: center;
  font-size: 40px;
  line-height: 1;
  color: #fff;
  background: rgba(0, 0, 0, 0.3);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s ease-out, background-color 0.2s ease-out;
  z-index: 2;
}
.lightbox__nav:hover,
.lightbox__nav:focus-visible {
  opacity: 1;
  background: rgba(0, 0, 0, 0.55);
}
.lightbox__nav--prev { left: 16px; }
.lightbox__nav--next { right: 16px; }

/* Tablet + Desktop: стрелки видны */
@media (min-width: 768px) {
  .lightbox__nav {
    display: inline-flex;
  }
}

/* Контейнер изображения */
.lightbox__stage {
  position: relative;
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.lightbox__image {
  display: block;
  max-width: 90vw;
  max-height: 80vh;
  width: auto;
  height: auto;
  border-radius: 10px;
  background: #111;
  opacity: 0;
  transition: opacity 0.3s ease-out;
}
.lightbox__image.is-loaded {
  opacity: 1;
}
/* Fade-out при переключении: 0.2s ease-in */
.lightbox__image.is-fading-out {
  transition-duration: 0.2s;
  transition-timing-function: ease-in;
  opacity: 0;
}

.lightbox__caption {
  margin-top: 12px;
  padding: 0 8px;
  text-align: center;
  color: #fff;
  font-size: 14px;
  line-height: 1.4;
  max-width: 90vw;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Спиннер загрузки — цвет --color-primary */
.lightbox__spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border: 4px solid rgba(255, 255, 255, 0.25);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: lightbox-spin 0.9s linear infinite;
  display: none;
  z-index: 3;
}
.lightbox__spinner.is-visible {
  display: block;
}
@keyframes lightbox-spin {
  to { transform: rotate(360deg); }
}

/* Блокировка скролла страницы при открытой модалке */
.is-lightbox-open {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .lightbox,
  .lightbox__image,
  .lightbox__image.is-fading-out {
    transition: none;
  }
  .lightbox__spinner {
    animation: none;
  }
}

/* ============================================================
   Финальные анимации галереи и Lightbox
   ============================================================ */

/* Заголовок медиа — fade-in сверху при загрузке */
.media-intro__title {
  animation: mediaTitleIn 0.6s ease-out;
}
.media-intro__lead {
  animation: mediaTitleIn 0.6s ease-out 0.15s both;
}
@keyframes mediaTitleIn {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Превью галереи — волна появления stagger 0.05s */
.gallery__item.fade-in-up {
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.gallery__grid .gallery__item:nth-child(1).fade-in-up.is-visible  { transition-delay: 0.00s; }
.gallery__grid .gallery__item:nth-child(2).fade-in-up.is-visible  { transition-delay: 0.05s; }
.gallery__grid .gallery__item:nth-child(3).fade-in-up.is-visible  { transition-delay: 0.10s; }
.gallery__grid .gallery__item:nth-child(4).fade-in-up.is-visible  { transition-delay: 0.15s; }
.gallery__grid .gallery__item:nth-child(5).fade-in-up.is-visible  { transition-delay: 0.20s; }
.gallery__grid .gallery__item:nth-child(6).fade-in-up.is-visible  { transition-delay: 0.25s; }
.gallery__grid .gallery__item:nth-child(7).fade-in-up.is-visible  { transition-delay: 0.30s; }
.gallery__grid .gallery__item:nth-child(8).fade-in-up.is-visible  { transition-delay: 0.35s; }
.gallery__grid .gallery__item:nth-child(9).fade-in-up.is-visible  { transition-delay: 0.40s; }
.gallery__grid .gallery__item:nth-child(10).fade-in-up.is-visible { transition-delay: 0.45s; }
.gallery__grid .gallery__item:nth-child(11).fade-in-up.is-visible { transition-delay: 0.50s; }
.gallery__grid .gallery__item:nth-child(12).fade-in-up.is-visible { transition-delay: 0.55s; }
.gallery__grid .gallery__item:nth-child(13).fade-in-up.is-visible { transition-delay: 0.60s; }
.gallery__grid .gallery__item:nth-child(14).fade-in-up.is-visible { transition-delay: 0.65s; }

/* Превью при focus — обводка primary для клавиатуры */
.gallery__btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

/* Lightbox — открытие с blur backdrop + scale модалки */
.lightbox {
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
  transition: opacity 0.3s ease-out, backdrop-filter 0.35s ease-out, -webkit-backdrop-filter 0.35s ease-out;
}
.lightbox.is-open {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.lightbox__stage {
  transform: scale(0.92);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.lightbox.is-open .lightbox__stage {
  transform: scale(1);
}
@media (hover: hover) and (pointer: fine) {
  .lightbox__nav:hover {
    transform: translateY(-50%) scale(1.15);
  }
}

@media (prefers-reduced-motion: reduce) {
  .media-intro__title,
  .media-intro__lead,
  .gallery__item.fade-in-up,
  .lightbox,
  .lightbox__stage,
  .lightbox__nav:hover {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
  .lightbox {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}