/* Базовые стили */

/* Галерея */
.gallery {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    padding: 20px;
}

.thumbnail {
    width: 100%; /* Размер миниатюры по умолчанию */
    height: 100%;
	object-fit: cover; /* Сохраняет пропорции и обрезает изображение */
    cursor: pointer;
    transition: transform 0.3s ease;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.thumbnail:hover {
    transform: scale(1.1); /* Эффект при наведении */
}

/* Контейнер миниатюры */
.thumbnail-container {
    text-align: center; /* Центрируем текст и изображение */
	max-width: 150px; /* Максимальная ширина */
    width: calc(25% - 20px); /* четыре в ряд */
    margin-bottom: 10px; /* Отступ между элементами */
}

/* Текст над миниатюрой */
.thumbnail-caption {
    font-size: 15px; /* Размер шрифта */
    color: #333; /* Цвет текста */
    margin: 5px 0 0 0; /* Отступ сверху */
    text-align: center; /* Выравнивание по центру */
    white-space: nowrap; /* Ограничение текста одной строкой */
    overflow: hidden; /* Обрезка длинного текста */
    text-overflow: ellipsis; /* Добавление многоточия для длинного текста */
	margin-bottom: 5px; /* Маленький отступ между текстом и изображением */
	background-color: rgba(255, 255, 255, 0.8); /* Полупрозрачный белый фон */
	padding: 5px; /* Внутренние отступы вокруг текста */
    border-radius: 4px; /* Скругление углов */
}

/* Контейнер для изображения */
.thumbnail-wrapper {
    width: 150px; /* Ширина миниатюры */
    height: 150px; /* Фиксированная высота */
    overflow: hidden; /* Обрезаем лишнюю часть изображения */
    border-radius: 8px; /* Скругление углов */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Тень */
    margin: 0 auto; /* Центрируем изображение внутри контейнера */
}

/* Ссылка на название миниатюры */
.thumbnail-title-link {
    text-decoration: none; /* Убираем подчеркивание */
    color: inherit; /* Наследуем цвет текста */
    display: inline-block; /* Делаем ссылку строчно-блочной */
}

/* Принудительный перенос */
.break {
    flex-basis: 100%; /* Занимает всю строку */
    height: 0; /* Нулевая высота */
}

/* Галерея в блоке с текстом */
/* Общий контейнер */
.content-with-gallery {
    display: flex; /* Используем Flexbox */
    gap: 20px; /* Пространство между текстом и галереей */
    align-items: flex-start; /* Выравниваем элементы по верхнему краю */
}

/* Блок с текстом */
.text-content {
    flex: 1; /* Текст занимает всю доступную ширину */
}

/* Блок с галереей */
.gallery-content {
    flex: 0 0 200px; /* Галерея имеет фиксированную ширину (200px) */
    display: flex;
    flex-direction: column; /* Размещаем миниатюры вертикально */
    gap: 10px; /* Пространство между миниатюрами */
}

/* Обратный порядок */
.reverse-order {
    flex-direction: row-reverse; /* Меняем порядок элементов */
}

/* <div class="content-with-gallery reverse-order"> из HTML, просто, чтобы не забыть как включить реверс т - право, г- лево */

/* Модальное окно по умолчанию */
.modal {
    display: none; /* Скрываем модальное окно при загрузке страницы */
    position: fixed; /* Фиксированное позиционирование относительно viewport */
    z-index: 999; /* Устанавливаем высокий zIndex, чтобы модальное окно было поверх других элементов */
    left: 0; /* Полностью занимает ширину экрана */
    top: 0; /* Полностью занимает высоту экрана */
    width: 100%; /* Ширина равна ширине экрана */
    height: 100%; /* Высота равна высоте экрана */
    background-color: rgba(0, 0, 0, 0.8); /* Полупрозрачный темный фон */
    justify-content: center; /* Центрируем содержимое горизонтально (Flexbox) */
    align-items: center; /* Центрируем содержимое вертикально (Flexbox) */
}

/* Класс .show показывает модальное окно */
.modal.show {
    display: flex; /* Показываем модальное окно, используя Flexbox */
}

/* Стили для увеличенного изображения внутри модального окна */
.modal-content {
    max-width: 90%; /* Максимальная ширина картинки — 90% от размера экрана */
    max-height: 90%; /* Максимальная высота картинки — 90% от размера экрана */
    object-fit: contain; /* Сохраняем пропорции изображения */
    border-radius: 8px; /* Добавляем скругление углов */
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2); /* Добавляем тень для эффекта глубины */
}

/* Стили для кнопки закрытия модального окна */
.close {
    position: absolute; /* Абсолютное позиционирование */
    top: 15px; /* Расположение сверху */
    right: 35px; /* Расположение справа */
    color: white; /* Белый цвет текста */
    font-size: 40px; /* Размер шрифта */
    font-weight: bold; /* Жирный шрифт */
    cursor: pointer; /* Изменяем курсор на "указатель" */
    z-index: 1000; /* Устанавливаем высокий zIndex, чтобы кнопка была поверх всего */
}

/* Изменение цвета кнопки закрытия при наведении или фокусе */
.close:hover,
.close:focus {
    color: red; /* Меняем цвет на красный */
    text-decoration: none; /* Убираем подчеркивание */
}

