/*
    Bootstrap Breakpoints
    ----------------------
    xs: < 768px, sm: >= 768, md >= 992, lg >= 1200
    !! design switches layout at 992px
*/

:root {
    --spacing-y: 1.4em;
    --padding-x-xs: 6%;
    --padding-x-lg: 0.875em;
    --border-color: hsla(0, 0%, 40%, 0.3);
    --aside-color: #a2a7aa;
    --color-header: #f2f2f2;
    --color-secondary: hsl(200, 16%, 22%);
    --color-highlight: hsl(358, 76%, 39%);
}

@media(min-width: 0px) {
    .listingDetails-v2 {
        position: relative;
        /*  all children's measurments (using em units) based off this number */
        font-size: 20px;
    }
}

/*
    Theme Styles
*/
@media(min-width: 0px) {
    .listingDetails-v2--text__header1 {
        font-size: 1.6em;
        font-weight: 500;
    }

    .listingDetails-v2--text__header2 {
        margin-bottom: 0.6em;
        font-size: 1.4em;
        font-weight: 600;
    }

    .listingDetails-v2--text__subheader1,
    .listingDetails-v2--text__subheader1--noMargin {
        font-size: 1em;
        font-weight: 600;
    }

        .listingDetails-v2--text__subheader1--noMargin {
            margin: 0;
        }

        /*.listingDetails-v2--text__subheader2 {
            margin: 0;
            font-size: 1em;
            font-weight: 600;
            color: var(--color-secondary);
        }*/

    .listingDetails-v2--text__body1 {
        font-size: 1em;
        font-weight: 500;
        line-height: 1.6em;
    }

    .listingDetails-v2--text__body2 {
        font-size: 0.875em;
        font-weight: 500;
        line-height: 1.4em;
    }

    .listingDetails-v2--text__price {
        font-size: 1.8em;
    }

    .listingDetails-v2--text--uppercase {
        text-transform: uppercase;
    }

    .listingDetails-v2__anchor--button {
        display: inline-block;
        width: auto;
        padding: 0.5em;
        color: white;
        text-transform: uppercase;
        font-size: 0.875em;
        text-align: center;
        background-color: var(--color-secondary);
        border-radius: 4px;
    }

    .listingDetails-v2__anchor--icon {
        position: relative;
        display: inline-block;
        width: 32px;
        height: 32px;
        margin: 0 2px;
        border-radius: 50%;
    }

        .listingDetails-v2__anchor--icon:hover,
        .listingDetails-v2__anchor--icon:focus {
            background-color: hsla(0, 0%, 80%, 0.5);
        }

        .listingDetails-v2__anchor--icon i {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
}

@media(min-width: 992px) {
    .listingDetails-v2__anchor--button {
        width: 100%;
    }
}

/*
    Column
*/
@media(min-width: 992px) {

    .listingDetails-v2__columns {
        position: relative;
    }
    /* 
        not the greatest solution... 
        -> attempting to make aside height (appear to be) equal to full height of partial
    */
    .listingDetails-v2__columns::before {
        content: '';
        position: absolute;
        bottom: 0;
        right: 0;
        display: block;
        width: 33.5%; /* must be equal to width of .listingDetails-v2__column--aside */
        height: 100%;
        background-color: var(--aside-color);
    }

    .listingDetails-v2__column--main {
        float: left;
        width: 66.5%;
    }

    .listingDetails-v2__column--aside {
        float: left;
        width: 33.5%;
        height: 100%;
    }
}

/* 
    Sections
*/
@media(min-width:0px) {
    .listingDetails-v2__section,
    .listingDetails-v2__section--carousel {
        font-size: 0.875em;
    }

    .listingDetails-v2__section--carousel {
        padding-top: 1.5em;
        background-color: var(--color-header);
    }

    .listingDetails-v2__sectionWrapper,
    .listingDetails-v2__sectionWrapper--offers,
    .listingDetails-v2__sectionWrapper--smallText {
        width: 100%;
        padding: 0 var(--padding-x-xs);
    }

    .listingDetails-v2__sectionWrapper {
        margin: var(--spacing-y) 0;
    }

    .listingDetails-v2__sectionWrapper--offers {
        margin-top: 3em;
    }

    .listingDetails-v2__sectionWrapper--smallText {
        font-size: 0.8em;
    }

    .listingDetails-v2__sectionHeader {
        padding: 1em 0;
    }
}

@media(min-width: 1200px) {
    .listingDetails-v2__section {
        font-size: 1em;
    }
}

/*  
    Banner Section
*/
@media(min-width: 0px) {
    .listingDetails-v2__banner {
        background-color: var(--color-header);
        font-size: 0.8em; /* sets spacing reference for section; should not be overriden in child container */
    }

    .listingDetails-v2__bannerWrapper {
        padding: var(--spacing-y) var(--padding-x-xs);
        text-align: center;
    }
}

@media(min-width: 992px) {
    .listingDetails-v2__banner {
        font-size: 1.2em; /* sets spacing reference for section; should not be overriden in child container */
    }
}

@media(min-width: 1200px) {
    .listingDetails-v2__banner {
        font-size: 1.4em; /* sets spacing reference for section; should not be overriden in child container */
    }

    .listingDetails-v2__bannerWrapper {
        padding: var(--spacing-y) var(--padding-x-lg);
    }
}

/*
    Aside
*/
@media(min-width: 0px) {
    .listingDetails-v2__aside {
        height: auto;
        min-height: 100%;
        padding: var(--spacing-y) 0;
        background-color: var(--aside-color);
    }
}

/* 
    Listing Table 
*/
@media(min-width:0px) {
    .listingDetails-v2__table {
        width: 100%;
    }

    .listingDetails-v2__tableRow {
        border: 1px solid var(--border-color);
    }

        .listingDetails-v2__tableRow:not(:first-of-type) {
            border-top: none;
        }

        .listingDetails-v2__tableRow:nth-of-type(2n + 2) {
            background-color: hsla(0, 0%, 70%, 0.3);
        }

    .listingDetails-v2__tableData {
        width: 50%;
        padding: 0.5em;
    }

        .listingDetails-v2__tableData:first-of-type {
            border-right: 1px solid var(--border-color);
        }
}

/*
    Calculator
*/
@media(min-width: 0px) {
    .listingDetails-v2__calculator {
        padding: 0.875em;
        background-color: var(--color-secondary);
        border-radius: 8px;
    }

        .listingDetails-v2__calculator label {
            color: white;
        }

        .listingDetails-v2__calculator h4 {
            color: white;
        }

        .listingDetails-v2__calculator .input-group-addon {
            /* bootstrap style customization */
            background-color: var(--aside-color);
            border-radius: 0 4px 4px 0;
            transition: all 0.5s ease-in-out;
        }

        .listingDetails-v2__calculator .input-group input {
            /* bootstrap style customization */
            border-radius: 4px 0 0 4px;
            border-right: 0;
        }

            .listingDetails-v2__calculator .input-group input:focus ~ .input-group-addon {
                /* bootstrap style customization */
                border-color: #757c91;
            }
}

/*
    Offers
*/
@media(min-width: 0px) {

    .listingDetails-v2__offer {
        margin-bottom: var(--spacing-y);
    }

    .listingDetails-v2__offerAnchor {
        height: 48px;
        text-align: center;
    }
}

@media(min-width: 992px) {

    .listingDetails-v2__offer {
        position: relative;
        height: auto;
        min-height: 200px;
        margin-bottom: unset;
    }

    .listingDetails-v2__offerText {
        height: auto;
        min-height: 152px;
    }

    .listingDetails-v2__offerAnchor {
        text-align: left;
    }

    .divider--vertical {
        position: relative;
    }

        .divider--vertical + .divider--vertical::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            display: block;
            height: 100%;
            border-left: 1px solid black;
        }
}

