/* ---------- 页面 banner hero（2026-08-18 对标 baishun 的 .page-hero）----------
   banner 图走 CSS 变量：默认图在这里，单个页面用 inline style 覆盖 --hero-image
   即可换成自己的分类图，不必新增 CSS 规则。
   出图规格（3072×512 / 6:1、主体靠右）与裁图工具见 tools/make_page_banner.py。
   注意锚点是 right 38%：图的右边界对齐容器右边，左侧 55% 被文字和最浓的一端
   遮罩压住，主体放左边会被盖掉。 */
.inner-hero {
  --hero-image: url("../images/ui/banner-default.webp");
  /* 排版参数与 catalog.css 的 .catalog-hero 对齐（padding 64/42、无 min-height），
     两种 hero 高度一致。曾用 min-height:max(300px,17vw) + flex 居中，
     宽屏上 17vw 把 hero 顶到 320px+，比产品分类页明显高一截，Jacken 已指出。 */
  padding: 64px 0 42px;
  background:
    linear-gradient(100deg, rgba(17, 32, 13, .95) 0%, rgba(17, 32, 13, .88) 40%, rgba(17, 32, 13, .42) 100%),
    var(--hero-image) right 38% / cover no-repeat;
  color: #fff;
}
/* 原来是「标题左 + 描述右」两列，描述正好压在 banner 的产品安全区上。
   改成单列左对齐（与 baishun 的 .page-hero 一致），右侧整块留给产品主体。
   ⚠ 不要在这里加 max-width：这个 div 同时挂着 .container，而 .container 有
   margin:auto，一收窄就整块居中，文字会离开左边缘。宽度由下面 h1/p 各自的
   max-width 控制，天然不会侵入右侧安全区。 */
.inner-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: .4rem; align-items: start; }
/* 字号 / 行距 / 间距全部照 .catalog-hero 抄，两种 hero 视觉同源。
   h1 的 24ch 是为 banner 留的：24ch 在 54px 下约 648px，容器 1200px 时
   右侧安全区从 792px 起，不会压到产品主体（catalog-hero 无图，所以不设限）。 */
.inner-hero .eyebrow { color: #d7d9a6; }
.inner-hero h1 { max-width: 24ch; margin: 10px 0 14px; font-size: clamp(34px, 5vw, 54px); line-height: 1.05; color: #fff; }
.inner-hero p { max-width: 680px; margin: 0; color: #edf0df; font-size: 17px; line-height: 1.65; }
/* 面包屑移进 hero 后要反白，否则深底上的 --muted 灰几乎看不见 */
.inner-hero .page-breadcrumb { padding-top: 0; margin-bottom: 10px; color: #c3d6b8; }
.inner-hero .page-breadcrumb a { color: #dcebd4; }
.inner-hero .page-breadcrumb a:hover { color: #fff; }
.page-breadcrumb { padding-top: 1rem; font-size: .9rem; color: var(--muted); }
.page-breadcrumb ol { display: flex; flex-wrap: wrap; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.content-section { padding: clamp(4rem, 8vw, 7rem) 0; }
.content-section.is-tinted { background: var(--cream); }
.content-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.content-card { min-height: 100%; padding: 1.5rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--white); }
.content-card h2, .content-card h3 { margin-top: 0; }
.detail-list { display: grid; gap: .8rem; margin: 0; padding: 0; list-style: none; }
.detail-list li { padding-left: 1.4rem; position: relative; }
.detail-list li::before { content: "✓"; position: absolute; left: 0; color: var(--green); }
.page-cta { padding: clamp(3rem, 7vw, 5rem); border-radius: 1.5rem; background: var(--green); color: var(--white); }
.page-cta .btn { margin-top: 1rem; }
/* hero 下方的锚点条：与 products 页「hero 下面挂一条分类 chip」同构。
   这两块原先塞在 hero 里，把 resources 的 hero 顶到 509px（其余内页 377）。 */
.resource-jumpbar { padding: 22px 0 24px; background: var(--cream); border-bottom: 1px solid var(--line); }
.resource-jumpbar .hub-note { margin: 0 0 14px; }
.resource-jump { display: flex; flex-wrap: wrap; gap: .75rem; }
.resource-jump a { padding: .65rem 1rem; border: 1px solid var(--line); border-radius: 999px; }
.faq-detail { border-top: 1px solid var(--line); }
.faq-detail:last-child { border-bottom: 1px solid var(--line); }
.faq-detail summary { position: relative; padding: 1.4rem 2.75rem 1.4rem 0; list-style: none; color: var(--ink); font-family: Georgia, "Times New Roman", serif; font-size: 1.25rem; cursor: pointer; }
.faq-detail summary::-webkit-details-marker { display: none; }
.faq-detail summary::after { content: "+"; position: absolute; top: 50%; right: .25rem; color: var(--green); font-family: Arial, sans-serif; font-size: 1.5rem; font-weight: 400; line-height: 1; transform: translateY(-50%); transition: transform .2s; }
.faq-detail[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-detail summary:focus-visible { border-radius: .25rem; outline: 3px solid var(--green); outline-offset: 4px; }
.faq-detail-answer p { margin: 0; padding: 0 2.75rem 1.5rem 0; color: var(--muted); font-size: .9rem; }
.contact-layout { display: grid; grid-template-columns: minmax(16rem, .7fr) minmax(0, 1.3fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }

@media (min-width: 861px) and (max-width: 1180px) {
  .site-header .main-nav { gap: 10px; font-size: 11px; }
  .site-header .brand img { width: 150px; }
  .site-header .main-nav .nav-cta { padding-inline: 12px; }
}

@media (max-width: 900px) {
  .inner-hero-grid, .content-grid, .contact-layout { grid-template-columns: 1fr; }
  .spec-icon-grid, .spec-icon-grid-4 { grid-template-columns: repeat(2, 1fr); }
  /* 窄屏没有并排的产品区要避让，放开桌面版那条 56% 限制 */
  .inner-hero-grid { max-width: none; }
}

/* 断点与参数都跟 catalog.css 的 .catalog-hero 对齐（那边也是 620px / 44px 0 32px）。
   手机上容器只有 ~1.7:1，6:1 的桌面带会把主体裁成一条缝，同时换 2.5:1 的移动档。 */
@media (max-width: 620px) {
  .inner-hero { --hero-image: url("../images/ui/banner-default-800.webp"); padding: 44px 0 32px; }
}

/* xf:inner-hero-showroom —— 2026-08-22 Customization/Solutions/Factory/Resources/Contact
   五页共用一张工厂展厅实拍图（About 未列入，仍留占位图）。挂 body id 而不是直接改
   .inner-hero 的 inline style，因为 inline style 的优先级会盖过下面这条 620px 断点里
   .inner-hero 的默认覆盖规则，导致移动端也读到桌面那张图——用 id 选择器同一优先级层级，
   让"后写的媒体查询规则赢"这条正常的层叠顺序继续生效。 */
#page-customization .inner-hero,
#page-solutions .inner-hero,
#page-factory .inner-hero,
#page-resources .inner-hero,
#page-contact .inner-hero { --hero-image: url("../images/ui/banner-showroom.webp"); }
@media (max-width: 620px) {
  #page-customization .inner-hero,
  #page-solutions .inner-hero,
  #page-factory .inner-hero,
  #page-resources .inner-hero,
  #page-contact .inner-hero { --hero-image: url("../images/ui/banner-showroom-800.webp"); }
}

@media (max-width: 560px) {
  .content-section { padding: 3.5rem 0; }
  .page-cta { padding: 2rem 1.25rem; }
}