/* ============================================================
   首页 PC 端 + 手机端 板块间距统一 + 设计大咖头像圆形
   版本：v20260930e
   部署路径：/pub/css/home-spacing.css
   模板引用：<link href="/pub/css/home-spacing.css?v=20260930e" rel="stylesheet">
   规则：板块大标题上下各 20px(PC)/14px(手机)；各板块容器上 0 / 下 20px(PC)/14px(手机)，
        相邻板块之间形成统一节奏；设计大咖设计师头像改为圆形
   范围：PC 端（>768px）与手机端（<=768px）均生效；新增圆形头像在所有宽度生效
   注意：本文件只应在"首页"模板中引入，不影响其他页面
   ============================================================ */

/* ============================================================
   设计大咖设计师头像：圆形 + 彩色描边 + 底色（PC / 手机端通用）
   设计说明：
     - 圆形裁切（border-radius:50% + object-fit:cover）
     - 内白圈 border:4px solid #fff 与外侧品牌红描边环形成层次
     - 品牌红描边环用 box-shadow 实现（border-image 不支持圆角渐变）
     - 底色 background:#fff0f0 在图片加载前 / 透明处可见，避免空洞
   颜色取自业之峰品牌红 #e63329
   ============================================================ */
.zh-imgText17-content img {
    border-radius: 50%;
    object-fit: cover;
    aspect-ratio: 1 / 1;
    width: 100%;
    max-width: 200px;
    height: auto;
    display: block;
    margin: 0 auto 10px;
    border: 2px solid #ffffff;                     /* 内白圈，与彩环形成层次 */
    box-shadow: 0 0 0 2px #e63329,                 /* 业之峰红描边环 */
                0 8px 20px rgba(230, 51, 41, .25); /* 柔和投影 */
    background-color: #fff0f0;                      /* 圆形底色（图片加载前/透明处显示） */
}

