/* =========================================
    ГАЛЕРЕЯ (Фильтры и Сетка)
========================================= */
.gallery-page {
    position: relative; z-index: 60;
    max-width: 1600px; margin: 0 auto; width: 100%;
    padding-bottom: 15vh;
}

/* Липкий фильтр */
.filter-bar {
    position: sticky; top: 0;
    background: linear-gradient(to bottom, var(--base-bg) 40%, transparent 100%);
    padding: 2vh 5vw 4vh; z-index: 70;
}
.filter-container {
    display: flex; gap: 30px; flex-wrap: wrap;
    border-bottom: 1px solid var(--border-color); padding-bottom: 20px;
}
.filter-btn {
    background: none; border: none; font-family: var(--font-ui);
    font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.15em;
    color: var(--text-muted); cursor: pointer; transition: color 0.3s ease;
    display: flex; align-items: flex-start; gap: 5px;
}
.filter-btn:hover, .filter-btn.active { color: var(--text-main); }
.filter-count {
    font-size: 0.6rem; font-weight: 600; color: var(--accent-wheat);
    opacity: 0.5; transition: opacity 0.3s ease;
}
.filter-btn.active .filter-count { opacity: 1; }

/* =========================================
   BENTO СЕТКА ГАЛЕРЕИ (Журнальная монолитность)
========================================= */
.editorial-grid {
    display: grid;
    /* ПЕРЕХОДИМ НА 3 КОЛОНКИ: карточки станут на треть шире! */
    grid-template-columns: repeat(3, 1fr);
    /* Чуть увеличим базовую высоту, чтобы пропорции были идеальными */
    grid-auto-rows: 400px;
    gap: 4px; 
    padding: 0 5vw;
}

/* Настройки паттернов (Занимаемые ячейки) */
.type-vertical { grid-column: span 1; grid-row: span 2; } /* Теперь это шикарный портрет ~2:3 */
.type-horizontal { grid-column: span 2; grid-row: span 1; } /* Широкая киношная */
.type-square { grid-column: span 1; grid-row: span 1; } /* Стандартная (почти квадрат) */
.type-large { grid-column: span 2; grid-row: span 2; }

/* Мобильная адаптация сетки */
@media (max-width: 1200px) {
    /* На планшетах оставляем 3 колонки, просто делаем чуть ниже */
    .editorial-grid { grid-auto-rows: 320px; }
}
@media (max-width: 900px) {
    /* На маленьких экранах переходим на 2 колонки */
    .editorial-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 300px; }
    .type-horizontal { grid-column: span 2; }
    .type-vertical { grid-column: span 1; grid-row: span 2; }
}
@media (max-width: 600px) {
    .editorial-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
    .type-vertical, .type-horizontal, .type-square, .type-large { grid-column: span 1; grid-row: span 1; aspect-ratio: 4/5; }
}

/* =========================================
    ДИЗАЙН КАРТОЧКИ (Обложка со скрытым текстом)
========================================= */
.gallery-card {
    position: relative; overflow: hidden; border-radius: 2px;
    background-color: #111; transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Скрытие при фильтрации */
.gallery-card.hidden {
    opacity: 0; transform: scale(0.95);
    pointer-events: none; position: absolute; visibility: hidden;
}

.card-image-link {
    display: block; width: 100%; height: 100%; position: relative;
    text-decoration: none;
}

.card-image-link img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    filter: grayscale(20%) contrast(1.1);
    transform: scale(1.02);
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s ease;
}
.gallery-card:hover .card-image-link img,
.gallery-card.is-focused .card-image-link img { transform: scale(1.06); filter: grayscale(0%) contrast(1); }

