/* Homepage hero video (dbc_home only) — replaces the fixed header
   background image on the front page. Content (.navbar, .vh-quick-search)
   is stacked above the video and its readability overlay. */

body.home .header {
    background: transparent;
    overflow: hidden;
    /* own stacking context so the negative-z video stays inside the hero
       and the nav/search always paint above it */
    z-index: 0;
    isolation: isolate;
}

.vh-hero-video {
    position: absolute;
    inset: 0;
    /* negative z-index: iOS Safari composites <video> in a native layer that
       ignores the z-index of non-composited siblings. Keeping the video at the
       bottom of the hero stacking context stops it painting over the opened
       mobile menu. */
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.vh-hero-video__media {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border: 0;
    z-index: -1;
    object-fit: cover;
    object-position: center 45%;
    transform: translate(-50%, -50%) translateZ(0);
    -webkit-transform: translate(-50%, -50%) translateZ(0);
    will-change: transform;
}

/* video (0) < readability overlay (1) < nav + search (2) */
body.home header.header .site-header-back {
    z-index: 1;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.78) 0%,
        rgba(0, 0, 0, 0.28) 38%,
        rgba(6, 10, 14, 0.62) 100%
    );
}

body.home header.header .navbar {
    position: relative;
    /* Above the quick-search panel (z-index:100) so the opened "Тип"
       dropdown is not covered by it. */
    z-index: 101;
}

/* Mobile: let the header grow with its content instead of the legacy
   200px strip, and keep the search panel comfortably inside the hero. */
@media (max-width: 767px) {
    body.home .header {
        height: auto;
        min-height: 620px;
        min-height: min(620px, 90svh);
        padding-bottom: 44px;
        background: transparent;
    }

    body.home header.header .vh-quick-search {
        width: 84%;
        margin: 48px auto 0;
    }

    /* smaller logo keeps the menu toggle on the same row on phones */
    body.home header.header .navbar-brand img {
        height: 54px !important;
    }

    /* iOS Safari can paint the inline video's native layer above the drawer.
       While the mobile menu is open (class set by mobile-menu.js) the <video>
       is hidden and the hero uses the matching poster frame instead. */
    body.vh-menu-open .vh-hero-video {
        background: url('../video/varnahome-hero-poster-720.jpg') center 45% / cover no-repeat;
    }

    body.vh-menu-open .vh-hero-video__media {
        display: none;
    }
}

@media (max-width: 600px) {
    body.home header.header .vh-quick-search {
        width: calc(100% - 32px);
        margin: 42px auto 0;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 8px;
    }
}

@media (max-width: 360px) {
    body.home header.header .navbar-brand img {
        height: 48px !important;
    }
}