/* ==========================================================================
   其他实例详情页 /cases/{id} —— 自研样式（2026-10-19 起重设计）
   --------------------------------------------------------------------------
   背景：该页此前整块照搬目标站结构（ny_banner_case / ny_product_left 侧栏 /
   .wslp 轮播 / 内联样式 table#newsfoot），观感与原站无异。本次按站点自己的
   设计语言重做，与首页(hb-*)、页脚(ftr-)、工具栏(tbar-)的「科技蓝体系」一致：
     深蓝灰 #1f2d3d/#101820 + 科技蓝 #0796e5，方角卡片 + 1px 描边，
     hover 三件套（蓝边 + 浮起阴影 + 图片微缩放），断点 1020/768/620。
   仅本页加载（Cases::detail() 注入，仿照首页 kuk-home.css 的按页加载先例）；
   改样式后请把控制器里 css/kuk-case.css 的 &r= 参数 +1 破缓存。
   类名前缀 cd-（case detail）。页头/页脚/导航仍是移植框架，由 style.css 负责。
   ========================================================================== */

:root {
    --cd-ink: #1f2d3d;         /* 标题/深色带底 */
    --cd-ink-deep: #101820;     /* hero 遮罩深处 */
    --cd-blue: #0796e5;         /* 主色 */
    --cd-blue-lift: #4db4f0;    /* 深底上的亮蓝 */
    --cd-blue-hover: #057ec2;   /* 主色 hover 加深 */
    --cd-text: #231f20;         /* 正文 */
    --cd-muted: #555;           /* 次级正文 */
    --cd-faint: #999;           /* 辅助说明 */
    --cd-bg: #f5f7fa;           /* 浅灰区底 */
    --cd-line: #e6ebf0;         /* 卡片描边 */
    --cd-line-soft: #e8ecf1;    /* 分隔线 */
    --cd-img-bg: #e9ebee;       /* 图片占位底 */
    --cd-shadow: 0 12px 28px rgba(31, 45, 61, .08);
}

.cd-page {
    font-family: "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    color: var(--cd-text);
}

/* ---------------------------------------------------------------- 案例头 */
/* 封面大图作背景（模板内联 background-image）+ 深色渐变遮罩保证文字可读；
   遮罩走 ::before 而不是 background-image，否则会被模板的内联背景覆盖 */
.cd-hero {
    position: relative;
    min-height: 340px;
    display: flex;
    align-items: flex-end;
    background-color: var(--cd-ink);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    color: #fff;
}

.cd-hero::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(180deg, rgba(16, 24, 32, .56) 0, rgba(16, 24, 32, .87) 100%);
}

.cd-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--cd-blue) 0, var(--cd-blue) 140px, rgba(7, 150, 229, 0) 140px);
}

.cd-hero-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 52px 15px 46px;
}

.cd-crumb {
    font-size: 13px;
    color: rgba(255, 255, 255, .62);
}

.cd-crumb a {
    color: rgba(255, 255, 255, .62);
    transition: color .2s;
}

.cd-crumb a:hover {
    color: var(--cd-blue-lift);
}

.cd-crumb i {
    font-style: normal;
    margin: 0 8px;
    color: rgba(255, 255, 255, .35);
}

.cd-kicker {
    margin-top: 30px;
    font-size: 12px;
    letter-spacing: 3px;
    color: var(--cd-blue-lift);
}

.cd-kicker::before {
    content: "";
    display: inline-block;
    width: 22px;
    height: 2px;
    margin-right: 10px;
    vertical-align: 4px;
    background: var(--cd-blue);
}

.cd-hero h1 {
    margin: 12px 0 0;
    font-size: 34px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: .5px;
}

.cd-sub {
    margin: 14px 0 0;
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .78);
}

/* -------------------------------------------------------------- 主体容器 */
.cd-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 42px 15px 64px;
}

/* 桌面：正文左（跨两行），图集右上、信息卡右下；
   768 以下单列，DOM 顺序 = 图集 → 正文 → 信息卡 */
.cd-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    grid-template-areas:
        "body gallery"
        "body facts";
    gap: 24px 48px;
    align-items: start;
}

