/* ============================================================
   雨徽文化 · 广告设计服务信息发布平台 — 首页样式 v3.0（前缀 yh_）
   通透亮青蓝：主 蔚蓝 + 辅 青 · 依赖 layouts/app.blade.php 的 --yh-* 变量
   ============================================================ */

/* ============ 1 · Hero（左文案 + 右侧出血大图） ============ */
.yh_hero {
    position: relative;
    background: var(--yh-gradient-light);
    overflow: hidden;
    padding: 78px 0 92px;
    min-height: 520px;
}
.yh_hero::before {
    content: "";
    position: absolute;
    left: -120px; bottom: -160px;
    width: 520px; height: 520px;
    background: radial-gradient(circle, rgba(26,127,224,.12) 0%, transparent 65%);
    pointer-events: none;
}
/* 右侧出血大图：从中部延伸到浏览器右边缘 */
.yh_hero_media {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 53%;
    max-width: 880px;
    z-index: 1;
}
.yh_hero_media > img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center right;
    display: block;
}
.yh_hero_media::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(90deg, var(--yh-bg) 0%, rgba(242,248,254,.55) 14%, rgba(242,248,254,0) 40%);
    pointer-events: none; z-index: 2;
}
.yh_hero_inner { position: relative; z-index: 3; width: 100%; }
.yh_hero_l { max-width: 560px; }
.yh_hero_badge {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 700; color: var(--yh-primary-deep);
    background: #fff; border: 1px solid var(--yh-border-strong);
    padding: 7px 16px; border-radius: var(--yh-radius-pill);
    margin-bottom: 22px; box-shadow: var(--yh-shadow-sm);
}
.yh_hero_badge i { color: var(--yh-cyan-hover); }
.yh_hero_title {
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 900; line-height: 1.18; color: var(--yh-text);
    margin: 0 0 18px; letter-spacing: 1px;
}
.yh_hero_title em {
    font-style: normal;
    background: var(--yh-gradient-brand);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.yh_hero_desc { font-size: clamp(15px, 1.3vw, 16.5px); color: var(--yh-text-body); line-height: 1.9; margin: 0 0 26px; max-width: 560px; }
.yh_hero_search { display: flex; align-items: center; background: #fff; border: 1px solid var(--yh-border); border-radius: var(--yh-radius-pill); padding: 6px 6px 6px 20px; box-shadow: var(--yh-shadow-card); max-width: 520px; margin-bottom: 18px; transition: all .25s ease; }
.yh_hero_search:focus-within { border-color: var(--yh-primary); box-shadow: 0 0 0 4px rgba(26,127,224,.12); }
.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-gradient-brand); 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: all .25s ease; }
.yh_hero_search button:hover { box-shadow: var(--yh-shadow-brand); transform: translateY(-1px); }
.yh_hero_cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 18px; }
.yh_hero_tags { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.yh_hero_tags span { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--yh-text-body); }
.yh_hero_tags i { color: var(--yh-cyan-hover); font-size: 12px; }

/* 浮动徽标（叠在出血大图上） */
.yh_hero_float {
    position: absolute; z-index: 4;
    display: flex; align-items: center; gap: 11px;
    padding: 11px 16px 11px 11px;
    background: #fff; border-radius: var(--yh-radius-md);
    box-shadow: var(--yh-shadow-md);
}
.yh_hero_float_icon { width: 38px; height: 38px; border-radius: 10px; background: var(--yh-gradient-cyan); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; }
.yh_hero_float strong { display: block; font-size: 14px; color: var(--yh-text); }
.yh_hero_float span { font-size: 10px; color: var(--yh-text-muted); letter-spacing: 1px; }
.yh_hero_float_1 { left: -34px; top: 70px; }
.yh_hero_float_2 { right: 54px; bottom: 88px; }

/* 信任数据条（白卡上浮，覆盖 hero 下沿） */
.yh_trust { background: #fff; }
.yh_trust_card {
    position: relative; z-index: 5;
    margin: -52px auto 0;
    background: #fff;
    border: 1px solid var(--yh-border);
    border-radius: var(--yh-radius-lg);
    box-shadow: var(--yh-shadow-md);
    display: grid; grid-template-columns: repeat(4, 1fr);
    overflow: hidden;
}
.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: 22px; bottom: 22px; width: 1px; background: var(--yh-border); }
.yh_trust_icon { width: 50px; height: 50px; 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: 21px; }
.yh_trust_num { font-size: 28px; 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: 15px; color: var(--yh-cyan-hover); margin-left: 2px; }
.yh_trust_label { font-size: 13px; color: var(--yh-text-body); }

