* {
    transition: .2s ease;
    box-sizing: border-box;
}
a {
    text-decoration: none;
    transition: .15s ease-in-out;
}
a, a:visited {
    color: inherit;
}
a:hover, a:visited:hover {
    color: #2a5cfb;
}
a:active, a:visited:active {
    color: white;
}
html, body {
    position: relative;
    width: 100%;
}
body {
    background-color: #121212;
    font-family: Montserrat, sans-serif;
    font-size: 20px;
    padding: 0;
    margin: 0;
}
main {
    position: absolute;
    min-height: 100%;
    width: 100%;
    display: flex;
}
main .home {
    width: 800px;
    display: grid;
    position: relative;
    background-color: #000;
    margin: 0 auto;
    box-shadow: 0 0 15em 2em rgba(134, 153, 255, 0.6);
    grid-template-rows: auto 1fr;
}
main .home .page {
    position: relative;
    height: inherit;
    width: 100%;
}
main .home header {
    background-image: url("../i/unicorn.jpg");
    background-position: top;
    background-size: cover;
    position: relative;
    height: 16em;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
main .home header .disk {
    position: absolute;
    right: 2em;
    bottom: 2em;
    height: 4em;
    width: 4em;
    background-image: url("../i/phoneDisk.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-color: white;
    border-radius: 50%;
}
main .home header img {
    display: block;
    position: relative;
    height: 10em;
    top: -.5em;
}
@media (max-width: 500px) {
    main .home header .disk {
        right: 1em;
        bottom: 1em;
        height: 3em;
        width: 3em;
    }
    main .home header img {
        margin: 1em auto;
        height: 60%;
    }
}
main .home article.seals {
    width: 100%;
    position: relative;
    display: grid;
    box-sizing: border-box;
    grid-template-rows: repeat(4, 1fr);
    grid-row-gap: 1em;
    padding: 4em 0;
}
main .home article.seals .seal {
    height: 100%;
    width: 100%;
    position: relative;
    margin: 0 auto;
    text-align: center;
}
.seal.p1 { color: yellow; }
.seal.p4 { color: #cbcbff;}
.seal.p2 { color: pink; }
.seal.p3 { color: lime; }

main .home article.seals .seal img {
    display: block;
    margin: 0 auto;
    max-height: 17em;
    transform: scale(1);
}
main .home article.seals .seal img:hover {
    transform: scale(1.05);
}
@media (max-width: 500px) {
    main .home article.seals img {
        max-height: 300px;
    }
}
main .home article.contacts {
    color: black;
    height: 25em;
    width: 100%;
    display: grid;
    grid-template-columns: 3fr 2fr;
    background-color: #c9d8ff;
    font-size: .9em;
    line-height: 1.4em;
}
main .home article.contacts .map {
    overflow: hidden;
}
main .home article.contacts .map #map {
    height: 110%;
    width: 100%;
}
main .home article.contacts .box {
    display: grid;
    padding: 2em;
    align-items: end;
}
main .home article.contacts .box .row:nth-child(1) {
    margin-bottom: 1em;
}
main .home article.contacts .box .row p {
    margin: 0;
    padding: 0;
}
@media (max-width: 500px) {
    main .home article.contacts {
        height: 35em;
        font-size: .7em;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
        line-height: 1.7em;
        position: relative;
    }
    main .home article.contacts .map {
        height: 22em;
    }
    main .home article.contacts .box {
        padding: 1.5em 2em;
        grid-template-columns: 1fr 1fr;
        grid-column-gap: 1em;
        grid-template-rows: 10em 1em;
        align-items: stretch;
    }
    main .home article.contacts .box img {
        position: absolute;
        right: 2em;
        bottom: 2em;
    }
    main .home article.contacts .box .row:nth-child(1) {
        margin-bottom: 1em;
    }
}
main .home footer {
    color: black;
    width: 100%;
    height: auto;
    background-color: #c9d8ff;
    display: grid;
    justify-items: center;
    align-items: center;
    background-image: url("../i/unicorn.jpg");
    background-position: bottom;
    background-size: cover;
    box-sizing: border-box;
    padding: 2em;
}
main .home footer .row {
    width: 100%;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
}
main .home footer .row .icon {
    margin: 0 10%;
    font-size: 3em;
}
main .home footer .copy {
    margin-top: 1em;
    font-size: .7em;
    text-align: center;
    cursor: default;
}
.spin {
    -webkit-animation: spin 20s infinite linear;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(-360deg); }
}
.dotbg {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="4" height="4" viewBox="0 0 4 4"%3E%3Cpath fill="%239C92AC" fill-opacity="0.4" d="M1 3h1v1H1V3zm2-2h1v1H3V1z"%3E%3C/path%3E%3C/svg%3E');
    background-color: #222;
}

.overlay.goto {
    z-index: 9;
    opacity: 1;
    pointer-events: all;
}
.overlay .view {
    height: 90%;
    width: 90%;
    pointer-events: inherit;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.backbut {
    padding: 1em 1.5em;
    padding-left: 2.5em;
    position: relative;
    border-radius: .4em;
    display: inline-block;
    margin: 1em 0;
    position: relative;
    cursor: pointer;
    left: 0;
}
.backbut.floater {
    position: fixed !important;
    background-color: rgba(250,250,250,0.7);
    border-radius: .4em;
    top: 0;
}
.backbut:after {
    content: '';
    position: absolute;
    width: 1.2em;
    height: 2em;
    background-image: url("../i/backarrow.png");
    background-size: contain;
    background-position: 0% 20%;
    background-repeat: no-repeat;
    left: 1em;
}
.gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 133px); /* 4 ряда */
    gap: 1em; /* необязательно */
}


