/* ============================================================
   中孚问康 · 闲置康复器材信息发布平台 — 首页样式（前缀 yh_）
   极简绿：克制单色绿 + 近黑墨 + 大留白 + 发丝级细线
   依赖 layouts/app.blade.php 的 --yh-* 变量
   ============================================================ */

/* ============ 1 · Hero（左文 + 右图 · 两栏网格） ============ */
.yh_hero {
    position: relative;
    background:
        radial-gradient(60% 80% at 85% 0%, var(--yh-primary-soft) 0%, transparent 60%),
        var(--yh-white);
    overflow: hidden;
    padding: 76px 0 80px;
}
.yh_hero_inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 56px;
    align-items: center;
}
.yh_hero_l { max-width: 580px; }
.yh_hero_badge {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12.5px; font-weight: 600; color: var(--yh-primary-hover);
    background: var(--yh-primary-soft); border: 1px solid var(--yh-cyan-line);
    padding: 6px 14px; border-radius: var(--yh-radius-pill);
    margin-bottom: 22px;
}
.yh_hero_badge i { color: var(--yh-primary); }
.yh_hero_title {
    font-size: clamp(30px, 3.6vw, 46px);
    font-weight: 800; line-height: 1.22; color: var(--yh-text);
    margin: 0 0 18px; letter-spacing: .5px;
}
.yh_hero_title em { font-style: normal; color: var(--yh-primary); }
.yh_hero_desc {
    font-size: clamp(14.5px, 1.2vw, 16px); color: var(--yh-text-body);
    line-height: 1.9; margin: 0 0 26px; max-width: 540px;
}
.yh_hero_search {
    display: flex; align-items: center; background: #fff;
    border: 1px solid var(--yh-border-strong); border-radius: var(--yh-radius-pill);
    padding: 5px 5px 5px 18px; max-width: 500px; margin-bottom: 22px;
    transition: border-color .2s ease;
}
.yh_hero_search:focus-within { border-color: var(--yh-primary); }
.yh_hero_search > i { color: var(--yh-text-muted); font-size: 15px; }
.yh_hero_search input {
    flex: 1; border: none; outline: none; background: transparent;
    padding: 12px 14px; font-size: 15px; color: var(--yh-text); font-family: inherit; min-width: 0;
}
.yh_hero_search input::placeholder { color: var(--yh-text-muted); }
.yh_hero_search button {
    background: var(--yh-primary); color: #fff; border: none;
    padding: 12px 26px; border-radius: var(--yh-radius-pill);
    font-size: 14.5px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .2s ease;
}
.yh_hero_search button:hover { background: var(--yh-primary-hover); }
.yh_hero_cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 26px; }
.yh_hero_tags { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.yh_hero_tags span { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--yh-text-body); }
.yh_hero_tags i { color: var(--yh-primary); font-size: 13px; }

/* 右侧主视觉（banner2 清透 3D 图，无浮层 · 极简） */
.yh_hero_media { position: relative; }
.yh_hero_media_img {
    width: 100%; height: auto; display: block; border-radius: var(--yh-radius-lg);
}
.yh_hero_media_note {
    position: absolute; left: 18px; bottom: 18px;
    display: inline-flex; align-items: center; gap: 9px;
    padding: 10px 16px; background: #fff; border: 1px solid var(--yh-border);
    border-radius: var(--yh-radius-md); box-shadow: var(--yh-shadow-md);
    font-size: 13px; color: var(--yh-text); font-weight: 500;
}
.yh_hero_media_note i { color: var(--yh-primary); }

