/* Header 模块 - 所有 header 变体共用的基础样式 */
.mod-header { text-align: center; padding: 40px 20px; }
.mod-header__brand { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; color: inherit; }
.mod-header__logo { height: 48px; width: auto; }
.mod-header__name { font-size: 24px; font-weight: 800; color: var(--dark, #111); }
.mod-header__slogan { color: var(--primary, #2563eb); margin-top: 10px; font-size: 15px; }

/* 变体01专属修饰：无 */

/* ===== header02: 左Logo横向单行布局 ===== */
.mod-header--v2 { text-align: left; padding: calc(var(--spacing-unit, 8px) * 2) 20px; display: flex; align-items: center; gap: calc(var(--spacing-unit, 8px) * 3); flex-wrap: wrap; }
.mod-header__row-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.mod-header__row-logo { height: 32px; width: auto; border-radius: var(--radius-base, 6px); }
.mod-header__row-name { font-family: var(--font-family, inherit); font-size: 20px; font-weight: 800; color: var(--color-dark, var(--dark, #111)); }
.mod-header__row-slogan { font-family: var(--font-family, inherit); font-size: 13px; color: var(--color-primary, var(--primary, #2563eb)); padding-left: calc(var(--spacing-unit, 8px) * 2); border-left: 1px solid #e5e7eb; }

/* ===== header03: 文字强调型 ===== */
.mod-header--v3 { text-align: left; padding: calc(var(--spacing-unit, 8px) * 3) 20px; }
.mod-header__text-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.mod-header__text-icon { height: 28px; width: auto; }
.mod-header__text-name-large { font-family: var(--font-family, inherit); font-size: 30px; font-weight: 900; color: var(--color-dark, var(--dark, #111)); letter-spacing: .5px; }
.mod-header__text-slogan-small { font-family: var(--font-family, inherit); font-size: 12px; color: #9ca3af; margin: 4px 0 0; }

/* ===== header04: 分割线并列型 ===== */
.mod-header--v4 { text-align: left; padding: calc(var(--spacing-unit, 8px) * 2.5) 20px; display: flex; align-items: center; gap: calc(var(--spacing-unit, 8px) * 2); flex-wrap: wrap; }
.mod-header__divided-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.mod-header__divided-logo { height: 36px; width: auto; }
.mod-header__divided-name { font-family: var(--font-family, inherit); font-size: 22px; font-weight: 800; color: var(--color-dark, var(--dark, #111)); }
.mod-header__divided-line { display: inline-block; width: 1px; height: 24px; background: #d1d5db; }
.mod-header__divided-slogan { font-family: var(--font-family, inherit); font-size: 14px; color: var(--color-primary, var(--primary, #2563eb)); }