/* Sprint 14 responsive media refinements. */
.hbat-home,
.hbat-home * {
    box-sizing: border-box;
}

.hbat-home-section__inner,
.hbat-home-hero__visual,
.hbat-home-hero__media,
.hbat-home-preview__media,
.hbat-home-cta__inner {
    min-width: 0;
    max-width: 100%;
}

.hbat-media-frame {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.hbat-media-image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 100%;
    object-fit: cover;
}

.hbat-home-hero__visual,
.hbat-home-hero__media {
    width: 100%;
    min-height: 0;
}

.hbat-home-hero__image.hbat-media-frame--hero {
    width: 100%;
    aspect-ratio: 16 / 10;
    min-height: 0;
    max-height: 24rem;
}

.hbat-home-preview__image.hbat-media-frame--preview {
    width: 100%;
    aspect-ratio: 4 / 3;
    min-height: 0;
}

.hbat-media-frame--has-image::before {
    display: none;
}

.hbat-home-hero__metric {
    max-width: min(15rem, calc(100% - 2rem));
}

.hbat-home-cta {
    overflow: hidden;
}

.hbat-home-cta--has-image {
    background-image:
        linear-gradient(135deg, rgba(23, 61, 37, 0.88), rgba(47, 107, 63, 0.76)),
        var(--hbat-home-cta-image);
    background-position: center;
    background-size: cover;
}

.hbat-home-actions .hbat-button,
.hbat-home-cta .hbat-button {
    min-width: 0;
    text-align: center;
    white-space: normal;
}

@media (max-width: 48rem) {
    .hbat-home {
        overflow-x: clip;
    }

    .hbat-home-hero__inner,
    .hbat-home-preview__inner,
    .hbat-home-cta__inner {
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
        max-width: 100%;
    }

    .hbat-home-preview__media {
        order: 0;
        width: 100%;
    }

    .hbat-home-actions {
        align-items: stretch;
    }

    .hbat-home-actions .hbat-button,
    .hbat-home-cta .hbat-button {
        width: 100%;
    }

    .hbat-home-hero__image.hbat-media-frame--hero {
        max-height: none;
    }

    .hbat-home-hero__metric {
        position: relative;
        inset: auto;
        width: 100%;
        max-width: 100%;
        margin-top: var(--hbat-space-3, 0.75rem);
    }

    .hbat-home-cta__inner {
        justify-items: stretch;
    }
}

@media (max-width: 30rem) {
    .hbat-home-hero__image.hbat-media-frame--hero {
        aspect-ratio: 4 / 3;
    }
}