/* ── HousifyHub – Homepage Styles ────────────────────────────────────────────
   Scoped under .hk-homepage to avoid collisions with theme / other plugins.
   Mobile-first: 320px base → 600px → 768px → 960px → 1200px
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Hide Astra page title on the front page ──────────────────────────────── */
.home .entry-title,
.home h1.page-title,
.home .page-header,
.home .ast-page-title-wrap,
.home .ast-page-title-bar,
.home .ast-blog-single-element.ast-page-title {
    display: none !important;
}

/* ── Hide Astra theme header on the front page ────────────────────────────── */
.home .site-header,
.home #masthead,
.home .ast-masthead-custom-spacing,
.home header.site-header {
    display: none !important;
}

/* ── Break Astra content-width constraints ────────────────────────────────── */
.home #primary,
.home .content-area,
.home .site-main,
.home #main,
.home #content,
.home .site-content,
.home .ast-container,
.home .ast-container-wrap,
.home .ast-article-single,
.home .ast-row,
.home article.page,
.home .entry-content,
.home .page-content {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Guarantee the plugin wrapper and hero itself are never constrained */
.hk-homepage,
.hk-hero {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ── Global wrapper ───────────────────────────────────────────────────────── */
.hk-homepage {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    font-family: var(--hk-font, 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif);
}
.hk-homepage * { box-sizing: border-box; }


/* ═══════════════════════════════════════════════════════════════════════════
   1. HERO
   ═══════════════════════════════════════════════════════════════════════════ */

.hk-hero {
    position: relative;
    width: 100%;
    min-height: 520px;
    padding-top: 64px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* Left-aligned text; vertically positioned via padding-top on desktop */
.hk-hero-content {
    width: 100%;
    max-width: 700px;
    padding: 0 48px;
    text-align: left;
}

.hk-hero-heading {
    font-size: clamp(28px, 5.5vw, 54px);
    font-weight: 800;
    color: #fff;
    margin: 0 0 14px;
    line-height: 1.12;
    letter-spacing: -.5px;
}

/* "Kenya" accent — light green for contrast on dark photo */
.hk-hero-kenya { color: #86efac; }

.hk-hero-subtitle {
    font-size: clamp(14px, 2vw, 18px);
    color: rgba(255,255,255,.80);
    margin: 0 0 40px;
    line-height: 1.55;
}

/* ── Search bar ───────────────────────────────────────────────────────────── */
.hk-hero-search-wrap {
    position: relative; /* anchor for .hk-autocomplete-list below */
    max-width: 620px;
}

.hk-hero-search-form {
    display: flex;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,.30);
    overflow: hidden;
    outline: 3px solid rgba(245,166,35,.28);
}

.hk-hero-search-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    padding: 16px 18px;
    font-size: 15px;
    font-family: inherit;
    color: #1a2e1a;
    background: transparent;
}
.hk-hero-search-input::placeholder { color: #9ca3af; }

.hk-hero-search-btn {
    background: #2d6a4f;
    color: #fff;
    border: none;
    padding: 16px 22px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    font-family: inherit;
    transition: background .2s;
}
.hk-hero-search-btn:hover { background: #1a5c38; }

/* ── Search autocomplete dropdown ─────────────────────────────────────────── */
.hk-autocomplete-list {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
    max-height: 340px;
    overflow-y: auto;
    z-index: 30;
    font-family: inherit;
}
.hk-autocomplete-list[hidden] { display: none; }

.hk-autocomplete-item {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.3;
    color: #1a2e1a;
    cursor: pointer;
}
.hk-autocomplete-item:hover,
.hk-autocomplete-item.is-active {
    background: #f0fdf4;
}
.hk-autocomplete-item mark {
    background: none;
    color: inherit;
    font-weight: 800;
    padding: 0;
}
.hk-autocomplete-item-city {
    color: #6b7280;
    font-weight: 400;
}

/* ── Popular searches ─────────────────────────────────────────────────────── */
.hk-popular-searches {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin-top: 14px;
    font-size: 13px;
}
.hk-popular-label {
    color: rgba(255,255,255,.70);
    white-space: nowrap;
    margin-right: 2px;
}
.hk-popular-chip {
    color: rgba(255,255,255,.90);
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 50px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    transition: background .18s, border-color .18s;
    white-space: nowrap;
}
.hk-popular-chip:hover {
    background: rgba(255,255,255,.26);
    border-color: rgba(255,255,255,.55);
    color: #fff;
    text-decoration: none;
}
.hk-popular-sep {
    color: rgba(255,255,255,.35);
    font-size: 12px;
    line-height: 1;
}

/* ── CTA buttons row ──────────────────────────────────────────────────────── */
.hk-hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}

.hk-hero-cta-map {
    display: inline-block;
    padding: 12px 26px;
    border: 2px solid rgba(255,255,255,.65);
    border-radius: 8px;
    background: transparent;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s, border-color .2s;
    white-space: nowrap;
}
.hk-hero-cta-map:hover {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.90);
    color: #fff;
    text-decoration: none;
}

.hk-hero-cta-list {
    display: inline-block;
    padding: 12px 26px;
    border-radius: 8px;
    background: #f5a623;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 2px 12px rgba(245,166,35,.40);
    transition: background .2s, transform .15s;
    white-space: nowrap;
}
.hk-hero-cta-list:hover {
    background: #e09112;
    color: #fff;
    transform: translateY(-1px);
    text-decoration: none;
}


/* ═══════════════════════════════════════════════════════════════════════════
   2. STATS
   ═══════════════════════════════════════════════════════════════════════════ */

.hk-stats-section {
    background: #fff;
    border-bottom: 1px solid #e8ede8;
}

.hk-stats-inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 44px 24px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    text-align: center;
}

.hk-stat-card { padding: 8px 16px; }

.hk-stat-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
}
.hk-stat-icon svg {
    width: 38px;
    height: 38px;
    stroke: #2d6a4f;
}

.hk-stat-num {
    font-size: clamp(26px, 5vw, 36px);
    font-weight: 800;
    color: #1a2e1a;
    line-height: 1;
}

.hk-stat-title {
    font-size: 15px;
    font-weight: 600;
    color: #1a2e1a;
    margin-top: 6px;
}

.hk-stat-sub {
    font-size: 13px;
    color: #6b7280;
    margin-top: 3px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   3. FEATURED PROPERTIES
   ═══════════════════════════════════════════════════════════════════════════ */

.hk-featured-section {
    background: #f8faf8;
    padding: 52px 0;
}

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

.hk-featured-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

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

.hk-featured-view-all {
    color: #2d6a4f;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}
.hk-featured-view-all:hover {
    text-decoration: underline;
    color: #1a5c38;
}

/* Horizontal scroll row */
.hk-featured-row {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding-bottom: 10px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.hk-featured-row::-webkit-scrollbar { display: none; }

.hk-featured-empty {
    padding: 32px 0;
    color: #6b7280;
    font-size: 15px;
}
.hk-featured-empty a { color: #2d6a4f; }

/* ── Property card ────────────────────────────────────────────────────────── */
.hk-prop-card {
    flex: 0 0 260px;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
    text-decoration: none;
    color: inherit;
    transition: transform .2s, box-shadow .2s;
}
.hk-prop-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,.13);
    color: inherit;
    text-decoration: none;
}

.hk-prop-photo {
    position: relative;
    height: 178px;
    background: #f0f4f0;
    overflow: hidden;
    flex-shrink: 0;
}
.hk-prop-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s;
}
.hk-prop-card:hover .hk-prop-photo img { transform: scale(1.04); }

.hk-prop-photo-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hk-prop-photo-placeholder svg { width: 52px; height: 52px; }

.hk-prop-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .5px;
    padding: 3px 8px;
    border-radius: 4px;
    text-transform: uppercase;
}
.hk-badge-rent   { background: #2d6a4f; color: #fff; }
.hk-badge-sale   { background: #f5a623; color: #fff; }
.hk-badge-shortstay { background: #FF5A5F; color: #fff; }

.hk-prop-fav {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255,255,255,.90);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background .15s;
}
.hk-prop-fav:hover { background: #fff; }
.hk-prop-fav svg { width: 14px; height: 14px; stroke: #6b7280; }

.hk-prop-body {
    padding: 14px 16px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.hk-prop-price {
    font-size: 16px;
    font-weight: 700;
    color: #1a2e1a;
}

.hk-prop-title {
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hk-prop-location {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    color: #6b7280;
    margin-top: 2px;
}
.hk-prop-location svg { width: 11px; height: 11px; flex-shrink: 0; }

.hk-prop-features {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid #f0f4f0;
}
.hk-prop-feat {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    color: #4b5563;
}
.hk-prop-feat svg { width: 11px; height: 11px; flex-shrink: 0; }


/* ═══════════════════════════════════════════════════════════════════════════
   4. MAP + CTA
   ═══════════════════════════════════════════════════════════════════════════ */

.hk-map-cta-section {
    background: #f8faf8;
    padding: 52px 0;
    border-top: 1px solid #e8ede8;
}

.hk-map-cta-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 28px;
    align-items: start;
}

/* Root cause of the "map stuck in the narrow 280px column" bug: a stray
   wpautop-injected <p></p> (see the NOTE above the map section in
   homepage.php) landed as .hk-map-cta-inner's first grid child, claiming
   the wide 1fr track ahead of .hk-map-col and pushing it — and .hk-cta-col
   after it — one column over / onto a second row. The template no longer
   leaves the blank line that produced it, but this stays as a defensive
   backstop: any empty <p> that still ends up here, from any source, is
   pulled out of grid flow entirely rather than occupying a track. */
#hk-map-section .hk-map-cta-inner > p:empty {
    display: none;
}

.hk-map-col-heading {
    font-size: clamp(18px, 2.5vw, 22px);
    font-weight: 700;
    color: #1a2e1a;
    margin: 0 0 16px;
}

/* Map sizing inside the new layout — explicit height/width (not left to the
   grid to figure out) so the container can never collapse or shrink if
   Leaflet ends up measuring it before the grid track width has settled
   (see initHomepageMapSizeFix() in map.js, which then re-measures once it
   has). .hk-map-col gets min-width:0 because CSS grid items default to
   min-width:auto, which lets a track's content (not just its 1fr share)
   dictate the column's minimum size — an easy way for a grid column to end
   up sized wrong on first paint. */
.hk-map-col {
    min-width: 0;
}

/* Secondary entry point to the full /map/ page — outline style (not the
   orange .hk-list-cta-btn fill) since this sits on the light #f8faf8
   section background, not the dark hero. */
.hk-map-teaser-fullscreen-btn {
    display: inline-block;
    margin-top: 14px;
    padding: 10px 22px;
    border: 2px solid #1a5c38;
    border-radius: 8px;
    background: transparent;
    color: #1a5c38;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: background .2s, color .2s;
}
.hk-map-teaser-fullscreen-btn:hover {
    background: #1a5c38;
    color: #fff;
    text-decoration: none;
}

/* ── Homepage teaser map: force plain block flow through the whole #hk-app
   chain, scoped strictly to this instance ──────────────────────────────────
   The homepage reuses the SAME #hk-app map app as the full /map/ page (just
   with an extra .hk-app-minimal class), including its .hk-results-bar /
   .hk-layout / #hk-map structure. On /map/, .hk-layout also carries a
   second class, .hk-maplayout (map.php), which is where that page's own
   sidebar+map flex/grid layout lives, defined in map.css — a stylesheet
   that is enqueued ONLY on the /map/ page (hk_map_shortcode(), map.php),
   never on the homepage. So nothing below can ever reach /map/ (it lacks
   .hk-app-minimal entirely, and map.css's rules always win there anyway on
   specificity), but every rule is still scoped to #hk-map-section
   .hk-app-minimal as belt-and-suspenders, exactly as on /map/'s own side
   nothing here would even match. Everything forced to plain block flow
   (not flex/grid) with min-width:0 down the whole chain, so the column
   can't be shrunk to less than its 1fr grid share by content sizing. */
#hk-map-section .hk-app-minimal,
#hk-map-section .hk-app-minimal .hk-layout {
    display: block;
    width: 100%;
    min-width: 0;
}

/* Fixed teaser height + full width, !important so it always wins over the
   inline style Leaflet/map.js may have written on this element (see
   setMobileMapHeight() in map.js, which now skips the .hk-app-minimal
   instance entirely — see comment there — but this stays as a hard
   backstop regardless of what any JS ever does to this element). */
.hk-map-cta-inner .hk-app #hk-map {
    display: block !important;
    width: 100% !important;
    height: 350px !important;
    min-height: 350px !important;
}

/* ── Right column ─────────────────────────────────────────────────────────── */
.hk-cta-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: sticky;
    top: 72px; /* below fixed navbar */
}

/* Status legend box */
.hk-status-legend {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.hk-legend-heading {
    font-size: 14px;
    font-weight: 700;
    color: #1a2e1a;
    margin: 0 0 14px;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.hk-legend-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #374151;
    margin-bottom: 10px;
}
.hk-legend-row:last-child { margin-bottom: 0; }

/* List-your-property CTA box */
.hk-list-cta-box {
    background: #1a5c38;
    border-radius: 12px;
    padding: 24px;
    color: #fff;
}
.hk-list-cta-heading {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 8px;
}
.hk-list-cta-sub {
    font-size: 14px;
    color: rgba(255,255,255,.80);
    margin: 0 0 18px;
    line-height: 1.55;
}
.hk-list-cta-btn {
    display: inline-block;
    background: #f5a623;
    color: #fff;
    padding: 10px 22px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: background .2s;
}
.hk-list-cta-btn:hover {
    background: #e09112;
    color: #fff;
    text-decoration: none;
}


/* ═══════════════════════════════════════════════════════════════════════════
   5. WHY CHOOSE HOUSIFYHUB
   ═══════════════════════════════════════════════════════════════════════════ */

.hk-why-section {
    background: #eef2ee;
    padding: 60px 0;
}

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

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

.hk-why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.hk-why-card {
    background: #fff;
    border-radius: 14px;
    padding: 28px 20px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
    transition: transform .2s, box-shadow .2s;
}
.hk-why-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,.09);
}

.hk-why-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 14px;
}
.hk-why-icon svg {
    width: 38px;
    height: 38px;
    stroke: #2d6a4f;
}

.hk-why-title {
    font-size: 15px;
    font-weight: 700;
    color: #1a2e1a;
    margin: 0 0 6px;
}

.hk-why-desc {
    font-size: 13px;
    color: #6b7280;
    margin: 0;
    line-height: 1.55;
}


/* ═══════════════════════════════════════════════════════════════════════════
   6. CONTACT CTA
   Light green tinted band — intentionally subtle so it never competes with
   the solid dark-green "List Your Property" block above.
   ═══════════════════════════════════════════════════════════════════════════ */

.hk-contact-cta-section {
    background: #eafaf1;
    padding: 56px 0;
}

.hk-contact-cta-inner {
    max-width: 640px;
    margin: 0 auto;
    padding: 0 24px;
    text-align: center;
}

.hk-contact-cta-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}
.hk-contact-cta-icon svg {
    width: 40px;
    height: 40px;
    stroke: #1a5c38;
}

.hk-contact-cta-heading {
    font-size: clamp(20px, 3vw, 26px);
    font-weight: 700;
    color: #1a2e1a;
    margin: 0 0 10px;
}

.hk-contact-cta-sub {
    font-size: 14px;
    color: #4b5f4b;
    line-height: 1.6;
    margin: 0 0 24px;
}

