.navibe-gallery-wrap { width: 100%; margin: 20px 0; }

.navibe-gallery-header {
    display: flex; align-items: center;
    justify-content: flex-end;
    margin-bottom: 16px;
}
.navibe-download-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 22px;
    background: rgba(20,20,20,0.82);
    color: #fff !important;
    border-radius: 100px;
    text-decoration: none !important;
    font-size: 13px; font-weight: 500; letter-spacing: 0.01em;
    border: 1px solid rgba(255,255,255,0.14);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 2px 16px rgba(0,0,0,0.25),
                0 0 0 1px rgba(255,255,255,0.06) inset;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
    position: relative; overflow: hidden;
}
.navibe-download-btn::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 55%);
    border-radius: 100px; pointer-events: none;
}
.navibe-download-btn:hover {
    background: rgba(40,40,40,0.9);
    transform: translateY(-1px);
    color: #fff !important;
    box-shadow: 0 6px 24px rgba(0,0,0,0.35),
                0 0 0 1px rgba(255,255,255,0.1) inset;
}

/* ── Контейнер ── */
.navibe-masonry { width: 100%; display: flex; flex-direction: column; gap: 6px; }

/* ── Строка: 3 вертикальных — естественные пропорции ── */
.nvb-row--p3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}
.nvb-row--p3 .navibe-item img {
    width: 100%; height: auto; /* пропорции сохраняются */
}

/* ── Строка: горизонтальная + вертикальная ──
   Высота строки = высота вертикального фото (авто).
   Горизонтальная растягивается по высоте, вертикальная в своих пропорциях.
── */
.nvb-row--lp {
    display: flex;
    gap: 6px;
    align-items: stretch; /* оба фото одной высоты */
}
/* Горизонтальная — 2/3 ширины строки */
.nvb-row--lp .navibe-item--landscape {
    flex: 2;
    min-width: 0;
}
/* Вертикальная — 1/3 ширины строки, задаёт высоту строки */
.nvb-row--lp .navibe-item--portrait {
    flex: 1;
    min-width: 0;
}
/* Вертикальная — натуральные пропорции, она определяет высоту */
.nvb-row--lp .navibe-item--portrait img {
    width: 100%;
    height: auto;
    object-fit: unset;
    display: block;
}
/* Горизонтальная — заполняет высоту вертикальной, обрезка ~12% */
.nvb-row--lp .navibe-item--landscape {
    overflow: hidden;
    display: flex;
}
.nvb-row--lp .navibe-item--landscape img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

/* ── Строка: только горизонтальная ── */
.nvb-row--l { width: 100%; }
.nvb-row--l .navibe-item img { width: 100%; height: auto; }

/* ── Общие стили элементов ── */
.navibe-item {
    position: relative; overflow: hidden;
    border-radius: 5px; cursor: pointer; display: block;
}
.navibe-item img {
    display: block; border-radius: 5px;
    transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94), filter 0.4s ease;
    will-change: transform;
}
.navibe-item::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%);
    opacity: 0; transition: opacity 0.35s ease;
    border-radius: 5px; pointer-events: none;
}
.navibe-item:hover img { transform: scale(1.05); filter: brightness(0.82); }
.navibe-item:hover::after { opacity: 1; }
.navibe-zoom-icon {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%,-50%) scale(0.5);
    opacity: 0; z-index: 2; color: #fff; font-size: 32px;
    pointer-events: none; line-height: 1;
    text-shadow: 0 2px 12px rgba(0,0,0,0.6);
    transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
.navibe-item:hover .navibe-zoom-icon { opacity: 1; transform: translate(-50%,-50%) scale(1); }

@media (max-width: 600px) {
    /* На мобильном — все строки скрываем, показываем CSS columns 2 колонки */
    .navibe-masonry {
        display: block;
        column-count: 2;
        column-gap: 5px;
    }

    /* Убираем flex/grid у всех строк */
    .nvb-row--p3,
    .nvb-row--lp,
    .nvb-row--l {
        display: contents; /* дети выходят наружу прямо в columns */
    }

    /* Каждый элемент — обычный блок в колонке */
    .navibe-masonry .navibe-item {
        break-inside: avoid;
        -webkit-column-break-inside: avoid;
        display: block;
        margin-bottom: 5px;
        width: 100%;
    }

    /* Все фото в своих пропорциях */
    .navibe-masonry .navibe-item img {
        width: 100% !important;
        height: auto !important;
        object-fit: unset !important;
    }

    /* Отключаем flex у landscape в lp */
    .nvb-row--lp .navibe-item--landscape,
    .nvb-row--lp .navibe-item--portrait {
        flex: unset;
        min-width: unset;
    }
    .nvb-row--lp .navibe-item--landscape {
        display: block;
    }
}



/* Скрыть alt-текст у незагруженных фото, показать серый фон */
.navibe-item img {
    font-size: 0;    /* скрывает alt текст */
    color: transparent;
    background: #e8e8e8;
    min-height: 80px;
}