/* ArticleList 模块 - 所有 article-list 变体共用的基础样式 */
.mod-article-list { max-width: 800px; margin: 0 auto; padding: 40px 20px; }
.mod-article-list__title { color: var(--dark, #111); }
.mod-article-list__desc { color: #666; margin-bottom: 24px; }
.mod-article-list__item { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid #eee; }
.mod-article-list__item img { width: 120px; height: 90px; object-fit: cover; border-radius: var(--radius-base, 8px); flex-shrink: 0; }
.mod-article-list__item-body h3 { margin: 0 0 6px; }
.mod-article-list__item-body h3 a { color: var(--primary, #2563eb); text-decoration: none; font-size: 17px; }
.mod-article-list__item-body p { color: #666; font-size: 14px; margin: 0; line-height: 1.6; }
.mod-article-list__pagination { text-align: center; margin-top: 30px; }
.mod-article-list__pagination a { display: inline-block; padding: 6px 12px; margin: 0 4px; border-radius: var(--radius-base, 6px); color: var(--dark, #111); text-decoration: none; }
.mod-article-list__pagination a.is-active { background: var(--primary, #2563eb); color: #fff; }

/* ===== article-list02: 卡片网格布局 ===== */
.mod-article-list--v2 { max-width: 1100px; }
.mod-article-list__title-card { color: var(--color-dark, var(--dark, #111)); font-size: 24px; margin: 0 0 8px; }
.mod-article-list__desc-card { color: #666; margin-bottom: 24px; }
.mod-article-list__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: calc(var(--spacing-unit, 8px) * 3); }
.mod-article-list__card { background: #fff; border-radius: var(--radius-base, 10px); overflow: hidden; box-shadow: var(--shadow-base, 0 2px 10px rgba(0,0,0,.06)); }
.mod-article-list__card-image-wrap { width: 100%; height: 160px; overflow: hidden; }
.mod-article-list__card-image-wrap img { width: 100%; height: 100%; object-fit: cover; }
.mod-article-list__card-body { padding: 16px; }
.mod-article-list__card-body h3 { margin: 0 0 8px; }
.mod-article-list__card-body h3 a { color: var(--color-dark, var(--dark, #111)); text-decoration: none; font-size: 16px; }
.mod-article-list__card-body p { color: #666; font-size: 13px; margin: 0; line-height: 1.6; }

/* ===== article-list03: 瀑布流布局 ===== */
.mod-article-list--v3 { max-width: 1100px; }
.mod-article-list__title-waterfall { color: var(--color-dark, var(--dark, #111)); font-size: 24px; margin: 0 0 8px; }
.mod-article-list__desc-waterfall { color: #666; margin-bottom: 24px; }
.mod-article-list__waterfall { columns: 3 260px; column-gap: calc(var(--spacing-unit, 8px) * 3); }
.mod-article-list__waterfall-item { break-inside: avoid; margin-bottom: calc(var(--spacing-unit, 8px) * 3); background: #fff; border-radius: var(--radius-base, 10px); overflow: hidden; box-shadow: var(--shadow-base, 0 2px 10px rgba(0,0,0,.06)); }
.mod-article-list__waterfall-item img { width: 100%; display: block; }
.mod-article-list__waterfall-body { padding: 14px; }
.mod-article-list__waterfall-body h3 { margin: 0 0 6px; }
.mod-article-list__waterfall-body h3 a { color: var(--color-dark, var(--dark, #111)); text-decoration: none; font-size: 15px; }
.mod-article-list__waterfall-body p { color: #666; font-size: 13px; margin: 0; line-height: 1.6; }

/* ===== article-list04: 横向滑动布局 ===== */
.mod-article-list--v4 { max-width: 1100px; }
.mod-article-list__title-scroll { color: var(--color-dark, var(--dark, #111)); font-size: 24px; margin: 0 0 8px; }
.mod-article-list__desc-scroll { color: #666; margin-bottom: 24px; }
.mod-article-list__scroll-track { display: flex; gap: calc(var(--spacing-unit, 8px) * 2.5); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; -webkit-overflow-scrolling: touch; }
.mod-article-list__scroll-item { flex: 0 0 240px; scroll-snap-align: start; background: #fff; border-radius: var(--radius-base, 10px); overflow: hidden; box-shadow: var(--shadow-base, 0 2px 10px rgba(0,0,0,.06)); }
.mod-article-list__scroll-item img { width: 100%; height: 140px; object-fit: cover; display: block; }
.mod-article-list__scroll-body { padding: 14px; }
.mod-article-list__scroll-body h3 { margin: 0 0 6px; }
.mod-article-list__scroll-body h3 a { color: var(--color-dark, var(--dark, #111)); text-decoration: none; font-size: 15px; }
.mod-article-list__scroll-body p { color: #666; font-size: 13px; margin: 0; line-height: 1.6; }

/* ===== article-list05: 时间轴布局 ===== */
.mod-article-list__title-timeline { color: var(--color-dark, var(--dark, #111)); font-size: 24px; margin: 0 0 8px; }
.mod-article-list__desc-timeline { color: #666; margin-bottom: 24px; }
.mod-article-list__timeline { position: relative; padding-left: calc(var(--spacing-unit, 8px) * 3); border-left: 2px solid #e5e7eb; }
.mod-article-list__timeline-item { position: relative; padding-bottom: calc(var(--spacing-unit, 8px) * 3); }
.mod-article-list__timeline-dot { position: absolute; left: calc(var(--spacing-unit, 8px) * -3 - 5px); top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--color-primary, var(--primary, #2563eb)); }
.mod-article-list__timeline-body h3 { margin: 0 0 6px; }
.mod-article-list__timeline-body h3 a { color: var(--color-dark, var(--dark, #111)); text-decoration: none; font-size: 16px; }
.mod-article-list__timeline-body p { color: #666; font-size: 14px; margin: 0; line-height: 1.6; }

/* ===== 移动端响应式适配（全部variant） ===== */
@media (max-width: 768px) {
    .mod-article-list { padding: 24px 16px; }
    .mod-article-list__item { flex-direction: column; }
    .mod-article-list__item img { width: 100%; height: 160px; }
    .mod-article-list__grid { grid-template-columns: 1fr; }
    .mod-article-list__waterfall { columns: 1; }
    .mod-article-list__scroll-item { flex: 0 0 200px; }
    .mod-article-list--v2, .mod-article-list--v3, .mod-article-list--v4 { max-width: 100%; padding: 24px 16px; box-sizing: border-box; }
    .mod-article-list__timeline { padding-left: calc(var(--spacing-unit, 8px) * 2); }
}