/* --------------------------------------------------------------
    HERO BANNER
-------------------------------------------------------------- */

/* Outer wrapper */
.vits-hero-banner {
    --vits-hero-banner--content-padding-inline: var(--hotel-inn-beyond--gutter-main-content);

    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    min-height: 520px;
    box-sizing: border-box;
    padding-top: 12.8rem;
}

/* Shallow modifier class */
.vits-hero-banner.vits-hero-banner--shallow {
    min-height: 480px;
}

/* No image modifier class */
.vits-hero-banner.vits-hero-banner--no-image {
    background-color: var(--hotel-inn-beyond--palette--primary);
    min-height: 300px;
}

.vits-hero-banner.vits-hero-banner--no-image .vits-hero-banner__overlay {
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(4px);
}

/* Image container */
.vits-hero-banner__image {
    position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.vits-hero-banner__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

/* Content container */
.vits-hero-banner__content {
    position: relative;
    width: 100%;
}

/* Content inner wrapper */
.vits-hero-banner__content-inner {
    position: relative;
    max-width: var(--hotel-inn-beyond--content-container-width--bootstrap-max-content);
    padding: 2.4rem var(--vits-hero-banner--content-padding-inline) var(--hotel-inn-beyond--gutter-main-content);
    margin-inline: auto;
    box-sizing: content-box;
}

/* Content layout container */
.vits-hero-banner__content-layout {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

/* Content - Title */
.vits-hero-banner__title {
    color: var(--hotel-inn-beyond--palette--primary);
    margin: 0;;
}

/* Content - Description */
.vits-hero-banner__description {
    color: var(--hotel-inn-beyond--palette--text-primary);
    line-height: 1.25;
    margin: 0;
}

/* Overlay background */
.vits-hero-banner__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(4px);
    border-top-left-radius: 0.8rem;
    border-top-right-radius: 0.8rem;
}

@media (max-width: 767px) {

    /* Content - Title */
    .vits-hero-banner__title {
        font-size: 3rem;
    }

    /* Content - Description */
    .vits-hero-banner__description {
        font-size: 1.6rem;
    }

    /* No image modifier - smaller on mobile */
    .vits-hero-banner.vits-hero-banner--no-image {
        min-height: 200px;
    }
}

@media (min-width: 640px) {

    /* Outer wrapper */
    .vits-hero-banner {
        --vits-hero-banner--content-padding-inline: 2.4rem;
    }

    /* Content inner wrapper */
    .vits-hero-banner__content-inner {
        display: grid;
        grid-template-columns: 2fr 1fr;
        grid-template-rows: auto;
        min-height: 11.0rem;
    }

    /* Content layout container */
    .vits-hero-banner__content-layout {
        padding-right: var(--vits-hero-banner--content-padding-inline);
    }

    /* Overlay background */
    .vits-hero-banner__overlay {
        width: 66.666%;
        border-top-left-radius: 0;
    }
}

@media (min-width: 768px) {

    /* Outer wrapper */
    .vits-hero-banner {
        --vits-hero-banner--content-padding-inline: 3.2rem;
    }

    /* Content inner wrapper */
    .vits-hero-banner__content-inner {
        padding-block: 3.6rem;
    }
}

@media (min-width: 992px) {

    /* Outer wrapper */
    .vits-hero-banner {
        --vits-hero-banner--content-padding-inline: 4.4rem;

        min-height: 600px;
    }

    /* Content inner wrapper */
    .vits-hero-banner__content-inner {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
        padding-block: 4.8rem;
    }

    /* Overlay background */
    .vits-hero-banner__overlay {
        width: 50%;
        border-top-left-radius: 0;
    }
}