/* ============ 2 · 信任数据条（细线分隔 · 无重投影） ============ */
.yh_trust { background: #fff; padding-bottom: 8px; }
.yh_trust_card {
    border: 1px solid var(--yh-border); border-radius: var(--yh-radius);
    display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden;
    background: #fff;
}
.yh_trust_item { display: flex; align-items: center; gap: 16px; padding: 26px 30px; position: relative; }
.yh_trust_item + .yh_trust_item::before { content: ""; position: absolute; left: 0; top: 24px; bottom: 24px; width: 1px; background: var(--yh-border); }
.yh_trust_icon {
    width: 48px; height: 48px; flex-shrink: 0; border-radius: var(--yh-radius-md);
    background: var(--yh-primary-soft); color: var(--yh-primary);
    display: inline-flex; align-items: center; justify-content: center; font-size: 20px;
}
.yh_trust_num { font-size: 27px; font-weight: 800; color: var(--yh-text); font-family: var(--yh-font-num); line-height: 1.1; }
.yh_trust_num em { font-style: normal; font-size: 14px; color: var(--yh-primary); margin-left: 2px; }
.yh_trust_label { font-size: 13px; color: var(--yh-text-muted); margin-top: 2px; }

/* ============ 3 · 器材分类（图标网格 · 极简卡） ============ */
.yh_cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.yh_cat_card {
    display: flex; flex-direction: column; align-items: flex-start;
    padding: 28px 24px; background: #fff;
    border: 1px solid var(--yh-border); border-radius: var(--yh-radius);
    transition: border-color .22s ease, transform .22s ease;
}
.yh_cat_card:hover { transform: translateY(-4px); border-color: var(--yh-primary); }
.yh_cat_icon {
    width: 54px; height: 54px; border-radius: var(--yh-radius-md);
    background: var(--yh-primary-soft); color: var(--yh-primary);
    display: inline-flex; align-items: center; justify-content: center; font-size: 23px; margin-bottom: 18px;
    transition: background .22s ease, color .22s ease;
}
.yh_cat_card:hover .yh_cat_icon { background: var(--yh-primary); color: #fff; }
.yh_cat_card h3 { font-size: 16px; font-weight: 700; color: var(--yh-text); margin: 0 0 7px; }
.yh_cat_card p { font-size: 13px; color: var(--yh-text-body); margin: 0; line-height: 1.65; }
.yh_cat_more { margin-top: 16px; font-size: 13px; font-weight: 600; color: var(--yh-primary); display: inline-flex; align-items: center; gap: 6px; }
.yh_cat_more i { font-size: 11px; transition: transform .22s ease; }
.yh_cat_card:hover .yh_cat_more i { transform: translateX(4px); }

/* ============ 通用：缩略图占位 / 标签 ============ */
.yh_thumb_ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--yh-primary-soft); color: var(--yh-primary); font-size: 40px; }
.yh_tag_cat { position: absolute; left: 12px; top: 12px; z-index: 2; font-size: 12px; font-weight: 600; color: var(--yh-primary-hover); background: rgba(255,255,255,.92); padding: 4px 11px; border-radius: var(--yh-radius-pill); }
.yh_tag_hot { position: absolute; right: 12px; top: 12px; z-index: 2; font-size: 12px; font-weight: 600; color: #fff; background: var(--yh-amber); padding: 4px 11px; border-radius: var(--yh-radius-pill); }

/* ============ 4 · 精选推荐（3 列等高大卡） ============ */
.yh_picks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.yh_pick_card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--yh-border); border-radius: var(--yh-radius); overflow: hidden; transition: border-color .22s ease, transform .22s ease; position: relative; }
.yh_pick_card:hover { transform: translateY(-4px); border-color: var(--yh-primary); }
.yh_pick_thumb { position: relative; aspect-ratio: 16 / 11; overflow: hidden; background: var(--yh-bg-soft); border-bottom: 1px solid var(--yh-border); }
.yh_pick_thumb img { width: 100%; height: 100%; object-fit: contain; transition: transform .4s ease; }
.yh_pick_card:hover .yh_pick_thumb img { transform: scale(1.04); }
.yh_pick_ribbon { position: absolute; right: 12px; bottom: 12px; z-index: 2; font-size: 12px; font-weight: 600; color: #fff; background: var(--yh-primary); padding: 5px 12px; border-radius: var(--yh-radius-pill); }
.yh_pick_ribbon i { margin-right: 4px; }
.yh_pick_body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.yh_pick_body h3 { font-size: 16.5px; font-weight: 700; color: var(--yh-text); margin: 0 0 10px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.yh_pick_body p { font-size: 13.5px; color: var(--yh-text-body); line-height: 1.75; margin: 0 0 16px; flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.yh_pick_meta { display: flex; flex-wrap: wrap; gap: 8px 16px; padding-top: 14px; border-top: 1px solid var(--yh-border); }
.yh_pick_meta span { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--yh-text-muted); }
.yh_pick_meta i { color: var(--yh-primary); }

/* ============ 5 · 最新发布（4 列网格） ============ */
.yh_posts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.yh_post_card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--yh-border); border-radius: var(--yh-radius-md); overflow: hidden; transition: border-color .22s ease, transform .22s ease; }
.yh_post_card:hover { transform: translateY(-4px); border-color: var(--yh-primary); }
.yh_post_thumb { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--yh-bg-soft); border-bottom: 1px solid var(--yh-border); }
.yh_post_thumb img { width: 100%; height: 100%; object-fit: contain; transition: transform .4s ease; }
.yh_post_card:hover .yh_post_thumb img { transform: scale(1.04); }
.yh_post_body { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.yh_post_body h4 { font-size: 14.5px; font-weight: 600; color: var(--yh-text); margin: 0 0 12px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 44px; }
.yh_post_meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }
.yh_post_meta span { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--yh-text-muted); overflow: hidden; }
.yh_post_meta i { color: var(--yh-primary); }

