/**
 * Homepage hero banner — slot machine, email form, desktop/mobile cards.
 * Loaded after CMS pageHeaderScripts so these rules win over legacy inline styles.
 * Scoped under .homepage-banner-text / .homepagebanner / .custom-home-section-mobile.
 */

/* --- Desktop white card (from USNStyle customCSS) --- */
@media (min-width: 768px) {
    .component.homepagebanner .homepage-banner-text {
        border-left: #677a92 solid 1.9em;
        padding: 20px;
        background: rgb(255 255 255 / 80%);
        width: 783px;
        max-width: 100%;
        min-height: 370px;
        margin-left: 115px;
        border-radius: 30px;
        box-sizing: border-box;
    }

    .component.homepagebanner .homepage-banner-text .heading {
        padding-top: 17px;
        font-size: 4em;
        font-weight: 510;
    }

    section.content.component.usn_cmp_banner.base-bg.base-bg-solid.homepagebanner {
        z-index: 0;
    }
}

/* --- Headings inside banner text (not uSkinned .heading components) --- */
.component.homepagebanner .homepage-banner-text h3:not(.heading),
.component.homepagebanner .homepage-banner-text h5:not(.heading),
.component.homepagebanner .homepage-banner-text h6:not(.heading),
.custom-home-section-mobile .homepage-banner-text-mobile h3:not(.heading),
.custom-home-section-mobile .homepage-banner-text-mobile h5:not(.heading),
.custom-home-section-mobile .homepage-banner-text-mobile h6:not(.heading) {
    color: rgba(var(--base-heading), 1);
    padding-top: 3px;
    margin-bottom: 0.25em;
}

/* --- Email form --- */
.homepage-banner-text .homepage-email-text,
.homepage-banner-text-mobile .homepage-email-text {
    padding-bottom: 5px;
    margin-left: 10px;
    font-weight: 600;
}

.homepage-banner-text .form-container .row,
.homepage-banner-text-mobile .form-container .row,
.homepage-banner-text-mobile #mobile-emailform-home .row {
    align-items: stretch;
    margin-left: 0;
    margin-right: 0;
}

.homepage-banner-text .form-container .form-group,
.homepage-banner-text-mobile .form-container .form-group,
.homepage-banner-text-mobile #mobile-emailform-home .form-group {
    margin-bottom: 0;
}

.homepage-banner-text .form-container .form-control,
.homepage-banner-text-mobile .form-container .form-control,
.homepage-banner-text-mobile #mobile-emailform-home .form-control {
    width: 100%;
    min-height: 46px;
}

.homepage-banner-text #buttonDemo,
.homepage-banner-text-mobile #buttonDemo,
.homepage-banner-text-mobile #mobile-emailform-home #buttonDemo {
    margin: 0 !important;
    width: 100%;
    min-height: 46px;
}

/* --- Desktop slot machine (application.js drum layout) --- */
.component.homepagebanner .slot-machine-container {
    overflow: visible;
    position: relative;
}

.component.homepagebanner .slot-machine {
    margin: 0;
    position: relative;
    height: auto;
    min-height: 0;
}

.component.homepagebanner .slot-machine-heading {
    margin: 0;
    font-size: 1.75em;
    font-weight: 500;
    line-height: 1.3;
}

.component.homepagebanner .slot-machine-line {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35em;
}

.component.homepagebanner .slot-machine-prefix,
.component.homepagebanner .slot-machine-suffix {
    font-weight: 500;
    white-space: nowrap;
}

.component.homepagebanner .slot-machine-suffix {
    font-weight: 400;
}

.component.homepagebanner .slot-machine-drum {
    overflow: hidden;
    display: inline-block;
    vertical-align: baseline;
    line-height: 1.3;
}

.component.homepagebanner .slot-machine-track {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    transition: transform 0.6s ease;
    will-change: transform;
}

/* Override legacy CMS absolute-position slot styles once drum is built */
.component.homepagebanner .slot-machine-drum .slot-machine-text,
.component.homepagebanner .slot-machine-heading .slot-machine-text {
    position: static !important;
    transform: none !important;
    animation: none !important;
    padding-left: 0 !important;
    display: block;
    font-weight: bold;
    white-space: nowrap;
}

.component.homepagebanner .slot-machine-text.slot-word-multifamily {
    color: #677a92;
    text-shadow: -2px 1px 5px white;
}

