/* ===== Filter Bar ===== */
.filter-bar { background:var(--cream); border-bottom:1px solid var(--sand); padding:0 48px; position:sticky; top:0; z-index:100; transition:box-shadow .3s; }
.filter-bar--scrolled { box-shadow:0 4px 20px rgba(0,0,0,.08); }
.filter-bar__inner { max-width:1200px; margin:0 auto; display:flex; align-items:center; gap:10px; padding:14px 0; }
.filter-bar__search { position:relative; flex:0 0 200px; }
.filter-bar__search-input { width:100%; padding:9px 14px 9px 34px; font-family:var(--font-sans); font-size:14px; color:var(--soft-black); background:var(--white); border:1px solid var(--sand); outline:none; transition:border-color .3s; }
.filter-bar__search-input::placeholder { color:var(--stone); }
.filter-bar__search-input:focus { border-color:var(--accent); }
.filter-bar__search-icon { position:absolute; left:11px; top:50%; transform:translateY(-50%); width:15px; height:15px; color:var(--stone); }

/* ===== Desktop Dropdown ===== */
.fd { position:relative; }
.fd__trigger { display:flex; align-items:center; gap:5px; padding:9px 14px; font-family:var(--font-sans); font-size:13px; font-weight:400; color:var(--dark-gray); background:var(--white); border:1px solid var(--sand); cursor:pointer; transition:all .3s; white-space:nowrap; }
.fd__trigger:hover { border-color:var(--stone); }
.fd__trigger--active { background:var(--soft-black); color:var(--white); border-color:var(--soft-black); }
.fd__count { display:none; min-width:18px; height:18px; font-size:10px; font-weight:600; border-radius:9px; padding:0 5px; text-align:center; line-height:18px; }
.fd__trigger--active .fd__count { display:inline-block; background:rgba(255,255,255,.2); color:var(--white); }
.fd__arrow { width:7px; height:7px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); transition:transform .3s; margin-top:-2px; }
.fd--open .fd__arrow { transform:rotate(-135deg); margin-top:2px; }
.fd__panel { position:absolute; top:calc(100% + 5px); left:0; min-width:260px; max-height:420px; overflow-y:auto; background:var(--white); border:1px solid var(--sand); box-shadow:0 12px 48px rgba(0,0,0,.12); opacity:0; visibility:hidden; transform:translateY(4px); transition:all .25s; z-index:50; }
.fd--open .fd__panel { opacity:1; visibility:visible; transform:translateY(0); }
.fd__section-label { padding:10px 16px 6px; font-size:10px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--accent); border-top:1px solid var(--sand); }
.fd__section-label:first-child { border-top:none; }
.fd__opt { display:flex; align-items:center; gap:10px; padding:8px 16px; font-size:14px; color:var(--dark-gray); cursor:pointer; transition:background .15s; }
.fd__opt:hover { background:var(--cream); }
.fd__opt--sel { background:var(--cream); font-weight:500; color:var(--soft-black); }
.fd__chk { width:15px; height:15px; border:1.5px solid var(--sand); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all .2s; }
.fd__opt--sel .fd__chk { background:var(--soft-black); border-color:var(--soft-black); }
.fd__chk-mark { width:7px; height:4px; border-left:1.5px solid var(--white); border-bottom:1.5px solid var(--white); transform:rotate(-45deg); margin-top:-2px; opacity:0; }
.fd__opt--sel .fd__chk-mark { opacity:1; }
.fd__dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }

/* Sort */
.filter-bar__sort { margin-left:auto; }
.filter-bar__sort select { font-family:var(--font-sans); font-size:14px; color:var(--dark-gray); background:var(--white); border:1px solid var(--sand); padding:9px 36px 9px 14px; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234A4A4A' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; cursor:pointer; }
.filter-bar__sort select:focus { outline:none; border-color:var(--soft-black); }


/* Mobile filter trigger — hidden on desktop */
.mobile-filter-btn { display:none; }

/* Chips */
.chips-wrap { max-width:1200px; margin:0 auto; }
.chips { padding:0 0 10px; display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.chips:empty { display:none; padding:0; }
.chip { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; font-size:12px; color:var(--soft-black); background:var(--white); border:1px solid var(--sand); }
.chip__remove {
    cursor: pointer;
    color: var(--stone);
    font-size: 17px;
    line-height: 1;
    transition: color .2s;
    background: transparent;
    border: transparent;
}
.chip__remove:hover { color:var(--soft-black); }
.chips__clear { font-size:12px; font-weight:500; color:var(--accent); cursor:pointer; border:none; background:none; font-family:var(--font-sans); }
.chips__clear:hover { color:var(--soft-black); }

/* Desktop backdrop */
.backdrop { position:fixed; inset:0; z-index:49; display:none; }
.backdrop--active { display:block; }

/* ===== MOBILE FILTER PANEL =====
   Full-screen overlay matching mobile-nav design language.
   Sharp edges, dark background, accordion sections, X close.
   ================================ */
.mf-panel { 
    position:fixed; top:0; left:0; right:0; bottom:0; z-index:1000;
    opacity:0; visibility:hidden; transition:opacity .4s ease, visibility .4s ease;
}
.mf-panel--open { opacity:1; visibility:visible; }

.mf-panel__overlay {
    position:absolute; inset:0;
    background:linear-gradient(135deg, rgba(26,26,26,.95) 0%, rgba(26,26,26,.92) 50%, rgba(26,26,26,.90) 100%);
}

.mf-panel__content {
    position:relative; z-index:1; height:100%; display:flex; flex-direction:column;
    overflow:hidden;
}

/* Header */
.mf-panel__header {
    display:flex; align-items:center; justify-content:space-between;
    padding:20px 24px; flex-shrink:0;
    border-bottom:1px solid rgba(255,255,255,.1);
}
.mf-panel__title {
    font-family:var(--font-serif); font-weight:300; font-size:24px;
    color:var(--white); text-transform:uppercase; letter-spacing:.03em;
}
.mf-panel__close {
    width:28px; height:28px; position:relative; background:none; border:none; cursor:pointer; padding:0;
}
.mf-panel__close::before, .mf-panel__close::after {
    content:''; position:absolute; left:50%; top:50%; width:20px; height:2px;
    background:var(--white); transition:background .3s;
}
.mf-panel__close::before { transform:translate(-50%,-50%) rotate(45deg); }
.mf-panel__close::after { transform:translate(-50%,-50%) rotate(-45deg); }
.mf-panel__close:hover::before, .mf-panel__close:hover::after { background:var(--accent); }

/* Active count badge */
.mf-panel__active-count {
    font-size:12px; font-weight:500; color:var(--accent);
    letter-spacing:.05em;
}

/* Scrollable filter body */
.mf-panel__body {
    flex:1; overflow-y:auto; padding:0;
    -webkit-overflow-scrolling:touch;
}

/* Filter sections — accordion style */
.mf-section { border-bottom:1px solid rgba(255,255,255,.1); }
.mf-section__trigger {
    display:flex; align-items:center; justify-content:space-between;
    width:100%; padding:16px 24px; background:none; border:none; cursor:pointer;
    font-family:var(--font-serif); font-weight:300; font-size:20px;
    color:var(--white); text-transform:uppercase; letter-spacing:.03em;
    transition:color .3s;
}
.mf-section__trigger:hover { color:var(--accent); }
.mf-section__right { display:flex; align-items:center; gap:10px; }
.mf-section__count {
    font-family:var(--font-sans); font-size:11px; font-weight:600;
    color:var(--accent); letter-spacing:.08em;
}
.mf-section__arrow {
    font-size:16px; color:var(--stone); transition:transform .3s, color .3s;
}
.mf-section__arrow::after { content:'›'; }
.mf-section--open .mf-section__arrow { transform:rotate(90deg); color:var(--accent); }

.mf-section__content {
    max-height:0; overflow:hidden; transition:max-height .4s cubic-bezier(.4,0,.2,1);
}
.mf-section--open .mf-section__content { max-height:2000px; }

.mf-section__inner { padding:4px 24px 16px; }

/* Subsection labels inside mobile panel */
.mf-sublabel {
    font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
    color:var(--accent); margin:12px 0 6px; display:block;
}
.mf-sublabel:first-child { margin-top:0; }

/* Mobile filter option */
.mf-opt {
    display:flex; align-items:center; gap:12px;
    padding:10px 0; cursor:pointer;
    transition:padding-left .2s;
}
.mf-opt:hover { padding-left:6px; }
.mf-opt__chk {
    width:18px; height:18px; border:1.5px solid rgba(255,255,255,.3);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    transition:all .2s;
}
.mf-opt--sel .mf-opt__chk { background:var(--accent); border-color:var(--accent); }
.mf-opt__chk-mark {
    width:8px; height:5px; border-left:2px solid var(--white); border-bottom:2px solid var(--white);
    transform:rotate(-45deg); margin-top:-2px; opacity:0;
}
.mf-opt--sel .mf-opt__chk-mark { opacity:1; }
.mf-opt__dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.mf-opt__label {
    font-family:var(--font-sans); font-size:15px; font-weight:400;
    color:var(--stone); transition:color .2s;
}
.mf-opt--sel .mf-opt__label { color:var(--white); font-weight:500; }

/* Footer with Apply/Clear */
.mf-panel__footer {
    flex-shrink:0; padding:16px 24px;
    border-top:1px solid rgba(255,255,255,.1);
    display:flex; gap:12px;
}
.mf-panel__apply {
    flex:1; padding:14px 24px; font-family:var(--font-sans);
    font-size:13px; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
    background:var(--accent); color:var(--white); border:none; cursor:pointer;
    transition:background .3s;
}
.mf-panel__apply:hover { background:var(--accent-deep); }
.mf-panel__clear {
    padding:14px 24px; font-family:var(--font-sans);
    font-size:13px; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
    background:none; color:var(--stone); border:1px solid rgba(255,255,255,.25);
    cursor:pointer; transition:all .3s;
}
.mf-panel__clear:hover { color:var(--white); border-color:rgba(255,255,255,.5); }

/* ===== Featured Section ===== */
.featured-section { background:var(--white); padding:48px 48px 0; }
.featured-section__inner { max-width:1200px; margin:0 auto; }
.featured-section__header { display:flex; align-items:center; gap:16px; margin-bottom:24px; padding-bottom:12px; border-bottom:2px solid var(--soft-black); }
.featured-section__label { font-size:11px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--soft-black); }
.featured-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }

/* ===== Articles ===== */
.articles-section { background:var(--white); padding:48px 48px 80px; }
.articles-section__inner { max-width:1200px; margin:0 auto; }
.articles-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; padding-bottom:10px; border-bottom:1px solid var(--sand); }
.results-count { font-size:14px; color:var(--stone); }
.results-count strong { color:var(--soft-black); font-weight:500; }
.a-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }

/* Article Card */
.ac { display:flex; flex-direction:column; background:var(--white); border:1px solid var(--sand); transition:all .4s; }
.ac:hover { border-color:transparent; box-shadow:0 12px 40px rgba(0,0,0,.08); transform:translateY(-4px); }
.ac__img { position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--cream); }
.ac__img img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.ac:hover .ac__img img { transform:scale(1.05); }
.ac__badges { position:absolute; top:14px; left:14px; display:flex; gap:6px; }
.ac__type { font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--white); padding:5px 10px; }
.ac__type--market-reports { background:#7a8a9a; }
.ac__type--neighborhood-guides { background:#6b8e6b; }
.ac__type--buyer-intelligence { background:#5a7fb5; }
.ac__type--seller-intelligence { background:#b07a4a; }
.ac__type--relocation { background:#6b8e7b; }
.ac__type--property-knowledge { background:#8a7f75; }
.ac__type--lifestyle { background:#a08050; }
.ac__type--investment-perspective { background:#5a7a5a; }
.ac__featured { position:absolute; top:14px; right:14px; font-size:9px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; background:var(--gold); color:var(--white); padding:4px 9px; }
.ac__body { padding:22px; display:flex; flex-direction:column; flex-grow:1; }
.ac__meta { display:flex; gap:12px; font-size:13px; color:var(--stone); margin-bottom:10px; }
.ac__title { font-family:var(--font-serif); font-weight:300; font-size:19px; color:var(--soft-black); line-height:1.35; margin-bottom:10px; flex-grow:1; }
.ac__title a { color:var(--soft-black); transition:color .3s; }
.ac__title a:hover { color:var(--accent); }
.ac__excerpt { font-size:15px; font-weight:300; color:var(--warm-gray); line-height:1.65; margin-bottom:14px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.ac__foot { display:flex; justify-content:space-between; align-items:center; padding-top:14px; border-top:1px solid var(--sand); margin-top:auto; gap:8px; }
.ac__tags { display:flex; gap:5px; flex-wrap:wrap; }
.ac__tag { font-size:11px; color:var(--accent-deep); border:1px solid var(--sand); padding:2px 7px; background:var(--cream); }
.ac__link { font-size:13px; font-weight:500; color:var(--soft-black); display:flex; align-items:center; gap:5px; transition:all .3s; white-space:nowrap; }
.ac__link:hover { color:var(--accent); gap:8px; }
.ac__link svg { width:15px; height:15px; }

/* Empty */
.empty { text-align:center; padding:80px 24px; grid-column:1/-1; }
.empty__icon { font-size:48px; color:var(--sand); margin-bottom:16px; }
.empty__text { font-family:var(--font-serif); font-size:20px; font-weight:300; color:var(--stone); margin-bottom:16px; }
.empty__btn { font-family:var(--font-sans); font-size:13px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; padding:14px 28px; background:var(--soft-black); color:var(--white); border:none; cursor:pointer; transition:background .3s; }
.empty__btn:hover { background:var(--accent); }


.load-more-wrap{
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

/* ===== RESPONSIVE ===== */
@media (max-width:1024px) {

    .filter-bar { padding:0 32px; }
    .filter-bar__inner { flex-wrap:wrap; gap:8px; padding:12px 0; }
    .filter-bar__search { flex:1 1 100%; order:-1; }
    .featured-section { padding:32px 32px 0; }
    .featured-grid { grid-template-columns:repeat(2,1fr); }
    .articles-section { padding:32px 32px 60px; }
    .a-grid { grid-template-columns:repeat(2,1fr); }
}

@media (max-width:768px) {


    /* Filter bar — mobile layout */
    .filter-bar { padding:0 24px; }
    .filter-bar__inner { padding:10px 0; gap:8px; flex-wrap:wrap; }

    /* Line 1: search full width */
    .filter-bar__search { flex:1 1 100%; order:0; }

    /* Line 2: filters + sort, equal width, side by side */
    .mobile-filter-btn {
        display:flex; align-items:center; justify-content:center; gap:6px;
        padding:9px 16px; font-family:var(--font-sans); font-size:13px;
        font-weight:500; color:var(--dark-gray); background:var(--white);
        border:1px solid var(--sand); cursor:pointer; transition:all .3s;
        order:1; flex:1 1 0; min-width:0;
    }
    .mobile-filter-btn:hover { border-color:var(--stone); }
    .mobile-filter-btn--active { background:var(--soft-black); color:var(--white); border-color:var(--soft-black); }
    .mobile-filter-btn svg { width:16px; height:16px; flex-shrink:0; }
    .mobile-filter-btn__count {
        min-width:18px; height:18px; font-size:10px; font-weight:600;
        border-radius:9px; padding:0 5px; text-align:center; line-height:18px;
        display:none;
    }
    .mobile-filter-btn--active .mobile-filter-btn__count {
        display:inline-block; background:rgba(255,255,255,.2); color:var(--white);
    }

    .filter-bar__sort { order:2; flex:1 1 0; min-width:0; margin-left:0; }
    .filter-bar__sort select { width:100%; font-size:13px; padding:9px 32px 9px 12px; }

    /* Hide desktop dropdowns on mobile */
    .fd { display:none !important; }
    .backdrop { display:none !important; }

    .featured-section { padding:24px 24px 0; }
    .featured-grid { grid-template-columns:1fr; }
    .articles-section { padding:24px 24px 48px; }
    .a-grid { grid-template-columns:1fr; }
}