@import url(https://fonts.googleapis.com/css?family=Open+Sans);
@font-face {
  font-family: 'BarlowCondensed-Bold';
  src: url('../fonts/chba/BarlowCondensed-Bold.woff2') format('woff2'),
       url('../fonts/chba/BarlowCondensed-Bold.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Besley-SemiBold';
  src: url('../fonts/chba/Besley-SemiBold.woff2') format('woff2'),
       url('../fonts/chba/Besley-SemiBold.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Besley-Medium';
  src: url('../fonts/chba/Besley-Medium.woff2') format('woff2'),
       url('../fonts/chba/Besley-Medium.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
/* Dark Blue: 0D2E73   Light Blue: D4F3FF   Green: 56A04B*/
:root {
    --logo-font-color: #0D2E73;
    --pg-bkg-color: white;
    --font-color-1: #000000;
    --font-color-2: #fff;
    --font-color-3a: #dee4e6;
    --font-color-3b: #0D2E73;
    --font-color-3c: #0D2E73;
    --font-color-3C: #56A04B;
    --font-color-4: #d2deef;
    --priority-bkg: #D4F3FF;
    --priority-color: #000;
    --priority-links: #0d2e73ad;
    --basic-listing-bgk: #fff;
    --basic-color: #000;
    --basic-link: #0d2e73ad;
    --big-font: "Besley-SemiBold", "Open Sans", sans-serif;
    --font-color-2a: #666767;
    --font-color-2b: #ced1d2;
}

.li-660002026 .company-name h2 {
    font-size: 0px;
    margin-right: 0px;
}

.li-660002026 .company-name h2::before {
    visibility: visible;
    white-space: pre;
    font-size: 25px;
    content: "Residential Structures, P.C.";
}

.li-660002026 .company-name h2::after {
    content: "\a Structural Engineering & Consulting";
    visibility: visible;
    white-space: pre;
    font-size: 18px;
    line-height: 27px;
    font-style: italic;
}

.display-map iframe {
    width: 100%;
}

@media (max-width: 600px) {
    .li-660002026 .company-name h2::before {
        font-size: 20px;
    }

    .li-660002026 .company-name h2::after {
        font-size: 15px;
    }

    .display-map iframe {
        width: 80% !important;
    }
}

@media (max-width: 380px) {
    .li-660002026 .company-name h2::before {
        font-size: 18px;
    }

    .li-660002026 .company-name h2::after {
        line-height: 20px;
        font-size: 13px;
    }

    .li-660002026 .listing-logos img.member-logo {
        height: 105px;
    }
}

@media (max-width: 1254px) {
    .gui-logo-name {
        font-size: 43px !important;
    }
}

@media (max-width: 950px) {
    .gui-logo-name {
        font-size: 40px !important;
    }
}

@media (max-width: 900px) {
    .gui-logo-name {
        font-size: 40px !important;
    }
}

@media (max-width: 830px) {
    .gui-logo-name {
        font-size: 33px !important;
    }
}

@media (max-width: 587px) {
    .gui-logo-name {
        font-size: 30px !important;
    }
}

@media (max-width: 360px) {
    .gui-logo-name {
        font-size: 25px !important;
    }
}

button.navbar-toggle {
    background-color: var(--font-color-3b);
}

div#pgCont {
    border-color: var(--font-color-3b, black);
    background: var(--pg-bkg-color, #fff);
    background-size: cover;
    background-attachment: fixed;
    background-image: url(/images/guide/chba-background.png);
    background-position: center;
    background-color: #f9fcfe;
    background-blend-mode: overlay;
}

a {
    color: var(--font-color-3b, inherit);
    text-decoration: none;
}

a:hover,
a:focus {
    color: var(--font-color-3c, blue);
    text-decoration: none;
}

.gui-logo {
    margin: auto 0;
}

.gui-logo-name {
    font-size: 40px;
    color: var(--logo-font-color, inherit);
    font-family: var(--big-font, sans-serif);
    font-weight: bold;
    text-shadow: 1px 1px 1px var(--font-color-3b);
    margin: 0;
}

body {
    font-family: "BarlowCondensed-Bold", "Open Sans", sans-serif;
    margin: 0px;
    padding: 0px;
    height: 100%;
    background-size: cover;
    background-attachment: fixed;
    background-image: url(/images/guide/chba-background.png);
    background-position: center;
    background-color: #8b9fa7;
    background-blend-mode: overlay;
}

a.ga4click {}

.top-bar {
    background-color: var(--font-color-3b, black);
}

.AssocHeader {
    background-color: var(--font-color-2, black);
    grid-template-columns: auto;
    grid-area: assocheader;
    background-size: cover;
    background-attachment: fixed;
    background-image: url(/images/guide/chba-background.png);
    background-position: center;
    background-color: #f1f1f1;
    background-blend-mode: overlay;
    justify-content: center;
}

img#AssocLogo {
    max-height: 150px;
}

.nav-area {
    background-color: var(--font-color-3b);
    margin-bottom: 10px;
    border-bottom: 1px solid var(--font-color-3b, black);
    border-top: 1px solid var(--font-color-3b, black);
}

.nav_banner {
    padding-bottom: 10px;
}

.nav-li {
    border: none;
}

.nav-menu a {
    color: var(--font-color-2, black);
}

.nav-menu .nav-li>a:hover,
.nav-menu .nav-li .parent-sub.active,
.nav-li.active,
.nav-li a:focus {
    color: var(--font-color-2b, inherit);
    background-color: var(--font-color-3b, inherit);
}

.nav-li.active>a {
    color: var(--font-color-2, initial);
}

.sub-li a {
    color: var(--font-color-3b, white);
    font-weight: normal;
    font-size: 14px;
}

.sub-li a:hover {
    top: 0px !important;
    color: var(--font-color-2, blue);
    background-color: var(--font-color-3b, lightgrey);
}

.sub-li.active,
.sub-li.active a {
    color: var(--font-color-3a, blue);
    background-color: var(--font-color-3b, lightgrey);
}

.nav-menu .showSubmenu {
    background-color: var(--font-color-2, grey);
    padding: 6px;
}

img.sponsor-logos.sponsor-logo1 {
    height: 40px;
}

/**BANNER**/
.banner-ad {
    background-color: transparent;
}

.banner-ad img {
    margin-top: 0;
}

.foot_banner .banner-ad img {
    margin: 1% auto;
}

.footer {
    margin: auto;
    background-color: transparent;
    padding-left: 4%;
}

.breadcrumb {
    padding: 0px 15px;
    font-size: 10px;
}

/**CATS**/
.cats-row {
    opacity: 1;
}

.cat-drop.multi-cats {
    color: var(--font-color-3b, white);
}

.cat-dropbox {
    background-color: var(--font-color-3a, white);
}

.cat-dropbox a {
    color: var(--font-color-2a);
    font-weight: bold;
}

.cat-dropbox:hover a,
.cat-dropbox a:hover,
.cat-dropbox:hover .cat-drop.multi-cats {
    color: var(--font-color-2, blue);
    text-decoration: none;
}

.cat-dropbox:hover,
.cat-dropbox:hover .cat-drop.multi-cats {
    background-color: var(--font-color-3b, white);
}

.cat-dropbox:hover a {
    background-color: unset;
}

.sub-cat {
    background-color: var(--pg-bkg-color, white);
    color: var(--font-color-4, black);
}

.sub-cat a {
    color: var(--font-color-3b, black);
}

h4.body_header.cat_header.listings_header {
    width: 100% !important;
    display: block;
    background-color: var(--font-color-2, black);
}

.scats a:hover {
    color: var(--font-color-3b, black);
}

/**FEATURED BAR**/
.featuredbtn.pull-right {
    background-color: var(--font-color-3b, initial);
}

.featuredbtn.pull-right:hover {
    background-color: var(--font-color-3C, blue);
    /* opacity: 0.75; */
}

.body_header,
.featured_title,
.scat-list .body_header {
    color: var(--font-color-2, white) !important;
    background-color: var(--font-color-3b, black) !important;
    padding: 4px 0;
    /* background-image: linear-gradient(45deg, black, transparent 80%); */
}

.featured_header,
.body_header.cat_header,
.spots_header a {
    color: var(--font-color-2, white) !important;
}

.featured_ads {
    grid-template-areas:
        "feat_header feat_header"
        "feats1 feats2"
        "browse_text browse_text";
}
.featuredbtn {
    padding: 3px 16px;
    margin-top: 15px;
    margin-bottom: 6px;
}

.spots>li a {
    color: var(--font-color-4, blue);
}

.spotlights {
    float: right;
    width: 137px;
}

.spots>li:nth-child(even) {
    /* background-color: #286aa3; */
    background-color: initial;
}

.spots>li:nth-child(odd) {
    /* background-color: #4c4d4f; */
    background-color: initial;
}

.spot-prod.case-item {
    background-color: var(--basic-listing-bgk, white);
}

.btn-primary {
    background-color: var(--font-color-1, black);
    border-color: var(--font-color-3a, black);
    color: var(--font-color-3b, white);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
    color: #ffffff;
    background-color: #327f33;
    border-color: #0a64ab;
}

/**LOGOS**/
.sponsor-logo img {
    width: 124px;
    height: auto;
}

.sponsor-logo img {
    max-width: 130px;
}

.listing-logos {
    flex: 0 1;
}

.well_footer {
    background-color: var(--font-color-4, black);
}

.footer_nav li a {
    color: var(--font-color-4, blue);
    font-family: "Open Sans", sans-serif;
}

.footer_nav li+li {
    background: url("../images/separator.jpg") no-repeat top left;
    padding-left: 10px;
}

.small {
    color: var(--basic-link, black) !important;
}

.text-muted {
    font-family: "Open Sans", sans-serif;
    margin-top: 26px;
    margin-bottom: 26px;
    font-size: 13px;
}

.listing-logos img.member-logo {
    height: 115px;
}

/**SEARCH**/
.imgsearch {
    width: 134px;
    margin-bottom: 6px;
}

.searchbtn {
    padding: 10px 21px;
    margin-top: 7px;
}

.searchtext {
    margin-left: 10px !important;
    font-size: 13px;
    font-family: "Open Sans", sans-serif;
}

.panel-heading {
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    margin-bottom: 6px;
}

.search-body>.panel-heading {
    background-color: var(--font-color-2, black);
    border: 1px solid var(--font-color-3a, black);
    color: var(--font-color-3b, white);
}

.scroll-btns,
.page-nav {
    color: var(--font-color-3a, black);
}

.page-numbers {
    background-color: var(--font-color-3b, blue);
}

.page-numbers li a,
.page-numbers li {
    color: var(--font-color-2, #fff);
}

.page-numbers li a:hover {
    color: var(--font-color-4, blue);
}

.scroll-btns:hover,
.page-nav:hover {
    color: var(--font-color-2, blue);
}

.searchmargin {
    margin-bottom: 14px;
}

/**LISTINGS**/
.listing-item {
    background-color: var(--basic-listing-bgk, transparent);
}

.listing-details {
    color: var(--basic-color, black);
}

.listing-item.priority {
    background-color: var(--priority-bkg, lightblue);
}

.listing-item.priority .listing-details {
    color: var(--priority-color, red);
}

.listing-details a,
.listing-details h4 a {
    color: var(--basic-link, blue);
}

.listing-item.priority .listing-details a {
    color: var(--priority-links, blue);
}

.listing-details a:hover {
    color: var(--font-color-3c, white);
}

.company-contact a {
    color: var(--font-color-3c white);
}

.company-contact a:hover {
    color: var(--font-color-3C, orange);
}

.listing-item.priority .listing-details a:hover {
    color: var(--font-color-3b, orange);
}

.desc_header {
    color: #ffffff;
    background-color: var(--font-color-3b, lightgrey);
    border-color: var(--font-color-3a, black);
    font-family: inherit;
    padding: 6px;
    border-bottom: 1px solid transparent;
}

.desc_boarder {
    border-color: var(--font-color-3a, white);
}

.company-desc {
    font-family: "Besley-Medium";
    border-radius: 4px;
    background: white;
}
.company-desc font {
    font-family: "Besley-Medium";
}

.listing_row.top_row {
    margin-bottom: 1em;
}

listing-item .member-logo img {
    max-height: 56px;
}

/**CONTACT US**/
.main-content.main-listings.pg-contactus {
    padding: 0 4.6em 2em 4.6em;
}

/**MISC**/
.glyphicon-chevron-down {
    font-size: 11px;
}

#toTop {
    padding: 3px 8px 5px;
    background: var(--font-color-3b, #000);
    color: #fff;
    position: fixed;
    bottom: 3px;
    right: 3px;
    display: none;
    border-radius: 4px;
}

#toTop:hover {
    cursor: pointer;
    background: var(--font-color-3a, black);
    color: #ffffff;
}

/***POPUP***/
/* The Modal (background) */
.homepopup {
    /* display: none; */
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 1;
    /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.6);
    /* Black w/ opacity */
}

/* Modal Content */
.pop-content {
    background-color: #fefefe;
    margin: auto;
    padding: 0px 16px 16px;
    border: 1px solid #888;
    width: fit-content;
    max-width: 1000px;
    height: 55%;
    min-height: fit-content;
    transform: translateY(-50%);
    top: 25%;
    position: relative;
    box-sizing: border-box;
}

.pop-content img {
    height: 80%;
    max-height: 445px;
    display: block;
    max-width: 100%;
    margin: 2em auto;
    box-sizing: border-box;
    border: 2px solid var(--font-color-1, black);
}

.pop-content h3 {
    text-align: center;
    display: block;
    position: relative;
    font-size: 22px;
}

/* The Close Button */
.pop-content .closehomepop {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

#contclose {
    margin: 6px auto 0;
    width: 100%;
    color: blue;
    bottom: 1em;
    position: absolute;
    text-align: center;
}

.pop-content .closehomepop:hover,
.pop-content .closehomepop:focus,
#contclose:hover,
#contclose:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.listing-item .member-logo img {
    max-height: 100px;
    width: auto;
    max-width: 130px;
    /* filter: grayscale(1) invert(1) contrast(2); */
}

/** Change "listings" and "companies" to "members **/
/* The Top Banner */
a.featured_header.features-btn-clicked.ga4click,
a.featured_header.features-btn-clicked.ga4click:hover {
    color: transparent !important;
    pointer-events: auto;
    user-select: none;
    text-shadow: none;
}

a.featured_header.features-btn-clicked.ga4click::before {
    content: "FEATURED MEMBERS";
    color: white;
    pointer-events: none;
    position: absolute;
}

/* The Categories/Spotlights Banner */
button.btn.btn-primary.pull-right.featuredbtn.style4.features-btn-clicked.ga4click {
    color: transparent;
    pointer-events: auto;
    user-select: none;
}

button.btn.btn-primary.pull-right.featuredbtn.style4.features-btn-clicked.ga4click::before {
    content: "VIEW ALL FEATURED MEMBERS";
    color: white;
    position: absolute;
}

/* The Featured ~Companies~ Banner */
.main-content.main-single.pg-featured h4.pg-ads-title {
    color: transparent;
    pointer-events: auto;
    user-select: none;
}

.main-content.main-single.pg-featured h4.pg-ads-title::before {
    content: "FEATURED MEMBERS";
    color: black;
    pointer-events: none;
    position: absolute;
}

/* Company Listings -> Members */
.pg-listings h4.body_header.cat_header.listings_header {
    pointer-events: auto;
    user-select: none;
}

/* Association request - hide addresses from free member listings */
.associate.member li.address {
    display: none;
}

/* =========================================================
   CHBA: Tile layout overrides (DEDUPED)
   - Tile polish (vars)
   - Hover lift (animated)
   - Collapsed tiles: bigger logo/title
   - Hover/focus: animated reveal of address/phone/web/email/descr
   - Spotlights above listings + horizontal row
   ========================================================= */

/* 1) Theme + sizing knobs (no fork of tiledListings.css) */
.tile-layout {
    --tile-gap: 18px;
    --tile-radius: 14px;

    --tile-border-color: rgba(15, 23, 42, 0.14);
    --tile-shadow: 0 2px 10px rgba(15, 23, 42, 0.10);
    --tile-shadow-hover: 0 14px 34px rgba(15, 23, 42, 0.18);

    --tile-priority-bg: #fff3d2;
    --tile-priority-border: #d6a73b;
    --tile-priority-shadow: 0 16px 38px rgba(15, 23, 42, 0.22);
}

/* Optional: give CHBA more horizontal breathing room */
.tile-layout div#pgCont {
    max-width: 1400px;
}

/* 2) Hover lift (animated) for main tiles + collapsed multi tiles */
.tile-layout .listings-list>.listing-item,
.tile-layout .multi-listing.collapsed {
    transition: box-shadow 0.30s ease, transform 0.30s ease;
    will-change: transform, box-shadow;
}

@media (hover:hover) and (pointer:fine) {

    .tile-layout .listings-list>.listing-item:hover,
    .tile-layout .multi-listing.collapsed:hover {
        transform: translateY(-3px);
        box-shadow: var(--tile-shadow-hover);
    }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {

    .tile-layout .listings-list>.listing-item,
    .tile-layout .multi-listing.collapsed {
        transition: none !important;
        transform: none !important;
    }
}

/* 3) Border consistency (some tiles otherwise use #ccc) */
.tile-layout .listings-list .listing-item,
.tile-layout .multi-listing.collapsed .multi-placeholder::before,
.tile-layout .multi-listing.collapsed .multi-placeholder::after {
    /*border-color: var(--tile-border-color) !important;*/
}

/* 4) “Atlanta-style” collapsed vs hover:
      - Default: bigger logo + title
      - Hover/focus: revert logo/title + animate details in
*/

/* Collapsed emphasis */
.tile-layout .listings-list>.listing-item .listing-details h3 a {
    font-size: 1.18em;
    line-height: 1.12;
    transition: font-size 240ms ease, transform 240ms ease;
}

.tile-layout .listings-list>.listing-item .listing-logo img {
    transform: scale(1.08);
    transform-origin: center;
    transition: transform 240ms ease;
}

/* Details: hidden at rest BUT animatable (no display:none anywhere) */
.tile-layout .listings-list .listing-details li.address,
.tile-layout .listings-list .listing-details li.phone,
.tile-layout .listings-list .listing-details li.website,
.tile-layout .listings-list .listing-details li.email,
.tile-layout .listings-list .listing-details li.descr {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(-2px);

    margin: 0 !important;
    padding: 0 !important;

    transition:
        max-height 260ms ease,
        opacity 160ms ease,
        transform 260ms ease,
        margin-top 260ms ease;
}

/* Reveal on hover (desktop pointer) + revert title/logo to “normal” */
@media (hover:hover) and (pointer:fine) {

    .tile-layout .listings-list>.listing-item:hover .listing-details li.address,
    .tile-layout .listings-list>.listing-item:hover .listing-details li.phone,
    .tile-layout .listings-list>.listing-item:hover .listing-details li.website,
    .tile-layout .listings-list>.listing-item:hover .listing-details li.email,
    .tile-layout .listings-list>.listing-item:hover .listing-details li.descr {
        max-height: 260px;
        /* bump if you want more description visible */
        opacity: 1;
        transform: translateY(0);
        margin-top: 6px !important;
    }

    .tile-layout .listings-list>.listing-item:hover .listing-details h3 a {
        font-size: 1.0em;
    }

    .tile-layout .listings-list>.listing-item:hover .listing-logo img {
        transform: scale(1.0);
    }
}

/* Keyboard parity */
.tile-layout .listings-list>.listing-item:focus-within .listing-details li.address,
.tile-layout .listings-list>.listing-item:focus-within .listing-details li.phone,
.tile-layout .listings-list>.listing-item:focus-within .listing-details li.website,
.tile-layout .listings-list>.listing-item:focus-within .listing-details li.email,
.tile-layout .listings-list>.listing-item:focus-within .listing-details li.descr {
    max-height: 260px;
    opacity: 1;
    transform: translateY(0);
    margin-top: 6px !important;
}

.tile-layout .listings-list>.listing-item:focus-within .listing-details h3 a {
    font-size: 1.0em;
}

.tile-layout .listings-list>.listing-item:focus-within .listing-logo img {
    transform: scale(1.0);
}

/* =========================================================
   CHBA: Move Spotlights ABOVE Listings + make spotlights horizontal
   Based on actual HTML: .scroll-body contains .listings + .spotscontainer
   ========================================================= */
/* Listings page ONLY: Spotlights above listings + horizontal row */
@media (min-width: 700px) {
    .page-content.listings-page .scroll-body {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas:
            "spots"
            "listings";
        gap: 16px;
        align-items: start;
    }

    .page-content.listings-page .scroll-body>.spotscontainer {
        grid-area: spots;
    }

    .page-content.listings-page .scroll-body>.listings {
        grid-area: listings;
    }

    .page-content.listings-page .spotscontainer #spots.spots {
        display: flex;
        flex-wrap: nowrap;
        gap: 12px;
        overflow-x: auto;
        padding: 6px 2px 10px;
        margin: 0;
        list-style: none;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        justify-content: center;
        /* your centering tweak */
    }

    .page-content.listings-page .spotscontainer #spots.spots>li.spot_list {
        flex: 0 0 240px;
        list-style: none;
        scroll-snap-align: start;
    }

    .page-content.listings-page .spotscontainer #spots.spots>li.spot_list img {
        width: 100%;
        height: auto;
        display: block;
    }
}

