/* Заголовок */
.gallery-header h1 { font-size: 48px; font-weight: 600; color: #292A2A; }
.gallery-header p { font-size: 16px; font-weight: 500; color: #292A2A; line-height: 22.4px; }

/* Карточка альбома */
.album-card {
    display: flex; flex-direction: column; background: #fff; border-radius: 12px;
    outline: 1px solid #CACCD0; overflow: hidden; text-decoration: none; height: 100%;
    transition: all 0.3s ease;
}
.album-card:hover { outline: 1px solid #00B1BA; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.album-img-wrapper { height: 220px; overflow: hidden; background: #f0f0f0; }
.album-img-wrapper img { width: 100%; height: 100%; object-fit: cover; }
.no-photo { width: 100%; height: 100%; background: #e9ecef; }
.album-info { padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.album-date { font-size: 14px; color: #878D91; }
.album-title { font-size: 18px; font-weight: 600; color: #292A2A; margin: 0; transition: color 0.3s; }
.album-card:hover .album-title { color: #00B1BA; }

/* Кнопка Показать еще */
.gallery-load-more { width: 100%; display: flex; justify-content: center; margin-top: 30px; }
.gallery-load-more a, .gallery-load-more button {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; height: 50px; background: transparent; border: 1px solid #00B1BA;
    color: #00B1BA; font-size: 16px; font-weight: 500; border-radius: 8px;
    text-decoration: none; cursor: pointer; transition: all 0.3s;
}
.gallery-load-more a:hover, .gallery-load-more button:hover { background: #00B1BA; color: #fff; }
.gallery-load-more a:hover svg path, .gallery-load-more button:hover svg path { stroke: #fff; }

/* Детальная страница */
.back-to-gallery { color: #00B1BA; text-decoration: none; font-size: 16px; display: inline-block; margin-bottom: 10px; }
.gallery-detail-header h1 { font-size: 32px; color: #292A2A; }
.gallery-detail-desc { font-size: 16px; color: #292A2A; }

/* CSS Grid для кирпичной кладки */
.gallery-photos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 колонки на ПК */
    grid-auto-rows: 220px; /* Базовая высота строки */
    gap: 20px;
    grid-auto-flow: dense; /* Автоматически заполняет пустые ячейки */
}

.photo-item {
    overflow: hidden;
    border-radius: 12px;
    position: relative;
    min-width: 0; /* Фикс для Firefox */
}
.photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
    transition: transform 0.3s;
}
.photo-item:hover img { transform: scale(1.03); }

/* Высокие фото занимают 2 строки (220 * 2 + 20 отступ = 460px) */
.photo-item.tall-photo {
    grid-row: span 2;
}

.hidden-photo { display: none; }

/* Адаптив для планшетов - 2 колонки */
@media (max-width: 991px) {
    .gallery-photos-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Адаптив для мобильных - 1 колонка, все фото одинаковой высоты */
@media (max-width: 767px) {
    .gallery-photos-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: 250px; /* Немного выше на мобилках */
    }
    /* На мобилках отключаем высокие фото, чтобы было ровно */
    .photo-item.tall-photo {
        grid-row: span 1;
    }
}

/* Модальное окно */
.photo-modal-overlay {
    position: fixed; 
    top: 0; left: 0; 
    width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.6); 
    z-index: 9999; 
    display: flex;
    align-items: center; 
    justify-content: center;
}

/* Обертка, которая плотно обхватывает фото */
.modal-inner-wrapper {
    position: relative;
    display: inline-block;
    max-width: 80%;
    max-height: 80vh;
}

.modal-inner-wrapper img {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 8px;
    display: block;
}

/* Кнопка закрыть (привязана к фото, сверху справа) */
.modal-close-btn {
    position: absolute; 
    top: -20px; 
    right: -20px; 
    width: 40px; height: 40px;
    background: #292A2A; 
    border-radius: 50%; 
    display: flex; align-items: center; justify-content: center; 
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

/* Стрелки (привязаны к фото по бокам) */
.modal-arrow {
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
    width: 50px; height: 50px;
    background: #fff; 
    border-radius: 50%; 
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    z-index: 10;
}
.modal-arrow.left { left: -60px; } /* Выступают на 60px за левый край фото */
.modal-arrow.right { right: -60px; } /* Выступают на 60px за правый край фото */

/* Адаптивность для мобильных */
@media (max-width: 768px) {
    .modal-inner-wrapper { max-width: 95%; }
    .modal-arrow { width: 40px; height: 40px; }
    /* На мобилках прижимаем стрелки к краям экрана, так как фото почти на весь экран */
    .modal-arrow.left { left: 5px; } 
    .modal-arrow.right { right: 5px; }
    .modal-close-btn { top: 10px; right: 10px; }
}
@media (max-width: 768px) {
    .gallery-header h1 { font-size: 32px; }
    .photo-modal-overlay img { max-width: 95%; }
    
}

.album-desc {
    font-size: 14px;
    color: #878D91;
    margin: 5px 0 0 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Ограничиваем описание 2 строками */
    -webkit-box-orient: vertical;
    overflow: hidden;
}