.gallery .item {
    position: relative;
    box-shadow: inset 0 0 0 1px #fff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: .2s ease;
    height: 100%;
}
.gallery .item:hover {
    box-shadow: inset 0 0 0 3px blue;
}
.page2 {
    background-color: #fff;
    width: 100%;
    top: 0;
    left: 0;
}
.page2 .cont .pack {
    width: 100%;
    text-align: center;
}
.page2 .cont .pack .row {
    padding-bottom: 4em;
}
.page2 .cont .pack .row h2 {
    font-weight: 500;
    margin: 1em auto;
}
.page2 .rest-about .gallery {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(5, 7em);
}
@media (max-width: 500px) {
    .page2 .rest-about .gallery {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(5, 5em);
    }
}
.page2 .rest-about .menuprev img {
    border: 1px solid #8fab8e;
}
.page2 .pizza-about p,
.page2 .event-about p {
    display: block;
    margin: 0 auto;
    width: 80%;
    text-align: left;
}
.page2 .pizza-about .gallery {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 13em);
    gap: 0.1;
}
@media (max-width: 500px) {
    .page2 .pizza-about .gallery {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 8em);
        gap: 0.1;
    }
}
.page2 .event-about .gallery {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 133px); /* Добавьте эту строку или убедитесь, что она есть */
    gap: 0.1;
}
@media (max-width: 500px) {
    .page2 .event-about .gallery {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(5, 5em);
        gap: 0.1
    }
}


@media (max-width: 500px) { /* Этот медиа-запрос уже есть у вас */
    body {
        font-size: 16px; /* Это базовая единица em для мобильных. Можно увеличить, например, до 18px */
    }

    /* Увеличиваем текст в блоке меню (foodblock) для экранов до 500px */
    .foodblock.cont {
        padding: 2em;
    }
    .foodblock.cont .pack {
        grid-template-columns: 1fr; /* Уже есть, делает 1 колонку */
        font-size: 14px; /* Увеличьте этот размер, например, до 16px или 18px */
        /* Было 10px для десктопа, на 500px сделаем 14px, можно и больше */
    }

    /* Увеличим заголовки блюд */
    .foodblock .plate .title {
        font-size: 1.6em; /* Увеличим относительно нового базового font-size для .foodblock.cont .pack */
        /* Если .pack теперь 14px, то 1.6em будет 14 * 1.6 = 22.4px */
    }

    /* Увеличим текст "lh" (если это цены или доп. инфо) */
    .foodblock .plate .lh {
        font-size: 1.1em; /* Увеличим относительно нового базового font-size для .foodblock.cont .pack */
        /* Если .pack теперь 14px, то 1.1em будет 14 * 1.1 = 15.4px */
    }


    .foodblock.cont .pack img {
        width: auto;
        height: 13em;
    }

    /* Остальные медиа-запросы для 500px, которые у вас есть: */
    .cont p {
        line-height: 1.4em;
    }
    .rest-about img {
        width: 100%;
    }
    .pizza-about img {
        width: 100%;
        height: auto; /* Или 100% в зависимости от контекста */
        position: static; /* Вернуть стандартное позиционирование */
        left: auto; /* Сбросить свойство */
    }
}





