/* SaraHome — Tags pages (extracted from style.css 2026-08-11)
   Tag chip / tag detail / tag cloud + tag-detail mobile overrides (§R-N+416).
   分拆規則: 必須 link 喺 style.css 之後、mobile.css 之前 (對位 §R-N+146 後寫後贏). */

/* ============================================================
   §R-N+312 (2026-08-01) Ship-O commit 7 — Tag chip + category icon
   對位 §R-N+140 dark var system: --sarahome-v3-* tokens
   ============================================================ */
.listing-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: var(--sarahome-v3-color-bg);
    border: 1px solid var(--sarahome-v3-border);
    border-radius: 999px;
    color: var(--sarahome-v3-color-fg);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.15s ease;
}
.listing-tag:hover {
    background: var(--sarahome-v3-color-accent);
    color: #FFFFFF;
    border-color: var(--sarahome-v3-color-accent);
}
.listing-tag-icon {
    font-size: 1rem;
    line-height: 1;
}
.listing-tag-label {
    white-space: nowrap;
}

/* ============================================================
   §R-N+315 (2026-08-01) Ship-O commit 10 — Tag detail page
   對位 §R-N+140 dark var system
   §R-N+416 (2026-08-07) — Plan R tag 根因 UI 修:
   - .tag-detail-header padding 2rem → 3rem + 加 gradient 底色 對位 luxury
   - .tag-detail-icon 加 display: inline-block + margin-right 對位 ship 
   - .tag-detail-title 加大 2rem → 2.5rem 對位 §R-N+135.10 hero 大字 chain
   - .tag-detail-category pill 加大 + gradient 對位 §R-N+164 chain
   - .search-results-grid chain: 加 multi-column chain
     (對位 §R-N+164 1280px chain, 1fr → repeat(auto-fill, minmax(280px, 1fr)))
   ============================================================ */
.tag-detail-header {
    padding: var(--sarahome-v3-space-12) 0;
    border-bottom: 1px solid var(--sarahome-v3-border);
    margin-bottom: 2.5rem;
    background: linear-gradient(135deg, var(--sarahome-v3-surface-card) 0%, var(--sarahome-v3-color-bg) 100%);
    border-radius: var(--sarahome-v3-radius-lg, 0.5rem);
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
.tag-detail-icon {
    display: inline-block;
    font-size: 3.5rem;
    line-height: 1;
    margin: 0 1rem 0.5rem 0;
    vertical-align: middle;
}
.tag-detail-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--sarahome-v3-color-fg);
    margin: 0 0 0.5rem 0;
    display: inline-block;
    vertical-align: middle;
}
.tag-detail-meta {
    display: flex;
    align-items: center;
    gap: var(--sarahome-v3-space-4);
    font-size: 0.9375rem;
    color: var(--sarahome-v3-color-text-secondary);
    margin: 0 0 0.75rem 0;
    flex-wrap: wrap;
}
.tag-detail-category {
    display: inline-block;
    padding: 0.25rem 0.875rem;
    background: linear-gradient(135deg, var(--sarahome-v3-color-accent) 0%, var(--sarahome-v3-color-cta) 100%);
    color: #FFFFFF;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 600;
}
.tag-detail-count {
    font-weight: 600;
    color: var(--sarahome-v3-color-fg);
}
.tag-detail-description {
    color: var(--sarahome-v3-color-text-secondary);
    margin: 0;
}

/* §R-N+416 — .search-results-grid chain multi-column (對位 §R-N+164 1280px chain)
   tags chain detail.html 用 .search-results-grid + .listing-card-v2,
   但舊 chain 只係 1 column 排, 視覺空白. 對位 §R-N+164 chain 1280px 4-col grid,
   tag chain改 auto-fill minmax(280px, 1fr).
   §R-N+420 (2026-08-07) — Plan A (CEO verdict): .search-results-grid → .listing-grid-v2
   對位 search.html pattern: .listing-grid-v2 有完整 responsive chain
   (4-col ≥1100px / 3-col 800-1099 / 2-col 540-799 / 1-col <540, line 1255)
   ⚠️ .search-results-grid active rule 已移除, 但留 comment audit trail 對位 §R-N+79 selective narrative.
   search-results-grid 只係 tags/detail.html 用 (JS/Python 0 hit), 改用 listing-grid-v2 後完全取代. */
@media (max-width: 768px) {
    .tag-detail-header {
        padding: var(--sarahome-v3-space-8) var(--sarahome-v3-space-4);
        margin-bottom: 1.5rem;
    }
    .tag-detail-title {
        font-size: 1.75rem;
    }
    .tag-detail-icon {
        font-size: 2.5rem;
    }
}

/* ============================================================
   §R-N+316 (2026-08-01) Ship-O commit 11 — Tag cloud page
   對位 §R-N+140 dark var system
   ============================================================ */
.tag-cloud-header {
    padding: var(--sarahome-v3-space-6) 0;
    border-bottom: 1px solid var(--sarahome-v3-border);
    margin-bottom: 1.5rem;
}
.tag-cloud-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--sarahome-v3-color-fg);
    margin: 0 0 0.5rem 0;
}
.tag-cloud-count {
    font-size: 1rem;
    font-weight: 400;
    color: var(--sarahome-v3-color-text-secondary);
    margin-left: 0.5rem;
}
.tag-cloud-description {
    color: var(--sarahome-v3-color-text-secondary);
    margin: 0;
}
.tag-cloud-section {
    margin-bottom: 2rem;
}
.tag-cloud-section-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--sarahome-v3-color-fg);
    margin: 0 0 0.75rem 0;
    display: flex;
    align-items: center;
    gap: var(--sarahome-v3-space-2);
}
.tag-cloud-section-icon {
    font-size: 1.5rem;
}
.tag-cloud-section-count {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--sarahome-v3-color-text-secondary);
    margin-left: 0.25rem;
}
.tag-cloud-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sarahome-v3-space-2);
}
.tag-cloud-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    background: var(--sarahome-v3-surface-card);
    border: 1px solid var(--sarahome-v3-border);
    border-radius: 999px;
    color: var(--sarahome-v3-color-fg);
    font-size: 0.9375rem;
    text-decoration: none;
    transition: all 0.15s ease;
}
.tag-cloud-chip:hover {
    background: var(--sarahome-v3-color-accent);
    color: #FFFFFF;
    border-color: var(--sarahome-v3-color-accent);
    transform: translateY(-1px);
}
.tag-cloud-chip-icon {
    font-size: 1rem;
    line-height: 1;
}
.tag-cloud-chip-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.25rem;
    padding: 0 0.375rem;
    background: var(--sarahome-v3-color-bg);
    color: var(--sarahome-v3-color-text-secondary);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}
.tag-cloud-chip:hover .tag-cloud-chip-count {
    background: rgba(255, 255, 255, 0.3);
    color: #FFFFFF;
}