/* ===========================================================================
   组件层：按钮 / 卡片 / 图标列表 / 表格 / 徽章 / 占位块 / 错误页
   =========================================================================== */

/* --- 图标 ---------------------------------------------------------------- */
/* fill / stroke 是可继承属性，会透过 <use> 的 shadow tree 作用到符号内部 */
.icon {
    flex: none;
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icon--lg {
    width: 28px;
    height: 28px;
}

.icon--sm {
    width: 18px;
    height: 18px;
}

/* --- 按钮 ---------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s2);
    padding: 11px 22px;
    border: 1px solid transparent;
    border-radius: var(--r-md);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
    transition: background-color var(--dur) var(--ease),
        border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.btn:hover {
    text-decoration: none;
}

.btn--primary {
    background: var(--c-brand);
    color: #fff;
}

.btn--primary:hover {
    background: var(--c-brand-hover);
    color: #fff;
}

.btn--ghost {
    background: var(--c-bg);
    border-color: var(--c-line);
    color: var(--c-ink);
}

.btn--ghost:hover {
    border-color: var(--c-brand);
    color: var(--c-brand);
}

.btn--sm {
    padding: 7px 14px;
    font-size: var(--fs-sm);
}

/* 文字链接式按钮：带箭头的「了解更多 →」 */
.btn--link {
    padding: 0;
    color: var(--c-brand);
    font-weight: 500;
}

.btn--link:hover {
    color: var(--c-brand-hover);
    text-decoration: none;
}

.btn--link .icon {
    transition: transform var(--dur) var(--ease);
}

.btn--link:hover .icon {
    transform: translateX(3px);
}

/* --- 分类卡片 ------------------------------------------------------------ */
.category-card {
    display: flex;
    flex-direction: column;
    gap: var(--s3);
    padding: var(--s6) var(--s5);
    background: var(--c-bg);
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    color: inherit;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.category-card:hover {
    border-color: var(--c-brand);
    box-shadow: var(--shadow-1);
    color: inherit;
    text-decoration: none;
}

.category-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--r-md);
    background: rgba(0, 102, 204, 0.08);
    color: var(--c-brand);
}

.category-card__title {
    font-size: 17px;
}

.category-card__text {
    flex: 1;
    color: var(--c-text-2);
    font-size: var(--fs-sm);
}

.category-card__meta {
    color: var(--c-text-3);
    font-size: var(--fs-xs);
}

/* --- 产品卡片 ------------------------------------------------------------ */
.product-card {
    display: flex;
    flex-direction: column;
    background: var(--c-bg);
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.product-card:hover {
    border-color: var(--c-brand);
    box-shadow: var(--shadow-2);
}

.product-card__media {
    display: block;
    aspect-ratio: 4 / 3;
    background: var(--c-bg-soft);
    border-bottom: 1px solid var(--c-line-soft);
}

.product-card__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: var(--s5);
}

.product-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--s2);
    padding: var(--s5);
}

.product-card__category {
    color: var(--c-accent);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
}

.product-card__title {
    font-size: 17px;
}

.product-card__title a {
    color: var(--c-ink);
}

.product-card__title a:hover {
    color: var(--c-brand);
    text-decoration: none;
}

.product-card__model {
    color: var(--c-text-2);
    font-size: var(--fs-sm);
}

.product-card__summary {
    flex: 1;
    margin-top: var(--s2);
    color: var(--c-text-2);
    font-size: var(--fs-sm);
    /* 摘要最多 3 行，保证同一行卡片高度一致 */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-card__specs {
    margin: var(--s3) 0 0;
    padding-top: var(--s3);
    border-top: 1px solid var(--c-line-soft);
    font-size: var(--fs-xs);
}

.product-card__spec {
    display: flex;
    justify-content: space-between;
    gap: var(--s3);
}

.product-card__spec + .product-card__spec {
    margin-top: var(--s1);
}

.product-card__spec dt {
    color: var(--c-text-3);
}

.product-card__spec dd {
    margin: 0;
    color: var(--c-ink);
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

/* --- 无封面图时的占位块 -------------------------------------------------- */
/* 素材未到位时替代 <img>，尺寸固定，不会造成布局跳动 */
.media-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--s2);
    width: 100%;
    height: 100%;
    padding: var(--s5);
    background:
        repeating-linear-gradient(
            45deg,
            var(--c-bg-soft),
            var(--c-bg-soft) 10px,
            #eef2f6 10px,
            #eef2f6 20px
        );
    color: var(--c-text-3);
    text-align: center;
}

