/* SaraHome — Home page (extracted from style.css 2026-08-11)
   Quick tags / inline mortgage calculator / homepage responsive.
   分拆規則: 必須 link 喺 style.css 之後、mobile.css 之前 (對位 §R-N+146 後寫後贏).
   註: .mortgage-inline-subtitle base rule 留喺 style.css (AA override 後寫必須贏). */

/* === Quick Tags === */
.hero-v3-quick-tags {
    /* §R-N+380 (2026-08-06): CEO verdict margin-top 1.25rem → 0.75rem (12px)
       對位 mobile chain (line 9301 已 ship 0.75rem), 兩 variant 一致.
       對位 §R-N+62 KISS: 1 surgical line ship. */
    margin-top: 0.75rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--sarahome-v3-space-2);
    flex-wrap: wrap;
}
.quick-tag-label {
    font-size: var(--sarahome-v3-font-sm);
    color: var(--sarahome-v3-color-text-secondary);
    font-weight: 500;
    margin-right: 0.25rem;
}
.quick-tag {
    display: inline-flex;
    align-items: center;
    min-height: var(--sarahome-v3-touch-target-sm);
    padding: 0.4rem 0.85rem;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid var(--sarahome-v3-border);
    border-radius: 20px;
    font-size: 0.8125rem;
    color: var(--sarahome-v3-color-fg);
    text-decoration: none;
    transition: all var(--sarahome-v3-duration-fast) var(--sarahome-v3-easing);
    cursor: pointer;
    font-family: inherit;
}
.quick-tag:hover {
    background: var(--sarahome-v3-color-accent);
    color: #fff;
    border-color: var(--sarahome-v3-color-accent);
    transform: translateY(-1px);
    text-decoration: none;
}
.quick-tag-more {
    background: transparent;
    color: var(--sarahome-v3-color-text-secondary);
    border-style: dashed;
}
.quick-tag-more:hover {
    background: transparent;
    color: var(--sarahome-v3-color-accent);
    border-color: var(--sarahome-v3-color-accent);
    border-style: solid;
}
.quick-tag-count {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0 0.4rem;
    border-radius: 10px;
    background: var(--sarahome-v3-color-accent);
    color: #fff;
    font-size: var(--sarahome-v3-font-xs);
    font-weight: 600;
    line-height: 1.5;
    vertical-align: middle;
    min-width: 18px;
    text-align: center;
}

/* === Inline Mortgage Calculator === */
.mortgage-inline-v3 {
    padding: var(--sarahome-v3-space-12) 0;
    background: var(--sarahome-v3-surface-section-alt);
}
.mortgage-inline-inner {
    max-width: 900px;
    margin: 0 auto;
}
.mortgage-inline-header {
    text-align: center;
    margin-bottom: 2rem;
}
.mortgage-inline-title {
    display: inline-flex;
    align-items: center;
    gap: var(--sarahome-v3-space-2);
    font-size: var(--sarahome-v3-font-xl);
    font-weight: 600;
    color: var(--sarahome-v3-color-fg);
    margin: 0 0 var(--sarahome-v3-space-2);
}
.mortgage-inline-title svg {
    color: var(--sarahome-v3-color-accent);
}
.mortgage-inline-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sarahome-v3-space-8);
    background: #fff;
    border-radius: var(--sarahome-v3-radius-md);
    padding: var(--sarahome-v3-space-8);
    border: 1px solid var(--sarahome-v3-border);
    box-shadow: var(--sarahome-v3-shadow-card);
}
.mortgage-inline-fields {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sarahome-v3-space-4);
}
.mortgage-inline-field label {
    display: block;
    font-size: 0.8125rem;
    color: var(--sarahome-v3-color-text-secondary);
    margin-bottom: 0.35rem;
    font-weight: 500;
}
.mortgage-inline-field input {
    width: 100%;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--sarahome-v3-border);
    border-radius: var(--sarahome-v3-radius-sm);
    font-size: 1rem;
    background: #fff;
    color: var(--sarahome-v3-color-fg);
    transition: border-color var(--sarahome-v3-duration-fast);
    font-family: inherit;
}
.mortgage-inline-field input:focus {
    outline: none;
    border-color: var(--sarahome-v3-color-accent);
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.1);
}
.mortgage-inline-result {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #FFF7ED 0%, var(--sarahome-v3-status-error-bg) 100%);
    border-radius: var(--sarahome-v3-radius-md);
    padding: var(--sarahome-v3-space-8);
    text-align: center;
}
.mortgage-inline-result-label {
    font-size: 0.8125rem;
    color: var(--sarahome-v3-color-text-secondary);
    margin-bottom: 0.5rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.mortgage-inline-result-value {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--sarahome-v3-color-cta);
    line-height: 1.2;
    margin-bottom: 0.5rem;
    font-feature-settings: 'tnum';
}
.mortgage-inline-result-formula {
    /* §R-N+4xx (2026-08-07): Hidden — users don't need to see the formula */
    display: none;
}
.mortgage-inline-link {
    display: inline-block;
    font-size: var(--sarahome-v3-font-sm);
    color: var(--sarahome-v3-color-accent);
    text-decoration: none;
    font-weight: 500;
}
.mortgage-inline-link:hover {
    text-decoration: underline;
}

