/*-------------------------------------------*/
/*--- B R E A K P O I N T   H E L P E R S ---*/
/*-------------------------------------------*/

/*--- mobile (+touch) ---*/
@media (max-width: 577px) {
    html { font-size: calc((1rem / 16) * 0.8); }

    .is-hidden-mobile, .is-hidden-touch { display: none !important; }
}

/*--- tablet (+touch) ---*/
@media (min-width: 578px) and (max-width: 1279px) {
    html { font-size: calc((1rem / 16) * 0.7); }

    .is-hidden-tablet, .is-hidden-touch { display: none !important; }
}

/*--- sd ---*/
@media (min-width: 1280px) and (max-width: 1439px) {
    html { font-size: calc((1rem / 16) * 0.9); }

    .is-hidden-sd { display: none !important; }
}

/*--- hd ---*/
@media (min-width: 1440px) and (max-width: 1919px) {
    html { font-size: calc((1rem / 16) * 1); }

    .is-hidden-hd { display: none !important; }
}

/*--- uhd ---*/
@media (min-width: 1920px) {
    html { font-size: calc((1rem / 16) * 1.1); }

    .is-hidden-uhd { display: none !important; }
}

/*--- tablet+ ---*/
@media (min-width: 578px) {
    .is-hidden-from-tablet { display: none !important; }
}

/*--- sd+ ---*/
@media (min-width: 1280px) {
    .is-hidden-from-sd { display: none !important; }
}

/*--- hd+ ---*/
@media (min-width: 1440px) {
    .is-hidden-from-hd { display: none !important; }
}

/*-----------------------------------------*/
/*--- R E S P O N S I V E   D E S I G N ---*/
/*-----------------------------------------*/

/*--- mobile (only) ---*/
@media (max-width: 577px) {
    .text a:not(.button) { white-space: unset; }

    div.table{
        margin-right: -30rem;
        padding-right: 30rem;
        overflow: auto;
    }

    #header nav { display: none; }

    #nav { padding: 15rem 30rem;}

    #nav ul { padding: 0; }

    #nav ul li.logo { display: block; }

    #nav button {
        position: relative;
        width: 50rem;
        aspect-ratio: 1.3;
        appearance: none;
        background-color: transparent;
    }

    #nav button span,
    #nav button::before,
    #nav button::after {
        display: block;
        width: 100%;
        height: 5rem;
        content: '';
        background-color: rgb(var(--blue-dark));
    }

    #nav button::before {
        position: absolute;
        top: 0;
    }

    #nav button::after {
        position: absolute;
        bottom: 0;
    }

    #mobile-nav {
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        padding: 30rem 15rem;
        background-color: rgb(var(--blue-dark));
        z-index: 100;
    }

    #mobile-nav ul {
        display: flex;
        flex-direction: column;
        gap: 15rem;
    }

    #mobile-nav .button {
        width: 100%;
        font-size: 1.1em;
        padding: 1em;
    }

    #mobile-nav .button.-v4 {
        color: rgb(var(--white));
        background-color: rgb(var(--blue-dark));
        border-color: rgb(var(--white));
    }

    #mobile-nav .button.-v5 {
        color: rgb(var(--white));
        background-color: rgba(var(--orange));
        border-color: rgb(var(--white));
    }

    #mobile-nav .button.selected {
        color: rgb(var(--blue-light));
        background-color: rgb(var(--white));
        border-color: rgb(var(--white));
    }

    #mobile-nav .icon {
        margin-right: 0.25em;
        font-size: 1.25em;
    }

    #property-search { display: none; }

    #header .carousel-slide { aspect-ratio: 1.25; }

    main {
        padding: 30rem;
        overflow: hidden;
    }

    main .two-column > h2{ padding-right: unset; }

    #listing-list #results .property a {
        flex-direction: column;
        gap: 30rem
    }

    #listing-details main { flex-direction: column-reverse; }

    #listing-details .photos { margin-bottom: 30rem; }

    footer .top ul {
        padding: 30rem;
        flex-wrap: wrap;
        justify-content: center;
        gap: 15rem 45rem;
    }

    footer .middle {
        padding: 30rem 55rem;
        flex-direction: column;
        gap: 15rem;
    }

    footer .middle h2 {
        margin-left: -30rem;
        flex-direction: row;
        justify-content: flex-start;
        gap: 0.25em;
    }

    footer .middle ul { gap: 15rem; }

    footer .middle::before, footer .middle::after { content: none; }

    footer .bottom {
        padding: 30rem;
        flex-direction: column;
    }

    footer .bottom div { gap: 30rem; }

    footer .bottom div ul { flex-direction: column; }

    footer .bottom div ul li { line-height: 1.4; }

    footer .bottom div ul li:first-child { font-weight: 600; }

    footer .bottom div ul li:not(:first-child)::before { content: none;}

    footer .bottom > ul {
        margin-top: 30rem;
        align-items: flex-start;
    }
}