/* =====================================================
   ФОТОГАЛЕРЕЯ (assets/modules/gallery/gallery.php)
   Общие для страниц-каталогов вещи (тулбар, счётчик, сетка, пагинация)
   — в components/styles.css. Здесь только то, что специфично для
   галереи: карточки альбомов/фото и лайтбокс.
   ===================================================== */

.gallery {
    max-width: 90rem;
    margin: 0 auto;
    padding: 1.25rem 6% 5rem;
}

/* Отключаем родное перетаскивание картинок мышью (взял, потянул — и
   можно "вынести" фото за пределы страницы: уронить в другую вкладку,
   на рабочий стол и т.п.) — касается ВСЕХ картинок галереи, и превью, и
   полноразмерных в просмотрщике. Это отдельный от контекстного меню
   браузерный механизм (HTML5 drag), поэтому трогает только его —
   правая кнопка (сохранить как) и долгое нажатие на тач-устройствах
   работают как обычно, их это не затрагивает вообще. draggable="false"
   в самой разметке (см. gallery.php) — основной способ, дублируем тут
   CSS-версией на случай браузеров, которые её тоже читают. */
.gallery-card__preview,
.photo-card__img,
.lightbox__img {
    -webkit-user-drag: none;
    user-drag: none;
}

/* Тот же стиль, что у "Последние выпуски" в episodes.css
   (.episodes__section-title) — просто своё имя класса, чтобы не тянуть
   зависимость между модулями. */
.gallery__section-title {
    text-align: left;
    font-family: var(--font-serif);
    font-weight: 900;
    color: #fff;
    font-size: 1.1rem;
    margin: 0 0 1.25rem;
}

.gallery-view {
    text-align: center;
}

.gallery__back {
    margin: 0 auto 2rem;
}

/* --- Карточка альбома ---
   .gallery-card               квадрат, hover-подъём и рамка
   .gallery-card__media        обрезающая обёртка, hover-зум живёт тут
   .gallery-card__preview × 2  два наложенных превью для свайпа ротации:
                                активный сидит по центру (translateX(0)),
                                неактивный "запаркован" справа за краем
                                карточки (translateX(100%)). При ротации
                                новый въезжает слева направо... то есть
                                справа в центр, а старый уезжает из центра
                                влево — см. .is-leaving. Зум и свайп не
                                пересекаются: зум масштабирует .media,
                                свайп двигает только сам слой превью.
*/
.gallery-card {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 1.25rem;
    border: 1px solid var(--color-border);
    background: var(--color-bg-elevated);
    cursor: pointer;
    overflow: hidden;
    animation: fade-in-up 0.4s ease both;
    transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}
.gallery-card:hover {
    transform: translateY(-4px);
    border-color: rgba(217, 119, 6, 0.5);
    box-shadow: 0 16px 32px -14px rgba(0, 0, 0, 0.6);
}

.gallery-card__media {
    position: absolute;
    inset: 0;
    overflow: hidden;
    transition: transform var(--transition-base);
}
.gallery-card:hover .gallery-card__media {
    transform: scale(1.08);
}

.gallery-card__preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translateX(100%);
    transition: transform 550ms cubic-bezier(0.65, 0, 0.35, 1);
}
.gallery-card__preview.is-active {
    transform: translateX(0);
}
.gallery-card__preview.is-leaving {
    transform: translateX(-100%);
}
.gallery-card__preview.no-transition {
    transition: none;
}

.gallery-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(5, 4, 4, 0.97) 0%, rgba(5, 4, 4, 0.72) 38%, rgba(5, 4, 4, 0.18) 68%, transparent 100%);
    pointer-events: none;
}

.gallery-card__info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1.1rem;
}

.gallery-card__type {
    display: block;
    text-align: left;
    color: rgba(255, 255, 255, 0.75);
    font-style: italic;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    margin-bottom: 0.2rem;
}
.gallery-card__name {
    margin: 0 0 0.6rem;
    text-align: left;
    color: #fff;
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.gallery-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.gallery-card__date {
    font-style: italic;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.55);
}
.gallery-card__count {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 10px;
    font-weight: 800;
    color: var(--color-accent);
    margin-left: auto;
}
.gallery-card__count i {
    font-size: 9px;
}
@media (min-width: 1024px) {
    .gallery-card__info { padding: 1.35rem; }
    .gallery-card__name { font-size: 1.2rem; }
}