/* === Responsive === */
@media (max-width: 768px) {
    .hero-v3-quick-tags {
        justify-content: flex-start;
        margin-top: 0.75rem;
        gap: 0.375rem;
    }
    .quick-tag {
        display: inline-flex;
        align-items: center;
        min-height: var(--sarahome-v3-touch-target-sm);
        font-size: var(--sarahome-v3-font-xs);
        padding: 0.25rem 0.65rem;
    }
    .nav-toggle {
        width: var(--sarahome-v3-touch-target);
        height: var(--sarahome-v3-touch-target);
        padding: 10px 8px;
    }
    .mortgage-inline-v3 {
        padding: var(--sarahome-v3-space-6) 0;
    }
    .mortgage-inline-header {
        margin-bottom: 1rem;
    }
    .mortgage-inline-title {
        font-size: 1.375rem;
    }
    .mortgage-inline-grid {
        grid-template-columns: 1fr;
        padding: var(--sarahome-v3-space-4);
        gap: var(--sarahome-v3-space-4);
    }
    .mortgage-inline-fields {
        /* §R-N+4xx+48 (2026-08-12) — mobile mortgage 2×2 fields density
           根因 (live DOM audit 390x844): 4 field 全 1-col stack, mortgage section 655px
           = 全頁最長 section (26%). 2×2 grid 每 field ~150px 仍夠 44px input + label,
           保留 44px tap target (對位 §P-MD-05), section 655 → ~495px (-24%).
           對位 §R-N+62 KISS 1 commit 1 根因 + §R-N+290 style consistency
           (search 頁 §R-N+4xx+43 mobile 2-col compact 同 pattern). */
        grid-template-columns: repeat(2, 1fr);
        gap: var(--sarahome-v3-space-3);
    }
    .mortgage-inline-field input {
        min-height: 44px;
        padding: 0.5rem 0.625rem;
    }
    .mortgage-inline-result {
        min-height: 125px;
        padding: var(--sarahome-v3-space-4);
    }
    .mortgage-inline-result-value {
        font-size: 1.75rem;
        margin-bottom: 0.1rem;
    }
    .mortgage-inline-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 30px;
        padding: 0 0.5rem;
    }
}

/* Phase 3 — Desktop homepage efficiency.
   2026-09-15 §R-N+4xxx+40: .featured-v3-carousel-low-inventory rule 已刪 —
   該 class 只由舊 featured-carousel.js pagination 邏輯 add (已隨箭嘴/paged
   carousel 移除, 對位 style.css §R-N+4xxx+40) → dead CSS。 */
@media (min-width: 1024px) {
    .mortgage-inline-v3 {
        padding: var(--sarahome-v3-space-8) 0;
    }

    .mortgage-inline-header {
        margin-bottom: 1rem;
    }

    .mortgage-inline-grid {
        gap: 1.25rem;
        padding: 1.25rem;
    }

    .mortgage-inline-fields {
        gap: var(--sarahome-v3-space-3);
    }

    .mortgage-inline-result {
        padding: 1.25rem;
    }
}

/* ============================================================
   §R-N+8xx+2 (2026-08-12) Plan C Plus C-2: home.css 補完
   forward-only migration — 補 hero-v3 / featured-v3 / categories-v3
   0 抽 style.css (對位 §7.3 forward-only pattern)
   ============================================================ */

/* === Hero === */
.hero-v3 {
    padding: 3rem 0 2rem;
    background: linear-gradient(135deg,
        var(--sarahome-v3-hero-gradient-from) 0%,
        var(--sarahome-v3-hero-gradient-to) 100%);
}