.cd-body {
    grid-area: body;
    min-width: 0;
}

.cd-gallery {
    grid-area: gallery;
    margin: 0;
}

.cd-facts {
    grid-area: facts;
}

/* ---------------------------------------------------------------- 正文 */
.cd-lead {
    margin-bottom: 28px;
    padding: 18px 20px;
    background: var(--cd-bg);
    border-left: 3px solid var(--cd-blue);
    font-size: 15px;
    line-height: 1.9;
    color: var(--cd-muted);
}

.cd-lead p {
    margin: 0 0 10px;
}

.cd-lead p:last-child {
    margin-bottom: 0;
}

.cd-lead strong {
    color: var(--cd-ink);
}

.cd-content {
    font-size: 15px;
    line-height: 1.9;
    color: var(--cd-muted);
    word-break: break-word;
}

.cd-content p {
    margin: 0 0 20px;
}

.cd-content p:last-child {
    margin-bottom: 0;
}

.cd-content img {
    max-width: 100%;
    height: auto;
    border: 0;
}

/* 库里的正文是「<p><strong>项目背景：</strong>正文…</p>」四段结构：
   把段首 strong 渲染成小节标签（整行显示 + 蓝色小竖条），不改数据 */
.cd-content p strong:first-child {
    display: block;
    margin-bottom: 4px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.6;
    color: var(--cd-ink);
}

.cd-content p strong:first-child::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 15px;
    margin-right: 9px;
    vertical-align: -2px;
    background: var(--cd-blue);
}

/* ---------------------------------------------------------------- 图集 */
.cd-gallery-main {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--cd-img-bg);
    border: 1px solid var(--cd-line);
}

.cd-gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.cd-gallery-main:hover img {
    transform: scale(1.03);
}

.cd-gallery-zoom {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 7px 14px;
    background: rgba(16, 24, 32, .72);
    font-size: 12px;
    letter-spacing: 1px;
    color: #fff;
    transition: background .25s;
}

.cd-gallery-main:hover .cd-gallery-zoom {
    background: var(--cd-blue);
}

.cd-gallery-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.cd-gallery-thumbs a {
    display: block;
    width: 74px;
    height: 74px;
    overflow: hidden;
    background: var(--cd-img-bg);
    border: 2px solid transparent;
    transition: border-color .25s;
}

.cd-gallery-thumbs a:hover {
    border-color: var(--cd-blue);
}

.cd-gallery-thumbs img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cd-gallery-cap {
    margin-top: 10px;
    font-size: 12.5px;
    color: #777;
}

/* -------------------------------------------------------------- 信息卡 */
.cd-facts {
    padding: 22px 22px 24px;
    background: #fff;
    border: 1px solid var(--cd-line);
}

.cd-facts h3 {
    margin: 0 0 4px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--cd-line-soft);
    font-size: 16px;
    font-weight: 600;
    color: var(--cd-ink);
}

.cd-facts dl {
    margin: 0;
}

.cd-facts dt {
    margin-top: 14px;
    font-size: 13px;
    color: var(--cd-faint);
}

.cd-facts dd {
    margin: 3px 0 0;
    font-size: 14.5px;
    color: var(--cd-text);
}

.cd-facts dd a {
    color: var(--cd-blue);
    transition: color .2s;
}

.cd-facts dd a:hover {
    color: var(--cd-blue-hover);
    text-decoration: underline;
}

.cd-btn {
    display: block;
    margin-top: 22px;
    padding: 13px 0;
    background: var(--cd-blue);
    font-size: 14px;
    letter-spacing: 1px;
    text-align: center;
    color: #fff;
    transition: background .25s;
}

.cd-btn:hover {
    background: var(--cd-blue-hover);
    color: #fff;
    text-decoration: none;
}

/* ---------------------------------------------------- 上一条 / 下一条 */
.cd-pager {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 46px;
}

.cd-pager-item {
    display: block;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid var(--cd-line);
    transition: border-color .25s, box-shadow .25s;
}

