/* Hero 模块 - 所有 hero 变体共用的基础样式
   合规声明：本文件所有视觉参数（颜色/圆角/阴影/间距/动效）一律读取 Design Token，不允许硬编码 */
.mod-hero { background: var(--color-dark, var(--dark, #111)); color: #fff; padding: calc(var(--spacing-unit, 8px) * 7.5) 20px; text-align: center; min-height: 260px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.mod-hero__title { font-family: var(--font-family, inherit); font-size: 32px; font-weight: 800; margin: 0 0 12px; }
.mod-hero__subtitle { font-family: var(--font-family, inherit); font-size: 15px; color: rgba(255,255,255,.85); max-width: 640px; margin: 0 auto; line-height: 1.7; }
.mod-hero__button { display: inline-block; margin-top: 20px; padding: 10px 28px; background: var(--color-primary, var(--primary, #2563eb)); color: #fff; text-decoration: none; border-radius: var(--radius-base, 10px); font-weight: 600; transition: transform var(--animation-duration, .3s); }
.mod-hero__button:hover { transform: translateY(-2px); }

/* ===== hero02: 左文右图非对称布局 ===== */
.mod-hero--v2 { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: calc(var(--spacing-unit, 8px) * 5); padding: calc(var(--spacing-unit, 8px) * 7.5) 20px; text-align: left; background: var(--color-dark, var(--dark, #111)); min-height: 320px; }
.mod-hero__split-left { flex: 1 1 45%; color: #fff; }
.mod-hero__split-left .mod-hero__title { text-align: left; }
.mod-hero__split-left .mod-hero__subtitle { margin: 0; text-align: left; }
.mod-hero__split-right { flex: 1 1 45%; }
.mod-hero__split-image { width: 100%; border-radius: var(--radius-base, 10px); box-shadow: var(--shadow-base, 0 2px 10px rgba(0,0,0,.08)); }
@media (max-width: 768px) { .mod-hero--v2 { flex-direction: column; text-align: center; } .mod-hero__split-left .mod-hero__title, .mod-hero__split-left .mod-hero__subtitle { text-align: center; } }

/* ===== hero04: 资讯型-深色渐变居中 ===== */
.mod-hero--v4 { background: linear-gradient(135deg, var(--color-dark, #111) 0%, #0f0c29 100%); min-height: 280px; }
.mod-hero__portal-center { max-width: 720px; }
.mod-hero__title-portal { font-family: var(--font-family, inherit); font-size: 36px; font-weight: 800; letter-spacing: 1px; margin: 0 0 14px; }
.mod-hero__subtitle-portal { font-family: var(--font-family, inherit); font-size: 16px; color: rgba(255,255,255,.75); line-height: 1.7; margin: 0 0 20px; }
.mod-hero__button-portal { display: inline-block; padding: 10px 30px; background: var(--color-primary, var(--primary, #2563eb)); color: #fff; text-decoration: none; border-radius: var(--radius-base, 10px); font-weight: 700; }

/* ===== hero05: 资讯型-左对齐紧凑 ===== */
.mod-hero--v5 { text-align: left; align-items: flex-start; min-height: 160px; padding: calc(var(--spacing-unit, 8px) * 4) 20px; background: var(--color-dark, var(--dark, #111)); }
.mod-hero__compact-left { max-width: 640px; }
.mod-hero__title-compact { font-family: var(--font-family, inherit); font-size: 24px; font-weight: 700; margin: 0 0 8px; }
.mod-hero__subtitle-compact { font-family: var(--font-family, inherit); font-size: 14px; color: rgba(255,255,255,.7); margin: 0 0 12px; }
.mod-hero__button-compact { display: inline-block; font-size: 14px; color: var(--color-primary, var(--primary, #2563eb)); text-decoration: none; font-weight: 600; }

/* ===== hero06: 资讯型-分栏说明 ===== */
.mod-hero--v6 { display: flex; flex-direction: row; align-items: center; gap: calc(var(--spacing-unit, 8px) * 6); text-align: left; background: var(--color-dark, var(--dark, #111)); min-height: 240px; }
.mod-hero__two-col-text-left { flex: 1 1 40%; }
.mod-hero__title-twocol { font-family: var(--font-family, inherit); font-size: 30px; font-weight: 800; margin: 0; }
.mod-hero__two-col-text-right { flex: 1 1 55%; border-left: 2px solid rgba(255,255,255,.15); padding-left: calc(var(--spacing-unit, 8px) * 3); }
.mod-hero__subtitle-twocol { font-family: var(--font-family, inherit); font-size: 15px; color: rgba(255,255,255,.75); line-height: 1.7; margin: 0 0 14px; }
.mod-hero__button-twocol { display: inline-block; padding: 8px 24px; background: var(--color-primary, var(--primary, #2563eb)); color: #fff; text-decoration: none; border-radius: var(--radius-base, 10px); font-weight: 600; }
@media (max-width: 768px) { .mod-hero--v6 { flex-direction: column; text-align: center; } .mod-hero__two-col-text-right { border-left: none; padding-left: 0; } }

/* ===== hero07: 资讯站-深色渐变+径向光晕动效 ===== */
.mod-hero--v7 { position: relative; overflow: hidden; background: linear-gradient(135deg, #1a1a3e 0%, #0f0c29 100%); min-height: 300px; }
.mod-hero__glow-bg { position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle at 30% 50%, rgba(37,99,235,.12) 0%, transparent 60%), radial-gradient(circle at 70% 50%, rgba(255,210,0,.06) 0%, transparent 60%); animation: heroGlowV7 var(--animation-duration, 12s) ease-in-out infinite alternate; }
@keyframes heroGlowV7 { 0% { transform: translate(0,0); } 100% { transform: translate(5%,5%); } }
.mod-hero__portal-glow-center { position: relative; z-index: 1; max-width: 720px; }
.mod-hero__title-glow { font-family: var(--font-family, inherit); font-size: 36px; font-weight: 800; letter-spacing: 1px; margin: 0 0 14px; background: linear-gradient(to right, var(--color-primary, #2563eb), var(--color-secondary, #60a5fa)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.mod-hero__subtitle-glow { font-family: var(--font-family, inherit); font-size: 16px; color: rgba(255,255,255,.75); line-height: 1.7; margin: 0 0 20px; }
.mod-hero__button-glow { display: inline-block; padding: 10px 30px; background: var(--color-primary, var(--primary, #2563eb)); color: #fff; text-decoration: none; border-radius: var(--radius-base, 10px); font-weight: 700; }

/* ===== hero08: 轮播型-多图淡入淡出切换 ===== */
.mod-hero--v8 { position: relative; overflow: hidden; min-height: 340px; }
.mod-hero__carousel-track { position: absolute; inset: 0; }
.mod-hero__carousel-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; animation: heroCarouselFade 12s ease-in-out infinite; }
.mod-hero__carousel-slide--empty { background: var(--color-dark, var(--dark, #111)); opacity: 1; }
@keyframes heroCarouselFade { 0% { opacity: 0; } 8% { opacity: 1; } 33% { opacity: 1; } 41% { opacity: 0; } 100% { opacity: 0; } }
.mod-hero__carousel-content { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; text-align: center; padding: calc(var(--spacing-unit, 8px) * 10) 20px; color: #fff; }
.mod-hero__carousel-title { font-family: var(--font-family, inherit); font-size: 36px; font-weight: 800; margin: 0 0 14px; text-shadow: 0 2px 10px rgba(0,0,0,.4); }
.mod-hero__carousel-subtitle { font-family: var(--font-family, inherit); font-size: 16px; line-height: 1.7; margin: 0 0 20px; text-shadow: 0 1px 6px rgba(0,0,0,.4); }
.mod-hero__carousel-button { display: inline-block; padding: 10px 30px; background: var(--color-primary, var(--primary, #2563eb)); color: #fff; text-decoration: none; border-radius: var(--radius-base, 10px); font-weight: 700; }

/* ===== hero09: 多图并列展示型 ===== */
.mod-hero--v9 { display: flex; align-items: center; gap: calc(var(--spacing-unit, 8px) * 5); padding: calc(var(--spacing-unit, 8px) * 6) 20px; background: var(--color-dark, var(--dark, #111)); min-height: 300px; flex-wrap: wrap; }
.mod-hero__gallery-text { flex: 1 1 320px; color: #fff; }
.mod-hero__gallery-title { font-family: var(--font-family, inherit); font-size: 32px; font-weight: 800; margin: 0 0 12px; }
.mod-hero__gallery-subtitle { font-family: var(--font-family, inherit); font-size: 15px; color: rgba(255,255,255,.8); line-height: 1.7; margin: 0 0 18px; }
.mod-hero__gallery-button { display: inline-block; padding: 10px 28px; background: var(--color-primary, var(--primary, #2563eb)); color: #fff; text-decoration: none; border-radius: var(--radius-base, 10px); font-weight: 600; }
.mod-hero__gallery-images { flex: 1 1 380px; display: grid; gap: 10px; }
.mod-hero__gallery-images--count-1 { grid-template-columns: 1fr; }
.mod-hero__gallery-images--count-2 { grid-template-columns: 1fr 1fr; }
.mod-hero__gallery-images--count-3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.mod-hero__gallery-images--count-3 .mod-hero__gallery-img-wrap:first-child { grid-row: span 2; }
.mod-hero__gallery-images--count-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.mod-hero__gallery-img-wrap { border-radius: var(--radius-base, 10px); overflow: hidden; }
.mod-hero__gallery-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 100px; }

/* ===== 移动端响应式适配（补充variant：v4/v5/v7/v8/v9） ===== */
@media (max-width: 768px) {
    .mod-hero--v4, .mod-hero--v7, .mod-hero--v8 { min-height: 240px; padding: calc(var(--spacing-unit, 8px) * 5) 16px; }
    .mod-hero__title-portal, .mod-hero__title-glow, .mod-hero__carousel-title { font-size: 26px; }
    .mod-hero__subtitle-portal, .mod-hero__subtitle-glow, .mod-hero__carousel-subtitle { font-size: 14px; }
    .mod-hero--v5 { padding: calc(var(--spacing-unit, 8px) * 3) 16px; }
    .mod-hero__title-compact { font-size: 20px; }
    .mod-hero--v9 { flex-direction: column; padding: calc(var(--spacing-unit, 8px) * 4) 16px; }
    .mod-hero__gallery-images--count-3, .mod-hero__gallery-images--count-4 { grid-template-columns: 1fr 1fr; }
}