.hero-v3-inner {
    max-width: 1024px;
    margin: 0 auto;
    padding: 0 var(--sarahome-v3-space-4);
}

.hero-v3-title {
    font-size: var(--sarahome-v3-font-xl, 1.5rem);
    font-weight: 700;
    color: var(--sarahome-v3-color-fg);
    margin: 0 0 var(--sarahome-v3-space-2);
    line-height: 1.2;
}

.hero-v3-subtitle {
    font-size: var(--sarahome-v3-font-base, 1rem);
    color: var(--sarahome-v3-color-text-secondary);
    margin: 0 0 var(--sarahome-v3-space-4);
}

/* §R-N+23xx+9 (2026-08-21) — search row 抽去 container 層，full-width
   hero-v3-inner 只放 title + subtitle (max-width=1024px)，
   search row + quick tags 放 container 層 (max-width=1280px full-width). */
.hero-v3-search-container {
    max-width: var(--sarahome-v3-container, 1280px);
    margin: 0 auto;
    padding: 0 var(--sarahome-v3-space-4);
}

/* §R-N+23xx+6 (2026-08-20, CEO verdict) — desktop hero search 一行化.
   舊: .hero-v3-search-row flex-direction: column (4 段 stack ~230px, 版面範圍過大)
      + .hero-v3-search 外層卡 + .hero-v3-search-row 內層卡 double card.
   新: 單一 row (地區 + 類型 + 關鍵字 + 買盤/租盤 一排), 外層 wrapper 去卡化,
   row 自己係唯一 card surface. 48px control height 保留 (§R-N+219).
   Mobile ≤768 0 改動 (mobile.css .hero-v3 .hero-v3-search display:none 守住,
   §R-N+8xx+11 pill 接管). */
.hero-v3-search {
    background: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
}

/* §R-N+23xx+10 (2026-08-21, CEO verdict C) — desktop 搜尋卡 surface.
   為 desktop 搜尋 row (4 欄位) 加白色搜尋卡, 視覺歸組 + 浮起層次,
   對位 House730 浮動搜尋卡. 桌面唯一 card surface (row 自己唔再係 surface).
   Token-based 100% (bg/shadow/radius/padding), 對位 §R-N+62 KISS + §R-N+290.
   Mobile ≤768 0 改動: desktop form 已被 mobile.css display:none 隱藏,
   呢張 card 只包 desktop form, mobile pill 喺 card 外不受影響. */
.hero-v3-search-card {
    background: var(--sarahome-v3-surface-card);
    border-radius: var(--sarahome-v3-radius-lg, 16px);
    box-shadow: var(--sarahome-v3-shadow-card, 0 2px 8px var(--sarahome-v3-shadow-color-soft), 0 1px 2px var(--sarahome-v3-shadow-color-medium));
    padding: var(--sarahome-v3-space-4, 1rem);
}

.hero-v3-search-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: var(--sarahome-v3-space-2);
}

.hero-v3-search-field {
    flex: 0.8 1 0;
    min-width: 0;
}

.hero-v3-search-field-wide {
    flex: 2.4 1 0;
}

/* §R-N+23xx+7 (2026-08-20, CEO verdict 🅰) — desktop hero district chip selector.
   地區 dropdown 改為 inline chip row, 主要 4 個快速入口直接 click 選擇,
   「更多▾」trigger 保留完整 mega-dropdown. Keyword/type/intent 保持不變.
   Mobile ≤768 0 改動 (mobile.css display:none + pill 接管). */

/* District chips fill available space; type + keyword + actions keep their size
   §R-N+23xx+9b: .district-chip-more-wrap fills .hero-v3-district-chips,
   .district-chip-more fills its wrapper (width:100%) for alignment.
   §R-N+23xx+10 (2026-08-21, CEO verdict): 買盤/租盤按鈕要清晰可見、多啲位,
   收 district flex 1.8 → 1.2 騰位, actions 改 grow 分多啲位俾按鈕 (對位 §R-N+290). */
.hero-v3-district-chips {
    flex: 1.2 1 0;
    min-width: 0;
}

.district-chip-more-wrap {
    flex: 1 1 0;
    min-width: 0;
}

.district-chip-more {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: var(--sarahome-v3-touch-target, 44px);
    padding: 0 var(--sarahome-v3-space-3, 0.75rem);
    border: 1px solid var(--sarahome-v3-border);
    border-radius: var(--sarahome-v3-radius-sm, 4px);
    background: var(--sarahome-v3-surface-card);
    color: var(--sarahome-v3-color-fg);
    font-size: var(--sarahome-v3-font-sm, 0.875rem);
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    text-align: left;
}

