/* =====================================================================
   主题 t8 · 杂志混排
   适用：品牌化要求较高、希望首屏突出「主打产品」的站群。
   结构特征：产品网格混排（首个卡片跨 2×2 作为主推），图文节奏错落。
   ===================================================================== */

/* 首屏：全宽标题带，减少左右分栏 */
.hero { padding: calc(70px * var(--site-density)) 0 calc(60px * var(--site-density)); }
.hero-inner { grid-template-columns: 1fr; gap: 30px; }
.hero-text { max-width: 62%; }
.hero-title { font-size: 36px; letter-spacing: 1px; }
.hero-card { max-width: 62%; }

/* 产品：4 列混排，首个卡片跨 2 列 2 行作为「主推」 */
.card-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; grid-auto-rows: auto; }
.card:first-child { grid-column: span 2; grid-row: span 2; }
.card:first-child .card-thumb { aspect-ratio: 16 / 11; }
.card:first-child .card-body { padding: 20px 22px 22px; }
.card:first-child .card-body h3 { font-size: 21px; }
.card:first-child .card-body p { font-size: 14px; -webkit-line-clamp: 4; }
.card:not(:first-child) .card-body p {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* 栏目标题：大字号 + 细线，杂志版式 */
.section-head { border-bottom: 1px solid var(--line); padding-bottom: 16px; margin-bottom: 30px; }
.section-head h2 { font-size: 25px; letter-spacing: 1px; }
.section-head h2::before { width: 6px; }

/* 优势：三列，编号化标题 */
.adv-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
.adv { padding: 0 0 0 18px; border: 0; border-left: 2px solid var(--site-secondary); background: transparent; }
.adv-icon { background: transparent; color: var(--site-secondary); padding: 0; width: auto; height: auto; }
.adv h3 { font-size: 18px; }
.adv p { font-size: 14px; }

/* 公司介绍：图右文左，比例更偏正文 */
.about-inner { grid-template-columns: 1.45fr .7fr; }

/* 新闻：首条置顶放大 */
.news-list li:first-child .news-title { font-size: 21px; }
.news-list li:first-child { padding-bottom: 22px; }

/* FAQ：三栏网格（利用 details 的自然高度） */
.faq { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.faq-item { margin-bottom: 0; }

/* 页脚：两栏宽 + 品牌块，版式收尾干净 */
.footer-grid { grid-template-columns: 1.8fr 1fr 1.3fr 1.4fr; }

@media (max-width: 1024px) {
    .hero-text, .hero-card { max-width: 100%; }
    .hero-title { font-size: 29px; }
    .card-grid { grid-template-columns: repeat(3, 1fr); }
    .card:first-child { grid-column: span 3; grid-row: auto; }
    .card:first-child .card-thumb { aspect-ratio: 16 / 9; }
    .adv-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
    .hero-title { font-size: 24px; }
    .card-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .card:first-child { grid-column: span 2; }
    .card:first-child .card-body h3 { font-size: 17px; }
    .adv-grid, .faq { grid-template-columns: 1fr; }
    .section-head h2 { font-size: 21px; }
}