/* 1) FREE listings: less cramped (associate tiles) */
.tile-layout .listings-list>.listing-item.associate {
    padding: 14px 14px 12px;
    /* more breathing room */
    min-height: 170px;
    /* overrides the “too short” feel */
}

/* Associates: don’t overscale logo/title as much in collapsed mode */
.tile-layout .listings-list>.listing-item.associate .listing-details h3 a {
    font-size: 1.10em;
}

.tile-layout .listings-list>.listing-item.associate .listing-logo img {
    transform: scale(1.03);
}


/* 3) Center spotlights when they don’t overflow */
@media (min-width: 700px) {
    .listings-page .spotscontainer #spots.spots {
        justify-content: center;
    }

    /* When scrolling is needed, keep left-align for usability */
    @supports(selector(:has(*))) {
        .listings-page .spotscontainer #spots.spots:has(li:nth-child(5)) {
            justify-content: flex-start;
        }
    }
}

/* Listings page: 3-column tiles (force via grid so it can’t be ignored) */
@media (min-width: 1100px) {
    body.tile-layout.listings-page .listings-list {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--tile-gap);
        align-items: stretch;
    }

    body.tile-layout.listings-page .listings-list>.listing-item {
        max-width: none !important;
        width: auto !important;
        margin: 0 !important;
    }
}