/* ============ 6 · 平台介绍（左图 / 右文） ============ */
.yh_about_inner { display: grid; grid-template-columns: 1fr 1.05fr; gap: 58px; align-items: center; }
.yh_about_media { position: relative; }
.yh_about_frame { position: relative; z-index: 1; border-radius: var(--yh-radius-lg); overflow: hidden; border: 1px solid var(--yh-border); background: #fff; }
.yh_about_frame img { width: 100%; height: auto; display: block; }
.yh_about_watermark { position: absolute; left: 18px; bottom: 18px; z-index: 2; display: flex; align-items: center; gap: 11px; padding: 12px 16px; background: rgba(255,255,255,.96); border: 1px solid var(--yh-border); border-radius: var(--yh-radius-md); box-shadow: var(--yh-shadow-md); }
.yh_about_watermark img { height: 30px; width: auto; }
.yh_about_watermark div strong { display: block; font-size: 14px; color: var(--yh-text); }
.yh_about_watermark div span { font-size: 11px; color: var(--yh-text-muted); letter-spacing: 1px; }
.yh_about_title { font-size: clamp(23px, 2.4vw, 32px); font-weight: 700; color: var(--yh-text); line-height: 1.42; margin: 8px 0 18px; }
.yh_about_title em { font-style: normal; color: var(--yh-primary); }
.yh_about_desc { font-size: 14.5px; color: var(--yh-text-body); line-height: 1.95; margin: 0 0 22px; }
.yh_about_list { list-style: none; margin: 0 0 28px; padding: 0; }
.yh_about_list li { display: flex; align-items: flex-start; gap: 11px; font-size: 14.5px; color: var(--yh-text); margin-bottom: 13px; line-height: 1.6; }
.yh_about_list li i { flex-shrink: 0; margin-top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--yh-primary-soft); color: var(--yh-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 10px; }
.yh_about_actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ============ 7 · 平台优势（2×2 带编号 · 极简） ============ */
.yh_adv { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.yh_adv_item { display: flex; gap: 20px; padding: 28px; background: #fff; border: 1px solid var(--yh-border); border-radius: var(--yh-radius); transition: border-color .22s ease, transform .22s ease; }
.yh_adv_item:hover { transform: translateY(-4px); border-color: var(--yh-primary); }
.yh_adv_no { font-size: 34px; font-weight: 800; font-family: var(--yh-font-num); line-height: 1; color: var(--yh-border-strong); flex-shrink: 0; transition: color .22s ease; }
.yh_adv_item:hover .yh_adv_no { color: var(--yh-primary); }
.yh_adv_main { flex: 1; min-width: 0; }
.yh_adv_head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.yh_adv_icon { width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--yh-radius-md); background: var(--yh-primary-soft); color: var(--yh-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 19px; transition: background .22s ease, color .22s ease; }
.yh_adv_item:hover .yh_adv_icon { background: var(--yh-primary); color: #fff; }
.yh_adv_main h3 { font-size: 17px; font-weight: 700; color: var(--yh-text); margin: 0; }
.yh_adv_main p { font-size: 13.5px; color: var(--yh-text-body); line-height: 1.85; margin: 0; }

/* ============ 8 · 发布流程（连接线步骤） ============ */
.yh_flow { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.yh_flow::before { content: ""; position: absolute; top: 36px; left: 12%; right: 12%; height: 2px; background: repeating-linear-gradient(90deg, var(--yh-border-strong) 0 10px, transparent 10px 20px); z-index: 0; }
.yh_flow_node { text-align: center; position: relative; z-index: 1; padding: 0 8px; }
.yh_flow_dot { width: 72px; height: 72px; margin: 0 auto 20px; border-radius: 50%; background: #fff; border: 1px solid var(--yh-border-strong); color: var(--yh-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 25px; transition: all .22s ease; position: relative; }
.yh_flow_step { position: absolute; top: -4px; right: -4px; width: 24px; height: 24px; border-radius: 50%; background: var(--yh-primary); color: #fff; font-size: 12px; font-weight: 700; font-family: var(--yh-font-num); display: inline-flex; align-items: center; justify-content: center; }
.yh_flow_node:hover .yh_flow_dot { background: var(--yh-primary); color: #fff; border-color: var(--yh-primary); transform: translateY(-3px); }
.yh_flow_node h4 { font-size: 16.5px; font-weight: 700; color: var(--yh-text); margin: 0 0 9px; }
.yh_flow_node p { font-size: 13px; color: var(--yh-text-body); line-height: 1.7; margin: 0; }

/* ============ 9 · 入驻服务商 ============ */
.yh_mcs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.yh_mc_card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 26px 16px 22px; background: #fff; border: 1px solid var(--yh-border); border-radius: var(--yh-radius-md); transition: border-color .22s ease, transform .22s ease; }
.yh_mc_card:hover { transform: translateY(-4px); border-color: var(--yh-primary); }
.yh_mc_logo { width: 66px; height: 66px; border-radius: 50%; overflow: hidden; margin-bottom: 14px; border: 1px solid var(--yh-border-strong); background: var(--yh-bg-soft); display: flex; align-items: center; justify-content: center; }
.yh_mc_logo img { width: 100%; height: 100%; object-fit: cover; }
.yh_mc_logo_ph { color: var(--yh-primary); font-size: 24px; }
.yh_mc_name { font-size: 14.5px; color: var(--yh-text); margin-bottom: 6px; font-weight: 600; }
.yh_mc_count { font-size: 12px; color: var(--yh-text-muted); margin-bottom: 12px; }
.yh_mc_badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--yh-primary-hover); background: var(--yh-primary-soft); padding: 4px 11px; border-radius: var(--yh-radius-pill); }
.yh_mc_empty { opacity: .7; }
.yh_mc_empty .yh_mc_logo { border-style: dashed; }
.yh_mc_empty .yh_mc_logo_ph { color: var(--yh-text-muted); }

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 1100px) {
    .yh_hero { padding: 50px 0 56px; }
    .yh_hero_inner { grid-template-columns: 1fr; gap: 38px; }
    .yh_hero_l { max-width: none; }
    .yh_hero_media { max-width: 560px; margin: 0 auto; }
    .yh_picks { grid-template-columns: repeat(2, 1fr); }
    .yh_posts { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
    .yh_cats { grid-template-columns: repeat(2, 1fr); }
    .yh_adv { grid-template-columns: 1fr; }
    .yh_mcs { grid-template-columns: repeat(3, 1fr); }
    .yh_about_inner { grid-template-columns: 1fr; gap: 44px; }
    .yh_about_media { max-width: 600px; }
}
@media (max-width: 768px) {
    .yh_trust_card { grid-template-columns: repeat(2, 1fr); }
    .yh_trust_item:nth-child(3)::before, .yh_trust_item:nth-child(2)::before { content: none; }
    .yh_trust_item { padding: 20px 18px; }
    .yh_cats { grid-template-columns: 1fr; }
    .yh_picks { grid-template-columns: 1fr; }
    .yh_posts { grid-template-columns: repeat(2, 1fr); }
    .yh_flow { grid-template-columns: repeat(2, 1fr); gap: 30px 16px; }
    .yh_flow::before { display: none; }
    .yh_mcs { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .yh_posts { grid-template-columns: 1fr; }
    .yh_hero_search { flex-wrap: wrap; border-radius: var(--yh-radius); padding: 12px; }
    .yh_hero_search button { width: 100%; margin-top: 8px; }
}