/* =========================================================
   3/5 · 公共组件 components.css
   ---------------------------------------------------------
   这一层是「多个页面都会用到」的积木。**类名不带页面前缀** ——
   前缀只属于 pages/*.css（只有单个页面用得到的东西）。

   现有组件：
     · 站点头部 / 页脚（chrome，每个页面都有）
     · 按钮 .btn
     · 区块骨架 .section / 区块标题 .sec-head
     · 内页通栏 .inner-hero + 面包屑 .crumb
     · 卡片网格 .pgrid / .pcard（首页产品目录、搜索页）
     · 表单 .form-card / .field / .alert
     · 联系方式 .contact-grid / .contact-info
     · 正文排版 .article-body
     · 分页 .pager、空态 .empty-box、行动号召 .cta
     · 图集与灯箱 .lb-* / .lbx-*

   ⚠️ 新增组件放这里、新增页面专属样式放 pages/{页面}.css。
      拿不准时问一句：这个样式删掉，会不会影响两个以上页面？
      会 → 这里。
   ========================================================= */

/* ---------------- 顶部导航 ---------------- */

.site-head {
    position: fixed; left: 0; right: 0; top: 0; z-index: 60;
    transition: background .3s ease, box-shadow .3s ease;
}
.site-head.solid {
    background: rgba(10, 26, 47, .94);
    box-shadow: 0 2px 20px rgba(0, 0, 0, .22);
}
.head-inner {
    height: var(--head-h); display: flex; align-items: center; gap: 28px; color: #fff;
}
.logo {
    display: flex; align-items: center; gap: 10px;
    font-size: 18px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap;
}
.logo img { max-height: 34px; width: auto; }

