/* ==========================================================
   TEREHUN NEW YEAR 2027
   PHOTO LAYOUT V3
   Direct CSS only. No JS layout dependency.
   ========================================================== */


/* ==========================================================
   1. INTRO
   Text left / large landscape photo right
   ========================================================== */

@media (min-width: 901px) {

    .ny27-wrap.intro-grid {
        width: min(
            1180px,
            calc(100% - 64px)
        ) !important;

        max-width: 1180px !important;

        display: grid !important;

        grid-template-columns:
            minmax(0, .82fr)
            minmax(0, 1.18fr) !important;

        gap: clamp(
            56px,
            6vw,
            88px
        ) !important;

        align-items: center !important;
    }


    .intro-grid > .ny-copy {
        width: 100% !important;

        max-width: 470px !important;

        justify-self: end !important;
    }


    .intro-grid > .intro-photo {
        width: 100% !important;

        max-width: none !important;

        height: 500px !important;

        margin: 0 !important;

        border-radius: 26px !important;

        overflow: hidden !important;

        box-shadow:
            0 24px 70px
            rgba(22,59,47,.14) !important;
    }


    .intro-grid > .intro-photo img {
        display: block !important;

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

        max-width: none !important;

        aspect-ratio: auto !important;

        object-fit: cover !important;

        object-position: center 54% !important;
    }

}


/* ==========================================================
   2. EXISTING "ЗИМНЯЯ ДЕРЕВНЯ" MOSAIC
   Keep the idea, but make it larger and more cinematic.
   ========================================================== */

@media (min-width: 901px) {

    .photo-mosaic {
        width: 100% !important;

        height: 610px !important;

        display: grid !important;

        grid-template-columns:
            minmax(0, 1.28fr)
            minmax(300px, .72fr) !important;

        grid-template-rows:
            1fr 1fr !important;

        gap: 18px !important;

        margin-top: 44px !important;
    }


    .photo-mosaic figure {
        min-width: 0 !important;
        min-height: 0 !important;

        height: auto !important;

        margin: 0 !important;

        overflow: hidden !important;
    }


    .photo-mosaic figure:first-child {
        grid-column: 1 !important;
        grid-row: 1 / 3 !important;
    }


    .photo-mosaic img {
        width: 100% !important;
        height: 100% !important;

        aspect-ratio: auto !important;

        object-fit: cover !important;
    }

}


/* ==========================================================
   3. INDOOR PROGRAM
   Large image LEFT / text RIGHT
   ========================================================== */

@media (min-width: 901px) {

    .ny27-wrap.split.reverse {
        width: min(
            1180px,
            calc(100% - 64px)
        ) !important;

        max-width: 1180px !important;

        display: grid !important;

        grid-template-columns:
            minmax(0, 1.15fr)
            minmax(0, .85fr) !important;

        gap: clamp(
            56px,
            6vw,
            88px
        ) !important;

        align-items: center !important;
    }


    .split.reverse > .split-photo {
        order: 1 !important;

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

        height: 500px !important;

        margin: 0 !important;

        border-radius: 26px !important;

        overflow: hidden !important;
    }


    .split.reverse > .ny-copy {
        order: 2 !important;

        width: 100% !important;
        max-width: 470px !important;

        justify-self: start !important;
    }


    .split.reverse > .split-photo img {
        display: block !important;

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

        aspect-ratio: auto !important;

        object-fit: cover !important;

        object-position: center !important;
    }

}


/* ==========================================================
   4. "ВЕЧЕРА..." GALLERY
   This is the block from your second screenshot.

   1 large photo on left
   2 supporting photos stacked on right
   ========================================================== */

