/* SaraHome — Featured listings horizontal scroll-snap rail CSS (§R-N+26xx Wave 5.5)
   對位 framework rule §R-N+62 KISS + §R-N+146 後寫後贏 + §R-N+22xx Plan B precedent:
   必須 link 喺 style.css 之後、mobile.css 之前

   §R-N+26xx Wave 5.5 (2026-08-26) — featured-rail cluster extract:
   抽 style.css L3870-L3952 (.featured-listings-rail-wrap + .featured-listings-rail +
   .listing-grid-rail + .rail-scroll-hint + @media mobile )
   對位 §R-N+22xx Plan B 根因 precedent (single source of truth) */

/* ============================================================
   §R-N+165 (CEO 2026-07-27) — 精選樓盤 horizontal scroll-snap rail
   §R-N+62 KISS + §R-N+138 disk-truth:
   - CEO 投訴「精選樓盤沒有了下一頁設計」→ 用 CSS scroll-snap rail 補返 next-page affordance
   - 純 CSS, 0 JS / 0 endpoint 改動 (§R-N+62 KISS)
   - 單行 horizontal scroll, scroll-snap-type: x mandatory, scroll-snap-align: start
   - 對位 MaliMali rail + Squarefoot audit
   - 左右 linear-gradient mask image 顯示「仲有更多」affordance
   - 加 .rail-scroll-hint text 對位長者/普通 user explicit affordance
   - desktop card 280px, mobile card 78vw (對位 §R-N+99 P4 根因)
   - 守住 `.listing-grid-v2 / .listing-grid-v9n` 不受影響 (search / detail page 仍用) */
.featured-listings-rail-wrap {
    position: relative;
}

.featured-listings-rail {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-padding: var(--sarahome-v3-space-4);
    padding: 0.25rem 0 0.75rem;
    margin: 0 -1.25rem;       /* §R-N+164 — 抵消 container padding, rail 出血到 section edge */
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    /* §R-N+165 — 左右 fade mask 顯示「仲有更多」affordance (CSS-only, 0 JS) */
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 32px, black calc(100% - 32px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, black 32px, black calc(100% - 32px), transparent 100%);
}

.featured-listings-rail::-webkit-scrollbar {
    height: 6px;
}

.featured-listings-rail::-webkit-scrollbar-track {
    background: transparent;
}

.featured-listings-rail::-webkit-scrollbar-thumb {
    background: var(--sarahome-v3-border);
    border-radius: 3px;
}

.listing-grid-rail {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--sarahome-v3-space-4);
    /* §R-N+62 KISS: 用 flex 而非 grid 對位 horizontal scroll */
}

.listing-grid-rail .listing-card-link {
    flex: 0 0 280px;          /* §R-N+165 — fixed card width 對位 snap stop */
    scroll-snap-align: start;
    min-width: 0;
}

/* §R-N+165 — mobile rail card width 78vw (§R-N+138 disk-truth MaliMali 根因) */
@media (max-width: 768px) {
    .listing-grid-rail .listing-card-link {
        flex-basis: 78vw;
    }
    .featured-listings-rail {
        scroll-padding-left: 1rem;
    }
}

.rail-scroll-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sarahome-v3-space-2);
    margin-top: 0.75rem;
    padding: var(--sarahome-v3-space-2) 0;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    /* §R-N+165 — 對位 §R-N+70 正式書面語 */
}

.rail-scroll-hint svg {
    flex-shrink: 0;
    opacity: 0.6;
}