.nav {
    display: flex; align-items: center; gap: 22px;
    /* ⚠️ 逻辑属性：RTL 语言下「把导航推向右侧（把后面搜索/语言条挤到行尾）」
       的方向会自动反过来。用 margin-right 则阿拉伯语站导航仍然贴在左边、
       语言条挤在导航右边，整条顶栏和 RTL 的阅读顺序相反。 */
    margin-inline-end: auto;
    /* ⚠️ 三个属性缺一不可：
       flex-wrap:nowrap + min-width:0 + 链接 nowrap
       —— 缺了任何一项，宽度不够时中文会被压成**竖排单字**（每个字独占一行），
          加上 flex-wrap:wrap 改成换行同样不行（头部会被撑高、页面顶部变乱）。
       正确做法：保持单行，靠下面的断点逐步隐藏次要项让出空间。 */
    flex-wrap: nowrap;
    min-width: 0;
    overflow: hidden;          /* 极端窄屏时裁掉，不允许把头部撑变形 */
}
.nav a {
    font-size: 15px; color: rgba(255, 255, 255, .82); position: relative;
    padding: 6px 0; transition: color .2s;
    /* ⚠️ 缺 white-space 时空间不足会把「联系我们」压成竖排单字 */
    white-space: nowrap; flex: 0 0 auto;
}
.nav a::after {
    /* 下划线增长动画：从「行首」长到整条。
       ⚠️ 这里必须是逻辑属性（inset-inline-*），不能用 left/right：
       写成物理属性的话，RTL 语言下横线会从右往左反着长，与文字方向相冲。
       ⚠️ 过渡属性也要一起换成 inset-inline-end —— 只换定位不换过渡 = 动画直接消失（瞬时跳变）。 */
    content: ""; position: absolute; inset-inline-start: 0; inset-inline-end: 100%; bottom: 0; height: 2px;
    background: var(--blue-l); transition: inset-inline-end .25s ease;
}
.nav a:hover { color: #fff; }
.nav a:hover::after { inset-inline-end: 0; }

.head-right { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.search input {
    width: 150px; min-width: 0; padding: 7px 12px; font-size: 13px; color: #fff;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px;
    outline: none; transition: .25s;
}
.search input::placeholder { color: rgba(255, 255, 255, .55); }
.search input:focus { width: 190px; background: rgba(255, 255, 255, .16); }

.langs {
    display: flex; gap: 6px; font-size: 13px;
    flex: 0 0 auto; white-space: nowrap;   /* 语言名（意大利语/阿拉伯语）不能被压成竖排 */
}
.langs a { padding: 4px 9px; border-radius: 6px; color: rgba(255, 255, 255, .7); }
.langs a.on { background: var(--blue); color: #fff; }

.nav-toggle {
    display: none; width: 40px; height: 40px; border: 0; cursor: pointer;
    background: transparent; padding: 0;
}
.nav-toggle span {
    display: block; height: 2px; margin: 5px auto; width: 22px;
    background: #fff; transition: .25s;
}

/* ---------------- 页脚 ---------------- */

.site-foot { background: var(--navy); color: var(--on-dark); padding: 72px 0 0; }
.foot-inner { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 46px; }
.foot-col .f-title { color: #fff; font-size: 16px; font-weight: 600; margin-bottom: 16px; }
.foot-col p, .foot-col li { font-size: 14.5px; margin-bottom: 9px; }
.foot-col a:hover { color: #fff; }
.foot-logo { color: #fff; font-size: 19px; font-weight: 700; margin-bottom: 14px; }
.copyright {
    border-top: 1px solid rgba(255, 255, 255, .10); padding: 22px 0;
    font-size: 13.5px; text-align: center; color: rgba(185, 198, 214, .72);
}

/* ---------------- 按钮 ---------------- */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px 28px; border-radius: 10px; font-size: 15px; font-weight: 600;
    border: 1px solid transparent; cursor: pointer; transition: .22s;
}
.btn.primary { background: var(--blue); color: #fff; }
.btn.primary:hover { background: var(--blue-d); transform: translateY(-1px); }
.btn.ghost { border-color: rgba(255, 255, 255, .34); color: #fff; }
.btn.ghost:hover { background: rgba(255, 255, 255, .10); }
.btn.dark { background: var(--navy); color: #fff; }
.btn.dark:hover { background: var(--navy-2); }
/* 小号：询价单、抽屉里的一排操作按钮用 */
.btn.small { padding: 8px 16px; font-size: 14px; border-radius: 8px; }

/* ---------------- 区块通用骨架 ---------------- */

.section { padding: 96px 0; }
.section.alt  { background: var(--soft); }
.section.dark { background: var(--navy); color: #fff; }
.section.dark .sec-desc { color: var(--on-dark); }

.sec-head { max-width: 720px; margin-bottom: 52px; }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-tag {
    font-size: 13px; letter-spacing: .16em; text-transform: uppercase;
    color: var(--blue); margin-bottom: 12px; font-weight: 600;
}
.section.dark .sec-tag { color: var(--blue-l); }
.sec-title { font-size: 36px; margin-bottom: 14px; }
.sec-desc  { font-size: 17px; color: var(--muted); }

/* ---------------- 内页通栏（列表 / 详情 / 单页 / 询价 / 联系共用） ---------------- */

.inner-hero {
    position: relative; overflow: hidden; background: var(--navy); color: #fff;
    padding: 148px 0 64px;
}
.inner-hero::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; opacity: .28;
    background-image:
        linear-gradient(rgba(91, 168, 245, .12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(91, 168, 245, .12) 1px, transparent 1px);
    background-size: 52px 52px;
}
.inner-hero::after {
    content: ""; position: absolute; width: 700px; height: 700px; inset-inline-start: -180px; top: -280px;
    background: radial-gradient(circle, rgba(0, 102, 204, .38), transparent 62%);
}
.inner-hero .wrap { position: relative; z-index: 2; }
.inner-hero h1 { font-size: 40px; margin-bottom: 12px; }
.inner-hero .desc { color: var(--on-dark); font-size: 17px; max-width: 680px; }

.crumb { font-size: 14px; color: rgba(255, 255, 255, .62); margin-bottom: 14px; }
.crumb a:hover { color: #fff; }
.crumb span { margin: 0 8px; opacity: .5; }

/* ---------------- 卡片网格（产品卡） ---------------- */

.pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.pgrid.four { grid-template-columns: repeat(4, 1fr); }

.pcard {
    display: block; background: #fff; border: 1px solid var(--line);
    border-radius: var(--radius); overflow: hidden; transition: .24s;
}
.pcard:hover {
    transform: translateY(-4px); box-shadow: var(--shadow); border-color: rgba(0, 102, 204, .34);
}
.pcard .pic {
    aspect-ratio: 4 / 3; background: var(--soft); overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.pcard .pic img { width: 100%; height: 100%; object-fit: cover; }
.pcard .pic .ph { color: #B6BCC6; font-size: 13px; }
.pcard .body { padding: 20px 22px 24px; }
.pcard .name { font-size: 18px; font-weight: 600; margin-bottom: 5px; }
.pcard .en   { font-size: 13px; color: var(--muted); }
.pcard .more { display: inline-block; margin-top: 14px; font-size: 14px; color: var(--blue); font-weight: 600; }
.pcard .more::after { content: " \2192"; }

/* ---------------- 表单 ---------------- */

.form-card {
    background: #fff; border: 1px solid var(--line); border-radius: 18px;
    padding: 38px; box-shadow: 0 6px 24px rgba(16, 34, 60, .05);
}
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 7px; }
.field input, .field textarea, .field select {
    width: 100%; padding: 12px 14px; font-family: inherit; font-size: 15px;
    border: 1px solid var(--line); border-radius: 10px; background: #fff; outline: none;
    transition: .2s;
}
.field input:focus, .field textarea:focus, .field select:focus {
    border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0, 102, 204, .12);
}
.field textarea { min-height: 130px; resize: vertical; }
/* 蜜罐字段：视觉上移出视口但**保留在可聚焦树里**（机器人会填）。
   ⚠️ 别改成 display:none / visibility:hidden —— 那样机器人也不填了，蜜罐失效。 */
.hp { position: absolute; inset-inline-start: -9999px; }

.alert { padding: 14px 18px; border-radius: 10px; margin-bottom: 20px; font-size: 15px; }
.alert.ok  { background: rgba(22, 163, 74, .10); color: #15803D; border: 1px solid rgba(22, 163, 74, .25); }
.alert.err { background: rgba(220, 38, 38, .08);  color: #B91C1C; border: 1px solid rgba(220, 38, 38, .22); }

/* ---------------- 联系方式 ---------------- */

.contact-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; align-items: start; }
.contact-info li { padding: 16px 0; border-bottom: 1px solid var(--line); }
.contact-info .k { font-size: 13px; color: var(--muted); margin-bottom: 3px; }
.contact-info .v { font-size: 16px; font-weight: 600; }
/* 后台广告位横幅（联系页 / 询盘页左栏） */
.contact-ad { display: block; margin-top: 22px; }

/* ---------------- 卡片内文字（详情页侧栏 / 联系页共用） ---------------- */

.card-h    { font-size: 18px; margin-bottom: 8px; }
.card-h.roomy { margin-bottom: 14px; }     /* 后面紧跟表格时留多一点通风 */
.card-p    { color: var(--muted); font-size: 15px; margin-bottom: 18px; }
.card-note { margin-top: 16px; font-size: 15px; color: var(--muted); }
.card-sep  { height: 1px; background: var(--line); margin: 20px 0; }
/* 通栏按钮：表单/侧栏里「整行」的主操作 */
.btn.block { width: 100%; }

/* ---------------- 正文排版 ---------------- */

.article-body { font-size: 16.5px; line-height: 1.85; color: #33363C; }
.article-body img { border-radius: 10px; margin: 18px 0; }
.article-body h2, .article-body h3 { margin: 28px 0 12px; }
.article-body p { margin: 0 0 16px; }
.article-body ul { padding-inline-start: 22px; list-style: disc; margin-bottom: 16px; }
.article-body table { width: 100%; border-collapse: collapse; margin: 18px 0; }
.article-body th, .article-body td { border: 1px solid var(--line); padding: 10px 12px; }

/* ---------------- 分页 / 空态 / 行动号召 ---------------- */

.pager { display: flex; gap: 8px; justify-content: center; margin: 46px 0 0; flex-wrap: wrap; }
.pager a {
    min-width: 38px; height: 38px; padding: 0 12px; display: inline-flex;
    align-items: center; justify-content: center; border: 1px solid var(--line);
    border-radius: 8px; font-size: 14px; transition: .2s;
}
.pager a:hover { border-color: var(--blue); color: var(--blue); }
.pager a.current { background: var(--blue); border-color: var(--blue); color: #fff; }

.empty-box {
    padding: 70px 24px; text-align: center; color: var(--muted);
    background: var(--soft); border-radius: var(--radius);
}

.cta {
    background: linear-gradient(120deg, #0A1A2F 0%, #0E2C4D 60%, #004C99 100%);
    color: #fff; padding: 88px 0; text-align: center;
}
.cta h2 { font-size: 34px; margin-bottom: 12px; }
.cta p  { color: var(--on-dark); margin-bottom: 30px; font-size: 17px; }
.cta .btn.ghost { border-color: rgba(255, 255, 255, .40); }

/* ============================================================
   图集（荣誉资质 / 车间设备）
   网格 + 点击放大灯箱。参考 yardleypack.com 的 Honors / Workshops。
   列表页与详情页共用，所以留在组件层。
   ============================================================ */

/* ---------- 列表页网格 ---------- */
.lb-grid {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
}
.lb-card {
    display: block;
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    background: #fff;
    box-shadow: var(--shadow);
    text-decoration: none;
    color: inherit;
    transition: transform .28s cubic-bezier(.22, 1, .36, 1), box-shadow .28s;
}
.lb-card:hover { transform: translateY(-5px); box-shadow: 0 18px 44px rgba(16, 34, 60, .18); }
.lb-card:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

.lb-card .pic {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--soft);
    overflow: hidden;
}
.lb-card .pic img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
.lb-card:hover .pic img { transform: scale(1.06); }
.lb-card .pic .ph {
    display: grid; place-items: center;
    height: 100%;
    color: var(--muted);
    font-size: 13px;
    letter-spacing: 1px;
}
/* 张数角标：一眼看出这组图有几张 */
.lb-card .n {
    position: absolute; top: 10px; inset-inline-end: 10px;
    background: rgba(10, 26, 47, .78);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 999px;
    backdrop-filter: blur(4px);
}
/* 放大提示 */
.lb-card .zoom {
    position: absolute; inset-inline-end: 10px; bottom: 10px;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    display: grid; place-items: center;
    font-size: 15px; color: var(--navy);
    opacity: 0; transform: scale(.8);
    transition: opacity .24s, transform .24s;
}
.lb-card:hover .zoom { opacity: 1; transform: none; }

.lb-card .body { padding: 15px 17px 17px; }
.lb-card .body .name {
    font-size: 16px; font-weight: 700; line-height: 1.45;
    margin-bottom: 5px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.lb-card .body .en {
    font-size: 13px; color: var(--muted); line-height: 1.65;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---------- 详情页：大图 + 说明 ---------- */
.lb-view { display: grid; gap: 30px; grid-template-columns: 1fr; }
@media (min-width: 900px) {
    .lb-view.has-text { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
}
.lb-view .stage {
    position: relative;
    background: var(--navy);
    border-radius: var(--radius);
    overflow: hidden;
    cursor: zoom-in;
}
.lb-view .stage img {
    width: 100%;
    max-height: 74vh;
    object-fit: contain;      /* 证书是竖版，contain 才看得到完整内容 */
    display: block;
    margin: 0 auto;
}
.lb-view .stage .n {
    position: absolute; inset-inline-start: 12px; top: 12px;
    background: rgba(0, 0, 0, .55); color: #fff;
    font-size: 12.5px; padding: 4px 11px; border-radius: 999px;
}
.lb-view .side { font-size: 15px; line-height: 1.85; color: var(--muted-2); }
.lb-view .side h3 { font-size: 22px; color: var(--ink); margin-bottom: 12px; line-height: 1.4; }

/* 详情页的图组切换条 */
.lb-strip { display: flex; gap: 10px; overflow-x: auto; padding: 6px 2px 12px; }
.lb-strip button {
    flex: 0 0 auto;
    width: 92px; height: 68px;
    border-radius: 8px; overflow: hidden;
    border: 2px solid transparent;
    background: var(--soft);
    cursor: pointer; padding: 0;
    transition: border-color .2s, transform .2s;
}
.lb-strip button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lb-strip button:hover { transform: translateY(-2px); }
.lb-strip button.on { border-color: var(--blue); }

/* ============================================================
   灯箱（lightbox.js 动态生成 .lbx-* 结构）
   ============================================================ */
.lbx { position: fixed; inset: 0; z-index: 9999; display: none; }
.lbx.on { display: block; }
.lbx-open { overflow: hidden; }         /* 打开时锁住页面滚动 */

.lbx-backdrop { position: absolute; inset: 0; background: rgba(8, 16, 28, .95); }

.lbx-box {
    position: relative;
    width: 100%; height: 100%;
    display: grid;
    grid-template-rows: 1fr auto;
    place-items: center;
    padding: 58px 20px 20px;
}
.lbx-fig { margin: 0; max-width: 100%; max-height: 100%; display: grid; place-items: center; }
.lbx-img {
    max-width: 100%;
    /* 证书多为竖版 A4 比例，contain 保证整张可见不裁切 */
    max-height: calc(100vh - 200px);
    object-fit: contain;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.lbx-cap {
    color: #D6E2F0;
    font-size: 14px;
    text-align: center;
    margin-top: 14px;
    line-height: 1.6;
}

.lbx-x, .lbx-prev, .lbx-next {
    position: absolute;
    z-index: 2;
    border: 0; cursor: pointer;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    border-radius: 50%;
    display: grid; place-items: center;
    transition: background .2s, transform .2s;
}
.lbx-x:hover, .lbx-prev:hover, .lbx-next:hover { background: rgba(255, 255, 255, .22); }
/* ⚠️ 关闭按钮贴「行尾」、上/下一张分居两侧 —— 一律用逻辑属性，
   否则 RTL 语言下「下一张」会跑到左边，箭头方向与前进方向相冲。 */
.lbx-x { top: 16px; inset-inline-end: 20px; width: 40px; height: 40px; font-size: 26px; line-height: 1; }
.lbx-prev, .lbx-next { top: 50%; margin-top: -26px; width: 52px; height: 52px; font-size: 34px; line-height: 1; }
.lbx-prev { inset-inline-start: 20px; }
.lbx-next { inset-inline-end: 20px; }
.lbx-prev:hover, .lbx-next:hover { transform: scale(1.06); }

.lbx-thumbs {
    display: flex; gap: 8px;
    overflow-x: auto;
    max-width: 100%;
    padding: 14px 4px 4px;
    scrollbar-width: thin;
}
.lbx-thumb {
    flex: 0 0 auto;
    width: 76px; height: 56px;
    border-radius: 6px; overflow: hidden;
    border: 2px solid transparent;
    background: #16212F;
    cursor: pointer; padding: 0;
    opacity: .5;
    transition: opacity .2s, border-color .2s;
}
.lbx-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lbx-thumb:hover { opacity: .85; }
.lbx-thumb.on { opacity: 1; border-color: #5BA8F5; }

/* ============================================================
   响应式（组件层）
   ============================================================ */

@media (max-width: 1024px) {
    .pgrid { grid-template-columns: repeat(2, 1fr); }
    .pgrid.four { grid-template-columns: repeat(3, 1fr); }
    .foot-inner { grid-template-columns: 1fr 1fr; }
    .sec-title { font-size: 30px; }
    .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    /* 导航收进汉堡菜单 */
    .nav, .search { display: none; }
    .nav-toggle { display: block; }
    .site-head.open .nav {
        display: flex; flex-direction: column; align-items: flex-start; gap: 0;
        position: absolute; top: var(--head-h); left: 0; right: 0; padding: 12px 24px 20px;
        background: rgba(10, 26, 47, .97);
    }
    .site-head.open .nav a { padding: 12px 0; width: 100%; border-bottom: 1px solid rgba(255, 255, 255, .08); }

    .section, .cta { padding: 62px 0; }
    .pgrid, .pgrid.four { grid-template-columns: 1fr; }
    .foot-inner { grid-template-columns: 1fr; gap: 28px; }
    .inner-hero { padding: 120px 0 44px; }
    .inner-hero h1 { font-size: 28px; }
    .form-card { padding: 24px; }
}

@media (max-width: 640px) {
    .lbx-box { padding: 52px 12px 14px; }
    .lbx-prev, .lbx-next { width: 42px; height: 42px; font-size: 26px; }
    .lbx-prev { inset-inline-start: 8px; }
    .lbx-next { inset-inline-end: 8px; }
    .lbx-img { max-height: calc(100vh - 170px); }
    .lbx-thumb { width: 58px; height: 44px; }
    .lb-grid { gap: 16px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
    .lb-card .body { padding: 12px 13px 14px; }
    .lb-card .body .name { font-size: 14.5px; }
}

/* ============================================================
   头部导航收敛
   720px 以下导航收进汉堡菜单，所以「导航被压成竖排单字」只发生在
   720 ~ 1180 这个中间区间 —— 靠逐步隐藏次要项来让出空间。
   导航项一多（栏目 + 固定项常超 9 项），1440 宽也放不下。
   顺序：**先压缩间距与字号，最后才动搜索框** —— 反过来会让中间宽度区间白白浪费空间。
   ============================================================ */
@media (max-width: 1440px) {
    .head-inner { gap: 20px; }
    .nav { gap: 15px; }
    .nav a { font-size: 14px; }
}
@media (max-width: 1280px) {
    .head-inner { gap: 16px; }
    .nav { gap: 12px; }
    .nav a { font-size: 13.5px; }
    .search input { width: 120px; }
}
@media (max-width: 1120px) {
    /* 搜索框是「有更好、没有也行」，先让它让位 */
    .search { display: none; }
    .nav { gap: 14px; }
    .nav a { font-size: 14px; }
}
@media (max-width: 900px) {
    .nav { gap: 11px; }
    .nav a { font-size: 13px; }
    .head-right { gap: 10px; }
    .langs { font-size: 12.5px; }
    .langs a { padding: 4px 6px; }
}