/* ==========================================================================
   泰班集团官网 —— 栏目组件样式（第二阶段）
   依赖 style.css 中的 CSS 变量与基础组件；本文件在其后加载，用于覆盖与扩展。
   涵盖：一级导航下拉、语言切换、业务板块、研发数据、发展历程、产业链、
         区域布局、新闻列表、产品网格、联系表单与地图占位、企业详情补充区块。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 顶部导航：9 个一级栏目，其中 6 个带下拉子栏目
   -------------------------------------------------------------------------- */
.header-tools { display: flex; align-items: center; gap: 20px; }
.nav-item { position: relative; display: flex; align-items: center; }
.nav-item > a { display: inline-flex; align-items: center; gap: 7px; }
.nav-caret { flex-shrink: 0; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); opacity: .65; transition: transform .25s var(--ease), opacity .25s; }
.nav-item.is-parent:hover .nav-caret, .nav-item.is-parent:focus-within .nav-caret { transform: rotate(225deg) translate(-1px, -1px); opacity: 1; }

.lang-switch { display: inline-flex; align-items: center; border: 1px solid #ddd6ee; border-radius: 3px; overflow: hidden; }
.lang-switch button { min-width: 40px; min-height: 30px; padding: 0 9px; border: 0; background: transparent; color: #7a7787; font-size: 11px; font-weight: 600; letter-spacing: .04em; transition: background .2s, color .2s; }
.lang-switch button + button { border-left: 1px solid #ddd6ee; }
.lang-switch button:hover { color: var(--primary); }
.lang-switch button.is-active { background: var(--primary); color: #fff; }

@media (min-width: 1181px) {
  .subnav { position: absolute; top: 100%; left: -20px; z-index: 6; display: grid; min-width: 200px; padding: 9px; background: #fff; border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 18px 42px #1d223016; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .22s, visibility .22s, transform .3s var(--ease); }
  .nav-item.is-parent:hover .subnav, .nav-item.is-parent:focus-within .subnav { opacity: 1; visibility: visible; transform: none; }
  .subnav a { display: flex; align-items: center; min-height: 40px; padding: 0 12px; font-size: 12.5px; color: #6e6b7c; white-space: nowrap; border-radius: 3px; }
  .subnav a::after { content: none; }
  .subnav a:hover { color: var(--primary); background: var(--soft); }
  .subnav a[aria-current="page"] { color: var(--primary); }
}

/* 1180 以下：导航此前会溢出，统一切换为折叠菜单（原样式表在 600px 才折叠）。
   1180 的取值依据：英文标签下，9 个顶级项 + 语言切换 + 联系按钮在 1181px 以上才排得开。 */
@media (max-width: 1180px) {
  .header-tools { gap: 12px; }
  .site-nav .subnav { display: none; }
  .js-enabled .menu-toggle { display: block; }
  .js-enabled .header-inner { position: relative; }
  .js-enabled .header-right { position: absolute; left: 20px; right: 20px; top: calc(100% + 2px); z-index: 45; display: block; width: auto; max-height: calc(100vh - 120px); max-height: calc(100dvh - 120px); overflow-y: auto; padding: 12px 17px 16px; background: #fff; border: 1px solid #e4ddef; border-radius: 5px; box-shadow: 0 18px 44px #1a132520; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-10px); transition: opacity .25s, visibility .25s, transform .3s var(--ease); }
  .js-enabled .menu-open .header-right { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
  .js-enabled .site-nav { display: flex; flex-direction: column; gap: 0; width: 100%; border: 0; counter-reset: nav; }
  .js-enabled .site-nav > .nav-item { display: block; }
  .js-enabled .site-nav > .nav-item > a { display: flex; align-items: center; gap: 17px; min-height: 55px; padding: 11px; text-align: left; border-bottom: 1px solid #eee9f5; font-size: 14px; counter-increment: nav; }
  .js-enabled .site-nav > .nav-item:last-child > a { border-bottom: 0; }
  .js-enabled .site-nav > .nav-item > a::before { content: "0" counter(nav); font: 10px Arial, sans-serif; color: #b09cd8; }
  .js-enabled .site-nav > .nav-item > a::after { content: "↗"; position: static; height: auto; margin-left: auto; background: none; font: 20px Arial, sans-serif; transform: none; color: #b09cd8; }
  .js-enabled .site-nav > .nav-item > a[aria-current="page"] { background: var(--soft); border-radius: 3px; }
  .js-enabled .site-nav .subnav { display: flex; flex-direction: column; position: static; min-width: 0; padding: 0 0 8px 30px; background: none; border: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; counter-reset: nav; }
  .js-enabled .site-nav .subnav a { display: flex; align-items: center; min-height: 44px; padding: 4px 0; font-size: 13px; color: #6e6b7c; border-bottom: 1px dashed #ece7f4; }
  .js-enabled .site-nav .subnav a:last-child { border-bottom: 0; }
  .js-enabled .site-nav .subnav a::before { content: none; }
  .js-enabled .site-nav .subnav a::after { content: none; }
  .js-enabled .site-nav .subnav a:hover { color: var(--primary); }
  .nav-caret { display: none; }
  .js-enabled .header-right .header-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 14px; border-top: 1px solid #eee9f5; }
  .js-enabled .header-right .header-contact { display: inline-flex; }
  .js-enabled .menu-backdrop { display: block; position: fixed; z-index: 35; inset: 0; background: #17132266; backdrop-filter: blur(3px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s, visibility .25s; }
  .js-enabled .menu-backdrop.is-visible { opacity: 1; visibility: visible; pointer-events: auto; }
  .menu-open .menu-toggle span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .menu-open .menu-toggle span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
}
@media (min-width: 601px) and (max-width: 1180px) {
  .site-nav { flex-wrap: wrap; gap: 10px 22px; }
  .site-nav a { padding: 20px 0; font-size: 12.5px; }
  .header-inner { gap: 18px; }
}
@media (min-width: 1181px) and (max-width: 1400px) {
  .header-right { gap: 24px; }
  .site-nav { gap: 18px; }
  .site-nav a { font-size: 12.5px; }
  .header-tools { gap: 14px; }
}

/* 页脚：12 个栏目链接排三列 */
@media (min-width: 801px) {
  .footer-main { grid-template-columns: 1fr 1.6fr .9fr; }
  .footer-links { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 18px; }
}

/* --------------------------------------------------------------------------
   2. 业务板块 / 品牌关键词
   -------------------------------------------------------------------------- */
.segment-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.segment-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.segment-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.segment-card { position: relative; display: flex; flex-direction: column; padding: 28px 24px; border: 1px solid var(--line); background: #fff; transition: border-color .3s, transform .3s, box-shadow .3s; }
.segment-card:hover { border-color: #cbbdea; transform: translateY(-4px); box-shadow: 0 16px 34px #3a2a6612; }
.segment-index { font: 12px Arial, sans-serif; letter-spacing: .12em; color: #b6a7e0; }
.segment-card h3 { margin-top: 20px; font-size: 19px; font-weight: 600; }
.segment-card p { margin-top: 11px; color: var(--muted); font-size: 12.5px; line-height: 1.95; }
.segment-en { margin-top: auto; padding-top: 22px; font-size: 8.5px; letter-spacing: .16em; color: var(--primary); }

/* --------------------------------------------------------------------------
   3. 研发数据块
   -------------------------------------------------------------------------- */
.stat-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.stat-strip-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat { display: flex; flex-direction: column; gap: 8px; padding: 26px 22px; background: #fff; }
.stat strong { font-size: 17px; font-weight: 650; letter-spacing: -.01em; }
.stat span { color: var(--muted); font-size: 12px; line-height: 1.85; }
.stat-note { display: flex; align-items: flex-start; gap: 9px; margin-top: 16px; color: var(--muted); font-size: 11.5px; line-height: 1.85; }
.stat-note > span { flex-shrink: 0; display: grid; place-items: center; width: 17px; height: 17px; margin-top: 2px; border: 1px solid #cdc4e4; border-radius: 50%; font-size: 9px; color: var(--primary); }
.stat-note-inline { margin-top: 22px; }

/* --------------------------------------------------------------------------
   4. 发展历程时间轴
   -------------------------------------------------------------------------- */
.timeline { position: relative; display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.timeline-item { display: grid; grid-template-columns: 130px 1fr; gap: 40px; padding: 26px 0; border-top: 1px solid var(--line); }
.timeline-item:last-child { border-bottom: 1px solid var(--line); }
.timeline-year { font: 17px Georgia, serif; color: var(--primary); letter-spacing: .02em; }
.timeline-item h3 { font-size: 20px; font-weight: 600; }
.timeline-item p { margin-top: 10px; max-width: 620px; color: var(--muted); font-size: 13px; line-height: 2; }

/* --------------------------------------------------------------------------
   5. 产业链条
   -------------------------------------------------------------------------- */
.chain { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.chain-step { position: relative; padding: 30px 24px 30px 0; border-right: 1px dashed var(--line); }
.chain-step:last-child { border-right: 0; }
.chain-num { display: block; font: 30px Georgia, serif; color: #c6b7ed; }
.chain-step h3 { margin-top: 22px; font-size: 18px; font-weight: 600; }
.chain-step p { margin-top: 10px; padding-right: 22px; color: var(--muted); font-size: 12.5px; line-height: 1.95; }

/* --------------------------------------------------------------------------
   6. 区域布局卡片
   -------------------------------------------------------------------------- */
.region-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.region-card { position: relative; overflow: hidden; padding: 32px 28px; background: var(--night); color: #f2eff8; }
.region-card::after { content: ""; position: absolute; right: -60px; bottom: -70px; width: 190px; height: 190px; border: 1px solid #8e79c92e; border-radius: 50%; }
.region-code { display: inline-block; padding: 3px 9px; border: 1px solid #8e79c95c; border-radius: 2px; font: 9.5px Arial, sans-serif; letter-spacing: .18em; color: #b8a1ff; }
.region-card h3 { margin-top: 22px; font-size: 20px; font-weight: 600; }
.region-card p { position: relative; z-index: 1; margin-top: 12px; color: #a6a3b4; font-size: 12.5px; line-height: 2; }

/* --------------------------------------------------------------------------
   7. 新闻列表
   -------------------------------------------------------------------------- */
.news-list { display: grid; border-top: 1px solid var(--line); }
.news-item { position: relative; display: grid; grid-template-columns: 120px 1fr 42px; align-items: center; gap: 28px; padding: 26px 6px 26px 0; border-bottom: 1px solid var(--line); transition: background .3s, padding-left .3s var(--ease); }
.news-item:hover { background: var(--soft); padding-left: 16px; }
.news-date { color: #9c93b3; font-size: 11.5px; letter-spacing: .06em; }
.news-item h3 { font-size: 18px; font-weight: 600; line-height: 1.6; }
.news-item p { margin-top: 8px; color: var(--muted); font-size: 12.5px; line-height: 1.9; }
.news-more { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; font: 18px Arial, sans-serif; color: var(--primary); transition: background .25s, color .25s; }
.news-item:hover .news-more { background: var(--primary); border-color: var(--primary); color: #fff; }

/* --------------------------------------------------------------------------
   8. 产品网格
   -------------------------------------------------------------------------- */
.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.product-grid + .portfolio-note, .product-grid + .stat-note { margin-top: 26px; }
.product-card { display: flex; flex-direction: column; border: 1px solid var(--line); background: #fff; transition: border-color .3s, transform .3s, box-shadow .3s; }
.product-card:hover { border-color: #cbbdea; transform: translateY(-4px); box-shadow: 0 18px 36px #3a2a6612; }
.product-media { min-height: 0; aspect-ratio: 1.32; border: 0; border-bottom: 1px solid var(--line); }
.product-media::before { inset: 13px; }
.product-media::after { width: 120px; height: 120px; }
.product-body { padding: 24px 24px 26px; }
.product-tag { font: 9.5px Arial, sans-serif; letter-spacing: .16em; color: var(--primary); }
.product-body h3 { margin-top: 14px; font-size: 19px; font-weight: 600; }
.product-body p { margin-top: 10px; color: var(--muted); font-size: 12.5px; line-height: 1.95; }

/* --------------------------------------------------------------------------
   9. 联系我们
   -------------------------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.contact-card { padding: 28px 24px; border: 1px solid var(--line); background: #fff; }
.contact-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--soft); color: var(--primary); font-size: 15px; }
.contact-card h3 { margin-top: 20px; font-size: 17px; font-weight: 600; }
.contact-card p { margin-top: 10px; color: var(--muted); font-size: 12.5px; line-height: 1.95; }
.contact-card small { display: block; margin-top: 18px; font: 8.5px Arial, sans-serif; letter-spacing: .14em; color: #a89ec4; }


.contact-links { display: grid; border-top: 1px solid var(--line); margin-top: 4px; }
.contact-link { display: grid; grid-template-columns: 1fr auto 42px; align-items: center; gap: 20px; padding: 22px 6px 22px 0; border-bottom: 1px solid var(--line); transition: background .3s, padding-left .3s var(--ease); }
.contact-link:hover { background: var(--soft); padding-left: 16px; }
.contact-link strong { font-size: 16px; font-weight: 600; }
.contact-link > span:not(.arrow) { color: var(--muted); font-size: 12.5px; }
.contact-link .arrow { font-size: 19px; color: var(--primary); }
.map-placeholder { margin-top: 34px; aspect-ratio: 2.6; min-height: 0; }

/* --------------------------------------------------------------------------
   10. 企业详情页补充区块
   -------------------------------------------------------------------------- */
.detail-blocks { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line); }
.detail-blocks h3 { margin-top: 22px; font-size: 17px; font-weight: 600; }
.detail-blocks h3:first-child { margin-top: 0; }
.detail-blocks p { margin-top: 9px; color: var(--muted); font-size: 13px; line-height: 2; }

/* --------------------------------------------------------------------------
   11. 响应式
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .segment-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .segment-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-strip-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chain { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chain-step { border-right: 0; border-bottom: 1px dashed var(--line); padding-right: 30px; }
  .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .news-item { grid-template-columns: 100px 1fr 40px; gap: 20px; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .region-grid { grid-template-columns: 1fr; gap: 16px; }
  .timeline-item { grid-template-columns: 1fr; gap: 12px; padding: 22px 0; }
  .timeline-year { font-size: 14px; }
  .segment-grid, .segment-grid-3, .segment-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-strip { grid-template-columns: 1fr 1fr; }
  .news-item { grid-template-columns: 1fr 40px; gap: 14px; }
  .news-date { grid-column: 1 / -1; }
  .contact-link { grid-template-columns: 1fr 42px; row-gap: 6px; }
  .contact-link > span:not(.arrow) { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .segment-grid, .segment-grid-3, .segment-grid-4 { grid-template-columns: 1fr; gap: 15px; }
  .segment-card { padding: 23px 20px; }
  .segment-card h3 { margin-top: 15px; font-size: 18px; }
  .stat-strip, .stat-strip-4 { grid-template-columns: 1fr; }
  .chain { grid-template-columns: 1fr; }
  .chain-step { padding: 24px 0; }
  .product-grid { grid-template-columns: 1fr; gap: 20px; }
  .contact-grid { grid-template-columns: 1fr; gap: 15px; }
  .news-item { padding: 22px 0 22px 0; }
  .news-item h3 { font-size: 16px; }
  .news-more { width: 34px; height: 34px; font-size: 16px; }
  .map-placeholder { aspect-ratio: 1.5; }
}

/* --------------------------------------------------------------------------
   12. 英文排版适配与溢出保护
   英文文案普遍比中文长 1.5～2.5 倍：不处理会导致导航折行、首屏大标题被
   .title-line 的 overflow:hidden 直接裁掉、栅格子项撑破容器。
   -------------------------------------------------------------------------- */

/* 12.1 短控件禁止折行，并在紧凑的顶栏里不被压缩 */
.nav-item > a, .subnav a, .header-contact, .lang-switch button, .button { white-space: nowrap; }
.lang-switch, .header-contact, .header-tools { flex-shrink: 0; }
@media (min-width: 1181px) {
  .site-nav { flex-wrap: nowrap; gap: 24px; }
  .header-right { flex-wrap: nowrap; }
}
@media (min-width: 1181px) and (max-width: 1400px) {
  .site-nav { gap: 18px; }
}
.page-hero-foot { flex-wrap: wrap; }

/* 12.2 英文标题单独降号：中文的大字号对英文过长 */
html.lang-en .hero-title { font-size: clamp(34px, 3.5vw, 46px); letter-spacing: .01em; line-height: 1.4; }
html.lang-en .hero-title .title-line { line-height: 1.4; }
html.lang-en .page-heading-row h1 { font-size: clamp(30px, 3.2vw, 44px); letter-spacing: -.02em; line-height: 1.45; }
html.lang-en .section-heading h2,
html.lang-en .split-copy h2,
html.lang-en .intro-title h2,
html.lang-en .about-home-copy h2 { letter-spacing: -.02em; }
html.lang-en .culture-tab strong { font-size: 20px; }
html.lang-en .subsidiary-card .card-title h3 { font-size: 19px; line-height: 1.55; }
html.lang-en .contact-link strong { font-size: 15px; }
html.lang-en .detail-info dd { line-height: 1.7; }
html.lang-en .hero-description { max-width: 400px; }

@media (min-width: 601px) and (max-width: 800px) {
  html.lang-en .hero-title { font-size: 30px; }
}
@media (max-width: 600px) {
  html.lang-en .hero-title { font-size: clamp(24px, 6.4vw, 34px); letter-spacing: .01em; }
  html.lang-en .page-heading-row h1 { font-size: 30px; }
  html.lang-en .hero-description { max-width: 330px; }
  /* 英文价值观标签（Integrity / Collaboration…）在四等分栏里放不下，改两列两行。 */
  html.lang-en .culture-tablist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.lang-en .culture-tab strong { font-size: 15px; }
  html.lang-en .culture-tab { min-height: 46px; padding: 8px 6px; }
}

/* 12.3 栅格/弹性子项允许收缩；长英文串允许断行 */
.hero-content, .about-home-copy, .about-home-art, .split-copy, .intro-title, .intro-body,
.detail-article, .culture-showcase, .culture-panels, .card-body, .segment-card,
.product-body, .news-item, .contact-card, .contact-link, .cta-box > div,
.philosophy-item > div, .fact, .stat, .region-card, .chain-step, .timeline-item > div,
.page-heading-row > div, .section-heading > div { min-width: 0; }
/* 栅格/弹性容器的直接子项统一解除 min-content 下限，否则长英文会把轨道撑开。 */
.news-item > *, .contact-link > *, .timeline-item > *, .chain-step > *,
.split-layout > *, .intro-layout > *, .detail-layout > *, .culture-showcase > *,
.about-home-layout > *, .team-grid > *, .about-scale > *, .segment-grid > *,
.product-grid > *, .contact-grid > *, .region-grid > *, .facts-grid > *,
.subsidiary-grid > *, .hero-grid > *, .stat-strip > *, .cta-box > *,
.external-feature > *, .external-copy, .about-service, .about-service > div,
.hero-actions > *, .page-heading-row > * { min-width: 0; }
.intro-body, .about-home-copy, .split-copy, .detail-article, .cta-box, .news-item h3,
.contact-card p, .segment-card p, .product-body h3, .card-title h3,
.external-feature h2, .footer-message p, .hero-description,
.page-heading-row h1, .section-heading h2 { overflow-wrap: break-word; }
.subsidiary-card .card-title h3 { line-height: 1.5; }
.culture-tab strong { overflow-wrap: break-word; }

/* 12.4 图片占位的装饰圆原为固定 180px，窄容器（如首页错位小图）会被撑出边界；
   改为按容器收缩并保持正圆，宽容器下尺寸不变。 */
.image-placeholder::after { width: min(180px, 88%); height: auto; aspect-ratio: 1; }

/* 12.5 窄屏下按钮文案（英文更长）不再挤压：让横排容器换行，而不是把按钮裁掉。 */
@media (max-width: 1180px) {
  .section-heading, .cta-box, .about-scale, .detail-return { flex-wrap: wrap; row-gap: 18px; }
}

/* 12.6 首页旗下企业：4 家境内公司排成一行，避免第 4 张单独掉到第二行。
   窄屏改为两行两列（仍是均衡布局），手机端沿用横向滑动。 */
@media (min-width: 1181px) {
  .home-subsidiary-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .home-subsidiary-grid .card-body { padding: 21px; }
  .home-subsidiary-grid .card-title h3 { font-size: 20px; }
  .home-subsidiary-grid .card-title { gap: 10px; }
  .home-subsidiary-grid .circle-arrow { width: 34px; height: 34px; font-size: 17px; }
  .home-subsidiary-grid .card-body > p { font-size: 12.5px; }
  html.lang-en .home-subsidiary-grid .card-title h3 { font-size: 17px; line-height: 1.5; }
}
@media (min-width: 601px) and (max-width: 1180px) {
  .home-subsidiary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}