/* ============ 2 · 服务类目（图标网格） ============ */
.yh_cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.yh_cat_card {
    display: flex; flex-direction: column; align-items: flex-start;
    padding: 26px 24px; background: #fff;
    border: 1px solid var(--yh-border); border-radius: var(--yh-radius-lg);
    box-shadow: var(--yh-shadow-card); transition: all .3s ease;
    position: relative; overflow: hidden;
}
.yh_cat_card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--yh-gradient-brand); transform: scaleY(0); transform-origin: bottom; transition: transform .3s ease; }
.yh_cat_card:hover { transform: translateY(-6px); border-color: transparent; box-shadow: 0 18px 40px rgba(26,127,224,.16); }
.yh_cat_card:hover::before { transform: scaleY(1); }
.yh_cat_icon { width: 58px; height: 58px; 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: 24px; margin-bottom: 18px; transition: all .3s ease; }
.yh_cat_card:hover .yh_cat_icon { background: var(--yh-gradient-brand); color: #fff; transform: rotate(-6deg) scale(1.05); }
.yh_cat_card h3 { font-size: 16.5px; 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.6; }
.yh_cat_more { margin-top: 14px; font-size: 13px; font-weight: 600; color: var(--yh-cyan-hover); display: inline-flex; align-items: center; gap: 6px; }
.yh_cat_more i { font-size: 11px; transition: transform .3s 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: linear-gradient(135deg, var(--yh-primary-soft), var(--yh-cyan-soft)); color: var(--yh-primary); font-size: 44px; }
.yh_tag_cat { position: absolute; left: 12px; top: 12px; z-index: 2; font-size: 12px; font-weight: 600; color: #fff; background: rgba(10,44,77,.62); backdrop-filter: blur(4px); 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: 700; color: #fff; background: var(--yh-gradient-cyan); padding: 4px 11px; border-radius: var(--yh-radius-pill); }

/* ============ 3 · 精选推荐（3 列等高大卡） ============ */
.yh_picks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.yh_pick_card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--yh-border); border-radius: var(--yh-radius-lg); overflow: hidden; box-shadow: var(--yh-shadow-card); transition: all .3s ease; position: relative; }
.yh_pick_card:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(26,127,224,.18); border-color: transparent; }
.yh_pick_thumb { position: relative; aspect-ratio: 16 / 11; overflow: hidden; background: var(--yh-bg-soft); }
.yh_pick_thumb img { width: 100%; height: 100%; object-fit: contain; transition: transform .5s ease; }
.yh_pick_card:hover .yh_pick_thumb img { transform: scale(1.05); }
.yh_pick_ribbon { position: absolute; right: 12px; bottom: 12px; z-index: 2; font-size: 12px; font-weight: 700; color: #fff; background: var(--yh-gradient-brand); padding: 5px 13px; border-radius: var(--yh-radius-pill); box-shadow: var(--yh-shadow-brand); }
.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: 17px; 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); }

/* ============ 4 · 最新发布（4 列网格） ============ */
.yh_posts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.yh_post_card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--yh-border); border-radius: var(--yh-radius); overflow: hidden; box-shadow: var(--yh-shadow-card); transition: all .3s ease; }
.yh_post_card:hover { transform: translateY(-5px); box-shadow: 0 16px 34px rgba(26,127,224,.16); border-color: transparent; }
.yh_post_thumb { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--yh-bg-soft); }
.yh_post_thumb img { width: 100%; height: 100%; object-fit: contain; transition: transform .5s ease; }
.yh_post_card:hover .yh_post_thumb img { transform: scale(1.05); }
.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); }

