/* ERRATA DIGITAL — online business legal services hero.
   Page: /legal-online-business/
   Load AFTER the page's existing styles.
   No global CSS or JavaScript changes. */

.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, .54) 52%,
            rgba(8, 13, 21, .14) 100%
        ),
        url('/assets/images/errata-online-business-hero.webp');
    background-position: center, center;
    background-size: cover, cover;
    background-repeat: no-repeat;
}

/* Wide screens — text on the left, workplace on the right. */
@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;
    }
}

/* Tablet: reinforce contrast while original layout remains unchanged. */
@media (min-width: 601px) and (max-width: 999px) {
    .hero {
        background-image:
            linear-gradient(
                90deg,
                rgba(8, 13, 21, .85),
                rgba(8, 13, 21, .67) 60%,
                rgba(8, 13, 21, .45)
            ),
            url('/assets/images/errata-online-business-hero.webp');
    }
}

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