/* Полный сброс стилей */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #ffffff; /* Глубокий черный фон */
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    overflow-x: hidden; /* Убираем горизонтальную прокрутку */
}

/* Сетка галереи */
.gallery {
    display: grid;
    /* Автоматическое количество колонок. 
       400px - минимальная ширина фото, 1fr - растягивание */
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 0px; /* Крошечный зазор между фото, можно поставить 0 */
    width: 100vw;
}

/* Блок с фото */
.photo-card {
    position: relative;
    width: 100%;
    overflow: hidden;
    cursor: pointer;
}

/* Само изображение */
.photo-card img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Фото заполняет блок, обрезая лишнее по краям */
    display: block;
    transition: transform 0.5s ease, filter 0.3s ease;
}

/* Эффект при наведении */
.photo-card:hover img {
    transform: scale(1.08); /* Плавное приближение */
    filter: brightness(1.1);
}

/* Текст поверх фото (появляется только при наведении) */
.photo-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 40px 20px 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
    color: white;
    opacity: 0; /* Скрыт по умолчанию */
    transform: translateY(20px);
    transition: all 0.3s ease;
}

.photo-card:hover .photo-info {
    opacity: 1;
    transform: translateY(0);
}

.photo-info h3 {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 4px;
}

.photo-info p {
    font-size: 14px;
    color: #aaa;
}

/* Адаптив для мобильных */
@media (max-width: 600px) {
    .gallery {
        grid-template-columns: 1fr; /* Одна колонка на телефоне */
    }
    .photo-card {
        height: 300px;
    }
}

/* Кнопка "+" */
.add-btn {
    position: fixed; bottom: 30px; right: 30px;
    width: 56px; height: 56px; background: #ffffff; color: rgb(0, 0, 0);
    border: none; border-radius: 50%; font-size: 24px; font-weight: 300;
    cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    z-index: 100; display: flex; align-items: center; justify-content: center;
    transition: transform 0.2s;
}
.add-btn:hover { transform: scale(1.1); }

/* Модальное окно */
.modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.85); z-index: 200;
    display: flex; align-items: center; justify-content: center;
}
.modal-content {
    background: #1a1a1a; color: white; padding: 25px; border-radius: 12px;
    width: 90%; max-width: 350px; text-align: center;
}
.modal-content input {
    width: 100%; padding: 10px; margin: 8px 0; background: #333;
    border: 1px solid #444; color: white; border-radius: 6px; box-sizing: border-box;
}
.modal-content button {
    width: 100%; padding: 12px; background: #4CAF50; color: white;
    border: none; border-radius: 6px; margin-top: 10px; cursor: pointer;
}
#uploadStatus { display: block; margin-top: 10px; font-size: 13px; color: #aaa; }