/* ============================================================
   article-t1.css - GuitarMasta 2.0 文章模板 T1
   路径：/css/article-t1.css
   设计语言：经典评测型 · 单栏宽阅读 + 顶部大图 + 卡片式CTA
   点缀元素：暖色下划线 + 木质纹理边框
   ============================================================ */

.article-t1 {
    background: var(--c-bg);
}

.article-t1 .article-main {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--sp-6) var(--sp-5) var(--sp-7);
    background: var(--c-bg-white);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-sm);
}

.article-t1 .article-hero-image {
    margin: calc(-1 * var(--sp-6)) calc(-1 * var(--sp-5)) var(--sp-6);
    border-radius: var(--radius-card) var(--radius-card) 0 0;
    overflow: hidden;
    aspect-ratio: 21 / 9;
    background: var(--c-bg-alt);
}

.article-t1 .article-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

.article-t1 h1 {
    font-size: 2.5rem;
    line-height: 1.15;
    margin-bottom: var(--sp-4);
    border-bottom: 3px solid var(--c-primary);
    padding-bottom: var(--sp-4);
}

.article-t1 h2 {
    font-size: 1.625rem;
    margin-top: var(--sp-6);
    padding-left: var(--sp-4);
    border-left: 4px solid var(--c-primary);
}

.article-t1 h3 {
    font-size: 1.25rem;
    margin-top: var(--sp-5);
}

.article-t1 p {
    margin-bottom: var(--sp-5);
    line-height: 1.8;
}

.article-t1 .cta-box {
    background: linear-gradient(135deg, rgba(194, 94, 58, 0.06), rgba(194, 94, 58, 0.02));
    border: 1px solid rgba(194, 94, 58, 0.2);
    border-radius: var(--radius-card);
    padding: var(--sp-5);
    margin: var(--sp-6) 0;
}

.article-t1 .cta-box .btn-cta {
    margin-top: var(--sp-3);
}

.article-t1 blockquote {
    background: rgba(194, 94, 58, 0.04);
    border-left: 4px solid var(--c-primary);
}

.article-t1 .comparison-table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--sp-6) 0;
}

.article-t1 .comparison-table th,
.article-t1 .comparison-table td {
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--c-border-light);
    text-align: left;
    font-size: var(--fs-small);
}

.article-t1 .comparison-table th {
    background: var(--c-secondary);
    color: #fff;
    font-weight: 700;
}

.article-t1 .comparison-table tr:nth-child(even) {
    background: var(--c-bg);
}

@media (max-width: 768px) {
    .article-t1 .article-main {
        padding: var(--sp-4) var(--sp-4) var(--sp-5);
    }

    .article-t1 .article-hero-image {
        margin: calc(-1 * var(--sp-4)) calc(-1 * var(--sp-4)) var(--sp-4);
    }

    .article-t1 h1 {
        font-size: 1.75rem;
    }

    .article-t1 .comparison-table {
        display: block;
        overflow-x: auto;
    }
}