/* ============================================
   Glossary / 术语页面共用响应式增强
   在所有 glossary/*.html 中通过 <link> 在 inline style 之后引入，
   覆盖/增强小屏样式，同时保持现有设计风格不变。
   ============================================ */

/* 覆盖全局 .key-takeaways 的居中，术语页的核心要点框应为左对齐 */
.key-takeaways {
    text-align: left;
}

/* ---------- 通用小屏 Typography / Spacing ---------- */
@media (max-width: 768px) {
    .page-content {
        padding: 100px 20px 60px;
    }

    .page-content h1 {
        font-size: clamp(28px, 7vw, 34px);
        line-height: 1.1;
    }

    .page-subtitle {
        font-size: 15px;
        margin-bottom: 40px;
    }

    .definition-box,
    .key-takeaways,
    .cta-section {
        padding: 24px 20px;
    }

    .definition-box p {
        font-size: 15px;
    }

    .glossary-section {
        margin-bottom: 48px;
    }

    .glossary-section h2 {
        font-size: 20px;
        margin-bottom: 16px;
    }

    .glossary-section p,
    .glossary-section li {
        font-size: 14px;
        line-height: 1.75;
    }

    .faq-item {
        padding: 20px 0;
    }

    .faq-question {
        font-size: 15px;
        gap: 12px;
    }

    .faq-q-mark {
        padding-top: 1px;
    }

    .faq-answer {
        font-size: 14px;
        padding-left: 0;
        line-height: 1.7;
    }

    .myth-item {
        padding: 16px 0;
    }

    .myth-item h3 {
        font-size: 14px;
    }

    .myth-item p {
        font-size: 13px;
    }

    .cta-section h2 {
        font-size: 22px;
    }

    .cta-section p {
        font-size: 14px;
        margin-bottom: 20px;
    }

    .cta-btn {
        padding: 12px 24px;
        font-size: 14px;
    }

    .last-reviewed {
        font-size: 11px;
    }

    .related-terms {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 12px;
    }

    .related-term-card {
        padding: 16px;
    }

    .related-term-card h3 {
        font-size: 14px;
    }

    .related-term-card p {
        font-size: 12px;
    }

    /* 分类索引页特有 */
    .category-block h3 {
        font-size: 16px;
    }

    .category-block > p,
    .category-block li {
        font-size: 14px;
    }
}

/* ---------- 术语首页：卡片网格 ---------- */
.glossary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
    margin-bottom: 64px;
}

@media (max-width: 768px) {
    .glossary-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-bottom: 48px;
    }

    .glossary-card {
        padding: 24px;
    }

    .glossary-card-icon {
        font-size: 24px;
        margin-bottom: 12px;
    }

    .glossary-card h2 {
        font-size: 18px;
    }

    .glossary-card p {
        font-size: 14px;
        margin-bottom: 12px;
    }

    .glossary-card-tags {
        gap: 6px;
    }

    .glossary-tag {
        font-size: 11px;
        padding: 3px 8px;
    }

    .glossary-card-link {
        font-size: 12px;
    }
}

/* ---------- 表格：小屏自适应换行 ---------- */
.structure-table th,
.structure-table td,
.compare-table th,
.compare-table td {
    word-break: break-word;
    overflow-wrap: anywhere;
    vertical-align: top;
}

.structure-table td:first-child {
    word-break: break-all;
}

@media (max-width: 768px) {
    .structure-table,
    .compare-table {
        width: 100%;
        table-layout: fixed;
    }

    .structure-table th,
    .structure-table td,
    .compare-table th,
    .compare-table td {
        font-size: 13px;
        padding: 10px 8px;
    }
}

/* ---------- 时间线 ---------- */
@media (max-width: 768px) {
    .timeline li {
        padding: 10px 0 10px 24px;
        margin-left: 6px;
    }

    .timeline .tl-year {
        font-size: 12px;
        margin-right: 6px;
    }
}

/* ---------- 代码块 ---------- */
@media (max-width: 768px) {
    .code-block {
        padding: 14px 16px;
        font-size: 12px;
        line-height: 1.65;
    }
}