/* ============================================================
   object-display.css — 全站物件顯示契約模組
   規格：doc/spec/object_display_spec.md（2026-07-23 決議 P1-P3）
   定稿樣式來源：web_new_demo/franchise/agent-design3.html（版本三）
   ── 卡片檢視：.card-grid > .object-card（buyhouse / rent_list / franchise Phase 2）
   ── 地圖側欄：.map-side-item（map.aspx / franchise Phase 2 地圖檢視）
   ── 收藏鈕：沿用 buylist.css .list-fav（本檔僅補側欄縮小版）
   ⚠ 列表檢視契約在 buylist.css（.prop-list / .list-item），不在此重複
   ⚠ index slider 的 .houseItem 收斂至本契約為後續 dedupe 案（spec §5）
   ============================================================ */

/* ===== 卡片檢視（agent-design3 fr-cards / fr-card 定稿）===== */
.card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; width: 100%; }

.object-card { display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--gray-100); background: #fff; color: inherit; cursor: pointer; box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s; }
.object-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }

.object-card-img { position: relative; overflow: hidden; background: var(--gray-200); }
.object-card-img img { width: 100%; height: 170px; object-fit: cover; transition: transform .3s; }
.object-card:hover .object-card-img img { transform: scale(1.04); }
/* 收藏鈕 / 角標：直接沿用 buylist.css 的 .list-fav / .list-badge / .list-badge-bar（absolute 定位，父層 relative 即生效） */

/* 圖上 tags（白底 pill，單行截斷） */
.object-card-tags { position: absolute; left: 8px; bottom: 8px; right: 44px; display: flex; gap: 6px; flex-wrap: nowrap; overflow: hidden; z-index: 2; }
.object-card-tags .prop-tag { background: rgba(255,255,255,.94); white-space: nowrap; flex-shrink: 0; }

.object-card-body { padding: 10px 12px; display: flex; flex-direction: column; flex: 1; min-width: 0; }
.object-card-name { font-size: var(--font-bmd); font-weight: 600; color: var(--gray-800); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.object-card-addr { font-size: var(--font-sm); color: var(--gray-500); margin-top: 2px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.object-card-meta { display: flex; gap: 8px; margin-top: 2px; font-size: var(--font-sm); color: var(--gray-600); flex-wrap: wrap; }
/* 欄位間以 | 分隔：只在「可見欄位之後的可見欄位」前加分隔線，跳過被 ng-show 隱藏（.ng-hide）者，避免孤立分隔線 */
.object-card-meta > span:not(.ng-hide) ~ span:not(.ng-hide)::before { content: "|"; margin-right: 6px; color: var(--gray-400); }
.object-card-price { display: flex; align-items: baseline; gap: 2px; margin-top: auto; padding-top: 4px; font-family: 'Inter', 'Noto Sans TC', sans-serif; }
.object-card-price b { color: var(--orange); font-weight: 700; font-size: var(--font-lg); line-height: 1; }
.object-card-price .unit { font-size: var(--font-sm); color: var(--gray-600); font-weight: 400; }
.object-card-price .original { font-size: var(--font-xs); color: var(--gray-400); text-decoration: line-through; margin-right: 4px; }

/* 卡片檢視中的插入區塊（加盟店廣告）橫跨整列 */
.card-grid .franchise-ad-strip { grid-column: 1 / -1; }

/* RWD */
@media (max-width: 1024px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .card-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .object-card-img img { height: 140px; } }
@media (max-width: 480px)  { .card-grid { grid-template-columns: 1fr; } .object-card-img img { height: 180px; } }

/* ===== 地圖側欄（agent-design3 fr-mapside-item 定稿：照片+收藏 / 名稱 / 地址 / 屋齡·坪數 / 價格）===== */
.map-side-item { display: flex; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--gray-200); cursor: pointer; transition: background .2s; color: inherit; }
.map-side-item:hover { background: var(--gray-100); }
.map-side-item > div { min-width: 0; }

.map-side-imgwrap { position: relative; flex: 0 0 120px; align-self: flex-start; }
.map-side-imgwrap img { width: 120px; height: 90px; object-fit: cover; border-radius: var(--radius-sm, 8px); display: block; }
/* 側欄縮小版收藏鈕（同 .list-fav 語彙） */
.map-side-imgwrap .list-fav { top: 5px; right: 5px; width: 26px; height: 26px; }
.map-side-imgwrap .list-fav i { font-size: var(--font-xs); }

.map-side-name { font-size: var(--font-md); font-weight: 700; color: var(--gray-800); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.map-side-addr { font-size: var(--font-sm); color: var(--gray-600); margin-top: 2px; display: flex; align-items: center; gap: 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.map-side-addr i { color: var(--orange); font-size: var(--font-xs); flex-shrink: 0; }
.map-side-meta { font-size: var(--font-sm); color: var(--gray-600); margin-top: 2px; }
.map-side-price { font-family: 'Inter', 'Noto Sans TC', sans-serif; font-size: var(--font-bmd); font-weight: 700; color: var(--orange); margin-top: 4px; }
.map-side-price .unit { font-size: var(--font-xs); color: var(--gray-600); font-weight: 400; margin-left: 2px; }

/* map.aspx 全域 click_wish 沿用 image-collect-heart-active 切換 hook：
   收藏鈕 <i> 固定 fa-regular fa-heart，以字重 900 呈現實心（FA6 同字型異字重） */
.list-fav.image-collect-heart-active i { font-weight: 900; }

@media (prefers-reduced-motion: reduce) {
  .object-card, .object-card-img img { transition: none; }
  .object-card:hover { transform: none; }
}