/* gallery.css — листалка фотографий: превью, стрелки, полноэкранный
   просмотр. Используется в статье и в карточке-репортаже на главной. */

.gallery-wrap { position: relative; }
.gallery-track { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--radius); }
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-item { flex: 0 0 78%; scroll-snap-align: start; border: none; padding: 0; margin: 0; cursor: zoom-in; background: var(--line); border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3; }
@media (min-width: 680px) { .gallery-item { flex-basis: 46%; } }
@media (min-width: 1040px) { .gallery-item { flex-basis: 31%; } }
/* сброс, чтобы типографика статьи не влезала в фото листалки */
.gallery-item img { width: 100%; height: 100%; object-fit: cover; margin: 0; border-radius: 0; }

/* видео-слайд в листалке: размер как у фото, но играет через video.js
   (поэтому это не .gallery-item и лайтбокс не открывает) */
.gallery-video { flex: 0 0 78%; scroll-snap-align: start; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 4/3; background: #000; }
@media (min-width: 680px) { .gallery-video { flex-basis: 46%; } }
@media (min-width: 1040px) { .gallery-video { flex-basis: 31%; } }
.gallery-video, .gallery-video .video-wrap, .gallery-video video { width: 100%; height: 100%; }
.gallery-video video { object-fit: cover; }

/* стрелки листалки поверх ленты */
.gallery-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border: none; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow); color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.gallery-arrow svg { width: 18px; height: 18px; }
.gallery-arrow--prev { left: -6px; }
.gallery-arrow--next { right: -6px; }
.gallery-arrow:disabled { opacity: 0.35; cursor: default; }
@media (max-width: 680px) { .gallery-arrow { display: none; } }

/* полноэкранный просмотр фото */
.lightbox { position: fixed; inset: 0; z-index: 80; display: none; }
.lightbox.is-open { display: block; }
.lightbox__scrim { position: absolute; inset: 0; background: rgba(0,0,0,0.86); }
.lightbox__frame { position: relative; height: 100%; display: flex; align-items: center; justify-content: center; padding: 56px 64px; }
.lightbox__img { max-width: 100%; max-height: 100%; border-radius: 8px; object-fit: contain; }
.lightbox__close, .lightbox__prev, .lightbox__next { position: absolute; border: none; background: rgba(255,255,255,0.12); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.lightbox__close { top: 16px; right: 16px; width: 40px; height: 40px; }
.lightbox__prev, .lightbox__next { top: 50%; transform: translateY(-50%); width: 44px; height: 44px; }
.lightbox__prev { left: 12px; }
.lightbox__next { right: 12px; }
.lightbox__close svg, .lightbox__prev svg, .lightbox__next svg { width: 18px; height: 18px; }
.lightbox__counter { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); color: rgba(255,255,255,0.8); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }