/*
 * iBangkok v4 — homepage layout & components
 * Blue #0056e4 on white · Afacad Flux headings · Noto Sans body
 * Responsive from 320px up.
 */

/* In-app browsers (LINE especially) inflate text by the app's font-size
   setting, which can push a row past the viewport and let the whole page
   pan sideways. Pin text sizing and clip any sideways overflow at the
   root — `clip` (unlike `hidden`) creates no scroll container, so the
   sticky navbar keeps working. */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overflow-x: hidden;
    overflow-x: clip;
}

/* ---------- Navbar (two tiers; only the top tier is sticky) ---------- */

.ibk-topbar {
    background: linear-gradient(180deg, #010a24 0%, var(--primary-deep) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    transition: box-shadow .2s ease;
}

.ibk-topbar.is-scrolled {
    box-shadow: 0 6px 22px rgba(1, 10, 36, .45);
}

.ibk-brand-stack {
    display: inline-flex;
    flex-direction: column;
    line-height: 1;
    text-decoration: none;
}

/* doubled class beats the base .ibk-brand rules that come later in this file */
.ibk-brand.ibk-brand--dark {
    color: var(--accent-yellow);
}

.ibk-brand.ibk-brand--dark span {
    color: #fff;
}

.ibk-brand-tagline {
    color: #8fa3cc;
    font-size: .68rem;
    font-style: italic;
    margin-top: .2rem;
    letter-spacing: .02em;
}

/* doubled class beats the light-bg .ibk-nav rules that come later in this file */
.ibk-nav.ibk-nav--dark a {
    color: #dce6f8;
}

.ibk-nav.ibk-nav--dark a:hover {
    background: rgba(255, 255, 255, .1);
    color: var(--accent-yellow);
}

.ibk-nav.ibk-nav--dark a.active {
    background: #fff;
    color: var(--primary-deep);
    font-weight: 600;
}

.ibk-currency--dark {
    background: transparent;
    border-color: rgba(255, 255, 255, .3);
    color: #fff;
}

.ibk-currency--dark:hover {
    background: rgba(255, 255, 255, .1);
    border-color: var(--accent-yellow);
    color: var(--accent-yellow);
}

.ibk-line-cta {
    background: var(--accent-yellow);
    border-color: var(--accent-yellow);
    color: var(--primary-deep);
    font-weight: 700;
    font-size: .85rem;
}

.ibk-line-cta:hover {
    background: #f0c800;
    border-color: #f0c800;
    color: var(--primary-deep);
}

.ibk-burger--dark {
    background: transparent;
    border-color: rgba(255, 255, 255, .3);
    color: #fff;
}

/* second tier */

.ibk-subbar {
    background: #fff;
    border-bottom: 1px solid var(--primary-border);
}

.ibk-subnav a {
    display: inline-flex;
    align-items: center;
    padding: .22rem .85rem;
    border-radius: 999px;
    color: var(--ink);
    text-decoration: none;
    font-weight: 600;
    font-size: .92rem;
}

.ibk-subnav a i {
    color: var(--primary);
    margin-right: .45rem;
    font-size: 1.02rem;
}

.ibk-subnav a:hover {
    background: var(--primary-soft);
    color: var(--primary);
}

.ibk-socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: var(--ink-muted);
    font-size: 1.05rem;
    text-decoration: none;
}

.ibk-socials a:hover {
    background: var(--primary-soft);
    color: var(--primary);
}

.ibk-brand {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
    text-decoration: none;
    letter-spacing: -.02em;
    line-height: 1;
}

.ibk-brand span {
    color: var(--ink);
}

/* footer logo — same scheme as the dark navbar: yellow i/Condo, white Bangkok */
.ibk-brand--footer {
    color: var(--accent-yellow);
}

.ibk-brand--footer span {
    color: #fff;
}

.ibk-nav a {
    display: inline-block;
    padding: .45rem .8rem;
    border-radius: 999px;
    color: var(--ink);
    text-decoration: none;
    font-weight: 500;
    font-size: .95rem;
    transition: background .15s ease, color .15s ease;
}

.ibk-nav a:hover {
    background: var(--primary-soft);
    color: var(--primary);
}

.ibk-nav a.active {
    background: var(--primary);
    color: #fff;
}

.ibk-dropdown {
    border: 1px solid var(--primary-border);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(13, 27, 52, .12);
    padding: .4rem;
    margin-top: .35rem;
}

.ibk-dropdown .dropdown-item {
    border-radius: 8px;
    padding: .5rem .8rem;
    font-size: .92rem;
    font-weight: 500;
    color: var(--ink);
}

.ibk-dropdown .dropdown-item:hover {
    background: var(--primary-soft);
    color: var(--primary);
}

.ibk-dropdown .dropdown-item i {
    color: var(--primary);
}

/* 6 menu items — tighten nav between lg and xl so everything fits */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .ibk-nav a {
        padding: .4rem .5rem;
        font-size: .85rem;
    }

    .ibk-brand {
        font-size: 1.3rem;
    }
}

.ibk-currency {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border: 1.5px solid var(--primary-border);
    background: #fff;
    color: var(--primary);
    font-weight: 700;
    font-size: .8rem;
    border-radius: 999px;
    padding: .35rem .75rem;
    transition: border-color .15s ease, background .15s ease;
}

.ibk-currency:hover {
    border-color: var(--primary);
    background: var(--primary-soft);
}

.ibk-line-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border-radius: 999px;
    padding: .4rem .8rem;
    white-space: nowrap;
}

.ibk-line-icon {
    width: 1.05rem;
    height: 1.05rem;
    flex: 0 0 auto;
}

.ibk-burger {
    border: 1.5px solid var(--primary-border);
    background: #fff;
    color: var(--ink);
    border-radius: 10px;
    width: 40px;
    height: 40px;
    font-size: 1.3rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ibk-offcanvas {
    max-width: 300px;
}

.ibk-offcanvas-link {
    display: block;
    padding: .65rem .8rem;
    border-radius: 10px;
    color: var(--ink);
    text-decoration: none;
    font-weight: 500;
}

.ibk-offcanvas-link:hover {
    background: var(--primary-soft);
    color: var(--primary);
}

/* ---------- Hero ---------- */

.ibk-hero {
    position: relative;
    isolation: isolate;
    z-index: 20; /* keeps the autocomplete dropdown above following sections */
    /* fallback while the photo loads / if it fails */
    background: linear-gradient(150deg, var(--primary-deep) 0%, #0a3fa8 55%, var(--primary) 100%);
    color: #fff;
    padding: clamp(2rem, 4.5vw, 3.2rem) 0;
}

/* condo photo layers — slow crossfade carousel, no controls.
   Slight blur keeps the 1000px sources clean on wide screens. */
.ibk-hero-bgs {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden; /* clips the scaled/blurred photos (moved off .ibk-hero so the search dropdown isn't cut) */
}

.ibk-hero-bg {
    position: absolute;
    inset: 0;
    background-image: var(--hero-lg);
    background-position: center 35%;
    background-size: cover;
    background-repeat: no-repeat;
    filter: blur(3px) saturate(1.1);
    transform: scale(1.06);
    opacity: 0;
    transition: opacity 1.8s ease-in-out;
}

@media (max-width: 640px) {
    .ibk-hero-bg {
        background-image: var(--hero-sm); /* small screens fetch the light file */
    }
}

.ibk-hero-bg.is-active {
    opacity: 1;
}

/* translucent blue gradient over the photo */
.ibk-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(1100px 500px at 85% -10%, rgba(120, 170, 255, .28), transparent 60%),
        radial-gradient(800px 420px at 10% 110%, rgba(0, 200, 255, .14), transparent 55%),
        linear-gradient(150deg, rgba(4, 32, 92, .93) 0%, rgba(9, 55, 148, .84) 55%, rgba(0, 86, 228, .76) 100%);
}

.ibk-hero-inner {
    max-width: 780px;
}

.ibk-hero-eyebrow {
    display: inline-block;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .25);
    color: #dceaff;
    font-size: .75rem;
    font-weight: 600;
    padding: .3rem .85rem;
    border-radius: 999px;
    margin-bottom: .8rem;
}

.ibk-hero h1 {
    color: #fff;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 700;
    letter-spacing: -.02em;
    margin-bottom: .6rem;
}

/* vivid yellow emphasis on the blue hero */
.hero-accent {
    color: var(--accent-yellow);
    text-shadow: 0 2px 18px rgba(0, 20, 70, .35);
}

.hero-accent-soft {
    color: var(--accent-yellow);
    font-weight: 600;
}

.ibk-hero-sub {
    color: #cddcfb;
    font-size: clamp(.9rem, 2.5vw, 1rem);
    max-width: 580px;
    margin: 0 auto 1.1rem;
}

.ibk-search {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: #fff;
    border-radius: 999px;
    padding: .4rem .45rem .4rem 1rem;
    max-width: 580px;
    margin: 0 auto;
    box-shadow: 0 10px 30px rgba(2, 20, 60, .35);
}

.ibk-search i {
    color: var(--ink-muted);
    font-size: 1.1rem;
}

.ibk-search .form-control {
    border: 0;
    box-shadow: none;
    font-size: 1rem;
    padding-left: .25rem;
    min-width: 0;
}

.ibk-search .btn {
    border-radius: 999px;
    padding: .55rem 1.4rem;
    font-weight: 600;
    white-space: nowrap;
}

/* autocomplete dropdown (hero + search page) */

.ibk-autocomplete {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 300;
    background: #fff;
    border: 1px solid var(--primary-border);
    border-radius: 16px;
    box-shadow: 0 18px 44px rgba(2, 20, 60, .28);
    padding: .4rem;
    /* roughly 8 rows, stretching toward the bottom of the screen */
    max-height: min(62vh, 420px);
    overflow-y: auto;
    text-align: left;
}

.ibk-ac-item {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    border: 0;
    background: none;
    border-radius: 10px;
    padding: .5rem .6rem;
    cursor: pointer;
    text-align: left;
}

.ibk-ac-item:hover,
.ibk-ac-item.is-active {
    background: var(--primary-soft);
}

.ibk-ac-type {
    flex: 0 0 auto;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: .64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-radius: 999px;
    padding: .18rem .5rem;
}

.ibk-ac-item:hover .ibk-ac-type,
.ibk-ac-item.is-active .ibk-ac-type {
    background: var(--accent-yellow);
    color: var(--primary-deep);
}

.ibk-ac-label {
    color: var(--ink);
    font-weight: 600;
    font-size: .92rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ibk-ac-sub {
    margin-left: auto;
    color: var(--ink-muted);
    font-size: .78rem;
    white-space: nowrap;
}

/* search results page */

.ibk-search--page {
    max-width: 640px;
    margin: 0;
    box-shadow: var(--shadow-card);
}

.ibk-search-heading {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: .7rem;
}

.ibk-hero-stats {
    display: flex;
    justify-content: center;
    gap: clamp(.8rem, 4vw, 2.4rem);
    margin-top: 1.2rem;
    flex-wrap: nowrap; /* always one row — long labels wrap inside their column */
}

.ibk-hero-stats > div {
    text-align: center;
    min-width: 0;
}

@media (max-width: 575.98px) {
    .ibk-hero-stats strong {
        font-size: 1.1rem;
    }

    .ibk-hero-stats span {
        font-size: .68rem;
    }
}

.ibk-hero-stats strong {
    display: block;
    font-family: var(--font-heading);
    font-size: clamp(1.2rem, 3vw, 1.5rem);
    font-weight: 700;
    color: var(--accent-yellow);
}

.ibk-hero-stats span {
    color: #b7ccf5;
    font-size: .78rem;
}

/* ---------- Sections ---------- */

.ibk-section {
    padding: clamp(2rem, 4.5vw, 3.4rem) 0;
}

.ibk-section--soft {
    background: var(--primary-soft);
}

.ibk-section--deep {
    background:
        radial-gradient(900px 400px at 90% 0%, rgba(60, 120, 255, .25), transparent 60%),
        var(--primary-deep);
}

.ibk-section--deep h2,
.ibk-section--deep .ibk-section-head p {
    color: #fff;
}

.ibk-section--deep .ibk-section-head p {
    color: #b7ccf5;
}

.ibk-section-head {
    margin-bottom: 1.4rem;
}

.ibk-section-head h2 {
    font-size: clamp(1.5rem, 4vw, 2.1rem);
    font-weight: 700;
    letter-spacing: -.01em;
    margin-bottom: .3rem;
}

.ibk-section-head p {
    color: var(--ink-muted);
    margin-bottom: 0;
}

.ibk-section-head--split {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.ibk-view-all {
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

/* phones: "See all units at {long condo name}" must wrap, not overflow */
@media (max-width: 767.98px) {
    .ibk-view-all {
        white-space: normal;
    }
}

.ibk-section--deep .ibk-view-all {
    color: #9cc0ff;
}

.ibk-view-all:hover {
    text-decoration: underline;
}

/* ---------- Browse pills & chips ---------- */

.ibk-pills {
    gap: .4rem;
    flex-wrap: wrap;
}

.ibk-pills .nav-link {
    border-radius: 999px;
    border: 1.5px solid var(--primary-border);
    color: var(--ink);
    font-weight: 600;
    font-size: .9rem;
    padding: .45rem 1rem;
}

.ibk-pills .nav-link.active {
    background: var(--accent-yellow);
    border-color: var(--accent-yellow);
    color: var(--primary-deep);
}

.ibk-pill-count {
    display: inline-block;
    background: rgba(0, 86, 228, .1);
    color: var(--primary);
    font-size: .72rem;
    font-weight: 700;
    border-radius: 999px;
    padding: .08rem .45rem;
    margin-left: .3rem;
}

.ibk-pills .nav-link.active .ibk-pill-count {
    background: rgba(4, 32, 92, .15);
    color: var(--primary-deep);
}

/* yellow highlighter behind a heading word (yellow text on white would fail contrast) */
.mark-yellow {
    background: linear-gradient(180deg, transparent 55%, var(--accent-yellow) 55%);
    padding: 0 .15em;
}

/* left rail (2nd-level groups: train lines / zones / place categories) */
.ibk-rail {
    display: flex;
    gap: .3rem;
    overflow-x: auto;
    padding-bottom: .25rem;
    flex-wrap: nowrap;
}

@media (min-width: 992px) {
    .ibk-rail {
        flex-direction: column;
        min-width: 230px;
        max-width: 250px;
        overflow: visible;
        padding-bottom: 0;
        align-self: flex-start;
        border-right: 1px solid var(--primary-border);
        padding-right: .75rem;
    }
}

.ibk-rail .nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    width: 100%;
    text-align: left;
    border-radius: 10px;
    border: 1.5px solid transparent;
    color: var(--ink);
    font-weight: 600;
    font-size: .88rem;
    padding: .5rem .75rem;
    white-space: nowrap;
}

.ibk-rail .nav-link:hover {
    background: var(--primary-soft);
    color: var(--primary);
}

/* tier-2 active is BLUE so it never reads as the same control as the
   yellow tier-1 category tabs */
.ibk-rail .nav-link.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.ibk-rail .nav-link.active .ibk-pill-count {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}

.ibk-rail-scroller {
    position: relative;
}

@media (min-width: 992px) {
    .ibk-rail-scroller {
        flex: 0 0 auto; /* never shrink below the vertical rail's width */
        align-self: flex-start;
    }

    .ibk-strip-nav--sm {
        display: none !important; /* desktop rail is vertical — no arrows */
    }
}

@media (max-width: 991.98px) {
    .ibk-rail-scroller {
        min-width: 0; /* phones: the scroller may shrink to the viewport */
    }

    /* scroll indicator under the horizontal rail: a full-width hairline
       with a short blue thumb riding on it */
    .ibk-rail {
        scrollbar-width: thin;
        scrollbar-color: var(--primary) transparent;
        padding-bottom: .45rem;
    }

    .ibk-rail::-webkit-scrollbar { height: 5px; }
    .ibk-rail::-webkit-scrollbar-track {
        background: linear-gradient(180deg,
            transparent calc(50% - .5px),
            var(--primary-border) calc(50% - .5px),
            var(--primary-border) calc(50% + .5px),
            transparent calc(50% + .5px));
    }
    .ibk-rail::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 999px; }

    /* each group button fills exactly one of two columns per view */
    .ibk-rail .nav-item {
        flex: 0 0 calc(50% - .15rem);
        min-width: 0;
    }

    .ibk-rail .nav-link {
        width: 100%;
        padding-left: .55rem;
        padding-right: .55rem;
    }

    .ibk-rail .nav-link > span:first-child {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ibk-strip-nav--sm.is-visible {
        display: inline-flex;
        width: 30px;
        height: 30px;
        font-size: .85rem;
    }

    /* center on the button row, not the row + scrollbar strip */
    .ibk-rail-scroller .ibk-strip-nav {
        top: calc(50% - .4rem);
    }

    .ibk-rail-scroller .ibk-strip-nav--prev { left: -6px; }
    .ibk-rail-scroller .ibk-strip-nav--next { right: -6px; }
}

/* ---------- Explore cards (Trulia-style photo tiles) ---------- */

.ibk-explore {
    position: relative;
}

.ibk-explore-track {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: .25rem .25rem .75rem;
    scrollbar-width: none;
}

.ibk-explore-track::-webkit-scrollbar {
    display: none;
}

/* mixed masonry columns: one tall card, or two stacked half-cards */
.ibk-explore-col {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 0 0 auto;
    width: clamp(230px, 22vw, 292px); /* mobile/tablet: peek invites swiping */
    height: 440px;
    scroll-snap-align: start;
}

/* desktop: an exact number of columns per view — the next one stays hidden
   until the arrows are used */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .ibk-explore-col {
        width: calc((100% - 2rem) / 3); /* exactly 3 */
    }
}

@media (min-width: 1200px) {
    .ibk-explore-col {
        width: calc((100% - 3rem) / 4); /* exactly 4 */
    }
}

.ibk-explore-card {
    position: relative;
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    border-radius: 16px;
    background: linear-gradient(135deg, #dfe9fb, #c5d8f7); /* while the lazy photo loads */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1rem;
    color: #fff;
    text-decoration: none;
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: transform .18s ease, box-shadow .18s ease;
}

.ibk-explore-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* readable-text gradient sits above the photo, below the content */
.ibk-explore-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(2, 15, 45, .55) 0%, rgba(2, 15, 45, .05) 38%, rgba(2, 15, 45, .05) 55%, rgba(2, 15, 45, .72) 100%);
}

.ibk-explore-card > .ibk-explore-top,
.ibk-explore-card > .ibk-explore-cta {
    position: relative;
    z-index: 2;
}

/* "popular condos in this zone" list card (the Trulia gray-card slot) */
.ibk-explore-list {
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    border-radius: 16px;
    background:
        radial-gradient(320px 200px at 100% 0%, rgba(0, 86, 228, .45), transparent 65%),
        var(--primary-deep);
    color: #fff;
    padding: .85rem 1rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: var(--shadow-card);
}

.ibk-explore-list-kicker {
    color: var(--accent-yellow);
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.ibk-explore-list h3 {
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    margin: .1rem 0 .35rem;
}

.ibk-explore-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .1rem;
    overflow: hidden;
}

.ibk-explore-list li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    color: #cddcfb;
    text-decoration: none;
    font-size: .8rem;
    font-weight: 500;
    padding: .2rem .4rem;
    border-radius: 8px;
}

.ibk-explore-list li a:hover {
    background: rgba(255, 255, 255, .1);
    color: #fff;
}

.ibk-explore-list-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ibk-explore-list-count {
    background: rgba(255, 212, 0, .18);
    color: var(--accent-yellow);
    font-size: .7rem;
    font-weight: 700;
    border-radius: 999px;
    padding: .06rem .45rem;
    flex: 0 0 auto;
}

.ibk-explore-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
    color: #fff;
}

.ibk-explore-top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .45rem;
}

.ibk-explore-cat {
    background: var(--accent-yellow);
    color: var(--primary-deep);
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-radius: 999px;
    padding: .24rem .6rem;
}

.ibk-explore-name {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
}

/* stacked half-cards get slightly smaller type and CTA */
.ibk-explore-col:has(> :nth-child(2)) .ibk-explore-name {
    font-size: 1.12rem;
}

.ibk-explore-col:has(> :nth-child(2)) .ibk-explore-cta {
    font-size: .78rem;
    padding: .35rem .8rem;
}

.ibk-explore-cta {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: #fff;
    color: var(--ink);
    border-radius: 999px;
    font-size: .84rem;
    font-weight: 600;
    padding: .45rem .95rem;
    transition: background .15s ease, color .15s ease;
}

.ibk-explore-card:hover .ibk-explore-cta {
    background: var(--accent-yellow);
    color: var(--primary-deep);
}

/* hub zone band sits between navbar and hero — shorter columns and a
   tighter heading so the band fits a single screen with white space
   below (homepage keeps the tall 440px) */
.ibk-zone-band .ibk-section-head {
    margin-bottom: .8rem;
}

.ibk-zone-band .ibk-section-head h2 {
    font-size: clamp(1.3rem, 3vw, 1.6rem);
}

.ibk-zone-band .ibk-section-head p {
    font-size: .9rem;
}

.ibk-explore--compact .ibk-explore-col {
    height: 280px;
}

.ibk-explore--compact .ibk-explore-cat {
    font-size: .6rem;
    padding: .2rem .5rem;
}

.ibk-explore--compact .ibk-explore-cta,
.ibk-explore--compact .ibk-explore-col:has(> :nth-child(2)) .ibk-explore-cta {
    font-size: .72rem;
    padding: .3rem .7rem;
}

.ibk-explore--compact .ibk-explore-list {
    padding: .6rem .8rem;
}

.ibk-explore--compact .ibk-explore-list-kicker {
    font-size: .6rem;
}

.ibk-explore--compact .ibk-explore-list h3 {
    font-size: .92rem;
    margin: .05rem 0 .25rem;
}

.ibk-explore--compact .ibk-explore-list li a {
    font-size: .72rem;
    line-height: 1.35;
    padding: .1rem .3rem;
}

.ibk-explore--compact .ibk-explore-name {
    font-size: 1.15rem;
}

.ibk-explore--compact .ibk-explore-col:has(> :nth-child(2)) .ibk-explore-name {
    font-size: .98rem;
}

/* "+N more condos" directory card (hub carousels) */
.ibk-explore-more {
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    border-radius: 16px;
    border: 2px dashed var(--primary-border);
    background: var(--primary-soft);
    color: var(--primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    text-align: center;
    text-decoration: none;
    padding: 1rem;
    font-weight: 600;
    font-size: .9rem;
    line-height: 1.3;
    transition: transform .18s ease, box-shadow .18s ease;
}

.ibk-explore-more:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card);
    color: var(--primary);
}

.ibk-explore-more-num {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1;
}

.ibk-explore-more-go {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: var(--primary);
    color: #fff;
    border-radius: 999px;
    padding: .35rem .9rem;
    font-size: .8rem;
    margin-top: .35rem;
}

.ibk-explore-more:hover .ibk-explore-more-go {
    background: var(--accent-yellow);
    color: var(--primary-deep);
}

/* "more condos" directory page: plain grid of the same square tiles */
.ibk-condo-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.ibk-condo-grid .ibk-explore-card {
    flex: none;
    aspect-ratio: 1 / 1;
}

@media (max-width: 1199.98px) {
    .ibk-condo-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767.98px) {
    .ibk-condo-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: .6rem;
    }
}

/* "Updated N days ago" freshness chip in the detail badge row */
.ibk-detail-updated {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .74rem;
    font-weight: 600;
    color: var(--primary);
    background: var(--primary-soft);
    border-radius: 999px;
    padding: .25rem .6rem;
}

.ibk-hub-backlink {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: 1rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
}

.ibk-hub-backlink:hover {
    text-decoration: underline;
}

.ibk-explore-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--primary-border);
    box-shadow: 0 6px 18px rgba(13, 27, 52, .18);
    color: var(--primary);
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.ibk-explore-nav:hover {
    background: var(--accent-yellow);
    border-color: var(--accent-yellow);
    color: var(--primary-deep);
}

.ibk-explore-nav--prev { left: -10px; }
.ibk-explore-nav--next { right: -10px; }

@media (min-width: 992px) {
    .ibk-explore-nav {
        display: inline-flex;
    }
}

/* at the start there's no prev, at the end no next (JS toggles this) */
.ibk-explore-nav.is-hidden {
    display: none !important;
}

/* phones: a 2-across, 4-deep grid of square tiles that still scrolls
   sideways for more (this block must stay AFTER the base explore rules —
   same-specificity ties resolve by order) */
@media (max-width: 767.98px) {
    .ibk-explore-track {
        display: grid;
        grid-auto-flow: column;
        grid-template-rows: repeat(4, auto);
        grid-auto-columns: calc((100% - .6rem) / 2);
        gap: .6rem;
    }

    .ibk-explore-col {
        display: contents; /* every tile lays out on the grid itself */
    }

    .ibk-explore-card,
    .ibk-explore-list,
    .ibk-explore-more {
        aspect-ratio: 1 / 1;
        height: auto;
        scroll-snap-align: start;
    }

    /* the :has() pair-column selector outranks a bare class — repeat it
       here so long names (universities!) don't fill the whole square */
    .ibk-explore-col:has(> :nth-child(2)) .ibk-explore-name,
    .ibk-explore-name {
        font-size: .8rem;
        line-height: 1.25;
    }

    /* CTA shrinks to a small round arrow pinned to the bottom-right */
    .ibk-explore-col .ibk-explore-cta {
        width: 26px;
        height: 26px;
        padding: 0;
        justify-content: center;
        align-self: flex-end;
        border-radius: 50%;
        font-size: .75rem;
    }

    .ibk-explore-cta-label {
        display: none;
    }

    .ibk-explore-cat {
        font-size: .56rem;
        padding: .18rem .45rem;
    }

    .ibk-explore-list {
        padding: .55rem .65rem;
    }

    .ibk-explore-list-kicker {
        font-size: .52rem;
        letter-spacing: .06em;
    }

    .ibk-explore-list h3 {
        font-size: .8rem;
        margin: .05rem 0 .2rem;
    }

    .ibk-explore-list ul {
        gap: 0;
    }

    .ibk-explore-list li a {
        font-size: .64rem;
        line-height: 1.2;
        padding: .1rem .2rem;
    }

    /* no listing counts on phones — names get the full width */
    .ibk-explore-list-count {
        display: none;
    }
}

/* phones: category tabs become a clean icon-only 4-column row */
@media (max-width: 767.98px) {
    #browseTabs {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: .5rem;
    }

    #browseTabs .nav-item {
        display: contents; /* the buttons themselves become the grid cells */
    }

    #browseTabs .nav-link {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: .6rem 0;
    }

    #browseTabs .nav-link i {
        margin: 0 !important;
        font-size: 1.25rem;
    }

    #browseTabs .ibk-pill-label,
    #browseTabs .ibk-pill-count {
        display: none;
    }

    /* tighter group rail + chips on small screens */
    .ibk-rail .nav-link {
        font-size: .78rem;
        padding: .4rem .6rem;
    }

    /* chips: exactly 2 full-width columns, no counts, long names ellipsize
       (doubled class beats the base flex rule that follows later in the file) */
    .ibk-chips.ibk-chips {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .5rem;
    }

    /* doubled class: the base .ibk-chip rule sits later in the file */
    .ibk-chip.ibk-chip {
        font-size: .7rem;
        padding: .28rem .5rem;
        width: 100%;
        min-width: 0;
        justify-content: flex-start;
    }

    .ibk-chip-name {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ibk-chip .ibk-chip-count {
        display: none;
    }

    /* browse chip clouds show 9 chips + the "+N more" toggle as the 10th
       tile (scoped to --capped so search-result chips are never hidden) */
    .ibk-chips--capped > .ibk-chip:nth-child(n+10):not(.ibk-chip--more) {
        display: none;
    }

    .ibk-chips--capped.is-open > .ibk-chip:nth-child(n+10):not(.ibk-chip--more) {
        display: inline-flex;
    }
}

.ibk-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.ibk-chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: #fff;
    border: 1.5px solid var(--primary-border);
    border-radius: 999px;
    padding: .45rem .95rem;
    color: var(--ink);
    text-decoration: none;
    font-size: .88rem;
    font-weight: 500;
    transition: border-color .15s ease, box-shadow .15s ease, color .15s ease;
}

.ibk-chip:hover {
    border-color: var(--primary);
    color: var(--primary);
    box-shadow: 0 3px 10px rgba(0, 86, 228, .12);
}

.ibk-chip-dot {
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: var(--dot, var(--primary));
    flex: 0 0 auto;
}

/* condo-count badge inside a chip */
.ibk-chip-count {
    background: var(--primary-soft);
    color: var(--primary);
    font-size: .7rem;
    font-weight: 700;
    border-radius: 999px;
    padding: .06rem .42rem;
}

.ibk-chip:hover .ibk-chip-count {
    background: var(--accent-yellow);
    color: var(--primary-deep);
}

/* expanded chip cloud never blows out the page — capped with inner scroll */
.ibk-chips.is-open {
    max-height: 320px;
    overflow-y: auto;
    padding-right: .3rem;
    scrollbar-width: thin;
    scrollbar-color: var(--primary) var(--primary-soft);
}

.ibk-chips.is-open::-webkit-scrollbar { width: 6px; }
.ibk-chips.is-open::-webkit-scrollbar-track { background: var(--primary-soft); border-radius: 999px; }
.ibk-chips.is-open::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 999px; }

/* zero-listing chips (revealed by the "+N more" toggle) */
.ibk-chips-zero {
    display: contents;
}

.ibk-chip--muted {
    opacity: .55;
}

.ibk-chip--more {
    background: var(--primary-soft);
    border-style: dashed;
    color: var(--primary);
    font-weight: 700;
    cursor: pointer;
}

.ibk-chip--more:hover {
    background: var(--accent-yellow);
    border-color: var(--accent-yellow);
    border-style: solid;
    color: var(--primary-deep);
}

/* ---------- Listing cards ---------- */

.post-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.1rem;
}

.post-card {
    position: relative; /* anchor for the title's stretched-link */
    background: #fff;
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    transition: transform .18s ease, box-shadow .18s ease;
}

.post-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
}

.post-card-media {
    position: relative;
    display: block;
    aspect-ratio: 3 / 2;
    background: linear-gradient(135deg, #dfe9fb, #c5d8f7);
    overflow: hidden;
}

.post-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.post-card-mode {
    position: absolute;
    top: .7rem;
    left: .7rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .28rem .65rem;
    border-radius: 999px;
}

.post-card-mode--rent {
    background: var(--primary);
    color: #fff;
}

.post-card-mode--sale {
    background: var(--accent-yellow);
    color: var(--primary-deep);
}

.post-card-lux-badge {
    position: absolute;
    top: .7rem;
    right: .7rem;
    background: var(--primary-deep);
    color: #ffd76a;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .28rem .65rem;
    border-radius: 999px;
}

/* taken (rented / sold) state: everything that was blue or yellow turns red */

.is-soldout .post-card-mode {
    background: var(--danger-red);
    color: #fff;
    border: 0;
}

.is-soldout .post-card-price .js-price,
.is-soldout .ibk-detail-price .js-price,
.is-soldout .post-card-title a:hover {
    color: var(--danger-red);
}

.is-soldout .post-card-location i,
.is-soldout .post-card-specs i,
.is-soldout .ibk-detail-specs i {
    color: var(--danger-red);
}

.post-card-newbadge {
    position: absolute;
    bottom: .6rem;
    left: .7rem;
    background: var(--danger-red);
    color: #fff;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .05em;
    padding: .24rem .6rem;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(224, 38, 60, .45);
}

.post-card-status {
    position: absolute;
    bottom: .6rem;
    right: .7rem;
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .22rem .55rem;
    border-radius: 999px;
}

.post-card-status.is-available {
    /* vertical glossy: lime highlight on top -> deep green base */
    background: linear-gradient(180deg, #b3f30b 0%, #59b312 48%, #0c7a43 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .5),
        inset 0 -2px 4px rgba(0, 30, 12, .25),
        0 2px 6px rgba(12, 122, 67, .35);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 40, 20, .5);
}

.post-card-status .ibk-blink,
.ibk-detail-status .ibk-blink {
    margin-left: .3rem;
}

.ibk-blink {
    animation: ibk-blink 1.1s ease-in-out infinite;
}

@keyframes ibk-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: .15; }
}

.post-card-status.is-taken {
    background: rgba(224, 38, 60, .92);
    color: #fff;
}

.post-card-id {
    color: var(--ink-muted);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .02em;
}

.post-card-fresh {
    position: absolute;
    bottom: .6rem;
    left: .7rem;
    background: rgba(9, 20, 45, .72);
    color: #dceaff;
    font-size: .68rem;
    font-weight: 600;
    padding: .22rem .6rem;
    border-radius: 999px;
    backdrop-filter: blur(3px);
}

.post-card-body {
    padding: .8rem .9rem .9rem;
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.post-card-price {
    display: flex;
    align-items: baseline;
    gap: .25rem;
}

.post-card-price .js-price {
    font-family: var(--font-heading);
    font-size: 1.28rem;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: -.01em;
}

.post-card-per {
    color: var(--ink-muted);
    font-size: .85rem;
    font-weight: 500;
}

.post-card-title {
    font-size: .98rem;
    font-weight: 600;
    line-height: 1.35;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.post-card-title a {
    color: var(--ink);
    text-decoration: none;
}

.post-card-title a:hover {
    color: var(--primary);
}

.post-card-location {
    color: var(--ink-muted);
    font-size: .82rem;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.post-card-location i {
    color: var(--primary);
    margin-right: .25rem;
}

.post-card-specs {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .3rem .8rem;
    padding: .45rem 0 0;
    margin: .2rem 0 0;
    border-top: 1px solid #edf2fb;
    color: var(--ink-muted);
    font-size: .8rem;
}

.post-card-specs i {
    color: var(--primary);
    margin-right: .3rem;
}

/* decorative go-to-detail icon — absolutely positioned, zero layout impact */

.post-card-viewbtn {
    position: absolute;
    right: .65rem;
    bottom: .65rem;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--primary-border);
    background: #fff;
    color: var(--primary);
    border-radius: 50%;
    font-size: .95rem;
    transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.post-card:hover .post-card-viewbtn {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    transform: translateX(3px);
}

/* reserve the corner so wrapping spec chips never sit under the icon */
.post-card-specs {
    padding-right: 2.3rem;
}

/* sale cards: yellow arrow language (rent stays blue) */
.post-card--sale .post-card-viewbtn {
    border-color: rgba(255, 212, 0, .65);
    color: #b38f00;
}

.post-card--sale:hover .post-card-viewbtn {
    background: var(--accent-yellow);
    border-color: var(--accent-yellow);
    color: var(--primary-deep);
}

.post-card.is-soldout .post-card-viewbtn {
    color: var(--danger-red);
    border-color: rgba(224, 38, 60, .35);
}

.post-card.is-soldout:hover .post-card-viewbtn {
    background: var(--danger-red);
    border-color: var(--danger-red);
    color: #fff;
}

/* Luxury variant */

.post-card--lux {
    border: 1px solid rgba(255, 215, 106, .45);
}

/* ---------- Why us ---------- */

.ibk-feature {
    background: #fff;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 1.6rem 1.4rem;
    height: 100%;
    text-align: center;
}

.ibk-feature-icon {
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 12px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 1.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .9rem;
}

.ibk-feature h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: .4rem;
}

.ibk-feature p {
    color: var(--ink-muted);
    font-size: .9rem;
    margin: 0;
}

/* ---------- CTA ---------- */

.ibk-cta {
    /* top padding matters on pages whose content ends flush above (e.g. a
       detail page with no "More units" strip) */
    padding: clamp(1.5rem, 4vw, 2.5rem) 0 clamp(2.5rem, 6vw, 4.5rem);
}

.ibk-cta-box {
    /* real condo photo tinted blue, matching the hero treatment (even tint for centered content) */
    background:
        linear-gradient(180deg, rgba(3, 22, 66, .88) 0%, rgba(4, 32, 92, .8) 55%, rgba(0, 66, 176, .78) 100%),
        var(--cta-img) center 40% / cover no-repeat,
        linear-gradient(135deg, var(--primary-deep), var(--primary));
    border-radius: 20px;
    color: #fff;
    padding: clamp(2rem, 4vw, 2.75rem) 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
    box-shadow: 0 16px 40px rgba(4, 32, 92, .25);
}

.ibk-cta-box h2 {
    color: #fff;
    font-size: clamp(1.3rem, 3.5vw, 1.8rem);
    font-weight: 700;
    margin-bottom: .4rem;
}

.ibk-cta-box p {
    color: #d6e4ff;
    margin: 0 auto;
    max-width: 520px;
}

.ibk-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: 1rem;
    border-radius: 999px;
    padding: .7rem 1.5rem;
    margin-top: 1.1rem;
}

.ibk-cta-btn .ibk-line-icon {
    width: 1.3rem;
    height: 1.3rem;
}

/* ---------- Footer ---------- */

.ibk-footer {
    background: var(--primary-deep);
    color: #b7c8ea;
    font-size: .9rem;
}

.ibk-footer h4 {
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: .8rem;
}

.ibk-footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.ibk-footer a {
    color: #b7c8ea;
    text-decoration: none;
}

.ibk-footer a:hover {
    color: #fff;
    text-decoration: underline;
}

.ibk-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding: 1.1rem 0;
    font-size: .82rem;
    color: #8fa3cc;
}

/* footer LINE button: icon + label pill — white text (the .ibk-footer a
   tint would otherwise win), hover flips to the theme accent */
.ibk-footer .ibk-footer-line {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    border-radius: 999px;
    padding: .45rem 1.1rem;
    color: #fff;
}

.ibk-footer .ibk-footer-line:hover {
    background: var(--accent-yellow);
    border-color: var(--accent-yellow);
    color: var(--primary-deep);
    text-decoration: none;
}

.ibk-lux .ibk-footer .ibk-footer-line:hover {
    background: linear-gradient(180deg, #eacf6a 0%, #debd4d 100%);
    border-color: #cfae3e;
    color: #04205c;
}

.ibk-footer-line .ibk-line-icon {
    width: 1.15rem;
    height: 1.15rem;
}

/* phones: compact LINE CTA, one-line footer links, centered footer button
   and copyright */
@media (max-width: 575.98px) {
    .ibk-cta-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .45rem;
        font-size: .95rem;
        padding: .6rem 1.15rem;
        white-space: nowrap;
    }

    .ibk-cta-btn .ibk-line-icon {
        width: 1.35rem;
        height: 1.35rem;
        flex: 0 0 auto;
    }

    .ibk-footer ul a {
        font-size: .82rem;
    }

    .ibk-footer-line {
        display: flex;
        width: 100%;
        max-width: 250px;
        margin: .4rem auto 0;
        justify-content: center;
        font-size: .9rem;
        padding: .55rem 1rem;
    }

    .ibk-footer-bottom {
        text-align: center;
    }

    .ibk-footer-bottom span {
        font-size: .76rem;
        white-space: nowrap;
    }
}

/* ---------- Coming soon ---------- */

.ibk-coming-soon {
    padding-top: clamp(4rem, 12vw, 7rem);
    padding-bottom: clamp(4rem, 12vw, 7rem);
}

.ibk-coming-soon i {
    font-size: 3rem;
    color: var(--primary);
}

.ibk-coming-soon h1 {
    font-size: clamp(1.6rem, 5vw, 2.4rem);
    margin: .8rem 0 .5rem;
}

.ibk-coming-soon p {
    color: var(--ink-muted);
    max-width: 480px;
    margin: 0 auto 1.4rem;
}

/* ---------- Small screens (320px-safe) ---------- */

@media (max-width: 575.98px) {
    .ibk-brand {
        font-size: 1.25rem;
    }

    .ibk-line-btn {
        padding: .35rem .6rem;
        font-size: .78rem;
    }

    /* single row: input + small round icon button */
    .ibk-search {
        flex-wrap: nowrap;
        border-radius: 999px;
        padding: .3rem .3rem .3rem .85rem;
        gap: .4rem;
    }

    .ibk-search > i {
        display: none; /* the button carries the magnifier on phones */
    }

    .ibk-search .form-control {
        flex: 1 1 auto;
        min-width: 0;
        font-size: .9rem;
        padding: .3rem .1rem;
    }

    .ibk-search .btn {
        flex: 0 0 auto;
        width: 38px;
        height: 38px;
        padding: 0;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
    }

    .post-grid {
        grid-template-columns: 1fr;
    }

    .ibk-cta-box .btn {
        width: 100%;
    }
}

/* every phone gets the icon-only LINE button (modern handsets are
   384-432px wide — a 380px cutoff left them the full desktop pill) */
@media (max-width: 575.98px) {
    .ibk-line-text {
        display: none;
    }

    /* icon-only: a true 40px circle, same footprint as the burger */
    .ibk-line-btn {
        width: 40px;
        height: 40px;
        padding: 0;
        justify-content: center;
    }

    .ibk-line-icon {
        width: 1.25rem;
        height: 1.25rem;
    }
}

/* ---------- Hub pages ---------- */

.ibk-hub-head {
    background:
        radial-gradient(700px 260px at 90% -20%, rgba(0, 86, 228, .12), transparent 60%),
        var(--primary-soft);
    border-bottom: 1px solid var(--primary-border);
    padding: 1.4rem 0 1.6rem;
}

/* sale mode: yellow hero language (rent = blue, sale = yellow) */
.ibk-hub-head--sale {
    background:
        radial-gradient(700px 260px at 90% -20%, rgba(255, 212, 0, .35), transparent 60%),
        #fff6cf;
    border-bottom-color: #efdd8f;
}

.ibk-hub-head--sale .ibk-hub-type {
    background: var(--primary-deep);
    color: var(--accent-yellow);
}

/* photo + sale: condo photo under a bright yellow tint, navy text */
.ibk-hub-head--photo.ibk-hub-head--sale {
    background: linear-gradient(150deg, #ffd400 0%, #ffc400 100%);
    color: var(--primary-deep);
}

.ibk-hub-head--photo.ibk-hub-head--sale::after {
    background: linear-gradient(150deg, rgba(255, 212, 0, .94) 0%, rgba(255, 202, 0, .86) 55%, rgba(255, 212, 0, .72) 100%);
}

.ibk-hub-head--photo.ibk-hub-head--sale h1 {
    color: var(--primary-deep);
}

.ibk-hub-head--photo.ibk-hub-head--sale .ibk-hub-intro {
    color: rgba(4, 32, 92, .78);
}

.ibk-hub-head--photo.ibk-hub-head--sale .ibk-breadcrumb {
    color: rgba(4, 32, 92, .6);
}

.ibk-hub-head--photo.ibk-hub-head--sale .ibk-breadcrumb a {
    color: var(--primary-deep);
}

.ibk-hub-head--photo.ibk-hub-head--sale .ibk-hub-toggle {
    border-color: rgba(4, 32, 92, .3);
}

.ibk-hub-head--photo.ibk-hub-head--sale .ibk-photo-thumb {
    border-color: rgba(4, 32, 92, .35);
}

.ibk-hub-head--photo.ibk-hub-head--sale .ibk-photo-thumb:hover {
    border-color: var(--primary-deep);
}

/* photo variant: the condo's own image tinted blue, like the homepage hero */
.ibk-hub-head--photo {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: linear-gradient(150deg, var(--primary-deep) 0%, #0a3fa8 100%);
    border-bottom: 0;
    color: #fff;
    padding-bottom: 1.4rem;
}

.ibk-hub-head--photo::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: var(--hub-img) center 40% / cover no-repeat;
    filter: blur(2px) saturate(1.08);
    transform: scale(1.05);
}

.ibk-hub-head--photo::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(150deg, rgba(4, 32, 92, .93) 0%, rgba(9, 55, 148, .84) 55%, rgba(0, 86, 228, .74) 100%);
}

.ibk-hub-head--photo h1 {
    color: #fff;
}

.ibk-hub-head--photo .ibk-hub-intro {
    color: #cddcfb;
}

.ibk-hub-head--photo .ibk-breadcrumb {
    color: #9fb4de;
}

.ibk-hub-head--photo .ibk-breadcrumb a {
    color: #cfe0ff;
}

.ibk-hub-head--photo .ibk-hub-toggle {
    border-color: rgba(255, 255, 255, .3);
}

/* condo photo strip inside the hero — click opens the lightbox */
.ibk-photo-scroller {
    position: relative;
}

.ibk-strip-nav {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, .92);
    color: var(--primary);
    box-shadow: 0 4px 14px rgba(2, 10, 30, .35);
    font-size: 1rem;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.ibk-strip-nav:hover {
    background: var(--accent-yellow);
    color: var(--primary-deep);
}

.ibk-strip-nav--prev { left: -8px; }
.ibk-strip-nav--next { right: -8px; }

@media (min-width: 992px) {
    .ibk-strip-nav.is-visible {
        display: inline-flex;
    }
}

.ibk-photo-strip {
    display: flex;
    gap: .55rem;
    margin-top: 1.1rem;
    overflow-x: auto;
    padding-bottom: .35rem;
    scrollbar-width: none;
}

.ibk-photo-strip::-webkit-scrollbar {
    display: none;
}

.ibk-photo-thumb {
    position: relative;
    flex: 0 0 auto;
    width: 132px;
    height: 88px;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, .35);
    padding: 0;
    background: none;
    cursor: zoom-in;
    transition: border-color .15s ease, transform .15s ease;
}

.ibk-photo-thumb:hover {
    border-color: var(--accent-yellow);
    transform: translateY(-2px);
}

.ibk-photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ibk-photo-thumb-count {
    position: absolute;
    inset: 0;
    background: rgba(4, 32, 92, .55);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    font-size: .85rem;
    font-weight: 700;
}

/* ---------- Lightbox (site-wide, zero dependencies) ---------- */

.ibk-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(2, 10, 30, .93);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ibk-lightbox figure {
    margin: 0;
    max-width: min(92vw, 1200px);
    max-height: 88vh;
}

.ibk-lightbox img {
    max-width: 100%;
    max-height: 88vh;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}

.ibk-lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1.1rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}

.ibk-lightbox-close:hover {
    background: var(--accent-yellow);
    color: var(--primary-deep);
}

.ibk-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 1.3rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ibk-lightbox-nav:hover {
    background: var(--accent-yellow);
    color: var(--primary-deep);
}

.ibk-lightbox-nav--prev { left: 1rem; }
.ibk-lightbox-nav--next { right: 1rem; }

.ibk-lightbox-counter {
    position: absolute;
    bottom: 1.1rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: .85rem;
    font-weight: 600;
    border-radius: 999px;
    padding: .3rem .9rem;
}

@media (max-width: 575.98px) {
    .ibk-lightbox-nav { width: 40px; height: 40px; }
    .ibk-lightbox-nav--prev { left: .4rem; }
    .ibk-lightbox-nav--next { right: .4rem; }
}

.ibk-breadcrumb {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .82rem;
    color: var(--ink-muted);
    flex-wrap: wrap;
}

.ibk-breadcrumb a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
}

.ibk-breadcrumb a:hover {
    text-decoration: underline;
}

.ibk-breadcrumb i {
    font-size: .65rem;
}

.ibk-hub-type {
    display: inline-block;
    background: var(--accent-yellow);
    color: var(--primary-deep);
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-radius: 999px;
    padding: .22rem .6rem;
    margin: .8rem 0 .4rem;
}

.ibk-hub-head h1 {
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    font-weight: 700;
    margin-bottom: .4rem;
}

.ibk-hub-intro {
    color: var(--ink-muted);
    max-width: 720px;
    margin-bottom: 1rem;
}

.ibk-hub-toggle {
    display: inline-flex;
    background: #fff;
    border: 1.5px solid var(--primary-border);
    border-radius: 999px;
    padding: .25rem;
    gap: .25rem;
}

.ibk-hub-toggle a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border-radius: 999px;
    padding: .4rem .95rem;
    color: var(--ink);
    text-decoration: none;
    font-weight: 600;
    font-size: .9rem;
}

.ibk-hub-toggle a span {
    background: var(--primary-soft);
    color: var(--primary);
    font-size: .72rem;
    font-weight: 700;
    border-radius: 999px;
    padding: .08rem .5rem;
}

.ibk-hub-toggle a.active {
    background: var(--primary);
    color: #fff;
}

.ibk-hub-toggle a.active.is-sale {
    background: var(--accent-yellow);
    color: var(--primary-deep);
}

.ibk-hub-toggle a.active span {
    background: rgba(255, 255, 255, .25);
    color: inherit;
}

/* condo hub facts card */

.ibk-condo-card {
    display: flex;
    gap: 1.2rem;
    background: #fff;
    border: 1px solid var(--primary-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    flex-wrap: wrap;
}

.ibk-condo-card-img {
    width: 280px;
    max-width: 100%;
    object-fit: cover;
    flex: 0 0 auto;
}

.ibk-condo-card-body {
    padding: 1.1rem 1.2rem;
    flex: 1 1 260px;
}

.ibk-condo-facts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.4rem;
    color: var(--ink-muted);
    font-size: .9rem;
}

.ibk-condo-facts i {
    color: var(--primary);
    margin-right: .4rem;
}

.ibk-condo-facts a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
}

.ibk-condo-address {
    margin: .8rem 0 0;
    color: var(--ink-muted);
    font-size: .88rem;
}

.ibk-condo-address i {
    color: var(--primary);
    margin-right: .4rem;
}

/* free OpenStreetMap embeds */

.ibk-condo-card-map {
    flex: 1 1 300px;
    min-width: 260px;
    display: flex;
    flex-direction: column;
}

.ibk-map {
    width: 100%;
    min-height: 220px;
    flex: 1;
    border: 0;
    display: block;
}

.ibk-detail-map {
    border-radius: var(--radius-card);
    overflow: hidden;
    border: 1px solid var(--primary-border);
    max-width: 860px;
}

.ibk-detail-map .ibk-map {
    height: 300px;
}

.ibk-map-link {
    display: block;
    background: var(--primary-soft);
    color: var(--primary);
    text-decoration: none;
    font-size: .85rem;
    font-weight: 600;
    text-align: center;
    padding: .5rem;
}

.ibk-map-link:hover {
    background: var(--accent-yellow);
    color: var(--primary-deep);
}

/* filter bar */

.ibk-filterbar {
    display: flex;
    align-items: center;
    gap: .6rem;
    background: #fff;
    border: 1px solid var(--primary-border);
    border-radius: 14px;
    padding: .6rem .8rem;
    flex-wrap: wrap;
}

.ibk-filterbar .form-select {
    width: auto;
    min-width: 140px;
    border-radius: 999px;
    border-color: var(--primary-border);
    font-size: .88rem;
    font-weight: 500;
}

.ibk-price-range {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    color: var(--ink-muted);
}

.ibk-price-range .form-control {
    width: 150px; /* wide enough for "Min ฿5,000,000" in full */
    border-radius: 999px;
    border-color: var(--primary-border);
    font-size: .88rem;
    font-weight: 500;
}

.ibk-filterbar-clear {
    font-size: .85rem;
    font-weight: 600;
}

.ibk-filterbar-count {
    color: var(--ink-muted);
    font-size: .85rem;
    font-weight: 600;
}

/* phones: the filterbar becomes a tidy 2-column grid — every box fills
   its cell (status | room type, price range full-width, sort | count) */
@media (max-width: 575.98px) {
    .ibk-filterbar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .5rem;
    }

    .ibk-filterbar .form-select {
        width: 100%;
        min-width: 0;
        font-size: .78rem;
        padding: .4rem 1.4rem .4rem .6rem; /* slimmer arrow gutter — "Any room type" fits */
    }

    .ibk-price-range .form-control {
        font-size: .78rem;
        padding-left: .6rem;
        padding-right: .6rem;
    }

    .ibk-filterbar-count {
        font-size: .78rem;
    }

    .ibk-filterbar select[name="status"] { order: 1; }
    .ibk-filterbar select[name="room_type"] { order: 2; }

    .ibk-price-range {
        order: 3;
        grid-column: 1 / -1;
        display: flex;
    }

    .ibk-price-range .form-control {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
    }

    .ibk-filterbar select[name="sort"] { order: 4; }

    .ibk-filterbar-count {
        order: 5;
        align-self: center;
        justify-self: end;
    }

    .ibk-filterbar-clear {
        order: 6;
        grid-column: 1 / -1;
        text-align: center;
        padding: .1rem 0;
    }
}

/* empty state */

.ibk-empty {
    text-align: center;
    padding: 3rem 1rem;
}

.ibk-empty i {
    font-size: 2.6rem;
    color: var(--primary);
}

.ibk-empty h2 {
    font-size: 1.3rem;
    margin: .6rem 0 .4rem;
}

.ibk-empty p {
    color: var(--ink-muted);
    max-width: 440px;
    margin: 0 auto 1rem;
}

/* pagination — minimal text row on a thin rule; current page gets a blue
   indicator segment sitting on the rule */

.ibk-pagination {
    display: flex;
    align-items: center;
    list-style: none;
    gap: clamp(.9rem, 3.5vw, 2rem);
    margin: 0;
    padding: .75rem .5rem 0;
    border-top: 1px solid var(--primary-border);
}

.ibk-pagination li {
    position: relative;
}

.ibk-pagination li.is-current::before {
    content: "";
    position: absolute;
    top: calc(-.75rem - 2px);
    left: 50%;
    transform: translateX(-50%);
    width: 26px;
    height: 3px;
    border-radius: 2px;
    background: var(--primary);
}

.ibk-page-link {
    color: var(--ink-muted);
    font-size: .9rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

a.ibk-page-link:hover {
    color: var(--primary);
}

.ibk-pagination li.is-current .ibk-page-link {
    color: var(--primary);
    font-weight: 700;
}

.ibk-page-link.is-disabled {
    color: #b6c3dd;
}

/* phones: the compact set (at most 9 pieces) — tight fixed gaps so even
   "‹ 1 … 249 250 251 … 400 ›" fits a 320px screen */
.ibk-pagination--compact {
    gap: .22rem;
    justify-content: center;
    flex-wrap: nowrap;
    padding-left: 0;
    padding-right: 0;
}

.ibk-pagination--compact .ibk-page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    padding: .25rem .08rem;
    font-size: .8rem;
}

/* ---------- Post detail ---------- */

/* sticky summary sidebar */

.ibk-detail-side {
    background: #fff;
    border: 1px solid var(--primary-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 1.15rem 1.25rem;
}

@media (min-width: 992px) {
    .ibk-detail-side {
        position: sticky;
        top: 76px; /* below the sticky topbar */
    }
}

/* listing ID highlighted inside the yellow LINE button */
.ibk-cta-id {
    display: inline-block;
    background: #fff;
    color: var(--primary);
    border-radius: 8px;
    padding: .08rem .5rem;
    margin: 0 .15rem;
    font-weight: 800;
    letter-spacing: .02em;
    box-shadow: inset 0 0 0 1px rgba(4, 32, 92, .12);
}

/* Bootstrap has no min-w-0 utility — needed so long location lines shrink
   with ellipsis instead of pushing the condo thumb out of the card */
.min-w-0 {
    min-width: 0;
}

/* condo project thumbnail beside the sidebar title — links to the condo hub */
.ibk-side-thumb {
    flex: 0 0 auto;
    width: 88px;
    height: 88px;
    margin-bottom: .2rem; /* optically aligns with the price row baseline */
    border-radius: 12px;
    overflow: hidden;
    border: 1.5px solid var(--primary-border);
    display: block;
    transition: border-color .15s ease, transform .15s ease;
}

.ibk-side-thumb:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
}

.ibk-side-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ibk-detail-title {
    font-size: clamp(1.15rem, 2.4vw, 1.45rem);
    font-weight: 700;
}

/* long titles clamp to 2 lines; ibk.js adds the "More detail" toggle
   only when the text overflows */
.ibk-detail-title.is-clamped {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ibk-title-toggle {
    background: none;
    border: 0;
    padding: 0 0 .1rem;
    color: var(--primary);
    font-weight: 700;
    font-size: .8rem;
}

/* desktop: breathing room between the thumb strip and what follows */
@media (min-width: 992px) {
    .ibk-gallery {
        margin-bottom: 2rem;
    }
}

.ibk-detail-status {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-radius: 999px;
    padding: .26rem .6rem;
}

.ibk-detail-status.is-available {
    background: linear-gradient(180deg, #b3f30b 0%, #59b312 48%, #0c7a43 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .5),
        inset 0 -2px 4px rgba(0, 30, 12, .25),
        0 2px 6px rgba(12, 122, 67, .35);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 40, 20, .5);
}

.ibk-detail-status.is-taken {
    background: var(--danger-red);
    color: #fff;
}

.ibk-detail-price {
    display: flex;
    align-items: center;
    gap: .3rem;
    margin-bottom: 1rem;
}

.ibk-detail-price .js-price {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary);
}

.ibk-detail-specs {
    list-style: none;
    margin: 0;
    padding: .9rem 0 0;
    border-top: 1px solid var(--primary-border);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .6rem 1rem;
    color: var(--ink-muted);
    font-size: .9rem;
}

.ibk-detail-specs i {
    color: var(--primary);
    margin-right: .45rem;
}

/* phones never show breadcrumbs — the navbar + page heading carry context */
@media (max-width: 767.98px) {
    .ibk-breadcrumb {
        display: none;
    }

    /* "More units at {long condo name}" stays compact on phones */
    .ibk-related .ibk-section-head h2 {
        font-size: 1.1rem;
    }

    .ibk-related .ibk-section-head {
        margin-bottom: .8rem;
    }
}

/* the LINE-button hint line stays small and quiet */
.ibk-detail-side .js-copy-hint {
    font-size: .72rem;
}

/* desktop: four spec columns across the sidebar on one line each,
   and a trim bottom edge on the card */
@media (min-width: 992px) {
    .ibk-detail-side {
        padding-bottom: .85rem;
    }

    .ibk-detail-specs {
        grid-template-columns: repeat(4, 1fr);
        padding-bottom: .15rem;
        gap: .5rem .5rem;
        font-size: .78rem;
    }

    .ibk-detail-specs li {
        white-space: nowrap;
    }

    .ibk-detail-specs i {
        margin-right: .3rem;
    }
}

/* phones: always two spec columns, and the LINE CTA stays on one line */
@media (max-width: 575.98px) {
    /* the rent/sale toggle drops its count pills — labels stay on one line */
    .ibk-hub-toggle a span {
        display: none;
    }

    .ibk-detail-specs {
        grid-template-columns: 1fr 1fr;
        font-size: .84rem;
        gap: .55rem .5rem;
    }

    .ibk-detail-side .ibk-line-cta.btn-lg {
        font-size: 1.02rem;
        white-space: nowrap;
        padding-left: .5rem;
        padding-right: .5rem;
    }

    .ibk-detail-side .ibk-cta-id {
        font-size: .9em;
        padding: .06rem .4rem;
    }
}

.ibk-detail-desc h2 {
    font-size: 1.25rem;
    margin-bottom: .5rem;
}

.ibk-detail-desc p {
    color: var(--ink-muted);
    max-width: 860px;
}

/* "Read more" toggle under a clamped unit description (phones only) */
.ibk-desc-toggle {
    background: none;
    border: 0;
    padding: .2rem 0 0;
    color: var(--primary);
    font-weight: 700;
    font-size: .82rem;
}

@media (min-width: 992px) {
    .ibk-desc-toggle {
        display: none; /* desktop always shows the full description */
    }
}

@media (max-width: 991.98px) {
    .ibk-detail-desc p {
        font-size: .84rem;
        line-height: 1.65;
    }

    /* excerpt: cut at ~8 lines with a soft fade into the toggle */
    .js-unit-desc.is-clamped p {
        max-height: 190px;
        overflow: hidden;
        -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent);
        mask-image: linear-gradient(180deg, #000 72%, transparent);
    }
}

/* facility chips (non-interactive) on the detail page */

.ibk-fac-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.ibk-fac-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: var(--primary-soft);
    color: var(--ink);
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 500;
    padding: .3rem .7rem;
}

.ibk-fac-chip i {
    color: var(--primary);
}

/* gallery */

.ibk-gallery-main {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    background: var(--primary-soft);
}

.ibk-gallery-thumbs {
    display: flex;
    gap: .5rem;
    margin-top: .6rem;
    overflow-x: auto;
    padding-bottom: .35rem;
}

/* themed slim scrollbars (gallery thumbs + autocomplete dropdown) */
.ibk-gallery-thumbs,
.ibk-autocomplete {
    scrollbar-width: thin;
    scrollbar-color: var(--primary) var(--primary-soft);
}

.ibk-gallery-thumbs::-webkit-scrollbar,
.ibk-autocomplete::-webkit-scrollbar {
    height: 6px;
    width: 6px;
}

.ibk-gallery-thumbs::-webkit-scrollbar-track,
.ibk-autocomplete::-webkit-scrollbar-track {
    background: var(--primary-soft);
    border-radius: 999px;
}

.ibk-gallery-thumbs::-webkit-scrollbar-thumb,
.ibk-autocomplete::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 999px;
}

.ibk-gallery-thumbs::-webkit-scrollbar-thumb:hover,
.ibk-autocomplete::-webkit-scrollbar-thumb:hover {
    background: var(--primary-hover);
}

.ibk-gallery-thumbs button {
    flex: 0 0 auto;
    width: 84px;
    height: 63px;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid transparent;
    padding: 0;
    background: none;
    cursor: pointer;
}

.ibk-gallery-thumbs button.active {
    border-color: var(--primary);
}

.ibk-gallery-thumbs img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---------- Forms, alerts & static pages ---------- */

.ibk-form {
    background: #fff;
    border: 1px solid var(--primary-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: clamp(1.2rem, 3vw, 1.8rem);
    max-width: 860px;
}

.ibk-form-heading {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: .8rem;
}

.ibk-form .form-label {
    font-weight: 600;
    font-size: .85rem;
    margin-bottom: .3rem;
}

.ibk-form .form-control,
.ibk-form .form-select {
    border-color: var(--primary-border);
    border-radius: 10px;
}

.ibk-form .form-control:focus,
.ibk-form .form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 86, 228, .15);
}

.ibk-alert {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    border-radius: 12px;
    padding: .85rem 1rem;
    margin-bottom: 1rem;
    font-size: .92rem;
    max-width: 860px;
}

.ibk-alert i { font-size: 1.05rem; }

.ibk-alert--success { background: #e2f8ec; color: #0c6b3c; }
.ibk-alert--error { background: #feeaea; color: #9c1f2e; }
.ibk-alert--info { background: var(--primary-soft); color: var(--primary-deep); max-width: none; }
.ibk-alert--info a { font-weight: 600; }

/* contact channels */

.ibk-channel-list {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.ibk-channel {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    background: #fff;
    border: 1px solid var(--primary-border);
    border-radius: 14px;
    padding: .8rem .9rem;
    color: var(--ink);
    text-decoration: none;
}

a.ibk-channel:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-card);
}

.ibk-channel-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--ch) 14%, #fff);
    color: var(--ch);
    font-size: 1.15rem;
}

.ibk-channel strong { display: block; font-size: .95rem; }
.ibk-channel small { color: var(--ink-muted); display: block; }

.ibk-map-inline {
    display: inline-block;
    margin-top: .2rem;
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none;
}

.ibk-socials--page a {
    background: var(--primary-soft);
    color: var(--primary);
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
}

/* payment bank cards */

.ibk-bank-card {
    background: #fff;
    border: 1px solid var(--primary-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 1.2rem 1.3rem;
    height: 100%;
}

.ibk-bank-tag {
    display: inline-block;
    background: color-mix(in srgb, var(--bank) 14%, #fff);
    color: var(--bank);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .05em;
    border-radius: 999px;
    padding: .22rem .6rem;
    margin-bottom: .4rem;
}

.ibk-bank-card h2 {
    font-size: 1.15rem;
    font-weight: 700;
}

.ibk-bank-acc {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
    cursor: copy;
    margin: .3rem 0 .6rem;
}

.ibk-bank-acc i { font-size: .95rem; color: var(--ink-muted); }
.ibk-bank-acc:hover i { color: var(--primary); }

.ibk-bank-card ul {
    list-style: none;
    margin: 0;
    padding: 0;
    color: var(--ink-muted);
    font-size: .88rem;
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.ibk-bank-card ul i { color: var(--primary); margin-right: .4rem; }

.ibk-qr {
    max-width: 200px;
    width: 100%;
    border-radius: 12px;
    border: 1px solid var(--primary-border);
}

/* services */

.ibk-service-card {
    background: #fff;
    border: 1px solid var(--primary-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 1.5rem 1.4rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .6rem;
}

.ibk-service-card h2 { font-size: 1.2rem; font-weight: 700; margin: 0; }
.ibk-service-card p { color: var(--ink-muted); font-size: .92rem; flex: 1; }

/* articles */

.ibk-article-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.1rem;
}

.ibk-article-card {
    background: #fff;
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    transition: transform .18s ease, box-shadow .18s ease;
}

.ibk-article-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
}

.ibk-article-media {
    aspect-ratio: 16 / 9;
    display: block;
    overflow: hidden;
    background: var(--primary-soft);
}

.ibk-article-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ibk-article-body { padding: .85rem .95rem 1rem; }
.ibk-article-body time { color: var(--ink-muted); font-size: .75rem; font-weight: 600; }
.ibk-article-body h2 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
    margin: .25rem 0 .3rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ibk-article-body p { color: var(--ink-muted); font-size: .84rem; margin: 0; }

.ibk-article h1 { font-size: clamp(1.5rem, 4vw, 2.2rem); font-weight: 700; max-width: 900px; }
.ibk-article-hero { width: 100%; max-width: 900px; border-radius: var(--radius-card); margin-bottom: 1.2rem; }
.ibk-article-content { max-width: 860px; color: var(--ink); }
.ibk-article-content img { max-width: 100%; height: auto; border-radius: 10px; }
.ibk-article-content a { color: var(--primary); }

/* ---------- Motion & focus ---------- */

@media (prefers-reduced-motion: reduce) {
    .post-card,
    .ibk-chip {
        transition: none;
    }
}

a:focus-visible,
button:focus-visible {
    outline: 3px solid rgba(0, 86, 228, .45);
    outline-offset: 2px;
}

/* ============================================================
   LUXURY THEME (.ibk-lux wraps the whole page on /luxury routes)
   Gold gradient + deep navy #04205c replaces vivid blue + yellow.
   Most components follow automatically via the CSS variables;
   the rules below catch the hardcoded spots.
   ============================================================ */

.ibk-lux {
    --primary: #a5811b;              /* readable gold on white */
    --primary-hover: #8a6b12;
    --primary-soft: #f7f1dc;
    --primary-border: #e5d7a4;
    --accent-yellow: #d4af37;        /* metallic gold */
    --shadow-card-hover: 0 10px 28px rgba(165, 129, 27, .22);
    --bs-primary: #a5811b;
    --bs-primary-rgb: 165, 129, 27;
    --bs-link-color: #a5811b;
}

/* gold gradient primitive for filled controls — vertical, #eacf6a → #debd4d */
.ibk-lux .btn-primary,
.ibk-lux .post-card-mode--sale,
.ibk-lux .ibk-hub-type {
    background: linear-gradient(180deg, #eacf6a 0%, #debd4d 100%);
    border-color: #cfae3e;
    color: #04205c;
}

/* mode split everywhere: navy #04205c = FOR RENT, gold #debd4d = FOR SALE */
.ibk-lux .ibk-hub-toggle a.active,
.ibk-lux .post-card-mode--rent,
.ibk-lux .ibk-explore-cat {
    background: linear-gradient(180deg, #0a3170 0%, #04205c 100%);
    border-color: #04205c;
    color: #eacf6a;
}

.ibk-lux .ibk-hub-toggle a.active.is-sale,
.ibk-lux--sale .ibk-explore-cat {
    background: linear-gradient(180deg, #eacf6a 0%, #debd4d 100%);
    border-color: #cfae3e;
    color: #04205c;
}

.ibk-lux .btn-primary:hover {
    background: linear-gradient(180deg, #e2c455 0%, #cfae3e 100%);
    border-color: #bf9f33;
    color: #04205c;
}

.ibk-lux .ibk-line-cta {
    background: linear-gradient(180deg, #eacf6a 0%, #debd4d 100%);
    border-color: #cfae3e;
    color: #04205c;
}

.ibk-lux .ibk-line-cta:hover {
    background: linear-gradient(180deg, #e2c455 0%, #cfae3e 100%);
    border-color: #bf9f33;
    color: #04205c;
}

/* topbar keeps its deep navy but earns a gold hairline */
.ibk-lux .ibk-topbar {
    border-bottom: 1px solid rgba(212, 175, 55, .45);
}

/* hub hero, rent: deep navy gradient with a soft gold glow */
.ibk-lux .ibk-hub-head {
    background:
        radial-gradient(700px 260px at 88% -20%, rgba(212, 175, 55, .3), transparent 60%),
        linear-gradient(180deg, #021539 0%, #04205c 60%, #0a2f6e 100%);
    border-bottom: 1px solid rgba(212, 175, 55, .4);
    color: #fff;
}

.ibk-lux .ibk-hub-head h1 { color: #fff; }
.ibk-lux .ibk-hub-head .ibk-hub-intro { color: #ccd8f1; }
.ibk-lux .ibk-hub-head .ibk-breadcrumb a { color: #f1d97a; }
.ibk-lux .ibk-hub-head .ibk-breadcrumb span,
.ibk-lux .ibk-hub-head .ibk-breadcrumb i { color: #9fb2d9; }

/* hub hero, sale: the gold treatment (navy ink on vertical gold) */
.ibk-lux .ibk-hub-head--sale {
    background:
        radial-gradient(700px 260px at 88% -20%, rgba(255, 248, 220, .55), transparent 60%),
        linear-gradient(180deg, #eacf6a 0%, #debd4d 100%);
    border-bottom: 1px solid #c9a53a;
    color: var(--primary-deep);
}

.ibk-lux .ibk-hub-head--sale h1 { color: #04205c; }
.ibk-lux .ibk-hub-head--sale .ibk-hub-intro { color: rgba(4, 32, 92, .82); }
.ibk-lux .ibk-hub-head--sale .ibk-breadcrumb a { color: #04205c; }
.ibk-lux .ibk-hub-head--sale .ibk-breadcrumb span,
.ibk-lux .ibk-hub-head--sale .ibk-breadcrumb i { color: rgba(4, 32, 92, .6); }

.ibk-lux .ibk-hub-head--sale .ibk-hub-type {
    background: #04205c;
    border-color: #04205c;
    color: #eacf6a;
}

.ibk-lux .ibk-hub-head--sale .ibk-hub-toggle {
    border-color: rgba(4, 32, 92, .35);
}

/* photo variants (condo hubs): navy tint for rent, gold tint for sale */
.ibk-lux .ibk-hub-head--photo.ibk-hub-head--sale {
    background: linear-gradient(180deg, #eacf6a 0%, #debd4d 100%);
    color: #04205c;
}

.ibk-lux .ibk-hub-head--photo.ibk-hub-head--sale::after {
    background: linear-gradient(180deg, rgba(234, 207, 106, .94) 0%, rgba(222, 189, 77, .84) 100%);
}

.ibk-lux .ibk-hub-toggle {
    background: rgba(255, 255, 255, .96);
    border-color: rgba(212, 175, 55, .5);
}

/* listing cards: navy accents on rent cards, gold on sale cards */
.ibk-lux .post-card-viewbtn {
    background: linear-gradient(180deg, #0a3170 0%, #04205c 100%);
    color: #eacf6a;
}

.ibk-lux .post-card--sale .post-card-viewbtn {
    background: linear-gradient(180deg, #eacf6a 0%, #debd4d 100%);
    color: #04205c;
}

.ibk-lux .is-soldout .post-card-viewbtn {
    background: var(--danger-red);
    color: #fff;
}

.ibk-lux .post-card-price .js-price {
    color: #04205c;
}

.ibk-lux .post-card--sale .post-card-price .js-price {
    color: #8a6b12;
}

.ibk-lux .is-soldout .post-card-price .js-price {
    color: var(--danger-red);
}

/* detail page price follows the same split (soldout stays red) */
.ibk-lux .ibk-detail-price .js-price {
    color: #04205c;
}

.ibk-lux--sale .ibk-detail-price .js-price {
    color: #8a6b12;
}

.ibk-lux .is-soldout .ibk-detail-price .js-price {
    color: var(--danger-red);
}

/* "Luxury" chip in the detail badge row */
.ibk-detail-lux {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: linear-gradient(180deg, #eacf6a 0%, #debd4d 100%);
    color: #04205c;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: .25rem .65rem;
}

/* section heads: gold marker instead of vivid yellow */
.ibk-lux .mark-yellow {
    background: linear-gradient(180deg, transparent 55%, rgba(212, 175, 55, .55) 55%);
}

/* ============ Homepage: real customer photos strip ============ */

.ibk-people-strip {
    gap: .8rem;
    margin-top: 0;
}

.ibk-people-strip .ibk-photo-thumb {
    width: 216px;
    height: 288px;
    border-radius: 14px;
    border: 1px solid var(--primary-border);
    box-shadow: var(--shadow-card);
}

/* every other card drops slightly — a light collage rhythm */
.ibk-people-strip .ibk-photo-thumb:nth-child(even) {
    margin-top: 1.1rem;
}

.ibk-people-strip .ibk-photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ibk-people-strip .ibk-photo-thumb:hover {
    border-color: var(--primary);
}

@media (max-width: 575.98px) {
    .ibk-people-strip .ibk-photo-thumb {
        width: 150px;
        height: 200px;
    }

    .ibk-people-strip .ibk-photo-thumb:nth-child(even) {
        margin-top: .7rem;
    }
}

/* ============ Homepage: developer brand tiles ============ */

.ibk-dev-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: .8rem;
}

.ibk-dev-tile {
    background: #fff;
    border: 1px solid var(--primary-border);
    border-radius: 14px;
    padding: 1rem .8rem .9rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .15rem;
    text-decoration: none;
    box-shadow: var(--shadow-card);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.ibk-dev-tile:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--primary);
}

/* typographic logomark (no logo assets exist — swap for images later) */
.ibk-dev-mark {
    font-family: var(--font-heading);
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: .02em;
    color: var(--primary);
    line-height: 1.1;
}

.ibk-dev-name {
    color: var(--ink);
    font-weight: 600;
    font-size: .8rem;
    line-height: 1.25;
    min-height: 2em;
    display: flex;
    align-items: center;
}

.ibk-dev-count {
    color: var(--ink-muted);
    font-size: .72rem;
}

@media (max-width: 1199.98px) {
    .ibk-dev-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 767.98px) {
    .ibk-dev-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: .5rem;
    }

    .ibk-dev-mark { font-size: 1.25rem; }
    .ibk-dev-name { font-size: .68rem; }
    .ibk-dev-count { font-size: .62rem; }
}

@media (max-width: 424.98px) {
    .ibk-dev-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============ Price-band pills (city + luxury hubs) ============ */

.ibk-band-nav {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .9rem;
}

.ibk-band-pill {
    background: rgba(255, 255, 255, .92);
    border: 1px solid var(--primary-border);
    border-radius: 999px;
    padding: .28rem .7rem;
    font-size: .78rem;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.ibk-band-pill:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.ibk-band-pill.is-active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

/* luxury: active pill follows the mode split (navy = rent, gold = sale) */
.ibk-lux .ibk-band-pill.is-active {
    background: linear-gradient(180deg, #0a3170 0%, #04205c 100%);
    border-color: #04205c;
    color: #eacf6a;
}

.ibk-lux--sale .ibk-band-pill.is-active {
    background: linear-gradient(180deg, #eacf6a 0%, #debd4d 100%);
    border-color: #cfae3e;
    color: #04205c;
}

/* long band dropdowns scroll instead of running off-screen */
.ibk-dropdown--bands {
    max-height: min(70vh, 520px);
    overflow-y: auto;
}

/* real developer logos in the tiles + on developer pages */
.ibk-dev-logo {
    height: 42px;
    max-width: 100%;
    object-fit: contain;
    margin-bottom: .2rem;
}

.ibk-dev-hero-logo {
    display: inline-flex;
    align-items: center;
    background: #fff;
    border: 1px solid var(--primary-border);
    border-radius: 12px;
    padding: .5rem .9rem;
    margin: .5rem 0 .3rem;
}

.ibk-dev-hero-logo img {
    height: 44px;
    max-width: 220px;
    object-fit: contain;
}

/* Dropdowns inside the DARK navbar: the .ibk-nav--dark link colour (pale
   #dce6f8, meant for the navy bar) was winning over .ibk-dropdown's dark
   ink and washing the menu out on its white panel. Higher-specificity
   selectors put readable colours back. */
.ibk-nav.ibk-nav--dark .ibk-dropdown .dropdown-item {
    color: var(--ink);
    font-weight: 500;
}

.ibk-nav.ibk-nav--dark .ibk-dropdown .dropdown-item:hover,
.ibk-nav.ibk-nav--dark .ibk-dropdown .dropdown-item:focus {
    background: var(--primary-soft);
    color: var(--primary);
}

.ibk-nav.ibk-nav--dark .ibk-dropdown .dropdown-toggle {
    color: inherit;
}

/* section labels inside any band dropdown */
.ibk-dropdown .dropdown-header {
    color: var(--ink);
    font-weight: 700;
    font-size: .78rem;
    opacity: .75;
}