/* ==========================================================================
   ABOUT UTTARAKHAND — BLOG CATEGORY HERO
   File: hero-blog-category.css
   BEM block: .au-hero-blog-category

   Typography source of truth: au-typography.css
   This file controls layout, background, masking, and responsive structure.
   Do not define typography properties or text colors here.
   ========================================================================== */

/* Full-width hero and background layers */
.au-hero-blog-category {
    position: relative;
    isolation: isolate;
    display: block;
    width: 100%;
    min-height: 520px;
    overflow: hidden;
    background-color: #17191a;
}

.au-hero-blog-category::before {
    position: absolute;
    z-index: -2;
    inset: 0;
    content: "";
    background-image: var(--hero-img);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

/* Darken the landscape only; the foreground mask remains clear. */
.au-hero-blog-category::after {
    position: absolute;
    z-index: -1;
    inset: 0;
    content: "";
    pointer-events: none;
    background: linear-gradient(
        90deg,
        rgba(15, 18, 19, 0.82) 0%,
        rgba(15, 18, 19, 0.65) 45%,
        rgba(15, 18, 19, 0.20) 100%
    );
}

/* Desktop foreground category image: 80% hero height, centered vertically. */
.au-hero-blog-category__media {
    position: absolute;
    z-index: 2;
    top: 10%;
    right: 3%;
    bottom: 10%;
    left: auto;
    width: min(48%, 560px);
    height: 80%;
    overflow: hidden;
    pointer-events: none;

    -webkit-mask-image: var(--hero-mask);
    mask-image: var(--hero-mask);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    mask-position: center center;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.au-hero-blog-category__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: sepia(0.55) hue-rotate(-25deg) saturate(1.35) contrast(1.1) brightness(0.72);
}

/* Content container aligned with the shared header/logo container. */
.au-hero-blog-category__container {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    max-width: 1320px;
    min-height: 520px;
    margin-inline: auto;
    padding: 56px 12px;
}

.au-hero-blog-category__wrapper {
    display: block;
    width: 100%;
}

.au-hero-blog-category__content {
    position: relative;
    z-index: 3;
    width: 56%;
    max-width: 680px;
    margin: 0;
    padding: 20px 0;
}

.au-hero-blog-category__kicker {
    display: block;
}

/* CTA surface and geometry only. Text styling belongs in au-typography.css. */
.au-hero-blog-category__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 180px;
    min-height: 56px;
    padding: 14px 24px;
    border: 1px solid var(--au-color-link, #c90000);
    background-color: var(--au-color-link, #c90000);
    transition: background-color 180ms ease, border-color 180ms ease;
}

.au-hero-blog-category__button:hover {
    background-color: var(--au-color-link-hover, #a80000);
    border-color: var(--au-color-link-hover, #a80000);
}

.au-hero-blog-category__button:focus-visible {
    outline: var(--au-focus-outline-width, 3px) solid currentColor;
    outline-offset: var(--au-focus-outline-offset, 3px);
}

/* Optional statistics layout */
.au-hero-blog-category__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
    margin-top: 28px;
    padding: 0;
}

.au-hero-blog-category__stat {
    display: flex;
    flex: 0 1 220px;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    min-height: 100px;
    padding: 16px 0;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.65);
    background: transparent;
}

/* Tablet */
@media (max-width: 991.98px) {
    .au-hero-blog-category {
        min-height: 480px;
    }

    .au-hero-blog-category__container {
        min-height: 480px;
        padding-block: 40px;
    }

    .au-hero-blog-category__content {
        width: 58%;
        max-width: 680px;
    }

    .au-hero-blog-category__media {
        right: 2%;
        left: auto;
        width: min(48%, 500px);
    }

    .au-hero-blog-category__stats {
        gap: 16px;
    }

    .au-hero-blog-category__stat {
        flex-basis: 180px;
    }
}

/* Mobile: image first row; text second row; same darkened landscape behind both. */
@media (max-width: 767.98px) {
    .au-hero-blog-category {
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
    }

    .au-hero-blog-category::before {
        inset: 0;
        z-index: -2;
        background-position: center;
        background-size: cover;
    }

    .au-hero-blog-category::after {
        inset: 0;
        z-index: -1;
        background: linear-gradient(
            180deg,
            rgba(15, 18, 19, 0.62) 0%,
            rgba(15, 18, 19, 0.70) 55%,
            rgba(15, 18, 19, 0.78) 100%
        );
    }

    .au-hero-blog-category__media {
        position: relative;
        inset: auto;
        flex: 0 0 auto;
        align-self: center;
        width: 72%;
        height: 220px;
        margin: 18px auto 0;
        overflow: hidden;
        opacity: 1;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
    }

    .au-hero-blog-category__image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 35%;
        filter: none;
    }

    .au-hero-blog-category__container {
        display: flex;
        align-items: center;
        width: 100%;
        max-width: 1320px;
        min-height: 0;
        margin: 0 auto;
        padding: 24px 12px 32px;
    }

    .au-hero-blog-category__wrapper,
    .au-hero-blog-category__content {
        position: relative;
        z-index: 3;
        display: block;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        background: transparent;
    }
.au-hero-blog-category__stats {
        gap: 12px;
        margin-top: 24px;
    }

    .au-hero-blog-category__stat {
        flex: 1 1 140px;
        min-height: 76px;
        padding-block: 12px;
    }

    .au-hero-blog-category__button {
        max-width: 100%;
    }
}

/* Small mobile */
@media (max-width: 479.98px) {
    .au-hero-blog-category__media {
        width: 72%;
        height: 190px;
        margin-top: 14px;
    }

    .au-hero-blog-category__container {
        width: 100%;
        padding: 20px 12px 28px;
    }

    .au-hero-blog-category__stats {
        flex-direction: column;
        gap: 8px;
    }

    .au-hero-blog-category__stat {
        flex-basis: auto;
        min-height: 64px;
    }

    .au-hero-blog-category__button {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .au-hero-blog-category__button {
        transition: none;
    }
}

/* Desktop image placement: keep the visible mask near the right content edge. */
@media (min-width: 768px) {
    .au-hero-blog-category__media {
        right: 3%;
        left: auto;
        top: 10%;
        bottom: 10%;
        width: min(48%, 560px);
        height: 80%;
        -webkit-mask-position: right center;
        mask-position: right center;
    }
}