/*
 * /kak-zakazat/ — split sections with CSS background panels.
 * The right media area is a plain Gutenberg Group, not an Image block,
 * so the theme cannot add Fancybox links or image wrappers.
 */

/* Hero: use the existing photo as a true CSS background, not a clickable Image block. */
body.page-id-4727 .vsh-order-page .vsh-order-hero {
    position: relative;
    overflow: hidden;
    padding: 0;
    min-height: 280px;
}

body.page-id-4727 .vsh-order-page .vsh-order-hero > .wp-block-group__inner-container {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    min-height: 280px;
    margin: 0;
}

body.page-id-4727 .vsh-order-page .vsh-order-hero-copy {
    position: relative;
    z-index: 2;
    width: 58%;
    min-width: 0;
    padding: 34px 20px 34px 40px;
}

/* Remove the Gutenberg image/Fancybox from layout and interaction. */
body.page-id-4727 .vsh-order-page .vsh-order-hero-media {
    display: none !important;
}

body.page-id-4727 .vsh-order-page .vsh-order-hero::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    width: 42%;
    pointer-events: none;
    background-image: url('/wp-content/uploads/faq-assets/faq-bg-01.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 72% center;
    border-radius: 150px 14px 14px 150px;
}

/* The section and the nested .vsh-order-split are separate Gutenberg groups.
 * Remove the section padding here; keep spacing only on the text column.
 */
body.page-id-4727 .vsh-order-page .vsh-order-section.vsh-order-branding,
body.page-id-4727 .vsh-order-page .vsh-order-section.vsh-order-timing {
    padding: 0;
    overflow: hidden;
}

/* More breathing room specifically between the two photo sections. */
body.page-id-4727 .vsh-order-page .vsh-order-section.vsh-order-branding {
    margin-bottom: 36px;
}

body.page-id-4727 .vsh-order-page .vsh-order-section.vsh-order-branding > .wp-block-group__inner-container,
body.page-id-4727 .vsh-order-page .vsh-order-section.vsh-order-timing > .wp-block-group__inner-container,
body.page-id-4727 .vsh-order-page .vsh-order-split {
    width: 100%;
    height: 100%;
    margin: 0;
}

body.page-id-4727 .vsh-order-page .vsh-order-split > .wp-block-group__inner-container {
    display: grid;
    grid-template-columns: minmax(0, 1.28fr) minmax(320px, .72fr);
    gap: 34px;
    align-items: stretch;
    width: 100%;
    height: 100%;
    margin: 0;
}

body.page-id-4727 .vsh-order-page .vsh-order-split-copy {
    min-width: 0;
    padding: 36px 0 40px 38px;
}

body.page-id-4727 .vsh-order-page .vsh-order-split-media {
    position: relative;
    align-self: stretch;
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 300px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 118px 0 0 118px;
    background-color: #faf4ee;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

/* Soft white wash at the left, top and bottom of the background photo. */
body.page-id-4727 .vsh-order-page .vsh-order-split-media::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background:
        linear-gradient(
            to right,
            #fffdf9 0%,
            rgba(255, 253, 249, .82) 9%,
            rgba(255, 253, 249, 0) 30%
        ),
        linear-gradient(
            to bottom,
            #fffdf9 0%,
            rgba(255, 253, 249, 0) 16%,
            rgba(255, 253, 249, 0) 84%,
            #fffdf9 100%
        );
}

body.page-id-4727 .vsh-order-page .vsh-order-split-media > .wp-block-group__inner-container {
    width: 100%;
    height: 100%;
    min-height: inherit;
    margin: 0;
    padding: 0;
}

body.page-id-4727 .vsh-order-page .vsh-order-split-media--maket {
    background-image: url('/wp-content/uploads/faq-assets/kak-zakazat-maket.jpg');
}

body.page-id-4727 .vsh-order-page .vsh-order-split-media--srok {
    background-image: url('/wp-content/uploads/faq-assets/kak-zakazat-srok.jpg');
}

