/* =========================================================
   智能材料选型 · 枢纽页专属样式
   仅承载 5 张材料分类卡与说明条；其余全局样式（导航 / 页眉 /
   页脚 / 按钮 / 背景）全部由主页 index.css 统一提供，确保与
   全站视觉一致。卡片外观对齐 index.css 的玻璃卡片体系。
   ========================================================= */

/* 1. 分类卡网格 */
.mat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.8rem;
}

/* 2. 单张分类卡（对齐主页 .info-card / .product-card 玻璃质感） */
.mat-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-stroke, rgba(51, 128, 200, 0.18));
    border-radius: var(--border-radius, 16px);
    padding: 2.2rem 2rem 1.8rem;
    text-decoration: none;
    color: var(--text-main, #1a202c);
    transition: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

/* 顶部品牌渐变条，呼应主页科技蓝→成功绿 */
.mat-card::before {
    content: "";
    position: absolute;
    left: 0; top: 0;
    height: 4px; width: 100%;
    background: linear-gradient(90deg, var(--primary-color, #3380C8), var(--accent-color, #00c853));
    opacity: 0.85;
}

.mat-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(51, 128, 200, 0.45);
    background: rgba(255, 255, 255, 0.9);
}

/* 3. 图标徽标 */
.mc-icon {
    width: 58px; height: 58px;
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    background: var(--primary-light, #e6f0fa);
    color: var(--primary-color, #3380C8);
    font-size: 1.7rem;
    margin-bottom: 1.1rem;
    border: 1px solid rgba(51, 128, 200, 0.12);
    transition: all 0.3s ease;
}
.mat-card:hover .mc-icon {
    background: var(--primary-color, #3380C8);
    color: #fff;
    transform: rotate(-5deg) scale(1.05);
}

/* 4. 文字 */
.mat-card h3 { font-size: 1.3rem; margin: 0 0 0.6rem; color: var(--text-main, #1a202c); }
.mat-card p {
    color: var(--text-sub, #4a5568);
    font-size: 0.95rem; line-height: 1.7;
    margin: 0 0 1.2rem;
    flex-grow: 1;
}

/* 5. 元信息标签 */
.mc-meta { display: flex; gap: 0.6rem; margin-bottom: 1rem; flex-wrap: wrap; }
.mc-meta span {
    font-size: 0.78rem; font-weight: 600;
    color: var(--primary-dark, #25629c);
    background: rgba(51, 128, 200, 0.08);
    padding: 4px 10px; border-radius: 50px;
}

/* 6. 进入指示 */
.mc-go {
    display: inline-flex; align-items: center; gap: 6px;
    font-weight: 600; color: var(--primary-color, #3380C8);
    font-size: 0.95rem;
}
.mat-card:hover .mc-go { gap: 10px; }
.mc-go i { transition: transform 0.3s ease; }
.mat-card:hover .mc-go i { transform: translateX(4px); }

/* 7. 说明条（对齐主页 .info-note 信息卡风格） */
.info-note {
    max-width: 900px;
    margin: 1.8rem auto 0;
    padding: 1rem 1.4rem;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid var(--glass-stroke, #e2e8f0);
    border-left: 4px solid var(--primary-color, #3380C8);
    border-radius: 12px;
    color: var(--text-sub, #4a5568);
    font-size: 0.95rem; line-height: 1.7;
}
.info-note b.stock { color: var(--primary-dark, #25629c); }
.info-note b.ref { color: var(--accent-color, #00c853); }

/* 8. 页眉小标签 */
.zh-eyebrow {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    letter-spacing: 2px;
    color: var(--primary-color, #3380C8);
    font-weight: 700;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

/* 9. 移动端微调 */
@media (max-width: 768px) {
    .mat-grid { grid-template-columns: 1fr; gap: 1.2rem; }
    .mat-card { padding: 1.8rem 1.4rem 1.5rem; }
}