/* 视觉型区块样式：site.json 里 "visual": true 时随构建拷贝
   只使用 tokens.css 中的变量；新增尺寸请先加令牌 */
* { box-sizing: border-box; }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 首屏 ---------- */
.home-banner { position: relative; overflow: hidden; background: var(--color-surface-alt); }
.home-banner picture { display: block; }
.home-banner img { width: 100%; height: auto; display: block; }

.hero-banner { position: relative; overflow: hidden; }
.hero-banner img { width: 100%; height: auto; display: block; }
.hero-banner .overlay {
    position: absolute; inset: 0; display: grid; place-items: center;
    color: var(--color-surface); font-size: var(--step3); letter-spacing: 2px; text-transform: uppercase;
}

/* ---------- 全宽产品横幅 ---------- */
.home-product-link { display: block; position: relative; margin-bottom: 10px; }
.home-product-link picture { display: block; }
.home-product-link img { width: 100%; height: auto; display: block; }
.band-copy {
    position: absolute; top: 0; width: 50%; height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 0 10px; z-index: 1;
}
.side-left .band-copy, .side-center .band-copy { left: 0; }
.side-right .band-copy { left: 50%; }
.band-kicker { font-size: var(--step1); }
.band-title { font-size: var(--step3); font-weight: 700; line-height: 1.2; }
.band-spec { font-size: var(--step-1); margin-top: var(--space-1); }
.band-btn {
    margin-top: var(--space-2); padding: 8px 20px; border-radius: 24px;
    border: 1px solid currentColor; font-size: var(--step-1);
}
.is-light .band-kicker, .is-light .band-title, .is-light .band-spec { color: var(--color-surface); }

/* ---------- 产品网格 / 分类网格 ---------- */
.home-small-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 7px; }
.small-cell { display: block; overflow: hidden; }
.small-cell img { width: 100%; height: auto; display: block; }

.home-category { padding: var(--space-5) 0; }
.home-category h2 { text-align: center; font-size: var(--step3); margin-bottom: var(--space-3); }
.home-category .all {
    display: block; width: 208px; margin: 0 auto var(--space-4);
    background: var(--color-brand); color: var(--color-surface);
    text-align: center; padding: 10px 0;
}
.category-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }
.category-grid a { display: block; text-align: center; color: var(--color-ink); }
.category-grid img { width: 100%; height: auto; background: var(--color-surface-alt); padding: 30px; }
.category-grid span { display: block; font-size: var(--step1); margin-top: 10px; }

/* ---------- 视频墙 ---------- */
.home-gallery { background: var(--color-ink-soft); padding: var(--space-5) 0; }
.home-gallery h2 { color: var(--color-surface); font-size: var(--step3); margin-bottom: var(--space-3); text-align: center; }
.video-row { display: flex; gap: 24px; }
.video-card { background: var(--color-surface); flex: 1 1 0; display: flex; flex-direction: column; }
.video-media {
    display: block; height: 220px; overflow: hidden; background: var(--color-surface-alt);
    color: var(--color-muted); font-size: 40px; text-align: center; line-height: 220px;
}
.video-card h3 { font-size: var(--step-1); padding: var(--space-2); min-height: 80px; text-align: center; }
.video-card .btn-view {
    display: inline-block; margin: 0 auto var(--space-2);
    background: var(--color-brand); color: var(--color-surface);
    font-size: var(--step-1); padding: 6px 22px;
}

/* ---------- 关注条 ---------- */
.home-follow-us { background: var(--color-brand); padding: var(--space-4) 0; text-align: center; }
.home-follow-us h2 { color: var(--color-surface); font-size: var(--step2); margin-bottom: var(--space-2); }
.social-row { display: flex; justify-content: center; gap: var(--space-3); }
.social-row a {
    width: 42px; height: 42px; border-radius: 50%; background: var(--color-surface);
    display: grid; place-items: center; color: var(--color-brand); font-weight: 700;
}

/* ---------- 内页头部与导航 ---------- */
.page-title { background: var(--color-ink-soft); color: var(--color-surface); padding: var(--space-4) 0; }
.page-title h1 { margin: 0; font-size: var(--step2); font-weight: 400; }
.tabs { display: flex; border-bottom: 1px solid var(--color-line); }
.tabs a { flex: 1; text-align: center; padding: var(--space-3) 0; color: var(--color-ink); text-transform: uppercase; }
.tabs a.active { background: var(--color-brand); color: var(--color-surface); }
.breadcrumbs { font-size: var(--step-2); color: var(--color-muted); padding: var(--space-2) 0; text-transform: uppercase; }
.section-head { text-align: center; font-size: var(--step3); margin: var(--space-5) 0 var(--space-4); }