.media-placeholder__model {
    color: var(--c-text-2);
    font-family: var(--font-mono);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.media-placeholder__note {
    font-size: var(--fs-xs);
}

/* --- 特性 / 能力列表 ------------------------------------------------------ */
.feature {
    display: flex;
    flex-direction: column;
    gap: var(--s3);
}

.feature__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--r-md);
    background: rgba(0, 102, 204, 0.08);
    color: var(--c-brand);
}

.feature__title {
    font-size: 17px;
}

.feature__text {
    color: var(--c-text-2);
    font-size: var(--fs-sm);
}

/* --- 关于我们摘要 -------------------------------------------------------- */
.about-teaser__body {
    max-width: var(--content-max);
}

.about-teaser__body h2 {
    margin-bottom: var(--s4);
}

.about-teaser__body p {
    color: var(--c-text-2);
}

.about-teaser__body .btn {
    margin-top: var(--s6);
}

/* --- 联系 CTA ------------------------------------------------------------ */
.contact-cta {
    border-top: 1px solid var(--c-line-soft);
}

.contact-cta__inner {
    display: grid;
    gap: var(--s7);
}

@media (min-width: 900px) {
    .contact-cta__inner {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }
}

.contact-cta__body h2 {
    margin-bottom: var(--s3);
}

.contact-cta__body p {
    color: var(--c-text-2);
}

.contact-cta__list {
    display: grid;
    /* 行距比区块间距小：三项是一组信息，挨近些才像一张名片上的三行 */
    gap: var(--s4);
    padding: var(--s6);
    background: var(--c-bg-soft);
    border-radius: var(--r-lg);
}

/* 每项一行：图标 + 标签 + 值 横向排列。
   标签固定宽度，让电话 / 邮箱 / 地址三个值的左边缘对齐。 */
.contact-cta__item {
    display: flex;
    align-items: center;
    gap: var(--s3);
}

.contact-cta__item .icon {
    flex: none;
    color: var(--c-brand);
}

.contact-cta__label {
    flex: none;
    width: 3.5em;            /* 「电话」「邮箱」「地址」都是两字，固定宽度即可对齐 */
    color: var(--c-text-3);
    font-size: var(--fs-sm);
}

.contact-cta__value {
    color: var(--c-ink);
    font-size: 15px;
    /* 刻意不用能硬断词的 word-break —— 那会把 sales@ch-intel.com
       从中间劈开。overflow-wrap 只在实在放不下时才断，且优先断在词边界。 */
    overflow-wrap: break-word;
    min-width: 0;            /* flex 子项默认 min-width:auto，会导致溢出不换行 */
}

.contact-cta__body .btn {
    margin-top: var(--s5);
}

/* 未填写的内容占位（TODO: 开头）——刻意保持可读但一眼能看出没填 */
.is-todo {
    color: var(--c-warn);
}

/* --- 技术参数表 ---------------------------------------------------------- */
.spec-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}

.spec-table caption {
    padding-bottom: var(--s3);
    color: var(--c-ink);
    font-size: var(--fs-h3);
    font-weight: 600;
    text-align: left;
}

.spec-table th,
.spec-table td {
    padding: 10px var(--s4);
    border-bottom: 1px solid var(--c-line-soft);
    text-align: left;
    vertical-align: top;
}

.spec-table thead th {
    background: var(--c-bg-table);
    border-bottom: 1px solid var(--c-line);
    color: var(--c-text-2);
    font-weight: 600;
}

.spec-table tbody tr:last-child th,
.spec-table tbody tr:last-child td {
    border-bottom: 0;
}