.district-chip-more .mega-dropdown-chevron {
    transition: transform 0.2s ease;
}

.district-chip-more[aria-expanded="true"] .mega-dropdown-chevron {
    transform: rotate(180deg);
}

.district-chip {
    /* Inherit same visual as hero-v3-search-input for consistency */
    min-height: var(--sarahome-v3-touch-target, 44px);
    padding: 0 var(--sarahome-v3-space-3, 0.75rem);
    border: 1px solid var(--sarahome-v3-border);
    border-radius: var(--sarahome-v3-radius-sm, 4px);
    background: var(--sarahome-v3-surface-card);
    color: var(--sarahome-v3-color-fg);
    font-size: var(--sarahome-v3-font-sm, 0.875rem);
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.district-chip:hover {
    background: var(--sarahome-v3-color-accent-light);
    border-color: var(--sarahome-v3-color-cta);
    color: var(--sarahome-v3-color-cta);
}

.district-chip-active {
    background: var(--sarahome-v3-color-cta);
    border-color: var(--sarahome-v3-color-cta);
    color: #FFFFFF;
    font-weight: 600;
}

.district-chip-active:hover {
    background: var(--sarahome-v3-color-cta-dark);
    border-color: var(--sarahome-v3-color-cta-dark);
    color: #FFFFFF;
}

.hero-v3-search-field[data-mega-dropdown] {
    flex: 1 1 0;
    min-width: 0;
}

/* Remove duplicate .hero-v3-search-actions — single rule
   §R-N+23xx+10 (2026-08-21, CEO verdict): actions 改 grow (1 1 auto) 分多啲位俾
   買盤/租盤按鈕清晰可見, 唔再只取內容寬 115px. */
.hero-v3-search-actions {
    display: flex;
    flex: 1 1 auto;
    gap: var(--sarahome-v3-space-2, 0.5rem);
    margin-top: 0;
}

/* §R-N+23xx+10c (2026-08-21, CEO verdict): 關鍵字輸入框放長一點 (闊度, 非高度).
   收 district (1.2→1.0) + type (1.0→0.8) flex, 加 keyword (1.6→2.4) flex,
   令關鍵字欄分多啲位. 高度維持 style.css §R-N+219 統一 48px 唔動.
   手機 form 喺 mobile.css display:none, 唔影響 mobile。 */
.hero-v3-district-chips {
    flex: 1.0 1 0;
    min-width: 0;
}

.hero-v3-submit {
    flex: 1;
    min-height: var(--sarahome-v3-touch-target, 44px);
    padding: 0 var(--sarahome-v3-space-4, 1rem);
    border: none;
    border-radius: var(--sarahome-v3-radius-sm, 4px);
    font-size: var(--sarahome-v3-font-sm, 0.875rem);
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.hero-v3-submit-buy {
    background: var(--sarahome-v3-color-cta);
    color: #FFFFFF;
}

.hero-v3-submit-rent {
    background: var(--sarahome-v3-color-accent);
    color: #FFFFFF;
}

.hero-v3-submit:hover { opacity: 0.9; }

/* === Featured === */
.featured-v3 {
    padding: 2.5rem 0;
    background: var(--sarahome-v3-surface-bg);
}

.featured-v3-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: var(--sarahome-v3-container, 1280px);
    margin: 0 auto var(--sarahome-v3-space-4);
    padding: 0 var(--sarahome-v3-space-4);
}

/* §R-N+35xx (2026-08-31) — P2 UX: property_type filter tabs
   1 排 pill button (全部 / 住宅 / 車位 / 商舗 / 寫字樓 / 工廈), active state orange border. */
.featured-v3-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    max-width: var(--sarahome-v3-container, 1280px);
    margin: 0 auto var(--sarahome-v3-space-4);
    padding: 0 var(--sarahome-v3-space-4);
}
.featured-v3-tab {
    appearance: none;
    border: 1px solid var(--sarahome-v3-border);
    background: var(--sarahome-v3-surface-card);
    color: var(--sarahome-v3-color-text-secondary);
    padding: 0.4375rem 1rem;
    font-size: 0.8125rem;
    font-weight: 500;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.featured-v3-tab:hover {
    /* §R-N+26xx Wave 6.1 closure: token guaranteed loaded via _CSS_CHAIN, drop redundant fallback */
    border-color: var(--sarahome-v3-color-cta);
    color: var(--sarahome-v3-color-cta);
}
.featured-v3-tab.active {
    background: var(--sarahome-v3-color-cta);
    color: #fff;
    border-color: var(--sarahome-v3-color-cta);
}
/* Filter: hide cards that don't match active tab */
.featured-v3-card[hidden-by-filter] {
    display: none;
}

.featured-v3-title {
    font-size: var(--sarahome-v3-font-lg, 1.25rem);
    font-weight: 600;
    color: var(--sarahome-v3-color-fg);
    margin: 0;
}

.featured-v3-view-all {
    color: var(--sarahome-v3-color-accent);
    text-decoration: none;
    font-size: var(--sarahome-v3-font-sm, 0.875rem);
    font-weight: 500;
}

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

.featured-v3-carousel {
    position: relative;
    max-width: var(--sarahome-v3-container, 1280px);
    margin: 0 auto;
    /* 2026-09-15 §R-N+4xxx+40: padding 清 0 (原本 0 space-4) — 對位精選 section
       卡邊 (arrow 已移除, 唔再需要 inset 避箭嘴; 否則 latest grid 比 curated
       多 12.8px 內縮 → 欄寬 283 vs 298, 展示方式唔一致, live E2E 實拍捕到) */
    padding: 0;
}

.featured-v3-viewport {
    overflow: hidden;
}

@media (min-width: 769px) {
    /* 2026-09-15 §R-N+4xxx+40: 欄數一律由 style.css 定義 (base 4 欄 / tablet
       769-1024 2 欄 / mobile ≤768 rail)。本檔 (source-order 後於 style.css)
       舊有 3 欄 rule 令 tablet 永遠 3 欄 → CEO「同精選一致」verdict 失效,
       live E2E 900px 實拍捕到 (對位 §R-N+416: 同一 selector 3 處定義) */
}

.featured-v3-empty {
    text-align: center;
    padding: var(--sarahome-v3-space-6);
    color: var(--sarahome-v3-color-text-secondary);
}

/* === Categories === */
.categories-v3 {
    padding: 2.5rem 0;
    background: var(--sarahome-v3-surface-card);
}

.categories-v3-title {
    font-size: var(--sarahome-v3-font-lg, 1.25rem);
    font-weight: 600;
    color: var(--sarahome-v3-color-fg);
    margin: 0 auto var(--sarahome-v3-space-4);
    max-width: var(--sarahome-v3-container, 1280px);
    padding: 0 var(--sarahome-v3-space-4);
}

.categories-v3-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sarahome-v3-space-3);
    max-width: var(--sarahome-v3-container, 1280px);
    margin: 0 auto;
    padding: 0 var(--sarahome-v3-space-4);
}