/* ---------- 产品行 / 详情块 ---------- */
.product-rows { display: grid; gap: 0; }
.product-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5);
    padding: var(--space-4) 0; border-bottom: 1px solid var(--color-line); align-items: center;
}
.product-row img { width: 100%; height: auto; display: block; }
.product-row h3 { color: var(--color-brand); font-size: var(--step1); margin-bottom: var(--space-2); }
.product-row ul { margin: 0 0 var(--space-3); padding: 0; list-style: none; }
.product-row li { font-size: var(--step-1); margin-bottom: 4px; }
.btn {
    display: inline-block; padding: 8px 18px;
    background: var(--color-ink-soft); color: var(--color-surface); font-size: var(--step-1);
}

.product-hero img { width: 100%; height: auto; display: block; }
.video-embed { background: var(--color-ink-soft); display: grid; place-items: center; min-height: 320px; }
.play-btn {
    width: 56px; height: 56px; border-radius: 50%; background: var(--color-brand);
    color: var(--color-surface); display: grid; place-items: center; font-size: 22px;
}

.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }
.feature-card { background: var(--color-surface-alt); border-radius: 10px; overflow: hidden; }
.feature-card img { width: 100%; height: auto; display: block; }
.feature-card h3 { font-size: var(--step-1); padding: var(--space-2); background: var(--color-brand); color: var(--color-surface); }
.feature-card p { font-size: var(--step-2); padding: 0 var(--space-2) var(--space-2); }

.app-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.app-grid figure { margin: 0; background: var(--color-surface-alt); }
.app-grid img { width: 100%; height: 190px; object-fit: cover; }
.app-grid figcaption { padding: var(--space-2); font-size: var(--step-1); }

.related-band { background: var(--color-brand); color: var(--color-surface); padding: var(--space-4) 0; }
.related-title { font-size: var(--step2); margin-bottom: var(--space-3); }
.related-band .card { background: rgba(255, 255, 255, .14); border: 0; }
.related-band .card a, .related-band .card p { color: var(--color-surface); }

/* ---------- 轮播轨道 ---------- */
.snap-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.snap-track::-webkit-scrollbar { display: none; }
.snap-track > * { scroll-snap-align: start; }
.snap-track:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }

/* ---------- 响应式 ---------- */
@media (max-width: 1023px) {
    .home-small-grid { grid-template-columns: 1fr; }
    .category-grid { display: flex; gap: 12px; }
    .category-grid > a { flex: 0 0 100%; }
    .video-row { gap: 12px; }
    .video-row > .video-card { flex: 0 0 100%; }
    .feature-grid, .cards { grid-template-columns: 1fr 1fr; }
    .app-grid { grid-template-columns: 1fr; }
    .product-row { grid-template-columns: 1fr; }
    .tabs { overflow-x: auto; }
    .tabs a { flex: 0 0 auto; padding: 12px 16px; font-size: var(--step-1); }
}

@media (max-width: 767px) {
    .band-copy { width: 100%; position: static; padding: var(--space-3); }
    .home-product-link img { display: block; }
    .hero-banner .overlay { font-size: var(--step2); }
    .feature-grid, .cards { grid-template-columns: 1fr; }
}

/* ---------- 页面外壳（visual 模式） ---------- */
body { margin: 0; font-family: var(--font-sans); color: var(--color-ink); }
.visual-main { padding: 0; }
.container { width: min(var(--container), 100% - 40px); margin-inline: auto; }

.site-header { border: 0; padding: 0; background: transparent; position: static; }
.topbar { background: var(--color-surface); border-bottom: 1px solid var(--color-line); }
.topbar .container { display: flex; justify-content: space-between; align-items: center; height: 34px; font-size: var(--step-2); color: var(--color-muted); }
.navrow { background: var(--color-ink-soft); }
.navrow .container { height: 57px; display: flex; align-items: center; gap: var(--space-3); }
.site-header .brand { color: var(--color-surface); font-weight: 700; }
.site-header .nav { display: flex; gap: 34px; margin-left: auto; }
.site-header .nav a { color: var(--color-surface); font-size: var(--step-1); text-decoration: none; }
.site-header .nav a:hover { color: var(--color-surface-alt); }

