/* ============================================================
   article-t4.css - GuitarMasta 2.0 文章模板 T4
   路径：/css/article-t4.css
   设计语言：品牌聚焦型 · 中央大图 + 品牌色横幅 + 产品卡片网格
   点缀元素：品牌标识贴片 + 斜切色块 + 产品排名徽章
   ============================================================ */

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

.article-t4 .article-hero {
    position: relative;
    height: 340px;
    background: linear-gradient(135deg, var(--c-secondary-dark), var(--c-primary));
    overflow: hidden;
    margin-bottom: calc(-1 * var(--sp-8));
}

.article-t4 .article-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
        radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 40px 40px, 60px 60px;
}

.article-t4 .article-hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 140px;
    background: linear-gradient(180deg, transparent, var(--c-bg));
}

.article-t4 .article-main {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 var(--sp-5) var(--sp-7);
    position: relative;
    z-index: 2;
}

.article-t4 h1 {
    font-size: 2.25rem;
    background: var(--c-bg-white);
    padding: var(--sp-5) var(--sp-6);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-lg);
    margin-bottom: var(--sp-5);
    text-align: center;
    letter-spacing: -0.5px;
    border-top: 4px solid var(--c-primary);
}

.article-t4 h2 {
    font-size: 1.5rem;
    margin-top: var(--sp-7);
    margin-bottom: var(--sp-4);
    padding-left: var(--sp-4);
    border-left: 4px solid var(--c-primary);
    position: relative;
}

.article-t4 h2::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 60%;
    background: var(--c-accent);
    border-radius: 2px;
}

.article-t4 .product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--sp-5);
    margin: var(--sp-5) 0;
}

.article-t4 .product-card {
    background: var(--c-bg-white);
    border: 1px solid var(--c-border-light);
    border-radius: var(--radius-card);
    padding: var(--sp-5);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.article-t4 .product-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--c-primary), var(--c-accent));
}

.article-t4 .product-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
    border-color: var(--c-primary);
}

.article-t4 .product-card .rank-badge {
    position: absolute;
    top: var(--sp-3);
    right: var(--sp-3);
    background: var(--c-primary);
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    box-shadow: var(--shadow-md);
}

.article-t4 .product-card h3 {
    font-size: 1.125rem;
    margin-bottom: var(--sp-2);
    color: var(--c-secondary);
    padding-right: var(--sp-6);
}

.article-t4 .product-card .product-meta {
    font-size: var(--fs-small);
    color: var(--c-text-muted);
    margin-bottom: var(--sp-3);
}

.article-t4 .cta-box {
    background: linear-gradient(135deg, rgba(194, 94, 58, 0.08), rgba(31, 58, 95, 0.05));
    border: 1px solid var(--c-border-light);
    border-radius: var(--radius-card);
    padding: var(--sp-6);
    margin: var(--sp-6) 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.article-t4 .cta-box::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(194, 94, 58, 0.15), transparent);
    border-radius: 50%;
}

.article-t4 .brand-tag {
    display: inline-block;
    background: var(--c-secondary);
    color: #fff;
    padding: var(--sp-1) var(--sp-3);
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--sp-3);
}

.article-t4 blockquote {
    background: var(--c-bg-white);
    border-left: 4px solid var(--c-accent);
    padding: var(--sp-5);
    border-radius: 0 var(--radius-card) var(--radius-card) 0;
    box-shadow: var(--shadow-sm);
    font-style: italic;
    color: var(--c-secondary);
    margin: var(--sp-5) 0;
}

@media (max-width: 768px) {
    .article-t4 .article-hero { height: 220px; margin-bottom: calc(-1 * var(--sp-6)); }
    .article-t4 h1 { font-size: 1.625rem; padding: var(--sp-4); }
    .article-t4 .article-main { padding: 0 var(--sp-4) var(--sp-5); }
    .article-t4 .product-grid { grid-template-columns: 1fr; gap: var(--sp-3); }
    .article-t4 .product-card { padding: var(--sp-4); }
    .article-t4 .cta-box { padding: var(--sp-4); }
}