/* case-detail-extra.css
 * 案例详情页「新增模块」样式：正文底部点赞 + 同风格横排案例
 * 仅补充本页新增功能所需样式，不改动 site 原有 case-detail.css。
 * 配合 case_detail 模板使用，放置于 /pub/css/ 目录。
 */

/* ===== 标题下属性标签（小区/面积/户型/风格/总造价/区域/设计师） ===== */
/* 案例整块（含左右两栏）与底部 footer 之间的间距（电脑端/手机端通用） */
.detail_3{padding-bottom:40px;}
.detail_3 .tag{font-size:14px;color:#666;line-height:1;margin-bottom:6px;}
.detail_3 .tag span{display:inline-block;margin:0 4px 8px 0;padding:0 12px 0 0;line-height:22px;}
.detail_3 .tag span:not(:last-child){border-right:1px solid #dcdcdc;}

/* ===== 正文底部：点赞 ===== */
.like-wrap{margin:30px 0 10px;text-align:center;}
.like-btn{display:inline-flex!important;align-items:center;gap:6px;padding:9px 26px;border:1px solid #e5493a;border-radius:30px;color:#e5493a!important;font-size:16px;cursor:pointer;transition:.3s;background:#fff;text-decoration:none;}
.like-btn:hover,.like-btn:focus{background:#e5493a!important;color:#fff!important;border-color:#e5493a!important;text-decoration:none!important;box-shadow:0 4px 12px rgba(229,73,58,.35);}
.like-btn:active{transform:scale(.96);}
.like-btn.liked{background:#e5493a!important;color:#fff!important;border-color:#e5493a!important;cursor:default;box-shadow:none;}
.like-btn.liked:hover{background:#e5493a!important;color:#fff!important;box-shadow:none;}
.like-btn .like-heart{font-size:18px;line-height:1;color:inherit;}
.like-count{display:inline-block;min-width:1em;}
.like-tip{display:block;margin-top:8px;color:#959595;font-size:13px;}

/* 点赞成功弹动动画 */
.like-btn.pop .like-heart{animation:likePop .45s ease;}
.like-btn.pop .like-count{animation:countPop .45s ease;}
@keyframes likePop{0%{transform:scale(1);}30%{transform:scale(1.5);}60%{transform:scale(.85);}100%{transform:scale(1);}}
@keyframes countPop{0%{transform:scale(1);}40%{transform:scale(1.4);}100%{transform:scale(1);}}

/* ===== 同风格横排案例（替代原上一篇/下一篇） ===== */
.same_style{margin-top:40px;}
/* 标题行：左标题 + 右侧"更多相关"链接（桌面/手机通用） */
.same_style .same_hd,.content_right .case_list .case_list_hd{display:flex;align-items:center;justify-content:space-between;margin:10px 0 16px;}
.same_style .same_title{font-size:24px;text-align:left;font-weight:bold;color:#382a1d;margin:0;}
.content_right .case_list .case_list_hd .title{text-align:left;font-weight:bold;color:#382a1d;margin:0;font-size:20px;}
.more-link{flex:none;font-size:12px;color:#e5493a;text-decoration:none;white-space:nowrap;}
.more-link:active{opacity:.7;}
.same_style .row{display:flex;gap:15px;flex-wrap:wrap;}
.same_style .row .case{flex:1 1 calc(50% - 8px);max-width:calc(50% - 8px);min-width:0;display:block;position:relative;cursor:pointer;border-radius:4px;overflow:hidden;}
.same_style .row .case img{width:100%;height:150px;object-fit:cover;display:block;}
.same_style .row .case .case_info{position:absolute;left:0;bottom:0;background:rgba(0,0,0,.42);width:100%;padding:10px;box-sizing:border-box;}
.same_style .row .case .case_info .case_title{font-size:16px;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.same_style .row .case .case_info .case_tag{display:flex;align-items:center;flex-wrap:wrap;color:#fff;font-size:12px;margin-top:4px;}
.same_style .same_more{text-align:center;margin-top:20px;}
.same_style .same_more .btn{background-color:#363636;color:#fff;border:none;border-radius:2px;display:inline-block;height:36px;line-height:36px;padding:0 16px;}

/* 窄屏：同风格案例强制两列小图（防止图片撑出屏幕） */
@media (max-width:768px){
    .same_style .row{display:flex!important;flex-wrap:wrap!important;gap:10px!important;}
    .same_style .row .case{flex:1 1 calc(50% - 5px)!important;width:auto!important;max-width:calc(50% - 5px)!important;min-width:0!important;}
    .same_style .row .case img{width:100%!important;height:120px!important;object-fit:cover!important;display:block!important;}
    .same_style .row .case .case_info{position:absolute!important;left:0!important;bottom:0!important;width:100%!important;box-sizing:border-box!important;}
    .same_style .row .case .case_info .case_title{text-align:left;}
}

/* ===== 电脑端（>768px）：同风格"查看更多"隐藏 + 区块与底部留间距；同户型查看更多不做改动 ===== */
@media (min-width:769px){
    .same_style .same_more{display:none;}
    .same_style{margin-bottom:30px;}
}

/* ===== 手机端（≤768px） ===== */
@media (max-width:768px){
    /* 同户型案例卡片标题居左 */
    .content_right .case_list .case .case_title{text-align:left;}
    /* 两处"标题行 + 右侧更多相关链接"在手机端同样左标题右链接 */
    .same_style .same_hd,.content_right .case_list .case_list_hd{margin:8px 0 14px;}
    .same_style .same_title{font-size:20px;}
    /* 手机端：两处"更多"链接显示（电脑端默认隐藏，仅手机端出现） */
    .more-link{display:inline-flex!important;align-items:center;gap:4px;flex:none;font-size:12px;color:#e5493a;text-decoration:none;white-space:nowrap;}
}

/* ===== 手机端：案例详情页大改（顶部图片轮播 + 设计师卡移到标签下） ===== */
/* 默认（电脑端）这两个块都不显示，桌面布局完全不变 */
.m-case-hero{display:none;}
.m-designer{display:none;}

@media (max-width:768px){
    /* 隐藏桌面端 banner 与右侧栏设计师卡（设计师卡已移到标签下） */
    .page-title{display:none;}
    .content_right .info{display:none;}
    /* 案例整块与底部（footer）之间留间距 */
    .detail_3{padding-bottom:40px;}
    /* 手机端案例标题字号放大（14 -> 16px） */
    .content_center .title{font-size:16px;line-height:1.4;margin:12px 0 8px;}

    /* 分空间图册：标签栏吸顶（固定在顶部导航之下，浏览图片期间不跟着滚走，图册滚完自动跟随消失） */
    .gallery-wrap .gallery-nav{position:sticky;top:50px;z-index:50;background:#fff;padding:2px 0;box-shadow:0 2px 6px rgba(0,0,0,.08);}
    .gallery-wrap .gallery-nav ul{display:flex;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0;}
    .gallery-wrap .gallery-nav ul li{flex:0 0 auto;white-space:nowrap;}

    /* 顶部案例图片 banner 式轮播：一屏一张、图片居中缩小（不满屏），每张停 3s 再滑动到下一张 */
    .m-case-hero{display:block;overflow:hidden;background:#f5f5f5;padding:8px 0;}
    .m-case-hero-scroll{display:flex;width:100%;transition:transform .6s ease;animation:none!important;}
    .m-case-hero-scroll .m-slide{flex:0 0 100%;display:flex;justify-content:center;align-items:center;}
    .m-case-hero-scroll .m-slide img{width:88%;max-width:88%;height:auto;max-height:none;object-fit:contain;display:block;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.1);}

    /* 设计师卡（位于标签下）：头像 + 信息 + 右侧紧凑预约按钮 */
    .m-designer{display:block;margin:14px 0 18px;padding:14px;background:#fff;border-radius:8px;box-shadow:0 1px 6px rgba(0,0,0,.06);}
    .m-designer-hd{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:center!important;gap:10px!important;}
    .m-designer-avatar{flex:0 0 auto!important;}
    .m-designer-avatar img{width:52px;height:52px;border-radius:50%;object-fit:cover;display:block;}
    .m-designer-info{flex:1 1 auto!important;min-width:0!important;text-align:left!important;}
    .m-designer-name{font-size:17px;font-weight:bold;color:#382a1d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .m-dot{color:#bbb;margin:0 5px;font-weight:normal;}
    .m-years-inline{font-style:italic;font-weight:normal;font-size:13px;color:#9a8a7a;margin-left:0;}
    .m-level-below{color:#ac713e;font-weight:normal;font-size:13px;margin-top:2px;}
    .m-designer-meta{margin-top:10px;font-size:14px;color:#666;}
    /* 预约设计按钮：用 ID 选择器确保压过桌面 .order-btn 的整行样式，只占头像/名字右侧的剩余空间 */
    #openOrderBtnM{display:inline-flex!important;align-items:center!important;justify-content:center!important;flex:0 0 auto!important;align-self:center!important;width:auto!important;max-width:46%;box-sizing:border-box!important;background:#e5493a!important;color:#fff!important;border-radius:4px!important;padding:7px 13px!important;font-size:13px!important;line-height:1.2!important;text-decoration:none!important;white-space:nowrap!important;}
}

/* 电脑端：左侧"空间"图册标签整体向下移15px（放在媒体查询外、仅桌面生效，手机端吸顶样式不受影响） */
@media(min-width:769px){
    .gallery-wrap .gallery-nav{margin-top:15px;}
}