@media (min-width: 1100px) {
    body.tile-layout .page-content.listings-page .listings-list {
        display: flex;
        flex-wrap: wrap;
        gap: var(--tile-gap);
    }

    body.tile-layout .page-content.listings-page .listings-list>.listing-item {
        flex: 1 1 0;
        /* your discovery */
        min-width: 320px;
        /* controls when it drops to 2 cols */
        max-width: none;
    }
}

/* Listings page: auto-fit columns WITHOUT last-row stretching */
@media (min-width: 700px) {
    body.tile-layout .page-content.listings-page .listings-list {
        display: flex;
        flex-wrap: wrap;
        gap: var(--tile-gap);
        align-items: stretch;
    }

    /* Default: 2-up behavior */
    body.tile-layout .page-content.listings-page .listings-list>.listing-item {
        flex: 1 1 0;
        max-width: calc(50% - (var(--tile-gap) / 2));
    }
}

/* When there’s room for 3-up, cap at 1/3 */
@media (min-width: 1100px) {
    body.tile-layout .page-content.listings-page .listings-list>.listing-item {
        max-width: calc(33.333% - (var(--tile-gap) * 2 / 3));
    }
}

/* Listings page: associates should NOT be tall (override aspect-ratio rules in tiledListings.css) */
@media (min-width: 700px) {
    body.tile-layout .page-content.listings-page .listings-list>.listing-item.associate:not(.Basic):not(.priority) {
        aspect-ratio: auto !important;
        /* kills the 2/3 !important */
        height: auto !important;
        min-height: 120px !important;
        max-height: 170px;
        /* safety clamp; adjust 160–200 */
        padding: 12px 14px;
    }
}

