/* Gallery */
.gallery-container {
 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
}
.gallery-grid {
 display: grid;
 grid-template-columns: repeat(4, 245px);
 grid-template-rows: repeat(3, 245px);
 gap: 1px;
 width: 100%;
 height: 100%;
 justify-items: stretch;
 align-items: start;
}
.gallery-link {
 display: block;
 text-decoration: none;
 width: 100%;
 height: 100%;
}
.gallery-thumb {
 width: 245px;
 height: 245px;
 aspect-ratio: 1;
 object-fit: cover;
 box-shadow: 0 2px 5px rgba(0,0,0,0.1);
 transition: transform 0.3s ease;
}
.gallery-thumb:hover {
 transform: scale(1.05);
}


/* Season */
.photo-gallery {
    display: grid;
    /* Сетка: 171 + 1 (gap) + 173 (центр) + 1 (gap) + 171 = 517px */
    grid-template-columns: 171px 172px 171px;
    grid-template-rows: 171px 171px 171px;
    gap: 1px;
    width: 516px;
    height: 515px;
    justify-content: center;
    /* Убираем overflow: hidden, чтобы увеличенные фото не обрезались */
    overflow: visible; 
    background: url('/style/design/bg/cell_01.png') repeat-x, url('/style/design/bg/cell_02.png') repeat 0px 4px; 
    box-shadow: inset 1px 1px 25px 10px rgba(0, 0, 0, 0.6);
}

.photo-gallery .image-container {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    position: relative;
    /* Важно для работы внутренней тени */
    overflow: hidden; 
    
    /* Возвращаем тени и блюр */
    filter: blur(0.5px);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
    
    /* Возвращаем плавность (0.3s) */
    transition: transform 0.3s ease, filter 0.3s ease, box-shadow 0.3s ease;
    will-change: transform; /* Подсказка браузеру для плавной анимации */
}

/* Эффект при наведении */
.photo-gallery .image-container:hover {
    transform: scale(1.15) rotate(5deg);
    filter: blur(0px);
    box-shadow: none;
    z-index: 10;
    overflow: visible; /* Позволяет фото выходить за границы ячейки при увеличении */
}

/* Настройка специфических блоков коллажа */

/* 1. Левое высокое */
.photo-gallery .image-container:nth-child(1) {
    grid-column: 1;
    grid-row: 1 / span 2;
    height: 343px; /* 171 + 171 + 1 gap */
}

/* 5. Правое высокое */
.photo-gallery .image-container:nth-child(5) {
    grid-column: 3;
    grid-row: 2 / span 2;
    height: 343px;
}

/* Принудительно задаем позиции для остальных, чтобы сетка не «взорвалась» */
.photo-gallery .image-container:nth-child(2) { grid-column: 2; grid-row: 1; }
.photo-gallery .image-container:nth-child(3) { grid-column: 3; grid-row: 1; }
.photo-gallery .image-container:nth-child(4) { grid-column: 2; grid-row: 2; }
.photo-gallery .image-container:nth-child(6) { grid-column: 1; grid-row: 3; }
.photo-gallery .image-container:nth-child(7) { grid-column: 2; grid-row: 3; }


/* Regulations */
.photo-widget-regulations {
    float: right !important;
    width: 425px !important;
    height: 425px !important; 
    /* margin сверху должен совпадать или быть чуть меньше margin у h3 */
    margin: 15px 0 10px 20px !important;
    display: block !important;
    position: relative !important;
    z-index: 999 !important; 
}

.photo-widget-regulations .gallery-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 141px) !important;
    grid-template-rows: repeat(3, 141px) !important;
    gap: 1px !important;
    width: 425px !important;
    height: 425px !important;
    margin: 0 !important;
}

.photo-widget-regulations a {
    display: contents !important;
}

.photo-widget-regulations img {
    width: 141px !important;
    height: 141px !important;
    object-fit: cover !important;
    display: block !important;
    cursor: pointer !important;
    transition: transform 0.3s ease !important;
}