/* =====================================================================
   主题 t1 · 工业大图 Banner
   适用：输送机械、管件法兰、五金加工等重工制造类站群。
   结构特征：通栏首屏 + 3 列产品 + 数据卖点条置顶，强调「制造能力」。
   ===================================================================== */

/* 首屏：通栏，左文右卡，视觉重心压在标题上 */
.hero { padding: calc(78px * var(--site-density)) 0 calc(70px * var(--site-density)); }
.hero-inner { grid-template-columns: 1.4fr .85fr; }
.hero-title { font-size: 38px; letter-spacing: .5px; }
.hero-eyebrow { text-transform: none; }

/* 数据卖点条：加粗强调，作为「实力背书」带 */
.highlights { padding: calc(30px * var(--site-density)) 0; }
.highlight-item strong { font-size: 17px; }
.highlight-item { padding-left: 16px; border-left: 2px solid rgba(255, 255, 255, .35); }
.highlight-item:first-child { border-left: 0; padding-left: 0; }

/* 产品：标准 3 列，方角偏硬朗 */
.card-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; }
.card { border-radius: var(--site-radius-sm); }
.card-thumb { aspect-ratio: 4 / 3; }

/* 栏目标题：左侧色条 + 下划线组合，突出工业化信息层级 */
.section-head { border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.section-head h2 { font-size: 24px; }

/* 公司介绍：事实清单加粗竖线，像「参数表」 */
.about-inner { grid-template-columns: 1.25fr .75fr; }
.about-facts { border-left-width: 6px; }
.about-facts li { font-weight: 600; }

/* 优势卡片：图标方块化 */
.adv { border-top: 3px solid var(--site-primary); }
.adv-icon { border-radius: var(--site-radius-sm); font-weight: 800; }

/* 页脚：结构清晰，便于用户与第三方抽取企业信息 */
.footer-grid { grid-template-columns: 1.5fr 1fr 1.2fr 1.3fr; }

@media (max-width: 1024px) {
    .hero-title { font-size: 30px; }
    .card-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
    .hero { padding: calc(40px * var(--site-density)) 0; }
    .hero-title { font-size: 25px; }
    .card-grid { grid-template-columns: 1fr; }
    .highlight-item { border-left: 0; padding-left: 0; }
}

/* ========================= 网站 Banner（客户级固定槽位） =========================
   设计要点
   - 位置：<header> 之下、<main> 之前；不进入 sectionOrder 随机流 → 不影响其他板块排序
   - 比例：占位图为 1200×320；img 同时带 width/height 属性与 aspect-ratio 兜底，
           加载前后容器高度稳定，杜绝 CLS
   - 端点（三档）：
       ≥1024 桌面：max-height 420px、圆角 12px
       768~1023 平板：max-height 320px、圆角 10px
       ≤767 手机：max-height 220px、object-position 偏上以保留主体信息
   - 行为：可点图悬浮 1.005 倍轻微反馈 + focus 描边；尊重 prefers-reduced-motion
   - 打印：隐藏，避免浪费纸张
*/
.site-banner {
    width: 100%;
    margin: 0 0 16px;
    line-height: 0;              /* 消除图片下方的幽灵间隙 */
    background: #f3f4f6;
    overflow: hidden;
    border-radius: 12px;
}
.site-banner a {
    display: block;
    transition: transform .25s ease, box-shadow .25s ease;
}
.site-banner a:hover  { transform: scale(1.005); }   /* 极轻微，避免与洗牌板块的视觉冲突 */
.site-banner a:focus-visible {
    outline: 3px solid #2563eb;
    outline-offset: 2px;
}
.site-banner img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 420px;
    aspect-ratio: 1200 / 320;    /* 兜底：图片缺 width/height 时也锁比例 */
    object-fit: cover;
    object-position: center center;
}
@media (max-width: 1023px) and (min-width: 768px) {
    .site-banner             { border-radius: 10px; }
    .site-banner img         { max-height: 320px; }
}
@media (max-width: 767px) {
    .site-banner             { border-radius: 8px; margin-bottom: 12px; }
    .site-banner img         { max-height: 220px; object-position: center 30%; }
}
@media (prefers-reduced-motion: reduce) {
    .site-banner a           { transition: none; }
    .site-banner a:hover     { transform: none; }
}
@media print {
    .site-banner             { display: none; }       /* 打印时不浪费 A4 纸 */
}