/* =========================
   Material Detail Page CSS
   Scope: main.material-detail#material-detail
   - Mobile-first
   - Only targets the classes in your provided HTML
   ========================= */

.material-detail {
    --md-container-max: 1480px;
    --md-radius: 0px;
    --md-shadow: 0 8px 26px rgba(0,0,0,.08);
    --md-shadow-soft: 0;
    --md-border: 1px solid rgba(0,0,0,.10);
    --md-text: #111;
    --md-muted: #555;
    --md-muted-2: #777;
    --md-bg: #fff;
    --md-bg-2: #f6f7f9;
    --md-primary: #111; /* 可替换站点主色 */
    --md-primary-2: #333;
    --md-link: #0b57d0;
    --md-gap: 16px;
    max-width: var(--md-container-max);
    margin: 0 auto;
    padding: 0 20px;
    color: var(--md-text);
    background: transparent;
}

    .material-detail *,
    .material-detail *::before,
    .material-detail *::after {
        box-sizing: border-box;
    }

    .material-detail img {
        max-width: 100%;
        height: auto;
        display: block;
    }

    /* =========================
   Buttons
   ========================= */
    .material-detail .material-detail-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 11px 16px;
        border-radius: 999px;
        font-weight: 700;
        font-size: 14px;
        border: 1px solid transparent;
        cursor: pointer;
        user-select: none;
        transition: transform .05s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
        text-decoration: none !important;
    }

        .material-detail .material-detail-btn:active {
            transform: translateY(1px);
        }

    .material-detail .material-detail-btn-primary {
        background: var(--md-primary);
        color: #fff !important;
        box-shadow: var(--md-shadow-soft);
    }

        .material-detail .material-detail-btn-primary:hover {
            background: var(--md-primary-2);
            box-shadow: var(--md-shadow);
        }

    .material-detail .material-detail-btn-outline {
        background: transparent;
        color: var(--md-text) !important;
        border-color: rgba(0,0,0,.22);
    }

        .material-detail .material-detail-btn-outline:hover {
            border-color: rgba(0,0,0,.34);
            background: rgba(0,0,0,.03);
        }

    /* =========================
   Hero
   ========================= */
    .material-detail .material-detail-hero {
        display: grid;
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .material-detail .material-detail-hero-main {
        background: linear-gradient(180deg, var(--md-bg-2), var(--md-bg));
        border: var(--md-border);
        border-radius: var(--md-radius);
        padding: 60px 20px 30px 20px;
        box-shadow: var(--md-shadow-soft);
        display: flex;
        align-items: center;
    }

        .material-detail .material-detail-hero-main h1 {
            margin: 0 0 20px;
            font-size: 1.2rem;
            line-height: 1.25;
            letter-spacing: .2px;
        }

    .material-detail .material-detail-subtitle {
        margin: 0 0 20px;
        color: var(--md-muted);
        font-size: 0.875rem;
    }

    .material-detail .material-detail-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin: 0 0 30px;
    }

    .material-detail .material-detail-tag {
        display: inline-flex;
        align-items: center;
        padding: 6px 10px;
        border-radius: 999px;
        background: rgba(0,0,0,.05);
        border: 1px solid rgba(0,0,0,.08);
        color: #222;
        font-size: 13px;
        white-space: nowrap;
    }

    .material-detail .material-detail-cta {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .material-detail .material-detail-hero-side {
        border-radius: var(--md-radius);
        overflow: hidden;
        border: var(--md-border);
        background: var(--md-bg-2);
        box-shadow: var(--md-shadow-soft);
    }

        .material-detail .material-detail-hero-side img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            min-height: 250px;
        }

    /* =========================
   Sections
   ========================= */
    .material-detail .material-detail-section {
        margin: 18px 0 0;
        padding: 0;
    }

        .material-detail .material-detail-section > h2 {
            margin: 35px 0 15px 0;
            font-size: 1.25rem;
            letter-spacing: .2px;
        }

        .material-detail .material-detail-section p {
            margin: 0 0 12px;
            color: var(--md-muted);
            font-size: 0.875rem;
        }

            .material-detail .material-detail-section p strong {
                color: var(--md-text);
            }

    /* =========================
   Grid
   ========================= */
    .material-detail .material-detail-grid-2,
    .material-detail .material-detail-grid-3,
    .material-detail .material-detail-grid-4,
    .material-detail .material-detail-grid-5 {
        display: grid;
        gap: var(--md-gap);
    }

    .material-detail .material-detail-grid-2 {
        grid-template-columns: 1fr;
    }

    .material-detail .material-detail-grid-3 {
        grid-template-columns: 1fr;
    }

    .material-detail .material-detail-grid-5,
    .material-detail .material-detail-grid-4 {
        grid-template-columns: 1fr;
    }

    /* =========================
   Cards
   ========================= */
    .material-detail .material-detail-card {
        background: var(--md-bg);
        border: var(--md-border);
        border-radius: var(--md-radius);
        padding: 14px;
        box-shadow: var(--md-shadow-soft);
    }

        .material-detail .material-detail-card h3 {
            margin: 0 0 10px;
            font-size: 0.875rem;
        }

        .material-detail .material-detail-card p {
            margin: 0;
            color: var(--md-muted);
            font-size: 14px;
        }

    .material-detail .material-detail-link-card {
        color: inherit;
        transition: transform .08s ease, box-shadow .2s ease, border-color .2s ease;
        text-decoration: none;
    }

        .material-detail .material-detail-link-card:hover {
            text-decoration: none;
            border-color: rgba(0,0,0,.18);
            box-shadow: var(--md-shadow);
            transform: translateY(-1px);
        }

    /* lists */
    .material-detail .material-detail-section ul {
        margin: 10px 0 0;
        padding-left: 18px;
        color: var(--md-muted);
        font-size: 0.875rem;
    }

    .material-detail .material-detail-section li {
        margin: 10px 0;
    }

        .material-detail .material-detail-section li strong {
            color: var(--md-text);
        }

    /* =========================
   Specs
   ========================= */
    .material-detail .material-detail-spec-note {
        padding: 10px 12px;
        background: var(--md-bg-2);
        border: 1px solid rgba(0,0,0,.08);
        margin: 0 0 12px;
    }

        .material-detail .material-detail-spec-note p {
            margin: 5px 0;
            font-size: 0.8rem;
            color: var(--md-muted);
        }

    .material-detail .material-detail-table-wrap {
        overflow: auto;
        border-radius: var(--md-radius);
        border: var(--md-border);
        background: var(--md-bg);
        box-shadow: var(--md-shadow-soft);
    }

    .material-detail .material-detail-spec-table {
        width: 100%;
        border-collapse: collapse;
        /*min-width: 560px; */
    }

        .material-detail .material-detail-spec-table th,
        .material-detail .material-detail-spec-table td {
            padding: 12px 14px;
            border-bottom: 1px solid rgba(0,0,0,.08);
            vertical-align: top;
            font-size: 0.875rem;
        }

        .material-detail .material-detail-spec-table th {
            width: 120px;
            color: #222;
            background: var(--md-bg-2);
            text-align: left;
            font-weight: 800;
        }

        .material-detail .material-detail-spec-table td {
            color: var(--md-muted);
        }

        .material-detail .material-detail-spec-table tr:last-child th,
        .material-detail .material-detail-spec-table tr:last-child td {
            border-bottom: none;
        }

    /* =========================
   DFM
   ========================= */
    .material-detail .material-detail-dfm-list {
        list-style: disc;
    }

        .material-detail .material-detail-dfm-list li {
            background: linear-gradient(180deg, rgba(0,0,0,.02), transparent);
            border-radius: 10px;
            padding: 8px 10px;
        }

    /* =========================
   FAQ
   ========================= */
    .material-detail .material-detail-faq {
        display: grid;
        gap: 10px;
    }

    .material-detail .material-detail-faq-item {
        border-radius: var(--md-radius);
        border: var(--md-border);
        background: var(--md-bg);
        overflow: hidden;
        box-shadow: var(--md-shadow-soft);
    }

    .material-detail .material-detail-faq-question {
        margin: 0;
    }

    .material-detail .material-detail-faq-btn {
        width: 100%;
        text-align: left;
        padding: 14px;
        border: none;
        background: transparent;
        font-weight: 800;
        font-size: 14px;
        cursor: pointer;
        color: var(--md-text);
    }

        .material-detail .material-detail-faq-btn:hover {
            background: rgba(0,0,0,.03);
        }

    .material-detail .material-detail-faq-answer {
        padding: 0 14px 14px;
        color: var(--md-muted);
        font-size: 14px;
    }

    /* =========================
   Final CTA
   ========================= */
    .material-detail .material-detail-final-cta {
        margin: 20px 0 0;
        padding: 0;
    }

    .material-detail .material-detail-cta-inner {
        border: var(--md-border);
        background: linear-gradient(180deg, var(--md-bg-2), var(--md-bg));
        padding: 25px;
    }

    .material-detail .material-detail-final-cta h2 {
        margin: 0 0 15px;
        font-size: 1.25rem;
    }

    .material-detail .material-detail-final-cta p {
        margin: 0 0 14px;
        color: var(--md-muted);
        font-size: 14px;
    }

    .material-detail .material-detail-cta-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .material-detail .material-detail-alert {
        font-size: 0.875rem;
    }

