/* ==========================================================================
   JCMS 首页样式 v3（SaaS 浅色风格）
   ========================================================================== */

/* 首页整体浅色渐变背景 */
main#mainContent {
    background: linear-gradient(180deg, #f0f5ff 0%, #f4f6fa 200px, #f4f6fa 100%);
}

/* 轮播 Hero */
/* 容器与轮播图同比例（2.35:1），object-fit: cover 在同比例下无裁切，图片任何视口均完整显示 */
.hero {
    position: relative; aspect-ratio: 3138 / 1336; min-height: 0; overflow: hidden;
    background: linear-gradient(135deg, #14213a 0%, #2b5a8c 60%, #1890ff 100%);
    display: flex; align-items: center; justify-content: center; text-align: center; color: #fff;
}
.hero .swiper-container { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.hero .swiper-wrapper { height: 100%; }
.hero .swiper-slide { width: 100%; height: 100%; position: relative; }
.hero .swiper-slide a { display: block; width: 100%; height: 100%; position: relative; }
.hero .swiper-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero .swiper-slide a::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(10, 20, 36, .3) 0%, rgba(10, 20, 36, .15) 50%, rgba(10, 20, 36, .5) 100%);
}
.hero .hero-text {
    position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%);
    text-align: center; z-index: 10; padding: 0 24px; pointer-events: none;
}
.hero .hero-text h1 {
    font-size: 42px; font-weight: 700; margin-bottom: 16px; letter-spacing: -.5px;
    text-shadow: 0 2px 20px rgba(0, 0, 0, .3); line-height: 1.25;
}
.hero .hero-text p { font-size: 17px; opacity: .92; max-width: 720px; margin: 0 auto; text-shadow: 0 1px 8px rgba(0, 0, 0, .35); }
.hero .swiper-button-prev, .hero .swiper-button-next {
    width: 44px; height: 44px; background: rgba(255, 255, 255, .15); border-radius: 50%;
    top: 50%; transform: translateY(-50%); backdrop-filter: blur(6px);
}
.hero .swiper-button-prev { left: 24px; }
.hero .swiper-button-next { right: 24px; }
.hero .swiper-button-prev:hover, .hero .swiper-button-next:hover { background: rgba(24, 144, 255, .9); }
.hero .swiper-button-prev::after, .hero .swiper-button-next::after { font-size: 18px; color: #fff; font-weight: 700; }
.hero .swiper-pagination { bottom: 22px; }
.hero .swiper-pagination .swiper-pagination-bullet {
    width: 8px; height: 8px; background: rgba(255, 255, 255, .5); opacity: 1; border-radius: 50%;
    transition: all .25s;
}
.hero .swiper-pagination .swiper-pagination-bullet-active { background: #fff; width: 24px; border-radius: var(--r-pill); }

/* 无轮播图时：圆角渐变卡片（重置基类的轮播比例约束） */
.hero.no-slider {
    aspect-ratio: auto; min-height: auto; background: transparent; padding: 40px 20px 0;
}
.hero.no-slider .hero-content {
    position: relative; z-index: 2; padding: 72px 40px;
    background: linear-gradient(135deg, #14213a 0%, #1d4a7a 50%, #1890ff 100%);
    border-radius: 20px; max-width: 1160px; margin: 0 auto;
    box-shadow: 0 20px 60px rgba(24, 144, 255, .18);
    overflow: hidden;
}
.hero.no-slider .hero-content::before {
    content: ""; position: absolute; right: -60px; top: -60px; width: 260px; height: 260px;
    border-radius: 50%; background: rgba(255, 255, 255, .06);
}
.hero.no-slider .hero-content::after {
    content: ""; position: absolute; right: 80px; bottom: -80px; width: 200px; height: 200px;
    border-radius: 50%; background: rgba(255, 255, 255, .04);
}
.hero .hero-content h1 { font-size: 40px; font-weight: 700; margin-bottom: 16px; letter-spacing: -.5px; position: relative; z-index: 1; }
.hero .hero-content p { font-size: 17px; opacity: .85; margin-bottom: 30px; max-width: 640px; margin-left: auto; margin-right: auto; position: relative; z-index: 1; line-height: 1.7; }
.hero-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; position: relative; z-index: 5; }

/* 关于我们 */
.about-section { background: transparent; padding: 48px 0 20px; }
.about-section h2 { font-size: 26px; margin-bottom: 10px; text-align: center; font-weight: 700; letter-spacing: -.3px; color: var(--c-text); }
.about-desc { text-align: center; max-width: 760px; margin: 0 auto; color: var(--c-text-2); font-size: 15px; line-height: 1.9; }

/* 产品功能亮点区（集票本宣传，动态配置渲染） */
.feature-section { background: transparent; padding: 24px 0 40px; }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 24px; }
.feature-item {
    background: #fff; border: 1px solid rgba(230, 234, 240, .7); border-radius: 16px;
    padding: 20px 22px; box-shadow: 0 1px 3px rgba(16, 34, 60, .04);
    transition: all .25s ease;
}
.feature-item:hover {
    box-shadow: 0 12px 32px rgba(24, 144, 255, .1); transform: translateY(-3px);
    border-color: rgba(24, 144, 255, .2);
}
.feature-item h3 { font-size: 16px; font-weight: 600; margin: 0 0 8px; color: var(--c-primary); }
.feature-item p { font-size: 14px; line-height: 1.7; color: var(--c-text-2); margin: 0; }
.feature-cta {
    margin: 28px auto 0; max-width: 720px; text-align: center;
    font-size: 16px; font-weight: 500; color: var(--c-text);
    padding: 14px 24px; background: rgba(24, 144, 255, .06);
    border: 1px dashed rgba(24, 144, 255, .35); border-radius: 12px; line-height: 1.6;
}
/* 功能区体验入口按钮（feature_cta_link 填写后显示，替换原文字 CTA） */
.feature-cta.feature-cta-btn {
    border: none; background: transparent; padding: 8px 0;
}
.feature-cta-btn .btn { min-width: 220px; }
@media (max-width: 768px) {
    .feature-grid { grid-template-columns: 1fr; }
    .feature-cta { font-size: 14px; }
}

/* 首页文章卡片强化 */
main#mainContent .article-card { border-radius: 16px; border-color: rgba(230, 234, 240, .7); }
main#mainContent .article-card-thumb { border-radius: 16px 16px 0 0; }
main#mainContent .article-card:hover { box-shadow: 0 16px 40px rgba(24, 144, 255, .12); }

/* 栏目速览 */
.category-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.category-block {
    background: #fff; border: 1px solid rgba(230, 234, 240, .7); border-radius: 16px;
    padding: 22px 24px; display: flex; flex-direction: column; gap: 10px;
    box-shadow: 0 1px 3px rgba(16, 34, 60, .04);
    transition: all .25s ease;
}
.category-block:hover {
    box-shadow: 0 12px 32px rgba(24, 144, 255, .1); transform: translateY(-3px);
    border-color: rgba(24, 144, 255, .2);
}
.category-block-title { font-size: 16px; font-weight: 600; margin: 0; padding-bottom: 12px; border-bottom: 1px solid var(--c-border); }
.category-block-title a { color: var(--c-text); }
.category-block-title a:hover { color: var(--c-primary); }
.category-block-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.category-block-list li { display: flex; align-items: baseline; gap: 8px; font-size: 14px; line-height: 1.5; }
.category-block-list li a { color: var(--c-text-2); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .2s; }
.category-block-list li a:hover { color: var(--c-primary); }
.category-block-date { color: var(--c-text-3); font-size: 12px; flex-shrink: 0; }
.category-block-more { font-size: 13px; color: var(--c-primary); margin-top: auto; font-weight: 500; }
.category-block-more:hover { text-decoration: underline; }

/* 热门文章 */
.hot-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px 28px; }
.hot-list li {
    display: flex; align-items: center; gap: 12px; font-size: 14px; line-height: 1.6;
    padding: 10px 14px; border-radius: var(--r-md); transition: background .2s;
}
.hot-list li:hover { background: rgba(24, 144, 255, .04); }
.hot-rank {
    width: 26px; height: 26px; border-radius: 8px; background: #eef2f7; color: var(--c-text-3);
    font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.hot-list li:nth-child(-n+3) .hot-rank { background: linear-gradient(135deg, #ff7a45, #ff4d4f); color: #fff; }
.hot-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--c-text); }
.hot-title:hover { color: var(--c-primary); }
.hot-meta { color: var(--c-text-3); font-size: 12px; flex-shrink: 0; }

/* 响应式 */
@media (max-width: 768px) {
    /* 移动端：图完整显示（contain 不裁切），高度用 min-height 保证版面，留白为渐变背景 */
    .hero { aspect-ratio: auto; min-height: 300px; }
    .hero .swiper-slide img { width: 100%; height: 100%; object-fit: contain; display: block; }
    .hero .hero-text h1 { font-size: 26px; }
    .hero .hero-text p { font-size: 14px; }
    .hero.no-slider { padding: 20px 12px 0; }
    .hero.no-slider .hero-content { padding: 48px 24px; border-radius: 16px; }
    .hero .hero-content h1 { font-size: 28px; }
    .hero .hero-content p { font-size: 15px; }
    .hero .swiper-button-prev, .hero .swiper-button-next { width: 36px; height: 36px; }
    .hero .swiper-button-prev { left: 10px; }
    .hero .swiper-button-next { right: 10px; }
    .hero-btns { flex-direction: column; align-items: center; gap: 10px; }
    .about-section h2 { font-size: 22px; }
}
@media (max-width: 480px) {
    .hero { min-height: 240px; }
    .hero .hero-text h1 { font-size: 21px; }
    .hero .hero-text p { font-size: 13px; }
    .hero.no-slider .hero-content { padding: 36px 20px; }
    .hero .hero-content h1 { font-size: 24px; }
    .hero .swiper-pagination .swiper-pagination-bullet { width: 6px; height: 6px; }
    .hero .swiper-pagination .swiper-pagination-bullet-active { width: 18px; }
    .category-block { padding: 18px; }
}