/* --- Карточка фотографии (внутри альбома) --- */
.photo-card {
    aspect-ratio: 1 / 1;
    border-radius: 0.75rem;
    overflow: hidden;
    border: 1px solid var(--color-border);
    background: #000;
    cursor: pointer;
    animation: fade-in-up 0.4s ease both;
}
.photo-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.4s ease, transform var(--transition-base);
}
.photo-card__img.is-loaded {
    opacity: 1;
}
.photo-card:hover .photo-card__img {
    transform: scale(1.06);
}

/* --- Лайтбокс --- */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(2, 2, 2, 0.96);
    opacity: 0;
    visibility: hidden;
    /* body.nav-open{overflow:hidden} не гарантирует блокировку скролла на
       тач-устройствах (iOS Safari и часть Android всё равно прокручивают
       страницу тач-жестом) — touch-action:none здесь основная защита,
       preventDefault на touchmove в JS дублирует её подстраховкой. */
    touch-action: none;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}
.lightbox.is-active {
    opacity: 1;
    visibility: visible;
}

.lightbox__close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 10;
    background: transparent;
    border: none;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.6rem;
    transition: color var(--transition-base);
}
.lightbox__close:hover {
    color: var(--color-accent);
}

/* Кнопка скачивания полноразмерного фото — та же круглая
   backdrop-blur стилистика, что у стрелочек навигации (.lightbox__nav
   ниже), просто в углу рядом с крестиком закрытия, а не по центру края. */
.lightbox__download {
    position: absolute;
    top: 1.4rem;
    right: 4.5rem;
    z-index: 10;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    background: rgba(5, 4, 4, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    cursor: pointer;
    text-decoration: none;
    transition: color var(--transition-base), border-color var(--transition-base), background var(--transition-base);
}
.lightbox__download:hover {
    color: var(--color-accent);
    border-color: rgba(217, 119, 6, 0.5);
    background: rgba(5, 4, 4, 0.8);
}
@media (max-width: 768px) {
    .lightbox__download { top: 1.4rem; right: 3.75rem; width: 2.25rem; height: 2.25rem; font-size: 0.85rem; }
}

/* Подсказка у кнопки скачивания — только там, где реально есть наведение
   мышью (hover: hover исключает тач-устройства: там при тапе подсказка
   могла бы "залипнуть" на экране до следующего касания в другом месте,
   у мыши такой проблемы нет — курсор сам уходит). Всплывает снизу от
   кнопки (сверху экрана и так мало места, ушла бы за край). Стрелочка —
   тот же приём, что и у самого окошка: точно такой же треугольник цветом
   фона, повёрнутый bottom-border вверх. */
@media (hover: hover) {
    .lightbox__download[data-tooltip] {
        overflow: visible;
    }
    .lightbox__download[data-tooltip]::after,
    .lightbox__download[data-tooltip]::before {
        position: absolute;
        top: 100%;
        left: 50%;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    }
    .lightbox__download[data-tooltip]::after {
        content: attr(data-tooltip);
        transform: translate(-50%, 2px) scale(0.92);
        margin-top: 0.6rem;
        padding: 0.4rem 0.75rem;
        background: rgba(10, 8, 7, 0.96);
        color: var(--color-text);
        font-size: 0.75rem;
        font-weight: 500;
        line-height: 1.3;
        white-space: nowrap;
        border-radius: 0.4rem;
        border: 1px solid var(--color-border);
        box-shadow: var(--shadow-md);
        z-index: 20;
    }
    .lightbox__download[data-tooltip]::before {
        content: '';
        transform: translate(-50%, 2px);
        margin-top: 0.15rem;
        border: 5px solid transparent;
        border-bottom-color: rgba(10, 8, 7, 0.96);
        z-index: 20;
    }
    .lightbox__download[data-tooltip]:hover::after,
    .lightbox__download[data-tooltip]:hover::before {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, 6px) scale(1);
    }
    .lightbox__download[data-tooltip]:hover::before {
        transform: translate(-50%, 6px);
    }
}