.categories-v3-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--sarahome-v3-space-3);
    background: var(--sarahome-v3-surface-section-alt);
    border: 1px solid var(--sarahome-v3-border);
    border-radius: var(--sarahome-v3-radius-md, 8px);
    text-decoration: none;
    color: var(--sarahome-v3-color-fg);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    min-height: var(--sarahome-v3-touch-target, 44px);
}

.categories-v3-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
    text-decoration: none;
}

.categories-v3-card-icon {
    width: 36px;
    height: 36px;
    margin-bottom: var(--sarahome-v3-space-1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.categories-v3-card-title {
    font-size: var(--sarahome-v3-font-sm, 0.875rem);
    font-weight: 500;
    text-align: center;
}

.categories-v3-card-count {
    font-size: var(--sarahome-v3-font-xs, 0.75rem);
    color: var(--sarahome-v3-color-text-secondary);
    margin-top: 0.125rem;
}

/* ============================================================
   §R-N+8xx+10 (2026-08-12) — House730-style mobile icon strip
   兩排入口騎跨 hero 底邊 (mobile ≤768 only, 對位 dual-wrapper
   mobile-only pattern). Base rule display:none; mobile.css
   @media ≤768 override 顯示 + 全部樣式. Desktop 0 改動.
   ============================================================ */
.hero-v3-icons {
    display: none;
}

/* §R-N+8xx+11 (2026-08-12) — mobile 單欄 pill 搜尋 (CEO verdict 方案 A).
   Base rule display:none (desktop 用 3-field .hero-v3-search);
   mobile.css @media ≤768 顯示 + 隱藏 desktop form. */
.hero-v3-search-mobile {
    display: none;
}