/* ── HousifyHub — [hk_browse_by_city] "Browse by City" homepage section ─────
   Three columns (For Rent / For Sale / Short Stays) of city chips linking to
   the SEO city pages. Same green/orange brand tokens as style.css /
   seo-pages.css, plus coral (#FF5A5F) for the Short Stays column to match its
   badge/pill color elsewhere. Mobile-first: single column below 720px, two
   columns between 721px-980px (Short Stays wraps to its own row), three
   columns above that.

   Every rule below is nested under the `.hk-bbc` wrapper (descendant
   selector), NOT written as a bare top-level class — same defensive
   scoping convention as seo-pages.css's `.hk-seo .thing {}` rules. A bare
   `.hk-bbc-cols { display:grid; grid-template-columns:1fr 1fr; }` would
   apply to ANY element carrying that class anywhere on the page (e.g. if
   it ever ends up added, by accident or via an Elementor "CSS classes"
   field, to an unrelated container such as the homepage map section's
   `.hk-map-cta-inner` grid) — nesting under `.hk-bbc` means the rule can
   only ever fire on elements actually inside this shortcode's own output. ── */

.hk-bbc {
    background: #fff;
    padding: 60px 0;
}
.hk-bbc * { box-sizing: border-box; }

.hk-bbc .hk-bbc-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
}

.hk-bbc .hk-bbc-heading {
    font-size: clamp(20px, 3vw, 26px);
    font-weight: 700;
    color: #1a2e1a;
    margin: 0 0 8px;
    text-align: center;
}

.hk-bbc .hk-bbc-sub {
    font-size: 14px;
    color: #6b7c6b;
    margin: 0 0 36px;
    text-align: center;
}

.hk-bbc .hk-bbc-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.hk-bbc .hk-bbc-col {
    background: #f8faf8;
    border: 1px solid #e2e8e2;
    border-radius: 14px;
    padding: 28px 26px;
}

.hk-bbc .hk-bbc-col-title {
    font-size: 17px;
    font-weight: 700;
    color: #1a2e1a;
    margin: 0 0 18px;
    padding-left: 14px;
    position: relative;
}
.hk-bbc .hk-bbc-col-title::before {
    content: "";
    position: absolute;
    left: 0; top: 3px; bottom: 3px;
    width: 4px;
    border-radius: 4px;
    background: #f59e0b;
}
/* Short Stays column — coral accent bar + chip count, matching its badge/pill
   color elsewhere on the site. Rent/Sale columns are untouched. */
.hk-bbc .hk-bbc-col--shortstay .hk-bbc-col-title::before { background: #FF5A5F; }
.hk-bbc .hk-bbc-col--shortstay .hk-bbc-chip b { color: #FF5A5F; }

.hk-bbc .hk-bbc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.hk-bbc .hk-bbc-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid #e2e8e2;
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 13.5px;
    font-weight: 500;
    color: #1a2e1a;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.hk-bbc .hk-bbc-chip:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,.09);
    border-color: #1e7a34;
}
.hk-bbc .hk-bbc-chip b {
    color: #f59e0b;
    font-weight: 700;
}

.hk-bbc .hk-bbc-all {
    display: inline-block;
    font-weight: 700;
    font-size: 14px;
    color: #1e7a34;
    text-decoration: none;
}
.hk-bbc .hk-bbc-all:hover {
    text-decoration: underline;
    color: #155c27;
}

@media (max-width: 980px) {
    .hk-bbc .hk-bbc-cols { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
    .hk-bbc { padding: 44px 0; }
    .hk-bbc .hk-bbc-cols { grid-template-columns: 1fr; }
}