/* ============================================================
   通用页面 + 区块框架样式（page-blocks.css）
   规范：所有区块走 flex/grid 正常文档流，禁止 position:absolute + 固定 height 的内容布局，
   从根上规避此前 pad/mobile 的重叠与截断。仅轮播箭头/指示点为 UI 控件（相对视口绝对定位，安全）。
   缓存破除：引用处带 ?v=20260811e
   ============================================================ */

.page-blocks {
    width: 100%;
}

.block {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 0;
    box-sizing: border-box;
}

.block-head {
    text-align: center;
    margin-bottom: 28px;
}
.block-head h2 {
    font-size: 28px;
    color: #333;
    margin: 0 0 8px;
}
.block-head p {
    font-size: 15px;
    color: #888;
    margin: 0;
}

/* ---------- 通栏（100% 视口宽）与背景 ---------- */
/* padding:0 —— 通栏区块上下也不留 40px，使首块 banner/轮播直接衔接吸顶页头（Opt 5）。
   内部 rich-inner / products-inner / carousel-viewport 自带内边距，视觉间距不受影响。 */
/* 注意：必须写成 .block.block--full（提高特异性），否则会被后面同特异性的 .block 规则
   按源码顺序覆盖，导致「通栏」失效——富文本 banner 区块会退回 1200px 居中 + 顶部 40px 留白，
   看起来既没贴页头也没贴浏览器边沿。提高特异性后即可稳定盖过 .block。 */
.block.block--full {
    max-width: none;
    padding: 0;
}
.block--full .rich-inner,
.block--full .products-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}
.block--full .rich-inner {
    max-width: 1200px;
    padding: 52px 0;
}
.block--has-bg {
    background-clip: border-box;
}
.block--has-bg.block--light-text,
.block--has-bg.block--light-text .rich-sub,
.block--has-bg.block--light-text .rich-body {
    color: rgba(255, 255, 255, 0.9);
}
.block--has-bg.block--light-text h2 {
    color: #fff;
}
.block--has-bg.block--light-text .rich-cta {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.6);
}
.block--has-bg.block--light-text .rich-cta:hover {
    background: rgba(255, 255, 255, 0.12);
}

/* ---------- 富文本（maxell集团等） ---------- */
/* banner 拉通整屏宽（width:100% = 视口全宽，与原站/生产环境一致，实际 >1200px），
   固定高度 460px（19:00 之前设计尺寸），图片 object-fit:cover 居中裁切、不拉伸（Opt 1）。 */
.block-rich .rich-banner {
    width: 100%;
    height: 460px;
    margin: 0;
    line-height: 0;
    overflow: hidden;
}
.block-rich .rich-banner img {
    width: 100%;
    height: 460px;
    object-fit: cover;
    object-position: center top;
    display: block;
}
/* 移动端 banner 自适应：桌面固定 460px 在窄屏过高、裁切过度，按断点缩小高度。
   图片始终 object-fit:cover 居中裁切，不拉伸（与桌面一致）。 */
@media screen and (max-width: 768px) {
    .block-rich .rich-banner,
    .block-rich .rich-banner img { height: 300px; }
}
@media screen and (max-width: 640px) {
    .block-rich .rich-banner,
    .block-rich .rich-banner img { height: 200px; }
}
@media screen and (max-width: 420px) {
    .block-rich .rich-banner,
    .block-rich .rich-banner img { height: 160px; }
}
.block-rich .rich-inner {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}
.block-rich h2 {
    font-size: 28px;
    color: #333;
    margin: 0 0 8px;
}
.block-rich .rich-sub {
    font-size: 15px;
    color: #888;
    margin: 0 0 20px;
}
.block-rich .rich-body {
    text-align: left;
}
.block-rich .rich-video {
    margin: 24px 0;
    display: flex;
    justify-content: center;
}
.block-rich .rich-video video {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    background: #000;
}
.block-rich .rich-cta {
    display: inline-block;
    margin-top: 18px;
    padding: 10px 28px;
    border: 1px solid #ccc;
    border-radius: 4px;
    color: #333;
    text-decoration: none;
    font-size: 14px;
}
.block-rich .rich-cta:hover {
    background: #f2f2f2;
}