/*Spacers: Have spacers match associate listings in terms of dimensions so as to not abnormally strech other listings*/
@media (min-width: 700px) {
    body.tile-layout .page-content.listings-page .listings-list>.listing-item.spacer:not(.Basic):not(.priority) {
        aspect-ratio: auto !important;
        /* kills the 2/3 !important */
        height: auto !important;
        min-height: 120px !important;
        max-height: 170px;
        /* safety clamp; adjust 160–200 */
        padding: 12px 14px;
    }
}

/* Free listings: keep compact height (don’t balloon) */
body.tile-layout .page-content.listings-page .listings-list>.listing-item.associate {
    min-height: 120px;
    /* was 170; this is the compact card */
    padding: 12px 14px;
}

/* Ensure the “hidden details” don’t reserve space on associates */
body.tile-layout .page-content.listings-page .listings-list>.listing-item.associate .listing-details li.address,
body.tile-layout .page-content.listings-page .listings-list>.listing-item.associate .listing-details li.phone,
body.tile-layout .page-content.listings-page .listings-list>.listing-item.associate .listing-details li.website,
body.tile-layout .page-content.listings-page .listings-list>.listing-item.associate .listing-details li.email,
body.tile-layout .page-content.listings-page .listings-list>.listing-item.associate .listing-details li.descr {
    max-height: 0;
    margin: 0 !important;
    padding: 0 !important;
}