.spec-table tt,
.spec-table .spec-value {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

/* 窄屏下参数表横向滚动，首列保持可见 */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 767px) {
    .spec-table th:first-child,
    .spec-table td:first-child {
        position: sticky;
        left: 0;
        background: var(--c-bg);
    }

    .spec-table thead th:first-child {
        background: var(--c-bg-table);
    }
}

/* --- 徽章 ---------------------------------------------------------------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--s1);
    padding: 2px var(--s2);
    border-radius: var(--r-sm);
    background: var(--c-bg-soft);
    border: 1px solid var(--c-line);
    color: var(--c-text-2);
    font-size: var(--fs-xs);
    line-height: 1.6;
}

.badge--brand {
    background: rgba(0, 102, 204, 0.08);
    border-color: transparent;
    color: var(--c-brand);
}

.badge--ok {
    background: rgba(30, 142, 62, 0.1);
    border-color: transparent;
    color: var(--c-ok);
}

/* --- 空状态 -------------------------------------------------------------- */
.empty-state {
    padding: var(--s9) var(--s5);
    border: 1px dashed var(--c-line);
    border-radius: var(--r-lg);
    color: var(--c-text-2);
    text-align: center;
}

.empty-state__title {
    margin-bottom: var(--s2);
    color: var(--c-ink);
}

/* --- 面包屑 -------------------------------------------------------------- */
.breadcrumb {
    padding-block: var(--s5);
    font-size: var(--fs-sm);
}

.breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2);
    color: var(--c-text-3);
}

.breadcrumb__list li {
    display: flex;
    align-items: center;
    gap: var(--s2);
}

.breadcrumb__list a {
    color: var(--c-text-2);
}

.breadcrumb__sep {
    color: var(--c-line);
}

/* --- 页面头（内页标题区） ------------------------------------------------ */
.page-head {
    padding-block: var(--s8) var(--s6);
    background: var(--c-bg-soft);
    border-bottom: 1px solid var(--c-line-soft);
}

.page-head__title {
    margin-bottom: var(--s3);
}

.page-head__lead {
    max-width: var(--content-max);
    color: var(--c-text-2);
}

/* --- 区块末尾的「查看全部」链接 ------------------------------------------ */
.section__more {
    margin-top: var(--s7);
}

/* --- Hero 右侧的产品线概览面板 ------------------------------------------ */
/* 刻意不用大图轮播：需求要求「不要大量动画」，且面板不依赖任何图片素材，
   素材未到位时首页依然完整。 */
.hero-panel {
    padding: var(--s6);
    background: var(--c-bg);
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-2);
}

.hero-panel__title {
    margin-bottom: var(--s4);
    color: var(--c-text-3);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hero-panel__list {
    display: grid;
    gap: var(--s1);
}

.hero-panel__item {
    display: flex;
    align-items: center;
    gap: var(--s4);
    padding: var(--s4);
    border-radius: var(--r-md);
    transition: background-color var(--dur) var(--ease);
}

.hero-panel__item:hover {
    background: var(--c-bg-soft);
}

.hero-panel__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: var(--r-sm);
    background: rgba(0, 102, 204, 0.08);
    color: var(--c-brand);
}

.hero-panel__label {
    flex: 1;
    color: var(--c-ink);
    font-size: 15px;
    font-weight: 500;
}

.hero-panel__meta {
    flex: none;
    min-width: 28px;
    padding: 2px var(--s2);
    border-radius: var(--r-sm);
    background: var(--c-bg-soft);
    color: var(--c-text-2);
    font-size: var(--fs-xs);
    text-align: center;
}

/* --- 错误页 -------------------------------------------------------------- */
.error-page {
    padding-block: var(--s10);
    text-align: center;
}

.error-page__code {
    color: var(--c-brand);
    font-family: var(--font-mono);
    font-size: clamp(56px, 10vw, 96px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
}

.error-page__title {
    margin: var(--s5) 0 var(--s3);
}

.error-page__text {
    max-width: 46ch;
    margin-inline: auto;
    color: var(--c-text-2);
}

.error-page__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s4);
    margin-top: var(--s7);
}

.error-page__debug {
    max-width: 90ch;
    margin: var(--s8) auto 0;
    padding: var(--s5);
    background: var(--c-bg-soft);
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    text-align: left;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: auto;
}