@media (min-width: 769px) {

    /* 1) 板块大标题（3种方案/自营家装/上千套案例/设计大咖/在建工地/口碑）：
          上下统一 20px，替代原来用 &nbsp; 空段撑出的杂乱间距 */
    .home-sec-title {
        margin: 20px 0 !important;
        line-height: 1.4;
    }

    /* 2) 标题条（算一算我家装修要花多少钱 / 装修视频 / 海量装修干货）：
          上下统一 20px（原内联 40px 过大） */
    .news-section.layout-title {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }

    /* 3) 算价表单区：贴合上下板块，间距交给相邻标题的 margin */
    .consult-section {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    /* 4) 3种家装解决方案图组：去除自带上下留白 */
    .projects-section-five {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
    .projects-section-five .mar-b3 {
        margin-bottom: 12px !important;
    }

    /* 5) 案例轮播 banner5：去除容器上下多余留白（修"轮播与标题紧挨/与卡片间大空白"） */
    .banner5 {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    .banner5 .site-content,
    .banner5 .site-content .container,
    .banner5 .inner-wrapper {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* 6) 案例 hover 卡片区：与上方轮播只留 5px（原主题 padding-top:50px 过大，
          之前只覆盖了 margin，50px 内边距漏网形成大空白） */
    .services-section-two {
        margin-top: 5px !important;
        padding-top: 5px !important;
        padding-bottom: 10px !important;
    }
    /* 案例卡片图片：等比铺满 400px 卡片，修复"被拉变形"
       根因：主题全局 img{max-width:100%;height:auto} 与 m-home.css
       .img-bottom img{height:100%} 冲突 → 高度被强制、宽度被限死，非等比拉伸。
       object-fit:cover 后宽度铺满、高度铺满、居中裁切，不再变形 */
    .lsb-background .img-bottom img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
        display: block;
    }

    /* 7) 设计大咖：标题与头像之间不留大空白 */
    .zh-imgText17 {
        padding-top: 0 !important;
        padding-bottom: 20px !important;
    }
    .zh-imgText17 .row,
    .zh-imgText17 .zh-imgText17-content {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* 8) 在建工地：标题与工地列表之间不留大空白 */
    .zh-imgText19 {
        padding-top: 0 !important;
        padding-bottom: 20px !important;
    }
    .zh-imgText19 .section-counter,
    .zh-imgText19 .counter-section,
    .zh-imgText19 .inner-wrapper {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    /* 9) 装修视频区 */
    .section-services.video {
        padding-top: 0 !important;
        padding-bottom: 20px !important;
    }

    /* 10) 干货区：上方不留额外空白 */
    .company-goal {
        padding-top: 0 !important;
    }

    /* 11) "查看更多 xx" 按钮行：上下统一 10px，让板块结尾节奏一致 */
    .pad-20 {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    /* 12) 友情链接区：主题 .sec-title 自带 margin-bottom:45px 过大，
          本区专属收窄到 12px（加上区块 padding 后总间隙约 32px，为原来一半） */
    .flink-sec .sec-title {
        margin-bottom: 12px !important;
    }

    /* 13) 友情链接链接区：压住防护 + 排版规整
          - z-index 抬高，防止下方深色页脚(z-index:1)绘制到链接之上
          - 链接行高统一 30px，右间距 14px，换行整齐
          - 底部留 14px 安全距离，避免最后一行贴着深色页脚边缘被裁 */
    .zh-footer {
        position: relative;
        z-index: 2;
    }
    .zh-footer .footer-block a {
        display: inline-block;
        line-height: 30px;
        margin: 0 14px 6px 0;
    }
    .zh-footer .footer-block {
        padding-bottom: 14px;
    }

    /* 设计大咖头像圆形 + 品牌红描边已在文件顶部全局规则统一定义，此处不再重复 */
}

/* ============================================================
   首页 手机端（<=768px）板块间距统一
   与 PC 端保持同一节奏，数值更紧凑，避免手机端间距忽大忽小
   版本：v20260930c
   ============================================================ */
@media (max-width: 768px) {
    /* 板块大标题：上下统一 14px */
    .home-sec-title {
        margin: 14px 0 !important;
        line-height: 1.4;
    }
    /* 标题条（装修视频 / 海量装修干货）：上下统一 14px */
    .news-section.layout-title {
        padding-top: 14px !important;
        padding-bottom: 14px !important;
    }
    /* 案例轮播 banner5：去除容器多余留白 */
    .banner5 {
        margin: 0 !important;
        padding: 0 !important;
    }
    .banner5 .site-content,
    .banner5 .site-content .container,
    .banner5 .inner-wrapper {
        padding: 0 !important;
        margin: 0 !important;
    }
    /* 案例 hover 卡片区：与上方轮播留 5px */
    .services-section-two {
        margin-top: 5px !important;
        padding-top: 5px !important;
        padding-bottom: 8px !important;
    }
    /* 案例卡片：手机端去掉 400px 固定高度，图片按原始比例完整显示不变形；
       卡片之间间距统一 5px；悬浮的设计师头像与案例名改为绝对定位居中
       覆盖在图片上（图片进入文档流后原来的大 margin 会撑出空白，必须接管） */
    .lsb-background {
        height: auto !important;
        margin-bottom: 5px !important;
    }
    .lsb {
        height: auto;
        padding: 0 !important;
        overflow: hidden;
    }
    .lsb .img-bottom {
        position: static;
        height: auto;
        z-index: auto;
    }
    .lsb .img-bottom img {
        width: 100% !important;
        height: auto !important;
        display: block;
    }
    .lsb .lsb-icon {
        position: absolute;
        top: 42%;
        left: 50%;
        width: 44px;
        height: 44px;
        margin: -22px 0 0 -22px !important;
    }
    .lsb .lsb-name {
        position: absolute;
        top: 42%;
        left: 0;
        right: 0;
        margin: 34px 0 0 0 !important;
    }
    .lsb .lsb-span,
    .lsb .lsb-introduce,
    .lsb .lsb-href {
        display: none !important;
    }
    /* 设计大咖 */
    .zh-imgText17 {
        padding-top: 0 !important;
        padding-bottom: 14px !important;
    }
    .zh-imgText17 .row,
    .zh-imgText17 .zh-imgText17-content {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    /* 在建工地 */
    .zh-imgText19 {
        padding-top: 0 !important;
        padding-bottom: 14px !important;
    }
    .zh-imgText19 .section-counter,
    .zh-imgText19 .counter-section,
    .zh-imgText19 .inner-wrapper {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    /* 装修视频 */
    .section-services.video {
        padding-top: 0 !important;
        padding-bottom: 14px !important;
    }
    /* 装修攻略/干货 */
    .company-goal {
        padding-top: 0 !important;
    }
    /* "查看更多 xx" 按钮行：上下统一 8px */
    .pad-20 {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
    /* 按钮行外层内联 margin-bottom:20px 在手机端统一收为 14px，避免间距不一致 */
    .auto-container[style*="margin-bottom"] {
        margin-bottom: 14px !important;
    }
    /* 友情链接：手机端隐藏，仅电脑端显示
       flink-sec 为"友情链接"标题区，zh-footer 为该区块内的链接列表，
       二者合起来即整块友情链接，移动端一并隐藏 */
    .flink-sec { display: none !important; }
    .zh-footer { display: none !important; }

    /* 设计大咖头像：手机端描边细化到 1px，保持精致 */
    .zh-imgText17-content img {
        max-width: 140px;
        border-width: 1px;
        box-shadow: 0 0 0 1px #e63329,
                    0 6px 14px rgba(230, 51, 41, .22);
    }
    .zh-footer .footer-block a {
        display: inline-block;
        line-height: 28px;
        margin: 0 10px 5px 0;
    }
    .zh-footer .footer-block {
        padding-bottom: 12px;
    }
    /* 整图广告块（自营家装/在建工地/装修视频/口碑）与下方标题保持统一间距 */
    .auto-container > div > p > a > img.wscnph,
    .auto-container > p > a > img.wscnph {
        margin-bottom: 0 !important;
    }
}