/* Модальное окно (overlay) */
.overlay {
    display: none; /* Скрыть по умолчанию */
    position: fixed; /* Фиксированное положение, чтобы быть поверх всего */
    z-index: 1000; /* Высокий z-index, чтобы быть над другими элементами */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Позволяет прокручивать, если изображение слишком большое */
    background-color: rgba(0,0,0,0.9); /* Черный фон с прозрачностью */
    justify-content: center; /* Центрирование содержимого по горизонтали */
    align-items: center; /* Центрирование содержимого по вертикали */
}


/* Содержимое модального окна (wrapper) */
.overlay .modal-content-wrapper { /* <-- ИЗМЕНИТЕ ЭТОТ СЕЛЕКТОР */
    margin: auto;
    display: flex; /* Используем flexbox для центрирования img/video внутри */
    justify-content: center;
    align-items: center;
    max-width: 90%;
    max-height: 90%;
    position: relative; /* Важно для позиционирования перетаскивания */
}

/* Применяем эти стили к img и video ВНУТРИ обертки */
.overlay .modal-content-wrapper img,
.overlay .modal-content-wrapper video {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* ВЕРНУЛИ НА CONTAIN */
    position: absolute; /* Сохраняет пропорции и помещается полностью */
    transform: scale(1); /* Начальный масштаб */
    transition: transform 0.2s ease-out; /* Плавное изменение масштаба */
    transform-origin: center center; /* Точка, вокруг которой происходит масштабирование */
    cursor: grab; /* Курсор для перетаскивания (для увеличенного изображения) */
    width: auto; /* Позволяет содержимому занимать необходимую ширину */
    height: auto; /* Позволяет содержимому занимать необходимую высоту */
}

/* Курсор при перетаскивании (применяется к img/video, когда isDragging=true) */
.overlay .modal-content-wrapper img.dragging,
.overlay .modal-content-wrapper video.dragging {
    cursor: grabbing;
}


/* Кнопка закрытия */
.close-button {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
}

.close-button:hover,
.close-button:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* Анимация для модального окна (необязательно) */
.overlay.fade-in {
    animation: fadeIn 0.3s ease-out forwards;
}

