/* 产品中心二级大类页 · 新版版式测试页（?new=1）。只由 list/category_landing_v2.html 引入，全部样式限定在 .vcl 内。
   网格：内容列宽与全站一致（见 .vcl-wrap）；标题列占 12 栏的 4 栏；垂距 24/48px。 */
.vcl {
  --vcl-red: #C30D23;
  --vcl-red-dark: #8A0A18;
  --vcl-red-light: #E0213A;
  --vcl-ink: #1A1A1A;
  --vcl-line: #E4E4E4;
  --vcl-grey: #F4F4F4;
  --vcl-cream: #FFF6EA;
  background: #FFFFFF;
  color: var(--vcl-ink);
  -webkit-font-smoothing: antialiased;
}
/* 字体与应用领域页（application-preview-domain.css 的 --vhap-font）一致：英文站 "VHAP Poppins"（Google 版 Poppins，
   application-preview-fonts.css，模板只在英文站引入），其后同 en-poppins-consistency.css 字体栈；中文站由 cn-typography.css 统一为 Noto Sans SC。
   标题字重 700，与官网各页一致。英文站小语种 /fr/ /de/ /ja/ 同英文（:not(:lang(zh))），日文汉字 / 假名用系统日文字体（同问题页） */
.vcl:not(:lang(zh)) { font-family: "VHAP Poppins", "Poppins", "Poppins Fallback", sans-serif; }
.vcl:lang(ja) { font-family: "VHAP Poppins", "Poppins", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", "Meiryo", "Noto Sans JP", sans-serif; }
/* 德 / 法语长复合词：卡片标题、简介、标签按语言断字，兜底任意处折行（同问题页） */
.vcl:is(:lang(fr), :lang(de)) :is(.vcl-card-body h3, .vcl-card-body p, .vcl-tags span, .vcl-check li) { overflow-wrap: anywhere; hyphens: auto; }
.vcl *, .vcl *::before, .vcl *::after { box-sizing: border-box; }
.vcl a { color: var(--vcl-red); text-decoration: none; }
.vcl a:hover { color: var(--vcl-red-dark); }
.vcl a:focus-visible, .vcl summary:focus-visible { outline: 2px solid var(--vcl-red); outline-offset: 3px; }
.vcl h1, .vcl h2, .vcl h3, .vcl p { margin: 0; }
.vcl em { font-style: normal; color: var(--vcl-red); }
/* 内容列与全站一致（同三级选型页 .lan-container）：<1440 为 min(1240, 100% - 64)；
   ≥1440 跟随 vh-layout.css 的 --vh-page（1920 下 1680，左缘与页眉 logo 对齐）；窄屏两侧各 20 */
.vcl-wrap { width: min(1240px, calc(100% - 64px)); margin: 0 auto; }
@media (min-width: 1440px) {
  html .vcl-wrap { width: var(--vh-page, 1240px); }
}
@media (max-width: 768px) {
  .vcl-wrap { width: calc(100% - 40px); }
}

.vcl-eyebrow { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.vcl-eyebrow i { width: 6px; height: 6px; border-radius: 50%; background: var(--vcl-red); flex: none; }
.vcl-eyebrow span { font-size: 12px; font-weight: 700; letter-spacing: 2px; color: var(--vcl-red); }
.vcl-eyebrow--light i { background: var(--vcl-red-light); }
.vcl-eyebrow--light span { color: var(--vcl-cream); }

/* HERO：与应用领域页首屏（application-preview-domain.css 的 .vhap-hero）逐值一致——
   背景、上下留白、面包屑、小标签、标题 48/700、导语 16/1.8 宽 820 及各断点。应用领域页改了这里要跟着改。 */
.vcl-hero { background: radial-gradient(ellipse 60% 110% at 78% 50%, #2A1016 0%, #170A0E 45%, #0C0B0F 100%); }
.vcl-hero .vcl-wrap { padding-top: 56px; padding-bottom: 64px; }
.vcl-crumbs { display: flex; gap: 8px; font-size: 14px; color: rgba(255,255,255,.65); margin-bottom: 32px; }
.vcl .vcl-crumbs a,
.vcl .vcl-crumbs a:hover { color: rgba(255,255,255,.65); }
.vcl-crumbs span[aria-current] { color: #FFFFFF; }
.vcl-hero .vcl-eyebrow { margin-bottom: 16px; }
.vcl-hero .vcl-eyebrow i { background: var(--vcl-red-light); }
.vcl-hero .vcl-eyebrow span { font-size: 12px; font-weight: 700; letter-spacing: 3px; color: var(--vcl-cream); white-space: nowrap; }
.vcl .vcl-hero-title { margin: 0 0 24px; font-size: 48px; line-height: 1.15; font-weight: 700; color: #FFFFFF; }
.vcl-hero-title em { color: var(--vcl-red-light); }
/* 首屏高度以「工业控制」应用领域页（/industrial-control/）为标准：导语预留与它相同的行数（每行 16 × 1.8 = 28.8px），
   导语更长时照常撑高。行数是两站线上实测值（2026-10-09）：
   中文站 3 行，视口 1440–1549 时 4 行；英文站（含 /fr/ /de/ /ja/）5 行，视口 1440–1509 时 7 行、1510–1629 时 6 行。
   ≥2048 的 zoom 档位版式等同 1920，行数同默认。工业控制导语改了要重测这几个数。 */
.vcl .vcl-hero-intro { margin: 0; max-width: 820px; min-height: calc(28.8px * 3); font-size: 16px; line-height: 1.8; color: rgba(255,255,255,.85); }
.vcl:not(:lang(zh)) .vcl-hero-intro { min-height: calc(28.8px * 5); }
@media (min-width: 1440px) {
  /* 同 vh-layout-pages.css 对应用领域页导语的封顶（内容列 - 640，给右侧 3D 主体留位），换行宽度一致 */
  html .vcl .vcl-hero-intro { max-width: min(820px, calc(var(--vh-page, 1240px) - 640px)); }
}
@media (min-width: 1440px) and (max-width: 1549px) {
  .vcl:lang(zh) .vcl-hero-intro { min-height: calc(28.8px * 4); }
}
@media (min-width: 1440px) and (max-width: 1509px) {
  .vcl:not(:lang(zh)) .vcl-hero-intro { min-height: calc(28.8px * 7); }
}
@media (min-width: 1510px) and (max-width: 1629px) {
  .vcl:not(:lang(zh)) .vcl-hero-intro { min-height: calc(28.8px * 6); }
}
/* 平板宽度英文站工业控制导语再折行：<800 为 6 行、<676 为 7 行（中文站仍 3 行） */
@media (min-width: 601px) and (max-width: 799px) {
  .vcl:not(:lang(zh)) .vcl-hero-intro { min-height: calc(28.8px * 6); }
}
@media (min-width: 601px) and (max-width: 675px) {
  .vcl:not(:lang(zh)) .vcl-hero-intro { min-height: calc(28.8px * 7); }
}
@media (max-width: 991px) {
  .vcl .vcl-hero-title { font-size: 32px; }
}
@media (max-width: 600px) {
  .vcl-hero .vcl-wrap { padding-top: 40px; padding-bottom: 48px; }
  .vcl-crumbs { flex-wrap: wrap; margin-bottom: 24px; }
  .vcl-hero .vcl-eyebrow span { white-space: normal; }
  .vcl .vcl-hero-intro, .vcl:not(:lang(zh)) .vcl-hero-intro { min-height: 0; }
}

/* FAMILIES */
.vcl-families { padding: clamp(40px, 6vw, 64px) 0; background: #FFFFFF; }
.vcl .vcl-h2 { margin-bottom: 12px; font-size: clamp(24px, 3vw, 32px); line-height: 1.3; font-weight: 700; color: var(--vcl-ink); }
.vcl .vcl-lead { max-width: 640px; margin-bottom: 36px; font-size: 16px; line-height: 1.6; }
.vcl-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 24px; }
/* 电脑端（≥1200）：每行最多 5 张，多出的换到下一行（与上一行同宽、靠左）；不足 5 张时按实际张数平铺整行。
   列数由模板按卡片数输出 vcl-cards--n1…n5；平板及以下仍按上面的自动排布 */
@media (min-width: 1200px) {
  .vcl-cards--n1 { grid-template-columns: minmax(0, 1fr); }
  .vcl-cards--n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vcl-cards--n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vcl-cards--n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .vcl-cards--n5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
/* 德语页：长复合词（Isolationstransformatoren、Durchgangskupplungen…）在每行 5 张的窄卡片里会从词中间断开（浏览器没有德语断字词典时不加连字符），
   5 张以上的类别改为每行 3 张（6 张即 3+3，仍在「最多 5 张」以内）；法 / 日 / 英 / 中实测不断词，照旧 */
@media (min-width: 1200px) {
  .vcl:lang(de) .vcl-cards--n5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.vcl-card { position: relative; display: flex; flex-direction: column; overflow: hidden; background: #FFFFFF; border: 1px solid var(--vcl-line); border-radius: 10px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.vcl-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(26,26,26,.10); border-color: var(--vcl-red); }
/* 整张卡片可点：底部 CTA 链接用 ::after 铺满整卡（悬停效果本来就作用于整卡）；键盘焦点仍落在 CTA 上，同时整卡描红框 */
.vcl .vcl-card-cta a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.vcl-card:focus-within { border-color: var(--vcl-red); }
.vcl-card-media { display: flex; align-items: center; justify-content: center; height: 180px; background: var(--vcl-grey); overflow: hidden; }
.vcl-card-media img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* 后台没设类别封面时用的产品图（多为白底）：正片叠底让白底融进灰底，与抠图封面观感一致；上下留白避免贴边 */
.vcl-card-media--product { padding: 16px; }
.vcl-card-media--product img { mix-blend-mode: multiply; }
.vcl-card-body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 22px; }
.vcl-card-body h3 { font-size: 19px; line-height: 1.35; font-weight: 700; color: var(--vcl-ink); }
.vcl-card-body p { font-size: 14px; line-height: 1.6; color: var(--vcl-ink); }
.vcl-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 6px; }
.vcl-tags span { padding: 6px 12px; font-size: 13px; line-height: 16px; background: var(--vcl-grey); border-radius: 10px; }
.vcl-card-cta { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--vcl-line); }
.vcl-tags + .vcl-card-cta { margin-top: 0; }
.vcl .vcl-card-cta a { display: inline-block; padding: 6px 0; font-size: 15px; font-weight: 700; }

/* 标题列 + 内容列 */
.vcl-split { display: flex; flex-wrap: wrap; gap: 24px; align-items: stretch; }
/* 标题列 = 12 栏网格的 4 栏（24px 栏距）：内容列 1200 时为 384，随内容列等比放宽 */
.vcl-aside { display: flex; flex-direction: column; flex: 1 1 280px; min-width: min(100%, 280px); max-width: calc((100% - 264px) / 3 + 72px); padding: 32px; border-radius: 10px; }
.vcl-aside .vcl-eyebrow { margin-bottom: 14px; }
.vcl-aside--white { background: #FFFFFF; border: 1px solid var(--vcl-line); }
.vcl-aside--grey { background: var(--vcl-grey); }
.vcl .vcl-h2--aside { margin-bottom: 0; font-size: clamp(24px, 3vw, 30px); }
.vcl .vcl-aside-text { margin-top: 14px; font-size: 15px; line-height: 1.8; }
.vcl .vcl-aside-link { margin-top: auto; padding-top: 24px; font-size: 15px; font-weight: 700; }
.vcl-main { flex: 2 1 480px; min-width: min(100%, 320px); }

/* GUIDE */
.vcl-guide { padding: clamp(40px, 6vw, 64px) 0; background: var(--vcl-grey); }
.vcl-prose { display: flex; flex-direction: column; gap: 16px; }
.vcl .vcl-prose p { font-size: 16px; line-height: 1.7; }
.vcl-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 24px; margin-top: 32px; }
.vcl-check { padding: 24px; background: #FFFFFF; border: 1px solid var(--vcl-line); border-radius: 10px; }
.vcl-check-title { margin-bottom: 10px; font-size: 15px; font-weight: 700; }
.vcl-check ul { margin: 0; padding: 0; list-style: none; }
.vcl-check li { display: flex; align-items: baseline; gap: 8px; padding: 6px 0; font-size: 13px; line-height: 1.6; border-bottom: 1px solid var(--vcl-grey); }
.vcl-check li::before { content: "—"; flex: none; font-weight: 700; color: var(--vcl-red); }

/* HELP · FAQ */
.vcl-help { padding: clamp(40px, 6vw, 64px) 0; background: #FFFFFF; }
.vcl-faq { display: flex; flex-direction: column; gap: 12px; }
.vcl-faq details { overflow: hidden; background: #FFFFFF; border: 1px solid var(--vcl-line); border-radius: 10px; }
.vcl-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; padding: 16px 20px; cursor: pointer; list-style: none; }
.vcl-faq summary::-webkit-details-marker { display: none; }
.vcl-faq summary:focus-visible { outline-offset: -2px; }
.vcl-faq summary span { font-size: 16px; line-height: 1.5; font-weight: 700; }
.vcl-faq summary i { flex: none; font-style: normal; font-size: 20px; line-height: 1; color: var(--vcl-red); }
.vcl-faq summary i::before { content: "+"; }
.vcl-faq details[open] summary i::before { content: "\2212"; }
.vcl-faq-a { padding: 0 20px 18px; font-size: 15px; line-height: 1.7; }

/* CONTACT */
.vcl-contact { background: var(--vcl-red); }
.vcl-contact-inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 32px; padding-top: clamp(40px, 6vw, 64px); padding-bottom: clamp(40px, 6vw, 64px); }
.vcl-contact-text { max-width: 640px; min-width: min(100%, 300px); }
.vcl .vcl-contact-text h2 { margin-bottom: 14px; font-size: clamp(24px, 3vw, 32px); line-height: 1.3; font-weight: 700; color: #FFFFFF; }
.vcl .vcl-contact-text p { font-size: 15px; line-height: 1.7; color: var(--vcl-cream); }
.vcl-contact-action { display: flex; flex-direction: column; gap: 12px; max-width: 340px; }
.vcl .vcl-contact-action p { font-size: 13px; line-height: 1.6; color: var(--vcl-cream); }
.vcl .vcl-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 12px 32px; font-size: 15px; font-weight: 700; text-align: center; color: var(--vcl-red); background: #FFFFFF; border-radius: 10px; }
.vcl .vcl-btn:hover { color: var(--vcl-red-dark); background: var(--vcl-cream); }
.vcl .vcl-btn:focus-visible { outline-color: #FFFFFF; }

/* 中文站：行高按中文稿放宽 */
.vcl:lang(zh) .vcl-lead, .vcl:lang(zh) .vcl-card-body p { line-height: 1.7; }
.vcl:lang(zh) .vcl-prose p, .vcl:lang(zh) .vcl-faq-a { line-height: 1.8; }