@media (min-width: 901px) {

    .ny-gallery {
        width: 100% !important;

        height: 610px !important;

        display: grid !important;

        grid-template-columns:
            minmax(0, 1.3fr)
            minmax(300px, .7fr) !important;

        grid-template-rows:
            1fr 1fr !important;

        gap: 18px !important;

        margin-top: 42px !important;
    }


    .ny-gallery > figure {
        min-width: 0 !important;
        min-height: 0 !important;

        width: auto !important;
        height: auto !important;

        margin: 0 !important;

        overflow: hidden !important;

        border-radius: 22px !important;

        box-shadow:
            0 18px 46px
            rgba(22,59,47,.11) !important;
    }


    .ny-gallery > figure:nth-child(1) {
        grid-column: 1 !important;
        grid-row: 1 / 3 !important;
    }


    .ny-gallery > figure:nth-child(2) {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }


    .ny-gallery > figure:nth-child(3) {
        grid-column: 2 !important;
        grid-row: 2 !important;
    }


    .ny-gallery > figure img {
        display: block !important;

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

        max-width: none !important;

        aspect-ratio: auto !important;

        object-fit: cover !important;

        object-position: center !important;

        transition:
            transform .5s ease !important;
    }


    .ny-gallery > figure:hover img {
        transform:
            scale(1.025);
    }

}


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

@media (min-width: 681px) and (max-width: 900px) {

    .ny27-wrap.intro-grid,
    .ny27-wrap.split.reverse {
        width:
            min(
                760px,
                calc(100% - 40px)
            ) !important;

        display: grid !important;

        grid-template-columns:
            1fr !important;

        gap: 34px !important;
    }


    .intro-grid > .ny-copy,
    .split.reverse > .ny-copy {
        width: 100% !important;
        max-width: 620px !important;

        justify-self: start !important;
    }


    .intro-grid > .intro-photo,
    .split.reverse > .split-photo {
        width: 100% !important;

        height: 430px !important;

        order: initial !important;
    }


    .intro-grid > .intro-photo img,
    .split.reverse > .split-photo img {
        width: 100% !important;
        height: 100% !important;

        aspect-ratio: auto !important;

        object-fit: cover !important;
    }


    .ny-gallery,
    .photo-mosaic {
        height: 520px !important;

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

        grid-template-rows:
            1.25fr .75fr !important;
    }


    .ny-gallery > figure:nth-child(1),
    .photo-mosaic > figure:nth-child(1) {
        grid-column:
            1 / 3 !important;

        grid-row:
            1 !important;
    }


    .ny-gallery > figure:nth-child(2),
    .photo-mosaic > figure:nth-child(2) {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }


    .ny-gallery > figure:nth-child(3),
    .photo-mosaic > figure:nth-child(3) {
        grid-column: 2 !important;
        grid-row: 2 !important;
    }

}


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

@media (max-width: 680px) {

    .ny27-wrap.intro-grid,
    .ny27-wrap.split.reverse {
        display: flex !important;

        flex-direction:
            column !important;

        gap: 26px !important;
    }


    .intro-grid > .ny-copy,
    .split.reverse > .ny-copy {
        order: 1 !important;

        width: 100% !important;

        max-width: none !important;
    }


    .intro-grid > .intro-photo,
    .split.reverse > .split-photo {
        order: 2 !important;

        width: 100% !important;

        height: 270px !important;

        margin: 0 !important;

        border-radius: 18px !important;
    }


    .intro-grid > .intro-photo img,
    .split.reverse > .split-photo img {
        width: 100% !important;
        height: 100% !important;

        aspect-ratio: auto !important;

        object-fit: cover !important;
    }


    .ny-gallery,
    .photo-mosaic {
        height: auto !important;

        display: grid !important;

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

        grid-template-rows:
            255px 175px !important;

        gap: 10px !important;
    }


    .ny-gallery > figure,
    .photo-mosaic > figure {
        height: auto !important;

        min-height: 0 !important;

        border-radius: 15px !important;
    }


    .ny-gallery > figure:nth-child(1),
    .photo-mosaic > figure:nth-child(1) {
        grid-column:
            1 / 3 !important;

        grid-row:
            1 !important;
    }


    .ny-gallery > figure:nth-child(2),
    .photo-mosaic > figure:nth-child(2) {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }


    .ny-gallery > figure:nth-child(3),
    .photo-mosaic > figure:nth-child(3) {
        grid-column: 2 !important;
        grid-row: 2 !important;
    }


    .ny-gallery img,
    .photo-mosaic img {
        width: 100% !important;
        height: 100% !important;

        aspect-ratio: auto !important;

        object-fit: cover !important;
    }

}