/* surface-treatment-detail.css —— 由模板内联样式外置，15 语种共用 */

    /* ===== Surface Treatment Detail Page Styles（对齐 material-detail） ===== */
    .st-detail-hero {
        position: relative; padding: 80px 0 60px;
        background: linear-gradient(160deg, #0b1929 0%, #122240 40%, #1a365d 100%);
        overflow: hidden;
    }
    .st-detail-hero::before {
        content: ''; position: absolute; top: -200px; right: -200px;
        width: 600px; height: 600px; border-radius: 50%;
        background: radial-gradient(circle, rgba(37,99,235,0.15) 0%, transparent 70%);
        pointer-events: none;
    }
    .st-detail-hero-content {
        position: relative; z-index: 2;
        display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;
    }
    .st-back-link {
        display: inline-flex; align-items: center; gap: 6px;
        font-size: var(--font-size-sm); color: rgba(255,255,255,0.6);
        text-decoration: none; margin-bottom: 20px; transition: color 0.2s ease;
    }
    .st-back-link:hover { color: var(--color-white); }
    .st-hero-badge {
        display: inline-flex; align-items: center; gap: 8px;
        padding: 8px 20px; border-radius: var(--radius-full);
        font-size: var(--font-size-sm); font-weight: 600;
        background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15);
        color: rgba(255,255,255,0.9); margin-bottom: 20px;
    }
    .st-detail-hero-text h1 {
        font-size: var(--font-size-5xl); font-weight: 900; color: var(--color-white);
        line-height: 1.1; margin-bottom: 16px; letter-spacing: -0.02em;
    }
    .st-detail-hero-text p {
        font-size: var(--font-size-lg); color: rgba(255,255,255,0.75);
        line-height: var(--line-height-relaxed); margin-bottom: 28px;
    }
    .st-hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
    .st-detail-hero-visual { display: flex; flex-direction: column; align-items: stretch; justify-content: center; }
    .st-hero-img-wrap {
        margin-bottom: 20px; border-radius: var(--radius-xl); overflow: hidden;
        border: 1px solid rgba(255,255,255,0.15); aspect-ratio: 4/3;
        background: rgba(255,255,255,0.04);
    }
    .st-visual-card {
        background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
        border-radius: var(--radius-xl); padding: 28px; width: 100%; max-width: 420px;
        backdrop-filter: blur(10px);
    }
    .st-visual-card h3 {
        color: var(--color-white); font-size: var(--font-size-lg); font-weight: 700;
        margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    .st-quick-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .st-quick-stat {
        padding: 14px 16px; background: rgba(255,255,255,0.04);
        border-radius: var(--radius-md); border: 1px solid rgba(255,255,255,0.08);
    }
    .st-quick-stat-label {
        font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
        color: rgba(255,255,255,0.5); font-weight: 600; margin-bottom: 4px;
    }
    .st-quick-stat-value {
        font-size: var(--font-size-base); font-weight: 700; color: var(--color-white);
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }

    /* -- Content Layout（与 material-detail 相同的双栏骨架） -- */
    .st-detail-body {
        display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 48px;
        padding: 80px 0;
    }
    .st-detail-body > * { min-width: 0; }
    .st-detail-sidebar {
        position: sticky; top: calc(var(--header-height) + 20px); align-self: start;
    }
    .st-sidebar-nav {
        background: var(--color-white); border: 1px solid var(--color-gray-200);
        border-radius: var(--radius-lg); padding: 24px; margin-bottom: 24px;
    }
    .st-sidebar-nav h4 {
        font-size: var(--font-size-sm); font-weight: 700; color: var(--color-gray-400);
        text-transform: uppercase; letter-spacing: 1px; margin-bottom: 16px;
    }
    .st-sidebar-nav ul { list-style: none; padding: 0; margin: 0; }
    .st-sidebar-nav li { margin-bottom: 2px; }
    .st-sidebar-nav a {
        display: block; padding: 10px 14px; border-radius: var(--radius-md);
        font-size: var(--font-size-sm); font-weight: 500; color: var(--color-gray-600);
        text-decoration: none; transition: all 0.2s ease;
    }
    .st-sidebar-nav a:hover, .st-sidebar-nav a.active {
        background: var(--color-primary); color: var(--color-white);
    }
    .st-sidebar-cta {
        background: linear-gradient(135deg, #1E40AF 0%, #3B82F6 100%);
        border-radius: var(--radius-lg); padding: 28px; text-align: center;
    }
    .st-sidebar-cta h4 { color: var(--color-white); font-size: var(--font-size-lg); margin-bottom: 8px; }
    .st-sidebar-cta p { color: rgba(255,255,255,0.8); font-size: var(--font-size-sm); margin-bottom: 20px; }

    .st-detail-main > section { margin-bottom: 64px; }
    .st-detail-main > section:last-child { margin-bottom: 0; }
    .st-section-title {
        font-size: var(--font-size-2xl); font-weight: 800; color: var(--color-gray-900);
        margin-bottom: 20px; padding-bottom: 12px; border-bottom: 2px solid var(--color-gray-100);
    }
    .st-detail-main p { font-size: var(--font-size-base); color: var(--color-gray-600); line-height: var(--line-height-relaxed); margin-bottom: 16px; }
    .st-content-body { font-size: var(--font-size-base); color: var(--color-gray-600); line-height: var(--line-height-relaxed); }
    .st-content-body h3 { font-size: var(--font-size-xl); font-weight: 700; color: var(--color-gray-900); margin: 28px 0 12px; }
    .st-content-body ul { padding-left: 20px; margin: 12px 0; }
    .st-content-body li { margin-bottom: 6px; }
    .st-content-body strong { color: var(--color-gray-900); }

    /* -- Spec Table（工艺参数，服务端渲染） -- */
    .props-table-wrap {
        overflow-x: auto; border-radius: var(--radius-lg);
        border: 1px solid var(--color-gray-200); margin-bottom: 24px;
    }
    .props-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); min-width: 500px; }
    .props-table thead { background: var(--color-gray-900); color: var(--color-white); }
    .props-table thead th {
        padding: 14px 18px; text-align: left; font-weight: 600;
        font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.5px;
    }
    .props-table tbody tr:nth-child(even) { background: var(--color-gray-50); }
    .props-table tbody tr:hover { background: #EEF2FF; }
    .props-table tbody td { padding: 14px 18px; border-bottom: 1px solid var(--color-gray-100); color: var(--color-gray-700); }
    .props-table tbody td:first-child { font-weight: 600; color: var(--color-gray-900); }

    /* -- Material Guide Cards（适用材料，与材料中心 guides 网格同款） -- */
    .mat-guide-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
    .mat-guide-card {
        background: var(--color-white); border: 1px solid var(--color-gray-200);
        border-radius: var(--radius-lg); overflow: hidden; transition: all 0.3s ease;
        text-decoration: none; display: flex; flex-direction: column;
    }
    .mat-guide-card:hover {
        transform: translateY(-4px); box-shadow: var(--shadow-xl); border-color: var(--color-primary-light);
    }
    .mat-guide-img {
        width: 100%; aspect-ratio: 4/3;
        background: linear-gradient(135deg, #f0f4ff 0%, #e0e7ff 100%);
        overflow: hidden; position: relative;
        display: flex; align-items: center; justify-content: center;
    }
    .mat-guide-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
    .mat-guide-card:hover .mat-guide-img img { transform: scale(1.06); }
    .mat-guide-img-fallback { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
    .mat-guide-img-fallback svg { width: 48px; height: 48px; color: var(--color-primary); opacity: 0.5; }
    .mat-guide-body { padding: 20px 20px 24px; flex: 1; display: flex; flex-direction: column; }
    .mat-guide-body h4 { font-size: var(--font-size-base); font-weight: 700; color: var(--color-gray-900); margin-bottom: 6px; }
    .mat-guide-body p { font-size: var(--font-size-xs); color: var(--color-gray-500); line-height: var(--line-height-normal); margin-bottom: 14px; flex: 1; }
    .mat-guide-link {
        display: inline-flex; align-items: center; gap: 4px;
        font-size: var(--font-size-xs); font-weight: 600; color: var(--color-primary); transition: gap 0.2s ease;
    }
    .mat-guide-card:hover .mat-guide-link { gap: 8px; }

    /* -- Related Cards（行业 / 其他工艺） -- */
    .related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
    .related-card {
        background: var(--color-white); border: 1px solid var(--color-gray-200);
        border-radius: var(--radius-lg); overflow: hidden; text-decoration: none;
        color: inherit; transition: all 0.3s ease;
    }
    .related-card:hover {
        transform: translateY(-4px); box-shadow: var(--shadow-xl); border-color: var(--color-primary-light);
    }
    .related-card-body { padding: 20px; }
    .related-card-body h4 { font-size: var(--font-size-base); font-weight: 700; color: var(--color-gray-900); margin-bottom: 6px; }
    .related-card-body p { font-size: var(--font-size-xs); color: var(--color-gray-500); margin-bottom: 10px; }
    .related-card-link {
        font-size: var(--font-size-xs); font-weight: 600; color: var(--color-primary);
        display: inline-flex; align-items: center; gap: 4px;
    }
    .related-card:hover .related-card-link { gap: 8px; }

    /* -- Responsive -- */
    @media (max-width: 1200px) {
        .mat-guide-grid { grid-template-columns: repeat(4, 1fr); }
    }
    @media (max-width: 1024px) {
        .st-detail-hero-content { grid-template-columns: 1fr; }
        .st-detail-body { grid-template-columns: minmax(0, 1fr); }
        .st-detail-sidebar { position: static; }
        .mat-guide-grid { grid-template-columns: repeat(3, 1fr); }
        .related-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 768px) {
        .st-detail-hero { padding: 56px 0 40px; }
        .st-detail-hero-text h1 { font-size: var(--font-size-3xl); }
        .st-quick-stats { grid-template-columns: 1fr; }
        .mat-guide-grid { grid-template-columns: repeat(2, 1fr); }
        .related-grid { grid-template-columns: 1fr; }
        .st-detail-main > section { margin-bottom: 48px; }
    }
    @media (max-width: 480px) {
        .mat-guide-grid { grid-template-columns: 1fr; }
    }

/* ===== [STYLEATTR-FALLBACK-BEGIN] 由 _tools/_t_styleattr_responsive.js 生成，勿手改 =====
   原机制：protolabs-style.css 用 [style*="…"] 命中行内样式串做移动端降级；
   这些元素的内联样式外置后属性选择器不再命中，移动端会退回桌面尺寸。
   下面按类名重绘同样的降级，声明与 protolabs 逐字一致（含 !important）。 ===== */

@media (max-width: 1024px) {
    .related-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .mat-guide-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .st-detail-sidebar {
        position: static !important;
    }
}

@media (max-width: 768px) {
    .mat-guide-grid {
        grid-template-columns: 1fr !important;
    }
    .st-detail-hero-content {
        grid-template-columns: 1fr !important;
    }
    .st-quick-stats {
        grid-template-columns: 1fr !important;
    }
    .st-detail-hero {
        padding: 48px 0 !important;
    }
    .st-detail-body {
        padding: 48px 0 !important;
    }
    .st-detail-hero-text h1 {
        font-size: var(--font-size-3xl) !important;
    }
    .st-content-body h3 {
        font-size: var(--font-size-base) !important;
    }
    .st-detail-body {
        gap: 24px !important;
    }
    .st-hero-img-wrap {
        width: 100% !important;
        max-width: 100% !important;
    }
    .mat-guide-img {
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 480px) {
    .related-grid {
        grid-template-columns: 1fr !important;
    }
    .mat-guide-grid {
        grid-template-columns: 1fr !important;
    }
    .st-detail-hero-content {
        grid-template-columns: 1fr !important;
    }
    .st-quick-stats {
        grid-template-columns: 1fr !important;
    }
    .st-visual-card {
        padding: 16px !important;
    }
    .st-sidebar-cta {
        padding: 16px !important;
    }
    .st-sidebar-nav {
        padding: 16px !important;
    }
    .st-detail-hero-text h1 {
        font-size: var(--font-size-2xl) !important;
    }
    .mat-guide-grid {
        gap: 16px !important;
    }
}
.st-hero-img-wrap {
    aspect-ratio: 16 / 9 !important;
    width: 460px !important;
    max-width: 100% !important;
    margin-left: auto;
    margin-right: auto;
}
.mat-guide-img {
    aspect-ratio: 16 / 9 !important;
    width: 460px !important;
    max-width: 100% !important;
    margin-left: auto;
    margin-right: auto;
}
/* ===== [STYLEATTR-FALLBACK-END] ===== */