/* ============================================================
   惠房甄选 v7 · 内页（前缀 hf_）
   房源详情：白底标题区 → 大图 + 价格参数卡 → 描述 + 侧栏
   服务商：名片网格 / 资料横幅；单页：左文档导航 + 正文
   ============================================================ */

.hf_clear { margin-left: 8px; font-size: 12.5px; color: var(--hf-muted); }
.hf_clear:hover { color: var(--hf-orange); }
.hf_filter_txt { font-size: 14px; color: var(--hf-muted); }
.hf_filter_txt b { color: var(--hf-teal); }
.hf_ph_slim { padding-bottom: 26px; }
.hf_ph_slim p { opacity: .85; }

/* 侧栏：服务商列表 / 键值 */
.hf_agentlist a { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.hf_agentlist a + a { border-top: 1px dashed var(--hf-line); }
.hf_agentlist span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hf_agentlist b { font-size: 14px; color: var(--hf-ink); }
.hf_agentlist em { font-style: normal; font-size: 12px; color: var(--hf-muted); }
.hf_agentlist > a > i:last-child { color: #C2CCCA; font-size: 12px; }
.hf_agentlist a:hover b { color: var(--hf-teal); }
.hf_kv div { display: flex; justify-content: space-between; padding: 6px 0; font-size: 13.5px; }
.hf_kv span { color: var(--hf-muted); }
.hf_kv b { color: var(--hf-ink); font-weight: 600; }
.hf_box_p { margin: 10px 0 0; padding-top: 10px; border-top: 1px dashed var(--hf-line); font-size: 13px; line-height: 1.8; color: var(--hf-text); }

/* ---------- 房源详情 ---------- */
.hf_dtop { background: #fff; border-bottom: 1px solid var(--hf-line); padding: 18px 0 20px; }
.hf_crumb_dark { color: var(--hf-muted); margin-bottom: 12px; }
.hf_crumb_dark a:hover { color: var(--hf-teal); }
.hf_crumb_dark b { color: var(--hf-ink); }
.hf_dtitle { margin: 0 0 12px; font-size: 26px; line-height: 1.45; font-weight: 900; color: var(--hf-ink); }
.hf_dmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; font-size: 13px; color: var(--hf-muted); }
.hf_dmeta i { margin-right: 5px; color: var(--hf-teal); }
.hf_dtag { padding: 3px 10px; border-radius: 6px; background: var(--hf-teal); color: #fff; font-weight: 700; font-size: 12.5px; }
.hf_dtag.office { background: var(--hf-ink); }
.hf_dok { color: var(--hf-teal); font-weight: 600; }

.hf_dhero { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 22px; padding-top: 22px; }
.hf_dhero_img { border-radius: 16px; overflow: hidden; background: var(--hf-mint); aspect-ratio: 4 / 3; max-height: 520px; }
.hf_dhero_img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hf_dcard { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--hf-line); border-radius: 16px; padding: 22px 22px 20px; }
.hf_dcard_price { padding-bottom: 16px; border-bottom: 1px solid var(--hf-line); }
.hf_dcard_price em { display: block; font-style: normal; font-size: 13px; color: var(--hf-muted); margin-bottom: 4px; }
.hf_dcard_price .hf_price b { font-size: 40px; }
.hf_dcard_price .hf_price small { font-size: 16px; }
.hf_dparams { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 16px 0; background: var(--hf-line); border: 1px solid var(--hf-line); border-radius: 12px; overflow: hidden; }
.hf_dparams div { background: var(--hf-mint-2); padding: 11px 14px; }
.hf_dparams div:first-child { grid-column: 1 / -1; }
.hf_dparams dt { font-size: 12px; font-weight: 400; color: var(--hf-muted); margin: 0 0 2px; }
.hf_dparams dd { margin: 0; font-size: 14.5px; font-weight: 700; color: var(--hf-ink); }
.hf_dagent { display: flex; align-items: center; gap: 12px; margin-top: auto; padding: 14px 0; border-top: 1px dashed var(--hf-line); }
.hf_dagent_ava { width: 48px; height: 48px; flex-shrink: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--hf-teal) 0%, var(--hf-teal-2) 100%); color: #fff; font-size: 20px; font-weight: 800; font-style: normal; }
.hf_dagent span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hf_dagent b { font-size: 16px; color: var(--hf-ink); }
.hf_dagent em { font-style: normal; font-size: 12px; color: var(--hf-teal); }
.hf_dagent > a { padding: 6px 12px; border-radius: 8px; border: 1px solid var(--hf-line); font-size: 13px; color: var(--hf-text); }
.hf_dagent > a:hover { border-color: var(--hf-teal); color: var(--hf-teal); }
.hf_dtel { display: flex; align-items: center; justify-content: center; gap: 10px; height: 52px; border-radius: 12px; background: var(--hf-orange); color: #fff; font-size: 20px; font-weight: 900; letter-spacing: .5px; box-shadow: 0 10px 22px rgba(240, 138, 36, .28); }
.hf_dtel:hover { background: var(--hf-orange-d); color: #fff; }
.hf_dtip { margin: 9px 0 0; text-align: center; font-size: 12px; color: var(--hf-muted); }

.hf_article { background: #fff; border: 1px solid var(--hf-line); border-radius: 16px; padding: 26px 30px 28px; }
.hf_article_hd { margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--hf-line); font-size: 18px; font-weight: 900; color: var(--hf-ink); }
.hf_dnotice { display: flex; gap: 10px; margin-top: 22px; padding: 14px 16px; border-radius: 10px; background: var(--hf-orange-soft); border: 1px solid #F6D9B8; font-size: 13px; line-height: 1.85; color: #8F5A22; }
.hf_dnotice i { margin-top: 4px; color: var(--hf-orange); }
.hf_sec_hd { display: flex; align-items: baseline; justify-content: space-between; margin: 30px 0 14px; }
.hf_sec_hd h2 { margin: 0; font-size: 20px; font-weight: 900; color: var(--hf-ink); }
.hf_sec_hd a { font-size: 13.5px; color: var(--hf-teal); }
.hf_cards3 { grid-template-columns: repeat(3, 1fr); }

/* ---------- 服务商列表 ---------- */
.hf_agentgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.hf_agentcard { display: flex; flex-direction: column; gap: 12px; padding: 22px; background: #fff; border: 1px solid var(--hf-line); border-radius: 16px; transition: box-shadow .2s ease, border-color .2s ease; }
.hf_agentcard:hover { border-color: #BFDDD6; box-shadow: var(--zh-shadow-card-hover); }
.hf_agentcard_hd { display: flex; align-items: center; gap: 14px; }
.hf_agentcard_hd .hf_agent_ava { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--hf-teal) 0%, var(--hf-teal-2) 100%); color: #fff; font-size: 22px; font-weight: 800; box-shadow: 0 0 0 4px var(--hf-mint); flex-shrink: 0; }
.hf_agentcard_hd h3 { margin: 0 0 3px; font-size: 18px; }
.hf_agentcard_hd h3 a { color: var(--hf-ink); }
.hf_agentcard_hd h3 a:hover { color: var(--hf-teal); }
.hf_agentcard_hd p { margin: 0; font-size: 12.5px; color: var(--hf-muted); }
.hf_agentcard_hd p i { color: var(--hf-teal); }
.hf_agentcard_desc { margin: 0; font-size: 13px; line-height: 1.8; color: var(--hf-text); min-height: 46px; }
.hf_agentcard_kv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--hf-line); border: 1px solid var(--hf-line); border-radius: 10px; overflow: hidden; }
.hf_agentcard_kv div { background: var(--hf-mint-2); text-align: center; padding: 9px 4px; }
.hf_agentcard_kv b { display: block; font-size: 18px; color: var(--hf-teal); }
.hf_agentcard_kv span { font-size: 12px; color: var(--hf-muted); }
.hf_agentcard_list a { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px dashed var(--hf-line); font-size: 13px; }
.hf_agentcard_list span { color: var(--hf-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hf_agentcard_list em { font-style: normal; color: var(--hf-orange); font-weight: 700; flex-shrink: 0; }
.hf_agentcard_list a:hover span { color: var(--hf-teal); }
.hf_agentcard_btns { display: grid; grid-template-columns: 1fr 1.3fr; gap: 10px; margin-top: auto; }
.hf_btn_line, .hf_btn_orange { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; border-radius: 10px; font-size: 14px; font-weight: 700; }
.hf_btn_line { border: 1.5px solid var(--hf-teal); color: var(--hf-teal); background: #fff; }
.hf_btn_line:hover { background: var(--hf-teal); color: #fff; }
.hf_btn_orange { background: var(--hf-orange); color: #fff; padding: 0 18px; }
.hf_btn_orange:hover { background: var(--hf-orange-d); color: #fff; }

/* ---------- 服务商详情横幅 ---------- */
.hf_mhero { display: flex; align-items: center; gap: 24px; }
.hf_mhero_ava { width: 92px; height: 92px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fff; color: var(--hf-teal); font-size: 38px; font-weight: 900; box-shadow: 0 0 0 6px rgba(255, 255, 255, .18); }
.hf_mhero_txt { flex: 1; min-width: 0; }
.hf_mhero_txt h1 { margin: 0 0 8px; font-size: 28px; font-weight: 900; color: #fff; }
.hf_mhero_meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 8px !important; font-size: 13px; }
.hf_mhero_ok { color: #FFC58A; font-weight: 700; }
.hf_mhero_act { display: flex; flex-direction: column; gap: 12px; min-width: 240px; }
.hf_mhero_act .hf_btn_orange { height: 48px; font-size: 18px; }
.hf_mhero_nums { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hf_mhero_nums div { text-align: center; padding: 9px; border-radius: 10px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16); }
.hf_mhero_nums b { display: block; font-size: 20px; color: #FFC58A; }
.hf_mhero_nums span { font-size: 12px; color: #BFDDD6; }

/* ---------- 单页 ---------- */
.hf_doc { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; padding-top: 26px; }
.hf_doc_nav { position: sticky; top: 96px; align-self: start; background: #fff; border: 1px solid var(--hf-line); border-radius: 14px; overflow: hidden; }
.hf_doc_nav a { display: flex; align-items: center; gap: 10px; padding: 14px 18px; font-size: 14.5px; color: var(--hf-ink); border-bottom: 1px solid var(--hf-line); }
.hf_doc_nav a i { color: var(--hf-muted); }
.hf_doc_nav a.on { background: var(--hf-mint); color: var(--hf-teal); font-weight: 800; box-shadow: inset 4px 0 0 var(--hf-teal); }
.hf_doc_nav a.on i { color: var(--hf-teal); }
.hf_doc_nav a:hover { color: var(--hf-teal); }
.hf_doc_contact { padding: 16px 18px; font-size: 12.5px; color: var(--hf-muted); display: flex; flex-direction: column; gap: 2px; }
.hf_doc_contact b { font-size: 18px; color: var(--hf-orange); }
.hf_doc_cover { width: 100%; max-height: 360px; object-fit: cover; border-radius: 12px; margin-bottom: 20px; display: block; }

/* ---------- 窄屏兜底 ---------- */
@media (max-width: 1100px) {
    .hf_agentgrid { grid-template-columns: 1fr 1fr; }
    .hf_dhero { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
    .hf_agentgrid, .hf_doc, .hf_cards3 { grid-template-columns: 1fr; }
    .hf_mhero { flex-wrap: wrap; }
    .hf_mhero_act { width: 100%; }
    .hf_doc_nav { position: static; }
    .hf_article { padding: 20px 18px; }
}