.overlay.fade-out {
    animation: fadeOut 0.3s ease-out forwards;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* Zoom controls */
.zoom-controls {
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1001; /* Выше, чем overlay, но ниже чем close-button, если она справа */
    display: flex;
    gap: 10px; /* Отступ между кнопками */
}

.zoom-controls button {
    background-color: rgba(60, 60, 60, 0.7);
    color: white;
    border: none;
    padding: 10px 15px;
    font-size: 20px;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.zoom-controls button:hover {
    background-color: rgba(90, 90, 90, 0.9);
}




/* Курсор при перетаскивании */
.modal-content.dragging {
    cursor: grabbing;
}


/* Кнопки навигации (стрелки) */
.prev-button,
.next-button {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -50px; /* Чтобы поднять на середину */
    color: white;
    font-weight: bold;
    font-size: 30px;
    transition: 0.6s ease;
    user-select: none;
    background-color: rgba(0, 0, 0, 0.5); /* Полупрозрачный фон */
    text-decoration: none; /* Убираем подчеркивание у ссылки */
    z-index: 1001; /* Поверх изображения */
}

.prev-button { /* Добавьте этот блок для позиционирования левой стрелки */
    left: 0; /* Позиционирует стрелку слева */
    border-radius: 0 3px 3px 0; /* Закругляет правый край */
}

.next-button {
    right: 0; /* Позиционирует стрелку справа */
    border-radius: 3px 0 0 3px; /* Закругляет левый край */
}

.prev-button:hover,
.next-button:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

/* Изменения для кнопки сброса */
.zoom-controls .icon-button {
    padding: 10px 12px; /* Уменьшаем padding для иконки */
    font-size: 24px;   /* Делаем иконку больше */
    line-height: 1; /* Для лучшего выравнивания иконки */
}

/* Базовые стили для больших экранов (Desktop First) */
.mixed-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 колонки по умолчанию */
    gap: 1px;
    padding: 0;
    box-sizing: border-box;
    background-color: white;
}

.dotbg {
    background-image: none !important; 
    background-color: white !important;
}

.mixed-gallery .gallery-item {
    position: relative;
    aspect-ratio: 1 / 1; 
    overflow: hidden;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px #fff;
}

.mixed-gallery .gallery-item:hover {
    box-shadow: inset 0 0 0 3px blue;
}

.mixed-gallery .gallery-item img,
.mixed-gallery .gallery-item video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Важно, чтобы изображение заполняло весь элемент и обрезалось */
    transform: scale(1.01); /* Небольшое увеличение для гарантии покрытия */
    transition: transform 0.2s ease;
}

.mixed-gallery .gallery-item img:hover,
.mixed-gallery .gallery-item video:hover {
    transform: scale(1.05);
}

/* ... остальные ваши CSS стили ... */

/* Медиа-запрос для мобильных устройств, если это нужно */
@media (max-width: 768px) { /* Или другое значение для ширины мобильных */
    .mixed-gallery {
        grid-template-columns: repeat(4, 1fr); /* 2 колонки на маленьких экранах */
    }
}

@media (max-width: 500px) {
    .mixed-gallery {
        grid-template-columns: repeat(4, 1fr); /* 1 колонка на очень маленьких экранах */
    }
}
/* Стили для миниатюр видео */
.video-thumbnail {
    position: relative;
}

.video-thumbnail video {
    filter: brightness(70%); /* Немного затемняем видео превью */
}

.video-thumbnail .play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3em;
    color: white;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    padding: 0.2em 0.35em;
    pointer-events: none; /* Иконка не должна перехватывать клики */
    transition: background-color 0.2s ease;
}

.video-thumbnail:hover .play-icon {
    background-color: rgba(0, 0, 0, 0.8);
}

/* Обновляем стили для модального контента */
/* Заменяем .overlay .modal-content на .overlay .modal-content-wrapper */
.overlay .modal-content-wrapper {
    position: relative; /* Важно для дочерних элементов */
    display: flex; /* Центрируем содержимое внутри обертки */
    justify-content: center;
    align-items: center;
    max-width: 90%; /* Максимальная ширина обертки */
    max-height: 90%; /* Максимальная высота обертки */
    width: auto; /* Позволяем ширине подстраиваться под контент */
    height: auto; /* Позволяем высоте подстраиваться под контент */
    /* Убираем transform, transition, transform-origin, cursor: grab отсюда,
       так как они будут применяться к динамически добавляемым img/video */
}

/* Стили для медиа внутри модального окна */
.overlay .modal-content-wrapper img,
.overlay .modal-content-wrapper video {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover; /* Сохраняет пропорции и помещается полностью */
    transform: scale(1); /* Начальный масштаб */
    transition: transform 0.2s ease-out; /* Плавное изменение масштаба */
    transform-origin: center center; /* Точка, вокруг которой происходит масштабирование */
    cursor: grab; /* Курсор для перетаскивания (для увеличенного изображения/видео) */
    position: relative; /* Для перетаскивания */
}

/* Курсор при перетаскивании (применяем к динамическому контенту) */
.overlay .modal-content-wrapper img.dragging,
.overlay .modal-content-wrapper video.dragging {
    cursor: grabbing;
}


#imageModal {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.8);
  z-index: 1000;
}