/*
    virtual tour
*/
@media(min-width: 0px) {

    .listingDetails-v2__tour {
        height: 300px;
        /*background: linear-gradient(to bottom right, hsl(0, 0%, 20%), hsl(0, 0%, 40%));*/
        background-image: url('/Content/images/virtual-tour-placeholder.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        position: relative;
    }

        .listingDetails-v2__tour i {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: hsl(0, 0%, 90%);
            display: inline-block;
            font-size: 128px;
            text-shadow: 0px 2px 8px hsla(0, 0%, 0%, 0.5);
        }

    .listingDetials-v2__anchor--tour {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 100;
        display: inline-block;
        width: 100%;
        height: 100%;
    }
}

/*
    agent details
*/
@media(min-width: 0px) {
    .listingDetails-v2__image--agent {
        width: 180px;
        height: 180px;
        margin: 0 auto;
        border-radius: 50%;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    .listingDetails-v2__image--agent img {
        display: block;
        width: 100%;
        height: 100%;
    }

    .listingDetails-v2__agentInfo {
        margin: 1em;
        text-align: center;
    }

    .listingDetails-v2__agentInfo h4 {
        margin: 0;
    }
}

@media(min-width: 1200px) {
    .listingDetails-v2__image--agent {
        width: 240px;
        height: 240px;
    }
}

/* FIXES */
.owl-stage {
    /* 
        will not work for OLD browsers, but why subject all to this style bug if we don't have to? 
        -> fix for owl-carousel stacking an image on top of another, doubling height of container
    */
    display: flex;
}

.listingDetails-v2 .close-listings {
    z-index: 100;
}