/* Стили для кнопок навигации ("Назад" и "Вперед") */
.prev-button,
.next-button {
    position: absolute; /* Абсолютное позиционирование */
    top: 50%; /* Располагаем кнопки по центру вертикально */
    transform: translateY(-50%); /* Корректируем положение по вертикали */
    background-color: rgba(0, 0, 0, 0.5); /* Полупрозрачный черный фон */
    color: white; /* Белый цвет текста */
    border: none; /* Без границы */
    font-size: 24px; /* Размер шрифта */
    padding: 10px; /* Внутренние отступы */
    cursor: pointer; /* Изменяем курсор на "указатель" */
    z-index: 1000; /* Устанавливаем высокий zIndex */
    border-radius: 50%; /* Создаем круглые кнопки */
}

/* Стили для кнопки "Назад" */
.prev-button {
    left: 15px; /* Расположение слева */
}

/* Стили для кнопки "Вперед" */
.next-button {
    right: 15px; /* Расположение справа */
}

/* Изменение внешнего вида кнопок навигации при наведении */
.prev-button:hover,
.next-button:hover {
    background-color: rgba(0, 0, 0, 0.8); /* Увеличиваем прозрачность фона */
}

/* Медиа запросы для адаптивности */

/* Для экранов шириной до 768px (планшеты и мобильные устройства) */
@media (max-width: 768px) {
    /* Уменьшаем размеры элементов для лучшей адаптации */
    .modal-content {
        max-width: 95%; /* Занимает больше пространства */
        max-height: 95%; /* Занимает больше пространства */
    }

    .close {
        font-size: 30px; /* Уменьшаем размер крестика */
    }

    .prev-button,
    .next-button {
        font-size: 20px; /* Уменьшаем размер кнопок */
        padding: 8px; /* Уменьшаем внутренние отступы */
    }
	
	.thumbnail-container {
        width: calc(33.33% - 20px); /* Три колонки */
    }
}

/* Для экранов шириной до 480px (мобильные устройства) */
@media (max-width: 480px) {
    /* Дополнительные изменения для очень маленьких экранов */
    .modal-content {
        max-width: 100%; /* Занимает всё доступное пространство */
        max-height: 100%; /* Занимает всё доступное пространство */
    }

    .close {
        font-size: 25px; /* Ещё меньше размер крестика */
        top: 10px; /* Уменьшаем отступ сверху */
        right: 15px; /* Уменьшаем отступ справа */
    }

    .prev-button,
    .next-button {
        font-size: 16px; /* Ещё меньше размер кнопок */
        padding: 6px; /* Ещё меньше внутренние отступы */
    }
	
	.thumbnail-container {
        width: 100%; /* Одна колонка */
        margin-bottom: 20px; /* Более широкий отступ */
    }

    .thumbnail-caption {
        font-size: 12px; /* Уменьшаем размер текста */
    }
}

/* === Бумажная галерея: .paper-gallery === */

/* Общий контейнер */
.paper-gallery .paper-content-with-gallery {
    display: flex;
    flex-wrap: nowrap; /* Фотографии рядом с текстом */
    align-items: center; /* Выравнивание по центру */ /*flex-start - по верхнему краю, если много картинок */
    gap: 30px; /* Расстояние между текстом и фото */
	overflow: visible;
}

/* Текстовая часть */
.paper-gallery .paper-text-content {
    flex: 1 1 60%; /* Текст занимает 60% ширины */
    padding-right: 20px;
}

/* Галерея с миниатюрами */
.paper-gallery .paper-gallery-content {
    flex: 1 1 40%;
    display: flex;
    flex-direction: row; /* Горизонтальное расположение фото */
    flex-wrap: nowrap; /* Не переносить на новую строку */
    gap: 40px; /* Пространство между миниатюрами */
    overflow-x: auto; /* Горизонтальная прокрутка при нехватке места */
    -webkit-overflow-scrolling: touch; /* Плавность скролла на iOS */
    padding-bottom: 10px; /* Отступ снизу для скролла */
	margin: 0 0 0 10px; /* Добавляем место слева от галереи */
}

/* Стили для миниатюр внутри .paper-gallery */
.paper-gallery .paper-gallery-content .thumbnail {
    width: auto; /*размер миниатюры*/
	margin: 7px 7px 7px 7px; /*отступы*/
    height: 220px; /*для одного размера - auto */
    object-fit: cover;
    border: 4px solid #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
	box-sizing: content-box; /* ВАЖНО: рамка не влияет на ширину */
	flex-shrink: 0; /* Важно: фото не должны сжиматься */
}

/* Разный угол поворота для "разбросанного" эффекта */
.paper-gallery .paper-gallery-content .thumbnail:nth-child(1) {
    transform: rotate(-3deg);
}
.paper-gallery .paper-gallery-content .thumbnail:nth-child(2) {
    transform: rotate(3deg);
}

/* Адаптивность */
@media (max-width: 992px) {
    .paper-gallery .paper-content-with-gallery {
        flex-direction: column;
    }

    .paper-gallery .paper-gallery-content {
        flex-wrap: wrap;
        justify-content: center;
        overflow-x: visible;
        margin-top: 5px;
    }

    .paper-gallery .paper-gallery-content .thumbnail {
        width: auto;
		height: 150px;
        transform: rotate(0deg); /* Сбрасываем поворот */
		gap: 20px;
    }
}