/* SaraHome — 區域指南 SEO 內容頁 (v1.37 F2, 2026-10-24)
   對位 §R-N+416: layout 屬性只喺呢度定義一次 (guides 頁專屬 selector,
   唔准喺其他 CSS file 重複定義 .guide-* / .region-guide-*)。
   對位 §R-N+140: 全部用 --sarahome-v3-* tokens, 唔准 hardcode 色值。 */

.region-guide,
.region-guides-hub {
    max-width: 860px;
    margin: 0 auto;
    padding: var(--sarahome-v3-space-4, 24px) 0 var(--sarahome-v3-space-6, 48px);
}

/* Breadcrumb */
.region-guide-breadcrumb {
    font-size: var(--sarahome-v3-font-sm, 14px);
    color: var(--sarahome-v3-color-text-secondary);
    margin-bottom: var(--sarahome-v3-space-3, 16px);
}
.region-guide-breadcrumb a {
    color: var(--sarahome-v3-color-text-secondary);
    text-decoration: none;
}
.region-guide-breadcrumb a:hover {
    color: var(--sarahome-v3-color-accent);
    text-decoration: underline;
}

/* Hub 卡片柵欄 */
.guide-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sarahome-v3-space-4, 20px);
    margin-top: var(--sarahome-v3-space-4, 20px);
}
.guide-card {
    display: block;
    background: var(--sarahome-v3-color-surface);
    border: 1px solid var(--sarahome-v3-border);
    border-radius: 12px;
    padding: var(--sarahome-v3-space-4, 20px);
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.guide-card:hover {
    border-color: var(--sarahome-v3-color-accent);
    box-shadow: 0 6px 18px var(--sarahome-v3-shadow-color-strong);
}
.guide-card-kind {
    display: inline-block;
    font-size: var(--sarahome-v3-font-xs, 12px);
    color: var(--sarahome-v3-color-accent);
    border: 1px solid var(--sarahome-v3-color-accent);
    border-radius: 999px;
    padding: 2px 10px;
    margin-bottom: var(--sarahome-v3-space-2, 8px);
}
.guide-card h2 {
    font-size: var(--sarahome-v3-font-lg, 20px);
    margin: 0 0 var(--sarahome-v3-space-2, 8px);
    color: var(--sarahome-v3-color-fg);
}
.guide-card p {
    font-size: var(--sarahome-v3-font-sm, 14px);
    color: var(--sarahome-v3-color-text-secondary);
    margin: 0;
    line-height: 1.7;
}

/* 單區指南 */
.region-guide h1 {
    font-size: var(--sarahome-v3-font-xl, 28px);
    margin: 0 0 var(--sarahome-v3-space-3, 12px);
}
.region-guide-lead {
    font-size: var(--sarahome-v3-font-md, 16px);
    line-height: 1.9;
    color: var(--sarahome-v3-color-fg);
    margin-bottom: var(--sarahome-v3-space-4, 20px);
}

/* 即時盤源統計 (數字 = DB 真值, 口徑對位 /search?district=) */
.guide-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sarahome-v3-space-4, 20px);
    background: var(--sarahome-v3-color-surface);
    border: 1px solid var(--sarahome-v3-border);
    border-radius: 12px;
    padding: var(--sarahome-v3-space-4, 20px);
    margin-bottom: var(--sarahome-v3-space-4, 20px);
}
.guide-stats-item {
    min-width: 120px;
}
.guide-stats-item strong {
    display: block;
    font-size: var(--sarahome-v3-font-lg, 20px);
    color: var(--sarahome-v3-color-accent);
}
.guide-stats-item span {
    font-size: var(--sarahome-v3-font-sm, 14px);
    color: var(--sarahome-v3-color-text-secondary);
}

/* 匯總指南逐區 breakdown (每行 count = 該行搜尋目標頁所見, v1.33 口徑契約) */
.guide-breakdown {
    background: var(--sarahome-v3-color-surface);
    border: 1px solid var(--sarahome-v3-border);
    border-radius: 12px;
    padding: var(--sarahome-v3-space-4, 20px);
    margin-bottom: var(--sarahome-v3-space-4, 20px);
}
.guide-breakdown h2 {
    font-size: var(--sarahome-v3-font-md, 16px);
    margin: 0 0 var(--sarahome-v3-space-3, 12px);
}
.guide-breakdown-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sarahome-v3-space-2, 8px) var(--sarahome-v3-space-4, 20px);
    list-style: none;
    margin: 0;
    padding: 0;
}
.guide-breakdown-list li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 1px dashed var(--sarahome-v3-border);
    padding: 6px 0;
    font-size: var(--sarahome-v3-font-sm, 14px);
}
.guide-breakdown-list a {
    color: var(--sarahome-v3-color-fg);
    text-decoration: none;
}
.guide-breakdown-list a:hover {
    color: var(--sarahome-v3-color-accent);
    text-decoration: underline;
}
.guide-breakdown-count {
    color: var(--sarahome-v3-color-text-secondary);
    white-space: nowrap;
}

/* 內容 section */
.guide-section {
    margin-bottom: var(--sarahome-v3-space-4, 20px);
}
.guide-section h2 {
    font-size: var(--sarahome-v3-font-lg, 20px);
    margin: 0 0 var(--sarahome-v3-space-2, 8px);
    padding-left: var(--sarahome-v3-space-2, 8px);
    border-left: 4px solid var(--sarahome-v3-color-accent);
}
.guide-section p {
    line-height: 1.9;
    margin: 0;
}

/* 相關指南 + CTA + 來源註腳 */
.guide-related {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sarahome-v3-space-2, 8px);
    margin: var(--sarahome-v3-space-4, 20px) 0;
}
.guide-related a {
    border: 1px solid var(--sarahome-v3-border);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: var(--sarahome-v3-font-sm, 14px);
    text-decoration: none;
    color: var(--sarahome-v3-color-fg);
}
.guide-related a:hover {
    border-color: var(--sarahome-v3-color-accent);
    color: var(--sarahome-v3-color-accent);
}
.guide-cta {
    margin: var(--sarahome-v3-space-4, 20px) 0;
}
.guide-sources {
    font-size: var(--sarahome-v3-font-xs, 12px);
    color: var(--sarahome-v3-color-text-tertiary);
    line-height: 1.8;
    border-top: 1px solid var(--sarahome-v3-border);
    padding-top: var(--sarahome-v3-space-3, 12px);
    margin-top: var(--sarahome-v3-space-5, 32px);
}

/* Mobile: 單欄 (對位 §R-N+416 — 本頁 selector 只喺本檔定義) */
@media (max-width: 768px) {
    .guide-grid,
    .guide-breakdown-list {
        grid-template-columns: 1fr;
    }
}