/* SaraHome / 莎拉家 — Similar Listings CSS (2026-08-15)
   §R-N+11xx+10 (2026-08-16) — 公眾頁 mobile chain:
   similar-listings 55 行 ship 時無 @media, mobile ≤768 header / grid / badge  ship
   對位 §R-N+62 KISS + §R-N+135.8 selective narrative + cube-dev-sarahome-mobile-search-ui 根因 */

.similar-listings-section {
    margin: 3rem 0 0;
    padding: 2rem 0;
    border-top: 1px solid var(--border-light, #e2e8f0);
}

.similar-listings-header {
    margin-bottom: 1.5rem;
}

.similar-listings-title {
    margin: 0 0 0.25rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary, #1f2937);
}

.similar-listings-subtitle {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-secondary, #6b7280);
}

.similar-listings-grid {
    display: grid;
    /* §R-N+4xxx+8 (2026-09-04, CEO verdict 「同類樓盤排版需要優化一下」):
       舊版 auto-fill + minmax(220px, 1fr) → desktop 1280px 出 5 欄 × 238px,
       每個 card info section 僅得 94px (對位 .listing-card-v2 horizontal layout),
       中文 title 誓迫咗 4 行 (e.g.「永寧廣場 醜裝 3房 1068吃」)。
       改用 explicit 3-2-1 responsive chain + max 3 cols 保証 card content 讀得起。 */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

/* === Tablet (≤1024) === */
/* 2 cols × ~490px → info 換 ~340px, title 2 行內可讀, district / price 換行唔迫 */
@media (max-width: 1024px) {
    .similar-listings-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* === Mobile  (≤768) === */
/* 1 col full-width card → 走 .listing-card-v2 horizontal layout 原本 width
   (手機 366px → thumb 191px / info 172px) 視覺密度比 desktop 5-col 高。
   縮 margin / padding + gap 0.75rem, 對住 mobile 視覺密度。 */
@media (max-width: 768px) {
    .similar-listings-section {
        margin: 2rem 0 0;
        padding: 1.25rem 0;
    }
    .similar-listings-header {
        margin-bottom: 1rem;
    }
    .similar-listings-title {
        font-size: 1.125rem;
    }
    .similar-listings-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    .similar-listings-badge-top {
        font-size: 0.6875rem;
        padding: 0.0625rem 0.4rem;
    }
}

.similar-listings-badge-top {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    background: var(--brand-accent, #f59e0b);
    color: #fff;
    font-size: 0.75rem;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-weight: 500;
}

/* §R-N+4xxx+4 (2026-09-04) — Stretched-link pattern for similar-listings cards
   根因 (CEO verdict 「同類樓盤 現在只能夠觀看並不能按下直接轉跳」):
   .listing-card-overlay CSS rule 只喺 .search-results / .agent-listing-card /
   .favorites-page-v2 3 個 ancestor scope 入面定義, listing_detail 頁嘅
   .similar-listings-section 冇對應 rule, <a class="listing-card-overlay">
   element 0 width + position:static, 用戶 click 卡片 (除咗 0-width text)
   都唔 navigate.

   Playwright disk-verify (MOCK-S-0001 detail page):
   - card 369x160 (whole card)
   - overlay width=0, height=158, position=static (no CSS applied)
   - href set correctly but element 唔 clickable

   修法 (對位 §R-N+274 stretched-link pattern + §R-N+62 KISS):
   - mirror .favorites-page-v2 .listing-card-overlay rule (same parent-relative
     card structure)
   - position:absolute + inset:0 = overlay 蓋滿成個 card
   - z-index:1 = above thumb/info 但 below payment-link (對位 §R-N+99)
   - color:transparent + text-indent + overflow:hidden = 隱藏 overlay 文字但保留 a11y
   - 對位 framework rule: card 必須 position:relative (見 .similar-listings-grid
     > .listing-card-v2 喺 style.css line 1206 「position: relative 確保
     .listing-card-overlay 嘅 absolute 定位」).

   對位 §R-N+138 disk-truth: source-of-truth = web/static/css/similar-listings.css.
   對位 §R-N+73 anti-fraud: 0 URL contract 改動, click 跳轉去 listing detail
   (對位 similar-listings.js renderListings 嘅 href 構建). */
.similar-listings-section .listing-card-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    color: transparent;
    text-indent: -9999em;
    overflow: hidden;
    text-decoration: none;
}
.similar-listings-section .listing-card-overlay:focus-visible {
    outline: 2px solid var(--brand-accent, #f59e0b);
    outline-offset: 2px;
}

/* Unauth favorite UX (2026-08-15 #11) */
.listing-sticky-cta-fav-anon {
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

.listing-sticky-cta-fav-anon:hover {
    background: var(--bg-hover, #f3f4f6);
}