/* =========================
   Responsive
   ========================= */
@media (min-width: 720px) {
    .material-detail {
        padding: 0 50px;
    }
    .material-detail .material-detail-hero {
        grid-template-columns: 1.2fr .8fr;
        align-items: stretch;
        gap: 22px;
    }

    .material-detail .material-detail-hero-main {
        padding: 22px;
    }

        .material-detail .material-detail-hero-main h1 {
            font-size: 2rem;
        }
   

    .material-detail .material-detail-subtitle {
        font-size: 0.875rem;
    }

        .material-detail .material-detail-alert {
            font-size: 0.8rem;
        }

    .material-detail .material-detail-grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .material-detail .material-detail-grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .material-detail .material-detail-grid-5，
    .material-detail .material-detail-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

        .material-detail .material-detail-spec-table th {
            width: 160px;
        }

        .material-detail .material-detail-hero-side img {
            min-height: 500px;
        }
}

@media (min-width: 1024px) {
    .material-detail .material-detail-section {
        margin-top: 22px;
    }

    .material-detail .material-detail-grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    .material-detail .material-detail-grid-5 {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* anchor offset (if sticky header exists) */
.material-detail :target {
    scroll-margin-top: 86px;
}

/* reduce motion */
@media (prefers-reduced-motion: reduce) {
    .material-detail .material-detail-btn,
    .material-detail .material-detail-link-card {
        transition: none;
    }
}