/* ---------- 轮播图集 ---------- */
/* 内容列宽 1200px（不拉通全屏），固定高度 600px（19:00 之前设计尺寸），
   图片 object-fit:cover 居中裁切、不拉伸（Opt 2）。 */
.block-carousel {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}
.block-carousel.block--full {
    max-width: none;
    padding: 0;
    margin: 0;
}
.carousel-viewport {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 600px;
}
.block-carousel.block--full .carousel-viewport {
    height: 600px;
}
.carousel-track {
    display: flex;
    transition: transform 0.5s ease;
    width: 100%;
    height: 100%;
}
.carousel-slide {
    flex: 0 0 100%;
    display: block;
    height: 100%;
}
.carousel-slide img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.block-carousel.block--full .carousel-slide,
.block-carousel.block--full .carousel-slide img {
    height: 100%;
}
.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
}
.carousel-arrow.prev { left: 16px; }
.carousel-arrow.next { right: 16px; }
.carousel-dots {
    position: absolute;
    bottom: 14px;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 2;
}
.carousel-dots .dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    cursor: pointer;
}
.carousel-dots .dot.is-active {
    background: #fff;
}

/* ---------- 产品中心 ---------- */
.products-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}
.block-products.block--full {
    padding-top: 56px;
    padding-bottom: 56px;
}
.product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.product-card {
    display: block;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 6px;
    overflow: hidden;
    text-decoration: none;
    color: #333;
    transition: box-shadow 0.2s ease;
}
.product-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
.product-thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #f7f7f7;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}
.product-thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.product-name {
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---------- 新闻资讯 ---------- */
/* 通栏（full_width=yes）时：section 拉通整屏，.news-inner 内部内容居中限宽 1200px，
   背景色随 section 整屏显示；非通栏时 .news-inner 不占额外空间，外观不变。 */
.news-inner {
    max-width: 1200px;
    margin: 0 auto;
}
.block-news.block--full {
    padding-top: 52px;
    padding-bottom: 52px;
}
.block-news.block--full .news-inner {
    padding: 52px 0;
}
.news-feed {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}
.news-carousel {
    position: relative;
    overflow: hidden;
    flex: 0 0 45%;
    max-width: 45%;
    height: 360px;
    border-radius: 6px;
}
.news-track {
    display: flex;
    transition: transform 0.5s ease;
}
.news-slide {
    flex: 0 0 100%;
    display: block;
}
.news-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    display: block;
    border-radius: 6px;
}
.news-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
}
.news-arrow.prev { left: 12px; }
.news-arrow.next { right: 12px; }
.news-dots {
    position: absolute;
    bottom: 12px;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 2;
}
.news-dots .dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin: 0 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    cursor: pointer;
}
.news-dots .dot.is-active {
    background: #fff;
}
.news-list {
    flex: 1;
    list-style: none;
    margin: 0;
    padding: 0;
}
.news-list li {
    border-bottom: 1px solid #eee;
}
.news-list li a {
    display: block;
    padding: 14px 0;
    text-decoration: none;
    color: #333;
}
.news-list .news-title {
    display: block;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 6px;
}
.news-list .news-date {
    display: inline-block;
    font-size: 13px;
    color: #999;
    margin-right: 12px;
}
.news-list .news-desc {
    display: block;
    font-size: 13px;
    color: #888;
    line-height: 1.6;
    margin-top: 4px;
}
/* 新闻区块：深色背景（bg_color / bg_image）下，勾选「浅色文字」时正文转浅色，保证可读 */
.block-news.block--has-bg.block--light-text .block-head h2,
.block-news.block--has-bg.block--light-text .block-head p {
    color: #fff;
}
.block-news.block--has-bg.block--light-text .news-list a {
    color: rgba(255, 255, 255, 0.88);
}
.block-news.block--has-bg.block--light-text .news-list .news-title {
    color: rgba(255, 255, 255, 0.96);
}
.block-news.block--has-bg.block--light-text .news-list .news-date,
.block-news.block--has-bg.block--light-text .news-list .news-desc {
    color: rgba(255, 255, 255, 0.7);
}
.block-news.block--has-bg.block--light-text .news-arrow {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.6);
}