body.tile-layout .page-content.listings-page .listings-list>.listing-item.associate .listing-logo img {
    transform: none;
}

body.tile-layout .page-content.listings-page .listings-list>.listing-item.associate .listing-details h3 a {
    font-size: 1.05em;
}

/* Robust hover: if any interactive child is hovered, treat the tile as “hovered” */
@media (hover:hover) and (pointer:fine){
    body.tile-layout .page-content.listings-page .listings-list > .listing-item:has(:hover) .listing-details li.address,
    body.tile-layout .page-content.listings-page .listings-list > .listing-item:has(:hover) .listing-details li.phone,
    body.tile-layout .page-content.listings-page .listings-list > .listing-item:has(:hover) .listing-details li.website,
    body.tile-layout .page-content.listings-page .listings-list > .listing-item:has(:hover) .listing-details li.email,
    body.tile-layout .page-content.listings-page .listings-list > .listing-item:has(:hover) .listing-details li.descr{
        max-height: 260px;
        opacity: 1;
        transform: translateY(0);
        margin-top: 6px !important;
    }

    body.tile-layout .page-content.listings-page .listings-list > .listing-item:has(:hover) .listing-details h3 a{
        font-size: 1.0em;
    }
    body.tile-layout .page-content.listings-page .listings-list > .listing-item:has(:hover) .listing-logo img{
        transform: scale(1.0);
    }
}