.cd-pager-item:hover {
    border-color: var(--cd-blue);
    box-shadow: var(--cd-shadow);
    text-decoration: none;
}

.cd-pager-item.is-empty {
    background: var(--cd-bg);
    cursor: default;
}

.cd-pager-item.is-empty:hover {
    border-color: var(--cd-line);
    box-shadow: none;
}

.cd-pager-dir {
    display: block;
    margin-bottom: 7px;
    font-size: 12.5px;
    letter-spacing: 1px;
    color: var(--cd-blue);
}

.cd-pager-item.is-empty .cd-pager-dir {
    color: #b8c1ca;
}

.cd-pager-title {
    display: block;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.55;
    color: var(--cd-ink);
}

.cd-pager-item.is-empty .cd-pager-title {
    font-weight: 400;
    color: var(--cd-faint);
}

.cd-pager-next {
    text-align: right;
}

/* ------------------------------------------------------------ 相关案例 */
.cd-related {
    margin-top: 46px;
    padding-top: 36px;
    border-top: 1px solid var(--cd-line-soft);
}

.cd-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 26px;
}

.cd-head h2 {
    position: relative;
    margin: 0;
    padding-left: 14px;
    font-size: 24px;
    font-weight: 600;
    color: var(--cd-ink);
}

.cd-head h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 22px;
    background: var(--cd-blue);
}

.cd-more {
    font-size: 13.5px;
    color: var(--cd-muted);
    white-space: nowrap;
    transition: color .2s;
}

.cd-more i {
    font-style: normal;
    display: inline-block;
    transition: transform .25s;
}

.cd-more:hover {
    color: var(--cd-blue);
    text-decoration: none;
}

.cd-more:hover i {
    transform: translateX(4px);
}

.cd-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.cd-card {
    display: block;
    background: #fff;
    border: 1px solid var(--cd-line);
    transition: border-color .25s, box-shadow .25s;
}

.cd-card:hover {
    border-color: var(--cd-blue);
    box-shadow: var(--cd-shadow);
    text-decoration: none;
}

.cd-card-pic {
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--cd-img-bg);
}

.cd-card-pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.cd-card:hover .cd-card-pic img {
    transform: scale(1.04);
}

.cd-card-txt {
    display: block;
    padding: 16px 18px 18px;
}

.cd-card-txt strong {
    display: block;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--cd-ink);
}

.cd-card-txt em {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    font-style: normal;
    line-height: 1.6;
    color: #777;
}

.cd-card-more {
    display: block;
    margin-top: 12px;
    font-size: 12.5px;
    font-style: normal;
    letter-spacing: 1px;
    color: var(--cd-blue);
    transition: transform .25s;
}

.cd-card:hover .cd-card-more {
    transform: translateX(4px);
}

/* -------------------------------------------------------------- 响应式 */
@media screen and (max-width: 1020px) {
    .cd-main {
        grid-template-columns: minmax(0, 1fr) 320px;
        gap: 24px 32px;
    }

    .cd-hero h1 {
        font-size: 30px;
    }
}

@media screen and (max-width: 768px) {
    .cd-main {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "gallery"
            "body"
            "facts";
        gap: 26px;
    }

    .cd-hero {
        min-height: 260px;
    }

    .cd-hero-inner {
        padding: 40px 15px 34px;
    }

    .cd-hero h1 {
        font-size: 26px;
    }

    .cd-wrap {
        padding: 30px 15px 52px;
    }

    .cd-related-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }
}

@media screen and (max-width: 620px) {
    .cd-hero {
        min-height: 215px;
    }

    .cd-kicker {
        margin-top: 20px;
    }

    .cd-hero h1 {
        font-size: 22px;
    }

    .cd-sub {
        font-size: 14px;
    }

    .cd-head h2 {
        font-size: 20px;
    }

    .cd-pager {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-top: 34px;
    }

    .cd-pager-next {
        text-align: left;
    }

    .cd-related {
        margin-top: 34px;
        padding-top: 28px;
    }

    .cd-related-grid {
        grid-template-columns: 1fr;
    }

    .cd-facts {
        padding: 18px 18px 20px;
    }
}