/* Оверлей внутри обложки */
.card-overlay {
    position: absolute; inset: 0;
    /* Градиент снизу для читаемости текста. Раньше нормальный (не :hover)
       вариант был заметно слабее (0.9→0.4 на 40%), а более тёмный
       (0.95→0.2 на 50%) включался только по :hover — то есть на тач-
       устройствах (где :hover не бывает вовсе) посетители всегда видели
       только слабый градиент. Заодно на светлых/пересвеченных фото его
       не хватало под текстом даже на десктопе. Теперь плотный вариант —
       это база, а :hover просто чуть усиливает его дальше. */
    background: linear-gradient(to top, rgba(5,5,5,0.95) 0%, rgba(5,5,5,0.55) 45%, transparent 100%);
    display: flex; flex-direction: column; justify-content: space-between;
    padding: 30px; pointer-events: none; /* Пропускаем клики на ссылку */
    transition: background 0.4s ease;
}
.gallery-card:hover .card-overlay,
.gallery-card.is-focused .card-overlay { background: linear-gradient(to top, rgba(5,5,5,0.97) 0%, rgba(5,5,5,0.4) 55%, transparent 100%); }

/* Тег категории (Вверху слева)
   "Стекло" — полупрозрачная тёмная подложка с блюром, ОДНА И ТА ЖЕ для
   любого фото (просто чуть плотнее, чем было раньше, — иначе на любом
   фоне границу таблетки было не разглядеть). Меняется отдельно только
   ЦВЕТ ТЕКСТА — .gallery-card.is-light-top переключает его на тёмный,
   когда JS (см. script.js, applyTagContrast) намерил, что кусок фото
   именно под тегом светлый. У .card-overlay градиент вверху уходит в
   transparent (тёмный он только снизу) — то есть тег ничем, кроме
   собственного стекла, не прикрыт, и раньше на светлом небе просто тонул. */
.card-tag {
    align-self: flex-start;
    background: rgba(74, 74, 74, 0.174); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(32px);
    border: 1px solid rgba(255,255,255,0.14); border-radius: 2px;
    color: var(--photo-ink); font-size: 0.65rem; font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.1em;
    padding: 6px 12px; pointer-events: auto;
    transition: color 0.3s ease;
}
.gallery-card.is-light-top .card-tag { color: #141210a8; }

/* Нижний блок (Текст и стрелка) */
.card-bottom {
    display: flex; justify-content: space-between; align-items: flex-end;
    width: 100%;
}
.card-info { display: flex; flex-direction: column; gap: 8px; }

.card-title {
    font-family: var(--font-heading); font-size: clamp(1.6rem, 2vw, 2.2rem);
    font-weight: 400; color: var(--photo-ink); font-style: italic;
    text-shadow: 0 2px 10px var(--photo-shadow);
}

.card-desc {
    font-size: 0.8rem; color: var(--photo-ink-muted); line-height: 1.4;
    text-shadow: 0 2px 10px var(--photo-shadow);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.card-desc p { margin: 0; }
/* Сама подпись пропускает клики на карточку (родитель .card-overlay —
   pointer-events:none), но ссылка внутри (например, на модель) —
   кликабельна сама по себе и НЕ ведёт на альбом. */
.card-desc a { pointer-events: auto; color: var(--photo-ink); text-decoration: underline; text-underline-offset: 2px; }
.card-desc a:hover { color: var(--accent-wheat); }

.card-subtext {
    font-size: 0.75rem; color: var(--photo-ink-muted); text-transform: uppercase;
    letter-spacing: 0.1em; display: flex; align-items: center; gap: 10px;
}

/* Стрелочка */
.card-arrow {
    color: var(--photo-ink); opacity: 0; transform: translateX(-15px);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.gallery-card:hover .card-arrow,
.gallery-card.is-focused .card-arrow { opacity: 1; transform: translateX(0); }
.card-arrow svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.5; fill: none; }

/* Анимация при скролле */
.reveal-up { opacity: 0; transform: translateY(40px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal-up.is-visible { opacity: 1; transform: translateY(0); }
/* Пустая галерея (нет опубликованных альбомов) */
.gallery-empty {
    grid-column: 1 / -1; text-align: center; color: var(--text-muted);
    padding: 20vh 0; font-size: 1rem;
}