/* ============ 5 · 平台介绍（左图 banner2 / 右文） ============ */
.yh_about_inner { display: grid; grid-template-columns: 1fr 1.08fr; gap: 60px; 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: 6px solid #fff; box-shadow: 0 24px 50px rgba(13,52,98,.18); }
.yh_about_frame img { width: 100%; height: auto; display: block; }
.yh_about_media::after { content: ""; position: absolute; left: -22px; bottom: -22px; width: 62%; height: 70%; background: var(--yh-gradient-cyan); opacity: .12; border-radius: var(--yh-radius-lg); z-index: 0; }
.yh_about_watermark { position: absolute; right: -20px; top: 28px; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: rgba(255,255,255,.96); border-radius: var(--yh-radius-md); box-shadow: var(--yh-shadow-md); backdrop-filter: blur(4px); }
.yh_about_watermark img { height: 34px; 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(24px, 2.6vw, 33px); font-weight: 800; color: var(--yh-text); line-height: 1.4; margin: 8px 0 18px; }
.yh_about_title em { font-style: normal; background: var(--yh-gradient-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.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-cyan-soft); color: var(--yh-cyan-hover); display: inline-flex; align-items: center; justify-content: center; font-size: 10px; }
.yh_about_actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ============ 6 · 平台优势（2×2 带编号） ============ */
.yh_adv { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.yh_adv_item { display: flex; gap: 20px; padding: 28px 28px; background: #fff; border: 1px solid var(--yh-border); border-radius: var(--yh-radius-lg); box-shadow: var(--yh-shadow-card); transition: all .3s ease; position: relative; overflow: hidden; }
.yh_adv_item:hover { transform: translateY(-5px); box-shadow: 0 20px 42px rgba(26,127,224,.16); border-color: transparent; }
.yh_adv_no { font-size: 40px; font-weight: 900; font-family: var(--yh-font-num); line-height: 1; color: var(--yh-primary-soft); flex-shrink: 0; transition: color .3s ease; }
.yh_adv_item:hover .yh_adv_no { color: var(--yh-cyan-soft); }
.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: 46px; height: 46px; 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; transition: all .3s ease; }
.yh_adv_item:hover .yh_adv_icon { background: var(--yh-gradient-brand); color: #fff; }
.yh_adv_main h3 { font-size: 17.5px; 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; }

/* ============ 7 · 入驻流程（连接线步骤条） ============ */
.yh_flow { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.yh_flow::before { content: ""; position: absolute; top: 38px; left: 12%; right: 12%; height: 3px; background: repeating-linear-gradient(90deg, var(--yh-cyan-line) 0 12px, transparent 12px 22px); z-index: 0; }
.yh_flow_node { text-align: center; position: relative; z-index: 1; padding: 0 8px; }
.yh_flow_dot { width: 76px; height: 76px; margin: 0 auto 20px; border-radius: 50%; background: #fff; border: 2px solid var(--yh-primary-soft); color: var(--yh-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 27px; box-shadow: var(--yh-shadow-card); transition: all .3s ease; position: relative; }
.yh_flow_step { position: absolute; top: -6px; right: -6px; width: 26px; height: 26px; border-radius: 50%; background: var(--yh-gradient-cyan); color: #fff; font-size: 13px; font-weight: 700; font-family: var(--yh-font-num); display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--yh-shadow-cyan); }
.yh_flow_node:hover .yh_flow_dot { background: var(--yh-gradient-brand); color: #fff; border-color: transparent; transform: translateY(-4px); }
.yh_flow_node h4 { font-size: 17px; 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; }

/* ============ 8 · 入驻服务商 ============ */
.yh_mcs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.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); box-shadow: var(--yh-shadow-card); transition: all .3s ease; }
.yh_mc_card:hover { transform: translateY(-5px); box-shadow: 0 16px 34px rgba(26,127,224,.16); border-color: transparent; }
.yh_mc_logo { width: 70px; height: 70px; border-radius: 50%; overflow: hidden; margin-bottom: 14px; border: 2px solid var(--yh-primary-soft); 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: 26px; }
.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-cyan-hover); background: var(--yh-cyan-soft); padding: 4px 11px; border-radius: var(--yh-radius-pill); }
.yh_mc_empty { opacity: .72; }
.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: 46px 0 56px; min-height: 0; }
    .yh_hero_media { position: relative; width: auto; max-width: 600px; margin: 32px auto 0; border-radius: var(--yh-radius-lg); overflow: hidden; border: 6px solid #fff; box-shadow: 0 24px 50px rgba(13,52,98,.18); }
    .yh_hero_media > img { height: auto; aspect-ratio: 16 / 9; object-position: center; }
    .yh_hero_media::after { display: none; }
    .yh_hero_l { max-width: none; }
    .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: 56px; }
    .yh_about_media { max-width: 560px; }
}
@media (max-width: 768px) {
    .yh_hero { padding: 48px 0 70px; }
    .yh_hero_float_1 { left: 8px; top: 8px; }
    .yh_hero_float_2 { right: 8px; bottom: 8px; }
    .yh_trust_card { grid-template-columns: repeat(2, 1fr); margin-top: -40px; }
    .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: 32px 16px; }
    .yh_flow::before { display: none; }
    .yh_mcs { grid-template-columns: repeat(2, 1fr); }
    .yh_about_watermark { right: 8px; top: 8px; padding: 10px 14px; }
}
@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; }
}