/* Associates: compact at rest but NEVER clip hover reveal */
@media (min-width: 700px) {
    body.tile-layout .page-content.listings-page .listings-list>.listing-item.associate:not(.Basic):not(.priority) {
        aspect-ratio: auto !important;
        min-height: 120px !important;
        height: auto !important;
        max-height: none !important;
        /* critical: don’t clamp */
        overflow: visible !important;
        /* critical: allow reveal */
    }
}

/* Adjusts Search Page to mirror Listings Page */
@media (min-width: 700px) {
    .tile-layout .listings-list .result_block.listing-item.associate:not(.Basic):not(.priority) {
        min-height: 132px !important;
    }
}

@media (min-width: 700px) {
    .tile-layout .page-content.sm-rt-col.search-page .listing-details .view-more {
        align-content: end;
    }
}

@media (min-width: 700px) {
    .tile-layout .page-content.sm-rt-col.search-page .member-logo img {
        height: 100px;
    }
}

/* Base (hidden state) */
.tile-layout .page-content.sm-rt-col.search-page 
.listings-list .listing-details 
:is(.address, .phone, .website, .view-more, .descr-text) {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(-2px);
    margin: 0 !important;
    padding: 0 !important;
    font-size: 13px;
    transition: max-height 260ms ease, opacity 160ms ease, transform 260ms ease, margin-top 260ms ease;
}