.site-footer { background: var(--color-ink-soft); color: var(--color-surface); padding: 40px 0 0; border: 0; }
.footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 1.1fr 1.1fr; gap: var(--space-4); padding-bottom: 30px; }
.footer-grid h3 { margin: 0 0 var(--space-2); font-size: var(--step-1); }
.footer-grid a, .footer-grid p { display: block; color: var(--color-surface); font-size: var(--step-1); margin: 0 0 6px; opacity: .9; }
.foot-brand { font-size: var(--step1) !important; font-weight: 700; }
.contact-form input, .contact-form textarea {
    width: 100%; margin-bottom: 6px; padding: 8px; font: inherit; font-size: var(--step-1);
    background: transparent; border: 1px solid var(--color-muted); color: var(--color-surface);
}
.contact-form button { width: 100%; padding: 8px 0; border: 0; font: inherit; cursor: pointer; background: var(--color-brand); color: var(--color-surface); }
.copyright { border-top: 1px solid rgba(255,255,255,.15); padding: 14px 0; text-align: center; font-size: var(--step-2); opacity: .85; }

@media (max-width: 1023px) {
    .footer-grid { grid-template-columns: 1fr; gap: 18px; }
    .site-header .nav { gap: 16px; flex-wrap: wrap; }
    .topbar { display: none; }
}

/* visual 模式下，基础块默认收进容器（整宽块除外） */
.visual-main > section:not(.home-banner):not(.home-gallery):not(.home-category):not(.home-follow-us):not(.home-small-grid):not(.hero-banner):not(.page-title):not(.product-hero):not(.video-embed):not(.related-band) {
    width: min(var(--container), 100% - 40px);
    margin-inline: auto;
}

.video-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- 本站覆盖：白导航 + 图片 banner + 4 列图墙 + 深蓝页脚 ---------- */
.topbar { background: var(--color-topbar); border-bottom: 0; }
.topbar .container { justify-content: flex-end; gap: 26px; color: var(--color-topbar-text); }
.topbar a, .topbar span { color: var(--color-topbar-text); }

.navrow { background: var(--color-surface); border-bottom: 1px solid var(--color-line); }
.navrow .container { height: auto; padding: 14px 0; }
.site-header .nav { gap: 30px; }
.site-header .nav a {
    color: var(--color-ink); font-size: 15px; text-transform: uppercase;
    letter-spacing: .4px; padding: 6px 0; border-bottom: 2px solid transparent;
}
.site-header .nav a:hover { color: var(--color-brand); border-bottom-color: var(--color-brand); }

/* hero：图片铺满，左侧白卡片压住图片里的文字，保证 h1 可读 */
.hero { position: relative; display: block; min-height: 380px; background: var(--color-surface-alt); }
.hero > div:last-child { position: absolute; inset: 0; }
.hero > div:last-child img { width: 100%; height: 100%; object-fit: cover; }
.hero > div:first-child {
    position: relative; z-index: 2;
    width: min(560px, calc(100% - 40px));
    margin: 40px auto 40px max(20px, calc((100% - var(--container)) / 2));
    background: rgba(255,255,255,.97);
    padding: 30px 32px;
    box-shadow: 0 12px 32px rgba(0,0,0,.14);
    border-radius: var(--radius-md);
}

.app-grid { grid-template-columns: repeat(4, 1fr); }
.app-grid figure { background: var(--color-surface); border: 1px solid var(--color-line); padding: 8px; }
.app-grid img { height: 170px; }
.app-grid figcaption { font-size: 15px; color: var(--color-ink); }

.category-grid img { background: var(--color-surface); padding: 12px; border: 1px solid var(--color-line); }

.site-footer { background: var(--color-brand); }
.footer-grid { grid-template-columns: 1.4fr 1fr 1fr; padding: 44px 0 28px; }
.footer-grid h3 { color: var(--color-surface); text-transform: uppercase; letter-spacing: .5px; font-size: 15px; }
.copyright { border-top: 1px solid rgba(255,255,255,.18); font-size: 13px; }

@media (max-width: 980px) {
    .app-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .hero > div:first-child { margin: 20px auto; padding: 22px; }
    .app-grid { grid-template-columns: 1fr 1fr; }
}

/* banner 左侧压白，遮住图片里自带的文字 */
.hero::before {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(90deg, #ffffff 0%, #ffffff 42%, rgba(255,255,255,0) 66%);
    pointer-events: none;
}