/*
Theme Name: Chapar Berlin
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: olfactory
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

*/

/* =========================================================
   WORDPRESS CLASSIC GALLERY
   MODERN GRID
   ========================================================= */


/* Убираем служебные <br>, которые WordPress вставляет
   между элементами классической галереи */

.gallery > br {
    display: none !important;
}


/* =========================================================
   ОСНОВНАЯ СЕТКА
   ========================================================= */

.gallery {
    display: grid !important;

    grid-template-columns: 1.35fr 1fr !important;

    grid-template-rows: repeat(2, minmax(260px, 1fr));

    gap: 16px !important;

    width: 100% !important;

    margin: 30px 0 !important;
    padding: 0 !important;

    clear: both !important;

    box-sizing: border-box !important;
}


/* =========================================================
   ЭЛЕМЕНТЫ
   ========================================================= */

.gallery .gallery-item {
    display: block !important;

    width: 100% !important;
    max-width: none !important;

    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;

    box-sizing: border-box !important;

    min-width: 0;
}


/* =========================================================
   ПЕРВОЕ ФОТО — БОЛЬШОЕ
   ========================================================= */

.gallery .gallery-item:first-of-type {
    grid-column: 1;
    grid-row: 1 / 3;
}


/* Второе */
.gallery .gallery-item:nth-of-type(2) {
    grid-column: 2;
    grid-row: 1;
}


/* Третье */
.gallery .gallery-item:nth-of-type(3) {
    grid-column: 2;
    grid-row: 2;
}


/* =========================================================
   IMAGE CONTAINER
   ========================================================= */

.gallery .gallery-icon {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden;

    position: relative;

    border-radius: 14px !important;

    background: #f4f4f4;

    box-shadow:
        0 5px 18px rgba(0, 0, 0, 0.08);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}


/* =========================================================
   LINK
   ========================================================= */

.gallery .gallery-icon a {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden;

    line-height: 0;

    position: relative;
}


/* =========================================================
   IMAGE
   ========================================================= */

.gallery .gallery-icon img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 14px !important;

    object-fit: cover !important;

    transition:
        transform .5s cubic-bezier(.2,.7,.2,1),
        filter .4s ease;
}


/* =========================================================
   HOVER
   ========================================================= */

.gallery .gallery-icon a::after {
    content: "";

    position: absolute;

    inset: 0;

    background: rgba(0, 0, 0, 0);

    transition: background .35s ease;

    pointer-events: none;
}


.gallery .gallery-item:hover img {
    transform: scale(1.045);

    filter: brightness(.92);
}


.gallery .gallery-item:hover .gallery-icon a::after {
    background: rgba(0, 0, 0, .06);
}


.gallery .gallery-item:hover .gallery-icon {
    transform: translateY(-2px);

    box-shadow:
        0 12px 30px rgba(0, 0, 0, .15);
}


/* =========================================================
   CAPTION
   ========================================================= */

.gallery .gallery-caption {
    margin: 8px 4px 0 !important;
    padding: 0 !important;

    font-size: 13px;
    line-height: 1.4;

    text-align: left;
}


/* =========================================================
   4+ ФОТО
   ========================================================= */

/* Начиная с 4-й картинки делаем нормальную сетку */

.gallery .gallery-item:nth-of-type(n+4) {
    grid-column: auto;
    grid-row: auto;
}


/* =========================================================
   4 ФОТО
   ========================================================= */

.gallery:has(.gallery-item:nth-of-type(4)) {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: repeat(2, 280px);
}

.gallery:has(.gallery-item:nth-of-type(4))
.gallery-item:first-of-type {
    grid-column: auto;
    grid-row: auto;
}


/* =========================================================
   5–6 ФОТО
   ========================================================= */

.gallery:has(.gallery-item:nth-of-type(5)),
.gallery:has(.gallery-item:nth-of-type(6)) {
    grid-template-columns: repeat(3, 1fr) !important;
    grid-template-rows: auto;
}

.gallery:has(.gallery-item:nth-of-type(5)) .gallery-item:first-of-type,
.gallery:has(.gallery-item:nth-of-type(6)) .gallery-item:first-of-type {
    grid-column: auto;
    grid-row: auto;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 800px) {

    .gallery {
        grid-template-columns: 1fr 1fr !important;

        grid-template-rows: repeat(2, 240px);

        gap: 12px !important;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 560px) {

    .gallery {
        display: grid !important;

        grid-template-columns: 1fr !important;

        grid-template-rows: none !important;

        gap: 10px !important;

        margin: 20px 0 !important;
    }


    .gallery .gallery-item,
    .gallery .gallery-item:first-of-type,
    .gallery .gallery-item:nth-of-type(2),
    .gallery .gallery-item:nth-of-type(3) {
        grid-column: auto !important;
        grid-row: auto !important;

        height: auto !important;
    }


    .gallery .gallery-icon {
        height: auto !important;

        aspect-ratio: 4 / 3;

        border-radius: 10px !important;
    }


    .gallery .gallery-icon img {
        border-radius: 10px !important;
    }


    .gallery .gallery-item:hover .gallery-icon {
        transform: none;
    }

}