.component.homepagebanner .slot-machine-text.slot-word-affordable {
    color: #6ca437;
    text-shadow: -2px 1px 5px white;
}

.component.homepagebanner .slot-machine-text.slot-word-renovated {
    color: gray;
    text-shadow: -2px 1px 5px white;
}

.component.homepagebanner .slot-machine-text.slot-word-contemporary {
    color: #1a1a1a;
    text-shadow: -2px 1px 5px white;
}

/* --- Mobile banner card --- */
section.component.custom-home-section-mobile {
    height: calc(80vh - var(--small-header));
    padding-top: 6pc !important;
}

.custom-home-section-mobile .homepage-banner-text-mobile {
    border-left: #677a92 solid 1.9em;
    padding: 9px;
    background: rgb(255 255 255 / 80%);
    width: 100%;
    height: 100%;
    border-radius: 20px;
    box-sizing: border-box;
}

@media only screen and (min-width: 1325px) {
    .custom-home-section-mobile .homepage-banner-text-mobile {
        padding-top: 60px;
    }
}

.custom-home-section-mobile .homepage-banner-text-mobile .heading {
    padding-top: 17px;
    font-size: 4em;
    font-weight: 510;
}

/* --- Mobile slot machine --- */
.custom-home-section-mobile .slot-machine-container-mobile {
    overflow: visible;
    position: relative;
}

.custom-home-section-mobile .slot-machine-mobile {
    margin: 0;
    position: relative;
    height: auto;
    min-height: 0;
}

.custom-home-section-mobile .slot-machine-heading {
    margin: 0;
    font-size: 1.25em;
    font-weight: 500;
    line-height: 1.35;
}

.custom-home-section-mobile .slot-machine-line {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.3em;
}

.custom-home-section-mobile .slot-machine-prefix,
.custom-home-section-mobile .slot-machine-suffix {
    font-weight: 500;
    white-space: nowrap;
}

.custom-home-section-mobile .slot-machine-drum {
    overflow: hidden;
    display: inline-block;
    vertical-align: baseline;
    line-height: 1.35;
}

.custom-home-section-mobile .slot-machine-track {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    transition: transform 0.6s ease;
    will-change: transform;
}

.custom-home-section-mobile .slot-machine-drum .slot-machine-text,
.custom-home-section-mobile .slot-machine-heading .slot-machine-text {
    position: static !important;
    transform: none !important;
    animation: none !important;
    padding-left: 0 !important;
    display: block;
    font-weight: bold;
    white-space: nowrap;
}

.custom-home-section-mobile .slot-machine-text.slot-word-multifamily {
    color: #677a92;
    text-shadow: -2px 1px 5px white;
}

.custom-home-section-mobile .slot-machine-text.slot-word-affordable {
    color: #6ca437;
    text-shadow: -2px 1px 5px white;
}

.custom-home-section-mobile .slot-machine-text.slot-word-renovated {
    color: gray;
    text-shadow: -2px 1px 5px white;
}

.custom-home-section-mobile .slot-machine-text.slot-word-contemporary {
    color: #1a1a1a;
    text-shadow: -2px 1px 5px white;
}

.custom-home-section-mobile .slot-machine-text.slot-mobile-fade {
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* --- Banner video positioning (homepage only) --- */
.component.homepagebanner.usn_cmp_banner .item:not(.item_scale-banner) .image .video .video-player,
.component.custom-home-section-mobile.usn_cmp_banner .item:not(.item_scale-banner) .image .video .video-player {
    position: relative;
    top: 50%;
    left: 51.8%;
    width: 100%;
    height: 100%;
    transform: translate(-54.3%, -64%);
}

@media only screen and (max-width: 600px) {
    .component.custom-home-section-mobile.usn_cmp_banner .item:not(.item_scale-banner) .image .video .video-player {
        left: 51%;
        transform: translate(-59%, -66%) !important;
    }
}

/* --- Slick arrows on homepage banner carousel --- */
.component.homepagebanner .row.slides .item {
    max-width: none;
    padding: 0;
    margin-bottom: 0;
}

.component.homepagebanner .row.slides.slick-slider:not(.listing_no-spacing) .slick-next {
    top: calc(50% + 15px);
    right: -3%;
}

.component.homepagebanner .row.slides.slick-slider:not(.listing_no-spacing) .slick-prev {
    top: calc(50% + 15px);
    left: -3%;
}