/* ERRATA — Land and Housing Disputes hero.
   Include ONLY on /zemelnye-zhilishchnye-spory/.
   Link this stylesheet AFTER the page's existing styles. */

.hero {
    background-color: #0d1118;
    background-image:
        linear-gradient(
            90deg,
            rgba(8, 13, 21, .94) 0%,
            rgba(8, 13, 21, .83) 30%,
            rgba(8, 13, 21, .53) 51%,
            rgba(8, 13, 21, .12) 100%
        ),
        url('/assets/images/errata-land-housing-hero.webp');
    background-position: center, center;
    background-size: cover, cover;
    background-repeat: no-repeat;
}

/* Wide screens: text and calls to action on the left. */
@media (min-width: 1000px) {
    .hero {
        height: auto;
        min-height: 550px;
        box-sizing: border-box;
        padding: 90px 0 75px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: stretch;
    }

    .hero .hero-inner {
        box-sizing: border-box;
        width: min(760px, 54vw);
        max-width: 760px;
        margin-left: clamp(45px, 8.5vw, 180px);
        margin-right: auto;
        text-align: left;
    }

    .hero .eyebrow,
    .hero h1,
    .hero .hero-sub,
    .hero .hero-text {
        text-align: left;
        margin-left: 0;
        margin-right: 0;
    }

    .hero h1 {
        max-width: 760px;
        font-size: clamp(2.75rem, 3.2vw, 4rem);
        line-height: 1.08;
    }

    .hero .hero-sub,
    .hero .hero-text {
        max-width: 700px;
    }

    .hero .actions {
        justify-content: flex-start;
        margin-left: 0;
        margin-right: 0;
    }
}

/* Mobile: image stays behind the existing content. */
@media (max-width: 600px) {
    .hero {
        background-image:
            linear-gradient(
                to bottom,
                rgba(8, 13, 21, .66) 0%,
                rgba(8, 13, 21, .80) 55%,
                rgba(8, 13, 21, .95) 100%
            ),
            url('/assets/images/errata-land-housing-hero.webp');
        background-position: center, 66% center;
        background-size: cover, cover;
        background-repeat: no-repeat;
    }
}