/* ---------- 联系我们卡片 ---------- */
.contact-cards {
    display: flex;
    gap: 20px;
}
.contact-card {
    flex: 1;
    box-shadow: #eee 2px 2px 10px;
    padding: 20px;
    border-radius: 6px;
    background: #fff;
}
.contact-company {
    font-size: 24px;
    margin: 0 0 15px;
    color: #333;
}
.contact-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.contact-list li {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}
.contact-icon {
    width: 24px;
    height: 24px;
    margin-right: 10px;
    flex: 0 0 auto;
}
.contact-label {
    font-weight: bold;
    font-size: 16px;
    margin-right: 10px;
    min-width: 40px;
}
.contact-value {
    font-size: 14px;
    color: #333;
    word-break: break-word;
}

/* ---------- 富文本内嵌媒体（hero 图 / 表格 / 视频）---------- */
.block-rich .rich-body img {
    max-width: 100%;
    height: auto;
}
.block-rich .rich-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 18px 0;
    font-size: 14px;
}
.block-rich .rich-body th,
.block-rich .rich-body td {
    border: 1px solid #e2e2e2;
    padding: 12px 14px;
    text-align: left;
    vertical-align: top;
}
.block-rich .rich-body th {
    background: #fafafa;
    font-weight: 600;
}
.block-rich .rich-body .tableviewcontent {
    overflow-x: auto;
}
.block-rich .rich-body .rich-video {
    margin: 24px 0;
}
.block-rich .rich-body .rich-video video {
    width: 100%;
    max-height: 460px;
    border-radius: 6px;
    background: #000;
}

/* ---------- 全球分支机构网格（business 页）----------
   作用域限定在 .rich-content 下，避免被 rich-content.css 的通用
   ul/li/img 规则（特异性更高）覆盖，从而保证 编辑器 / 预览 / 线上 三处一致。 */
.rich-content .biz-offices {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    list-style: none;
    padding: 0;
    margin: 18px 0;
}
.rich-content .biz-offices li {
    display: flex;
    gap: 14px;
    align-items: center;
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 14px;
    background: #fff;
}
.rich-content .biz-offices img {
    width: 64px !important;
    height: 64px !important;
    object-fit: contain !important;
    flex: 0 0 auto;
}
.rich-content .biz-name {
    font-weight: 600;
    font-size: 15px;
    color: #333;
}
.rich-content .biz-addr {
    font-size: 13px;
    color: #777;
    margin-top: 4px;
    line-height: 1.6;
}

/* ============================================================
   响应式：PC / PAD / MOBILE
   ============================================================ */

/* PAD：641–1024 */
@media screen and (max-width: 1024px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .rich-content .biz-offices {
        grid-template-columns: repeat(2, 1fr);
    }
    .block-carousel.block--full .carousel-viewport {
        height: 360px;
    }
}

/* MOBILE：≤640 */
@media screen and (max-width: 640px) {
    .block {
        padding: 28px 4%;
    }
    /* 通栏区块（含带 banner 的富文本）移动端仍紧贴页头与浏览器边沿，不被上面的 4% 内边距 inset */
    .block.block--full {
        padding: 0;
    }
    .block-head h2,
    .block-rich h2 {
        font-size: 22px;
    }
    .block--full .rich-inner {
        padding: 36px 4%;
    }
    .product-grid {
        grid-template-columns: 1fr;
    }
    .block-products.block--full {
        padding-top: 36px;
        padding-bottom: 36px;
    }
    .news-feed {
        flex-direction: column;
        gap: 18px;
    }
    .block-news.block--full .news-inner {
        padding: 36px 4%;
    }
    .news-carousel {
        flex: none;
        max-width: 100%;
        width: 100%;
        height: 220px;
    }
    .block-carousel.block--full .carousel-viewport {
        height: 200px;
    }
    .contact-cards {
        flex-direction: column;
    }
    .contact-company {
        font-size: 18px;
    }
    .rich-content .biz-offices {
        grid-template-columns: 1fr;
    }
}