.hk-contact-cta-btn {
    display: inline-block;
    background: #1a5c38;
    color: #fff;
    padding: 12px 30px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: background .2s;
}
.hk-contact-cta-btn:hover {
    background: #124a2c;
    color: #fff;
    text-decoration: none;
}


/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Mobile-only tab colour override (UA stylesheet resistant) ────────────── */
@media (max-width: 768px) {
    /* Extra breathing room below hero content */
    .hk-hero { padding-bottom: 40px; }

    /* Map + CTA → single column on tablet/mobile */
    .hk-map-cta-inner {
        grid-template-columns: 1fr;
    }
    .hk-cta-col {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .hk-status-legend,
    .hk-list-cta-box { flex: 1 1 260px; }

    /* Center "View Full Map" under the teaser map on mobile */
    .hk-map-teaser-fullscreen-btn {
        display: block;
        width: fit-content;
        margin: 14px auto 0;
    }

    /* Why grid → 2 columns */
    .hk-why-grid { grid-template-columns: repeat(2, 1fr); }

    /* Contact CTA → comfortable padding, text stays centered */
    .hk-contact-cta-section { padding: 40px 0; }
    .hk-contact-cta-inner   { padding: 0 20px; }

    /* Popular search chips → single-line horizontal scroll, no wrap */
    .hk-popular-searches {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2px;
    }
    .hk-popular-searches::-webkit-scrollbar { display: none; }
    .hk-popular-chip  { font-size: 11px; padding: 3px 9px; flex-shrink: 0; }
    .hk-popular-label { flex-shrink: 0; font-size: 12px; }
    .hk-popular-sep   { flex-shrink: 0; }

    /* Stats → keep 3 columns on mobile, reduce sizes to fit */
    .hk-stats-inner { padding: 28px 14px; gap: 10px; }
    .hk-stat-icon svg { width: 28px; height: 28px; }
    .hk-stat-num      { font-size: 22px; }
    .hk-stat-title    { font-size: 13px; }
    .hk-stat-sub      { font-size: 11px; }
}

/* ── Small mobile (< 480px) ─────────────────────────────────────────────── */
@media (max-width: 479px) {
    .hk-hero-content { padding: 0 20px; }

    /* Stack search bar */
    .hk-hero-search-form    { flex-direction: column; border-radius: 10px; }
    .hk-hero-search-input   { padding: 15px 16px; }
    .hk-hero-search-btn     { width: 100%; justify-content: center; padding: 14px 16px; }

    /* CTAs stack */
    .hk-hero-ctas           { flex-direction: column; }
    .hk-hero-cta-map,
    .hk-hero-cta-list       { text-align: center; }

    /* Stats → still 3 columns, tighter spacing on tiny screens */
    .hk-stats-inner { grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 22px 10px; }

    /* Map height */
    .hk-map-cta-inner .hk-app #hk-map { height: 300px !important; min-height: 300px; }
}

/* ── Tablet (480px–767px) ─────────────────────────────────────────────────── */
@media (min-width: 480px) and (max-width: 767px) {
    .hk-map-cta-inner .hk-app #hk-map { height: 320px !important; min-height: 320px; }
}

/* ── Desktop (≥ 768px): cards fill 4-up ──────────────────────────────────── */
@media (min-width: 768px) {
    /* On desktop the card row has 4 visible; flex-basis is 25% minus gaps */
    .hk-prop-card { flex: 0 0 calc(25% - 15px); }
}

/* ── Desktop (≥ 769px): explicit hero height + content padding ──────────── */
/* 769px (not 768px) ensures this block never overlaps with max-width: 768px  */
@media (min-width: 769px) {
    .hk-hero             { height: 580px; min-height: unset; }
    .hk-hero-content     { padding: 48px 64px; margin: 0 auto; text-align: center; }
    .hk-hero-search-form { justify-content: center; }
    .hk-popular-searches { justify-content: center; }
    .hk-hero-ctas        { justify-content: center; }
}

/* ── Large desktop (≥ 1024px) ────────────────────────────────────────────── */
@media (min-width: 1024px) {
    .hk-featured-inner,
    .hk-map-cta-inner,
    .hk-why-inner { padding: 0 40px; }
}