/* ============================================================
   资质证书列表-2 (certificates_list_2)
   还原自 D:/desktop/证书.html 的 .ly_certificates_list_2 (data-visual-id=1501)。
   本文件只放"与配置无关"的骨架尺寸；颜色/字号/列数/图片比例等实例级配置由模板输出成
   CSS 变量(--cert2-*)，这里统一消费 —— 与 case_list_2.css 同一套路。
   图片比例开关走根元素 data-image-ratio 属性选择器(fit 时图片按原始比例流式排版)。
   模块 CSS 自包含：模板里用 <link href="/sitebuilder/css/certificates_list_2.css">，
   文件已登记进 SiteStaticPublishServiceImpl.CSS_FILES，否则发布态缺文件。
   大图查看(点图片放大 / 上一张下一张 / 关闭 / 移动端滑动)的样式在本文件末尾 .deco-cert-lightbox 段，
   交互见 static/sitebuilder/js/certificates_list_2.js。
   ============================================================ */
.ly_certificates_list_2 { background-color: #fff; }
.ly_certificates_list_2 * { box-sizing: border-box; }

/* 页面大标题: 文案取页面名称(不是配置项), 字号/颜色照原站固定值, 走全局标题字体 */
.ly_certificates_list_2 .cer_title {
    margin: 0;
    font-size: 42px;
    color: #1f2328;
    text-align: center;
    line-height: 1.3;
    font-weight: normal;
}

/* ---------- 证书网格 ---------- */
.ly_certificates_list_2 .certificates_list {
    display: grid;
    grid-template-columns: repeat(var(--cert2-pc-columns, 4), minmax(0, 1fr));
    gap: 55px;
    margin-top: 80px;
}
.ly_certificates_list_2 .certificates_list .cer_item { overflow: hidden; }

/* 图片: 比例由 --cert2-img-ratio(padding-top)撑开, 图片绝对定位居中;
   证书图讲究"看全", 所以是 contain 不裁切, 与产品/案例封面的 cover 不同。
   "适应图片"(data-image-ratio=fit)时不占位, 图片按原始比例流式排版 */
.ly_certificates_list_2 .certificates_list .pic_box { display: block; }
.ly_certificates_list_2 .certificates_list .pic_box a {
    display: block;
    cursor: zoom-in;
    text-decoration: none;
}
.ly_certificates_list_2 .certificates_list .compute_item_img { width: 100%; }
.ly_certificates_list_2 .certificates_list .compute_process_img {
    position: relative;
    padding-top: var(--cert2-img-ratio, 150.00%);
    overflow: hidden;
}
.ly_certificates_list_2 .certificates_list .compute_process_img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
}
.ly_certificates_list_2[data-image-ratio='fit'] .certificates_list .compute_process_img { padding-top: 0; }
.ly_certificates_list_2[data-image-ratio='fit'] .certificates_list .compute_process_img img {
    position: static;
    height: auto;
}

/* ---------- 证书名称 ---------- */
.ly_certificates_list_2 .certificates_list .name_box {
    margin: 15px 0 0;
    text-align: center;
    line-height: 1.4;
    font-weight: normal;
    word-break: break-word;
    font-size: var(--cert2-pc-name-size, 16px);
    color: var(--cert2-name-color, #222222);
}

/* 一条证书都没有时的占位提示(装修态提示去哪加数据; 发布态同样文案) */
.ly_certificates_list_2 .cer_empty {
    margin-top: 40px;
    text-align: center;
    font-size: 14px;
    color: #999;
}

@media screen and (max-width: 1000px) {
    .ly_certificates_list_2 .cer_title { font-size: 28px; }
    .ly_certificates_list_2 .certificates_list {
        grid-template-columns: repeat(var(--cert2-mobile-columns, 2), minmax(0, 1fr));
        gap: 25px;
        margin-top: 40px;
    }
    .ly_certificates_list_2 .certificates_list .name_box {
        font-size: var(--cert2-mobile-name-size, 14px);
    }
}

/* ============================================================
   大图查看层 (.deco-cert-lightbox)
   整页只有一个, 由 certificates_list_2.js 首次用到时插到 body 下(所以选择器不挂在
   .ly_certificates_list_2 里面)。默认 display:none, 打开时加 .is-open。
   左右箭头在移动端隐藏 —— 那边用手指滑动切换。
   z-index 与 video.js 的视频弹窗同级(99999): 装修态也在 iframe 画布内弹, 要盖住编辑器
   给模块加的描边/工具条覆盖层(editor.css 里 z-index 10~100)。
   ============================================================ */
.deco-cert-lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, .85);
    /* 触屏上禁掉浏览器的横向手势, 交给脚本判滑动方向 */
    touch-action: pan-y;
}
.deco-cert-lightbox.is-open { display: block; }
.deco-cert-lightbox * { box-sizing: border-box; }

/* 图片区: 居中, 长边不超过视口。点这一层的空白处(stage 自身)关闭, 点图片本身不关 */
.deco-cert-lightbox .cert_lb_stage {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 80px;
}
.deco-cert-lightbox .cert_lb_figure {
    margin: 0;
    max-width: 100%;
    max-height: 100%;
    text-align: center;
}
.deco-cert-lightbox .cert_lb_img {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 160px);
    margin: 0 auto;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}
.deco-cert-lightbox .cert_lb_caption {
    margin-top: 14px;
    font-size: 14px;
    color: #fff;
    line-height: 1.4;
    word-break: break-word;
}

/* 关闭按钮与左右箭头: 纯 CSS 画, 不依赖图标字体(发布态是纯静态页, 少一个依赖) */
.deco-cert-lightbox .cert_lb_close,
.deco-cert-lightbox .cert_lb_prev,
.deco-cert-lightbox .cert_lb_next {
    position: absolute;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
    color: #fff;
    font-size: 22px;
    line-height: 44px;
    text-align: center;
    cursor: pointer;
    transition: background .2s;
}
.deco-cert-lightbox .cert_lb_close:hover,
.deco-cert-lightbox .cert_lb_prev:hover,
.deco-cert-lightbox .cert_lb_next:hover { background: rgba(255, 255, 255, .3); }
.deco-cert-lightbox .cert_lb_close { top: 20px; right: 20px; }
.deco-cert-lightbox .cert_lb_prev { top: 50%; left: 20px; margin-top: -22px; }
.deco-cert-lightbox .cert_lb_next { top: 50%; right: 20px; margin-top: -22px; }
/* 只有一张证书时藏起左右箭头(脚本加 .is-single) */
.deco-cert-lightbox.is-single .cert_lb_prev,
.deco-cert-lightbox.is-single .cert_lb_next { display: none; }

@media screen and (max-width: 1000px) {
    .deco-cert-lightbox .cert_lb_stage { padding: 50px 12px; }
    .deco-cert-lightbox .cert_lb_img { max-height: calc(100vh - 140px); }
    /* 移动端靠滑动切换, 不占屏幕 */
    .deco-cert-lightbox .cert_lb_prev,
    .deco-cert-lightbox .cert_lb_next { display: none; }
}