/* ============ HERO ============ */

/* Height follows the image ratio so slides are never cropped */
#slider.hero-fit {
    height: auto;
    min-height: 0;
    aspect-ratio: var(--hero-ratio, 16 / 9);
}

#slider.hero-fit .slide,
#slider.hero-fit .kenburns-bg {
    background-size: contain;
    background-position: 50% 50%;
}

/* Cancel the mobile `main { top: -120px }` shift so the header doesn't cover the image */
@media (max-width: 1024px) {
    #slider.hero-fit {
        margin-top: 120px;
    }
}

/* ============ SECTIONS ============ */

/* Every section uses the same .col-lg-11 .p-40 wrapper (.home-container) so widths line up */

/* About: .heading-text's bottom margin would leave a strip of extra background */
.home-about .home-container {
    margin-bottom: 0;
}

.home-about .about-text p {
    text-align: justify;
}

.home-about .about-more {
    display: inline-block;
    margin-top: 8px;
    color: #fff;
}

/* bg2 is shifted down 25px, bg1 is the offset decor square behind it */
.home-about .about-media {
    padding-bottom: 25px;
}

.home-about .bg1,
.home-about .bg2 {
    width: calc(100% - 30px);
    max-width: 400px;
    height: auto;
    aspect-ratio: 1;
}

.home-about .bg1 {
    left: 45px;
}

/* Facilities: the white dash pseudo-element pushed the centered tagline off-center */
.home-facilities .facilities-tagline {
    padding-bottom: 30px;
}

.home-facilities .facilities-tagline h6:before {
    display: none;
}

/* Location */
.home-location__map {
    display: block;
    width: 100%;
    height: 450px;
    border: 0;
}

@media (max-width: 1024px) {
    .home-location__map {
        height: 360px;
    }
}

/* Bootstrap col-lg-* stack below 992px */
@media (max-width: 991.98px) {
    .home-about .about-media {
        margin-top: 32px;
    }
}

/* ============ MOBILE ============ */

/* Theme spacing utilities are !important, so overrides must be too */
@media (max-width: 767px) {

    /* Wrapper owns the spacing; drop the theme's 40px section padding */
    .home-about,
    .home-facilities,
    .home-featured,
    .home-location,
    .home-whatson {
        padding: 0;
    }

    .home-container {
        padding: var(--section-y) var(--section-gutter-x) !important;
    }

    /* Section headings (OUR FACILITIES, FEATURED PRODUCTS, ...) */
    .home-content h4 {
        font-size: var(--section-heading-size);
        line-height: var(--section-heading-line);
        padding-bottom: 0;
        margin-bottom: 24px;
    }

    /* About */
    .home-about .heading-text h6 {
        font-size: 16px;
        line-height: 24px;
        letter-spacing: 1px;
        margin-bottom: 12px;
    }

    .home-about .heading-text h5 {
        font-size: var(--section-title-size);
        line-height: var(--section-title-line);
        margin-bottom: 20px;
    }

    /* Justify leaves wide gaps on narrow columns */
    .home-about .about-text p {
        font-size: 15px;
        line-height: 1.7;
        text-align: left;
        margin-bottom: 16px;
    }

    .home-about .bg1 {
        left: 31px;
    }

    .home-about .bg1,
    .home-about .bg2 {
        width: calc(100% - 16px);
    }

    /* Facilities */
    .home-facilities .facilities-tagline {
        padding-bottom: 24px;
    }

    .home-facilities .facilities-tagline h6 {
        font-size: 18px;
        line-height: 28px;
        text-align: center;
    }

    /* Featured products */
    .home-featured .team-member h3 {
        font-size: 18px;
        line-height: 26px;
    }

    .home-featured .team-desc,
    .home-featured .team-desc p {
        font-size: 14px;
        line-height: 1.6;
        text-align: left !important;
    }

    /* News / promo: inline 450px only makes sense for the 3-up desktop row */
    .home-whatson .post-item-wrap {
        height: auto !important;
    }

    .home-whatson .post-item-description {
        padding-bottom: 24px;
    }

    /* Theme's -60px margin pushes arrows off-screen; overlap the card edge instead */
    .home-content .carousel .flickity-button {
        margin: 0;
    }

    .home-content .carousel .flickity-button.previous {
        left: -16px !important;
    }

    .home-content .carousel .flickity-button.next {
        right: -16px !important;
    }

    .home-location__map {
        height: 280px;
    }
}