/* Production + delivery: use the site's existing SVG icons. */
body.page-id-4727 .vsh-order-page .vsh-order-card-grid > .wp-block-group__inner-container > .vsh-order-card:nth-child(1) .vsh-order-card-media {
    background-color: #f3e2d0;
    background-image: url('/wp-content/uploads/2026/08/work-001-1.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 72px 72px;
}

body.page-id-4727 .vsh-order-page .vsh-order-card-grid > .wp-block-group__inner-container > .vsh-order-card:nth-child(2) .vsh-order-card-media {
    background-color: #f3e2d0;
    background-image: url('/wp-content/uploads/2026/08/work-004.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 72px 72px;
}

body.page-id-4727 .vsh-order-page .vsh-order-card-grid .vsh-order-card-media img {
    opacity: 0;
}

/* Branding/timing chips are buttons, not ordinary inline text links. */
body.page-id-4727 .vsh-order-page .vsh-order-branding .vsh-order-inline-links a,
body.page-id-4727 .vsh-order-page .vsh-order-timing .vsh-order-inline-links a {
    border-color: #d7bd9f;
    background: #fffaf5;
    color: #70451f;
    text-decoration: none !important;
    text-decoration-line: none !important;
}

body.page-id-4727 .vsh-order-page .vsh-order-branding .vsh-order-inline-links a:hover,
body.page-id-4727 .vsh-order-page .vsh-order-timing .vsh-order-inline-links a:hover {
    border-color: #b98755;
    background: #e8d0b7;
    color: #5b3719;
    text-decoration: none !important;
    text-decoration-line: none !important;
}

@media (max-width: 900px) {
    body.page-id-4727 .vsh-order-page .vsh-order-hero {
        min-height: 0;
    }

    body.page-id-4727 .vsh-order-page .vsh-order-hero > .wp-block-group__inner-container {
        min-height: 0;
        padding-top: 220px;
    }

    body.page-id-4727 .vsh-order-page .vsh-order-hero-copy {
        width: 100%;
        padding: 24px 22px 28px;
    }

    body.page-id-4727 .vsh-order-page .vsh-order-hero::after {
        top: 0;
        left: 0;
        right: 0;
        bottom: auto;
        width: 100%;
        height: 220px;
        border-radius: 0 0 54px 54px;
        background-position: 72% center;
    }
}

@media (max-width: 900px) and (min-width: 782px) {
    body.page-id-4727 .vsh-order-page .vsh-order-split > .wp-block-group__inner-container {
        grid-template-columns: minmax(0, 1fr) minmax(240px, .72fr);
        gap: 24px;
    }

    body.page-id-4727 .vsh-order-page .vsh-order-split-copy {
        padding: 30px 0 32px 28px;
    }

    body.page-id-4727 .vsh-order-page .vsh-order-split-media {
        min-height: 260px;
        border-radius: 90px 0 0 90px;
    }
}

@media (max-width: 781px) {
    body.page-id-4727 .vsh-order-page .vsh-order-section.vsh-order-branding {
        margin-bottom: 30px;
    }

    body.page-id-4727 .vsh-order-page .vsh-order-split > .wp-block-group__inner-container {
        display: flex;
        flex-direction: column;
        gap: 0;
        align-items: stretch;
    }

    body.page-id-4727 .vsh-order-page .vsh-order-split-copy {
        order: 2;
        padding: 24px 22px 28px;
    }

    body.page-id-4727 .vsh-order-page .vsh-order-split-media {
        order: 1;
        width: 100%;
        height: 230px;
        min-height: 230px;
        border-radius: 0 0 54px 54px;
    }
}

@media (max-width: 480px) {
    body.page-id-4727 .vsh-order-page .vsh-order-hero > .wp-block-group__inner-container {
        padding-top: 195px;
    }

    body.page-id-4727 .vsh-order-page .vsh-order-hero::after {
        height: 195px;
        border-radius: 0 0 42px 42px;
    }

    body.page-id-4727 .vsh-order-page .vsh-order-split-media {
        height: 210px;
        min-height: 210px;
        border-radius: 0 0 42px 42px;
    }
}