/* Hover (revealed state) */
@media (hover: hover) and (pointer: fine) {
    .tile-layout .page-content.sm-rt-col.search-page 
    .listings-list > .result_block.listing-item:hover 
    .listing-details 
    :is(.address, .phone, .website, .view-more, .descr-text) {
        max-height: 260px;
        opacity: 1;
        transform: translateY(0);
        margin-top: 6px !important;
    }
}

.associate.member .address {
    display: none !important;
}

.tile-layout .listings-list .result_block .descr-text {
    display: block;
}

@media (min-width: 700px) {
    .tile-layout .page-content.sm-rt-col.search-page .listings-list .result_block.listing-item:not(:hover) {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
    }
}

.tile-layout .search-listings .listing-details .company-name {
    margin: 0px 0 -10px !important;
}

/* Soften layout reflow: animate the card itself when it grows */
@media (hover:hover) and (pointer:fine) {
    body.tile-layout .page-content.listings-page .listings-list>.listing-item.associate {
        transition: box-shadow 0.30s ease, transform 0.30s ease, max-height 0.30s ease;
    }
}

/*Fixes unaligned first spotlight due to spotlights now being horizontal*/
.spot_list:first-of-type {
    padding-top: 4px;
}

/*Allows expanded multi-listings to be above the grey overlay*/
@media (min-width: 700px) {
    .tile-layout .multi-listing.expanded {
        z-index: 5001;
    }
}