/* Контент (фото) при открытии/закрытии плавно "всплывает" — отдельная
   анимация от свайпа между фото (тот живёт на .lightbox__slide ниже),
   чтобы они не мешали друг другу. */
.lightbox__content {
    position: relative;
    width: 90vw;
    height: 88vh;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0.94);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
}
.lightbox.is-active .lightbox__content {
    transform: scale(1);
    opacity: 1;
}

/* Стрелочки — компактные кнопки прямо у вертикальных краёв фото (не
   растянутые зоны на весь экран, как раньше). Только на десктопе — на
   телефоне навигация свайпом. */
.lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    background: rgba(5, 4, 4, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    cursor: pointer;
    opacity: 1;
    transition: color var(--transition-base), border-color var(--transition-base), background var(--transition-base), opacity var(--transition-base);
}
.lightbox__nav:hover {
    color: var(--color-accent);
    border-color: rgba(217, 119, 6, 0.5);
    background: rgba(5, 4, 4, 0.8);
}
/* Нет соседнего фото в эту сторону (первое/последнее фото альбома) —
   стрелочка гаснет через фейд и перестаёт быть кликабельной. */
.lightbox__nav.is-hidden {
    opacity: 0;
    pointer-events: none;
}
.lightbox__nav--prev { left: 0.75rem; }
.lightbox__nav--next { right: 0.75rem; }
@media (max-width: 768px) {
    .lightbox__nav { display: none; }
}

/* Слайд — переход между фото. Уезжает в сторону движения и гаснет,
   новое содержимое (уже подставленное в JS) въезжает с противоположной
   стороны. .no-transition — мгновенный сброс позиции между шагами, без
   него было бы видно "перелёт" через весь экран.
   width/height: 100% — растягивается на весь .lightbox__content (у него
   уже фиксированные 90vw/88vh), а не сжимается по контенту: раньше здесь
   не было явных размеров, и коробка ужималась по маленькому превью
   (единственной в потоке картинке — у fullImg position:absolute), а само
   полное фото рендерилось в своём натуральном размере поверх — из-за
   этого оно и вылезало за границы экрана. */
.lightbox__slide {
    position: relative;
    width: 100%;
    height: 100%;
    /* Вход (когда снимается is-sliding-out-*, элемент возвращается в
       центр) — плавное замедление, "приземление". У выхода — своя кривая
       ниже, с постепенным ускорением. Длительность (0.32s) совпадает с
       SLIDE_DURATION_MS в JS — не рассинхронизировать при правках. */
    transition: transform 0.32s cubic-bezier(0, 0, 0.2, 1), opacity 0.32s ease-out;
}
.lightbox__slide.is-sliding-out-left,
.lightbox__slide.is-sliding-out-right {
    /* Выход — постепенное ускорение ("улетает"), а не та же кривая, что
       у входа: раньше обе фазы шли по одной кривой, и разгон совсем не
       чувствовался, отсюда и ощущение дёрганности. */
    transition: transform 0.32s cubic-bezier(0.4, 0, 1, 1), opacity 0.32s ease-in;
}
.lightbox__slide.is-sliding-out-left {
    transform: translateX(-48px);
    opacity: 0;
}
.lightbox__slide.is-sliding-out-right {
    transform: translateX(48px);
    opacity: 0;
}
.lightbox__slide.no-transition {
    transition: none;
}

.lightbox__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.3s ease;
}
#previewImg.lightbox__img {
    opacity: 1;
    filter: blur(8px);
}
#fullImg.lightbox__img.is-loaded {
    opacity: 1;
}


/* Лоадер — раньше не имел состояния видимости вообще и был виден поверх
   фото постоянно, даже после полной загрузки (баг). Теперь показывается
   только пока полная версия ещё не готова. */
.lightbox__loader {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 2.5rem;
    height: 2.5rem;
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.2s ease;
    animation: gallery-spin 0.8s linear infinite;
}
.lightbox__loader.is-visible {
    opacity: 1;
}
@keyframes gallery-spin {
    to { transform: rotate(360deg); }
}