/* ============================================
   ГАЛЕРЕЯ — ОСНОВНЫЕ БЛОКИ
   ============================================ */

/* 1. Внешний контейнер всей галереи */
.gallery-wrapper {
    overflow-x: clip;      /* скрываем выезжающее за экран */
    position: relative;    /* для псевдоэлемента ::after */
    padding: 40px 0 60px;  /* отступы сверху/снизу */
}

/* 2. Градиент справа (маскирует выезд фото) */
.gallery-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 100%;
    background: linear-gradient(to right, #ECF0F1, transparent);
    pointer-events: none;
    z-index: 5;
}

/* 3. Общий заголовок страницы "Фотогалерея наших работ" */
.gallery-header-wrap {
    text-align: center;
    margin-bottom: 5px;
}

.gallery-main-title {
    font-size: 2.5rem;
    font-weight: bold;
    color: #25283D;
    font-family: 'Rubik', sans-serif;
    letter-spacing: 1px;
    display: inline-block;
    border-bottom: 3px solid #ffb502;
    padding-bottom: 8px;
}

/* ============================================
   АЛЬБОМЫ И ЗАГОЛОВКИ АЛЬБОМОВ
   ============================================ */

/* 4. Каждый альбом — вертикальный контейнер */
.gallery-tab {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/* 5. Расстояние между альбомами (кроме последнего) */
.gallery-tab:not(:last-child) {
    margin-bottom: -10px;
}

/* 6. Обёртка для заголовка (поворот, отступы) */
.gallery-tab-title-holder {
    text-align: right;
    margin-bottom: 20px;
    margin-right: -5px;
    transform: rotate(-3deg);
    transform-origin: right center;
}

/* 7. Внешний вид текста заголовка */
.gallery-tab-title-holder-text {
    font-size: 1.6rem;
    font-weight: bold;
    color: #ffb502;
    background: #25283D;
    display: inline-block;
    padding: 8px 24px;
    border-radius: 40px 0 0 40px;
    font-family: 'Rubik', sans-serif;
    letter-spacing: 1px;
    cursor: default;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    transition: 0.3s;
    white-space: nowrap;
}

/* ============================================
   ПОВЁРНУТАЯ КАРУСЕЛЬ
   ============================================ */

/* 8. Обёртка для карусели (поворачиваем только её) */
.rotated-carousel-wrapper {
    transform: rotate(-3deg);        /* наклон всей карусели */
    margin-left: -3%;               /* компенсируем выезд левого края */
    width: 106%;                    /* шире родителя */
    overflow-x: clip;               /* скрываем выезжающее */
    padding: 20px 0;               /* вертикальные отступы */
}

/* 9. Контейнер карусели (скрывает overflow) */
.gallery-tab-images {
    display: block;
    overflow-x: clip;
    height: auto;
    padding: 0;
    margin-top: 20px;
}

/* 10. Лента с фото (двигающийся ряд) */
.gallery-tab-images-slider {
    display: flex;
    gap: 24px;
    width: max-content;
    position: relative;
}

/* 11. Фото в карусели */
.gallery-tab-images-slider img {
    height: 170px;
    width: auto;
    object-fit: cover;
    cursor: pointer;
    transition: transform 0.3s ease, filter 0.3s ease;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

/* 12. Ч/Б на компьютере + увеличение при наведении */
@media (hover: hover) and (pointer: fine) {
    .gallery-tab-images-slider img {
        filter: grayscale(100%);
    }
    .gallery-tab-images-slider img:hover {
        transform: scale(1.7);
        filter: grayscale(0);
        z-index: 10;
        position: relative;
    }
}

/* 13. На телефонах — цветные фото (без ч/б) */
@media (hover: none), (pointer: coarse) {
    .gallery-tab-images-slider img {
        filter: none;
    }
}

/* ============================================
   ПОПАП (ГАЛЕРЕЯ В ПОЛНЫЙ ЭКРАН)
   ============================================ */

/* 14. Фон попапа */
#gallery-popup {
    display: none;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.9);
    z-index: 20000;
}

/* 15. Обёртка для фото в попапе */
#gallery-popup-box {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
}

/* 16. Фото внутри попапа */
#gallery-popup-box img {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 8px;
}

/* 17. Стрелки навигации в попапе */
.popup-prev, .popup-next {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.6);
    color: white;
    font-size: 48px;
    width: 60px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    cursor: pointer;
    z-index: 20001;
    transition: 0.3s;
    user-select: none;
}

.popup-prev {
    left: 20px;
    border-radius: 0 12px 12px 0;
}

.popup-next {
    right: 20px;
    border-radius: 12px 0 0 12px;
}

.popup-prev:hover, .popup-next:hover {
    background: rgba(0,0,0,0.9);
}