/* 门户首页样式（home_portal.go SSR 直出内容 + 本文件布局）。
   断点复用 news.css 体系的 768/480 两档；配色沿用站点绿 #07c160 与蓝 #0369a1。 */

.home-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px 16px 40px;
}

/* ---------- ① 首屏主视觉 ---------- */
.home-hero { margin-bottom: 22px; }
.home-hero-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
    align-items: stretch;
}

/* 轮播 */
.home-carousel-wrap { min-width: 0; }
.home-carousel {
    position: relative;
    width: 100%;
    aspect-ratio: 21 / 9;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(135deg, #07c160 0%, #06ad56 100%);
    box-shadow: 0 2px 12px rgba(7, 193, 96, 0.18);
}
.home-slide {
    position: absolute;
    inset: 0;
    display: block;
    opacity: 0;
    transition: opacity .5s ease;
}
.home-slide.active { opacity: 1; }
.home-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.home-slide-text {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 28px;
    color: #fff;
    gap: 6px;
}
.home-slide-text strong { font-size: 24px; line-height: 1.3; }
.home-slide-text span { font-size: 14px; opacity: .88; }
.home-hot-mini {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.home-hot-mini a {
    color: #fff;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 28px;
}
.home-hot-mini em { font-style: normal; font-size: 12px; opacity: .78; }
.home-hot-mini .hot-rank::before {
    content: "热";
    font-size: 11px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 4px;
    padding: 0 4px;
    line-height: 1.5;
}
.home-carousel-dots {
    position: absolute;
    bottom: 10px;
    right: 14px;
    display: flex;
    gap: 6px;
    z-index: 2;
}
.home-carousel-dots button {
    /* 视觉 9px 圆点，padding 撑出 ~19px 触控热区（background-clip 保持外观不变） */
    width: 9px;
    height: 9px;
    padding: 5px;
    background-clip: content-box;
    border-radius: 50%;
    border: none;
    background-color: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    box-sizing: content-box;
}
.home-carousel-dots button.active { background-color: #fff; }

/* 右侧：数据卡 + 快捷入口 */
.home-side {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}
.home-stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.home-stat {
    background: #fff;
    border: 1px solid #e8eef0;
    border-radius: 10px;
    padding: 12px 14px;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
    transition: box-shadow .2s, border-color .2s;
}
.home-stat:hover { border-color: #07c160; box-shadow: 0 2px 10px rgba(7, 193, 96, 0.12); }
.home-stat b { font-size: 22px; color: #06ad56; line-height: 1.2; }
.home-stat span { font-size: 12px; color: #7a8a8f; }

/* 首页页脚备案信息（ICP/公安/经营许可证；空配置的行由 JS 保持 hidden） */
.footer-icp { line-height: 1.6; }
.footer-icp p { margin: 2px 0; }
.footer-icp .copyright { margin-top: 6px; }

.home-quick {
    background: #fff;
    border: 1px solid #e8eef0;
    border-radius: 10px;
    padding: 12px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    flex: 1;
}
.home-quick-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
    color: #333;
    font-size: 12px;
    padding: 6px 2px;
    border-radius: 8px;
    min-height: 44px;
}
.home-quick-item:hover { background: #f2fbf6; color: #06ad56; }
.home-quick-item .hi {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-style: normal;
    font-size: 15px;
    font-weight: 600;
}
.hi-news { background: linear-gradient(135deg, #12b7f5, #0aa1d6); }
.hi-tech { background: linear-gradient(135deg, #07c160, #06ad56); }
.hi-book { background: linear-gradient(135deg, #ff9f43, #f57c00); }
.hi-chat { background: linear-gradient(135deg, #8e7cf8, #6c5ce7); }
.hi-news::after { content: "讯"; }
.hi-tech::after { content: "技"; }
.hi-book::after { content: "册"; }
.hi-chat::after { content: "话"; }

/* ---------- ② 模块聚合区 ---------- */
.home-aggregates { margin-bottom: 22px; }
.home-aggregate-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 16px;
    align-items: start;
}
.home-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.home-block {
    background: #fff;
    border: 1px solid #e8eef0;
    border-radius: 12px;
    padding: 16px 18px;
}
.home-block-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 12px;
}
.home-block-head h2 {
    font-size: 18px;
    margin: 0;
    color: #1c2b2e;
    padding-left: 10px;
    border-left: 4px solid #07c160;
    line-height: 1.2;
}
.home-more { font-size: 13px; color: #0369a1; text-decoration: none; white-space: nowrap; }
.home-more:hover { text-decoration: underline; }

/* 新闻列表 */
.home-news-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 16px;
}
.home-news-list { list-style: none; margin: 0; padding: 0; }
.home-news-list li { border-bottom: 1px dashed #eef2f3; }
.home-news-list li:last-child { border-bottom: none; }
.home-news-list li:first-child a { padding-top: 2px; }
.home-news-list a {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 9px 0;
    text-decoration: none;
}
.home-news-list a:hover .news-item-title { color: #06ad56; }
.home-news-list li:first-child .news-item-title {
    font-size: 16px;
    font-weight: 600;
    color: #1c2b2e;
}
.news-item-title {
    font-size: 14px;
    color: #333;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.news-item-meta {
    display: flex;
    gap: 10px;
    font-size: 12px;
    color: #9aa7ab;
}
.news-item-meta em { font-style: normal; }
.home-news-hot { border-left: 1px solid #eef2f3; padding-left: 16px; }
.home-news-hot h3 {
    font-size: 14px;
    color: #7a8a8f;
    margin: 0 0 6px;
    font-weight: 600;
}
.home-news-hot ol { margin: 0; padding: 0 0 0 0; list-style: none; counter-reset: hot; }
.home-news-hot li {
    counter-increment: hot;
    padding: 6px 0;
    border-bottom: 1px dashed #eef2f3;
}
.home-news-hot li:last-child { border-bottom: none; }
.home-news-hot a {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #444;
    text-decoration: none;
    line-height: 1.4;
}
.home-news-hot a::before {
    content: counter(hot);
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    background: #f0f4f5;
    color: #7a8a8f;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.home-news-hot li:nth-child(-n+3) a::before { background: #ffe9e2; color: #f57c00; }
.home-news-hot a:hover { color: #06ad56; }

/* 资料/手册封面卡 */
.home-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.home-card {
    background: #fff;
    border: 1px solid #eef2f3;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    transition: box-shadow .2s, transform .2s;
}
.home-card:hover { box-shadow: 0 4px 14px rgba(3, 105, 161, 0.12); transform: translateY(-2px); }
.home-card-cover {
    aspect-ratio: 16 / 10;
    background: #f4f7f8;
    overflow: hidden;
}
.home-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-card-cover-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #e8f8ef 0%, #d5f1e2 100%);
}
.home-card-cover-empty span {
    font-size: 34px;
    font-weight: 700;
    color: #07c160;
    opacity: .8;
}
.home-card-body { padding: 10px 12px 12px; position: relative; flex: 1; }
.home-card-body h3 {
    font-size: 14px;
    color: #333;
    margin: 0 0 6px;
    font-weight: 600;
    line-height: 1.4;
    padding-right: 44px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.8em;
}
.home-card-meta { font-size: 12px; color: #9aa7ab; margin: 0; }
.home-card-meta span { margin: 0 4px; }
.home-card-price {
    position: absolute;
    top: 10px;
    right: 12px;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 999px;
    line-height: 1.4;
}
.home-card-price.free { background: #e8f8ef; color: #06ad56; }
.home-card-price.points { background: #fff3e6; color: #f57c00; }

/* 本周热门资料榜（聚合区右列，与左列高度平衡） */
.home-hot-list { list-style: none; margin: 0; padding: 0; counter-reset: hotrank; }
.home-hot-list li { border-bottom: 1px dashed #eef2f3; }
.home-hot-list li:last-child { border-bottom: none; }
.home-hot-list a {
    counter-increment: hotrank;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 0;
    text-decoration: none;
}
.home-hot-list a::before {
    content: counter(hotrank);
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    background: #f0f4f5;
    color: #7a8a8f;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.home-hot-list li:nth-child(-n+3) a::before { background: #e8f8ef; color: #06ad56; }
.home-hot-list a:hover .home-hot-title { color: #06ad56; }
.home-hot-title {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    color: #333;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.home-hot-meta { flex: 0 0 auto; font-size: 12px; color: #9aa7ab; }

/* ---------- ③ 社区横带 ---------- */
.home-square-band {
    background: linear-gradient(180deg, #f3fbf6 0%, #f7fcf9 100%);
    border: 1px solid #e3f2e9;
    border-radius: 12px;
    padding: 16px 18px;
}
.home-square-inner { max-width: none; }
.home-square-grid {
    display: grid;
    grid-template-columns: 1.1fr 1.4fr 0.9fr;
    gap: 20px;
}
.home-square-grid h3 {
    font-size: 14px;
    color: #06ad56;
    margin: 0 0 10px;
    font-weight: 600;
}
.home-topic-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.home-topic-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    background: #fff;
    border: 1px solid #d8ece1;
    border-radius: 999px;
    font-size: 13px;
    color: #2c6e49;
    text-decoration: none;
    min-height: 28px;
}
.home-topic-chip:hover { border-color: #07c160; background: #f2fbf6; }
.home-topic-chip em {
    font-style: normal;
    font-size: 11px;
    color: #7a8a8f;
    background: #f0f4f5;
    border-radius: 999px;
    padding: 0 6px;
}
.home-square-posts ul { list-style: none; margin: 0; padding: 0; }
.home-square-posts li { border-bottom: 1px dashed #dcefe4; }
.home-square-posts li:last-child { border-bottom: none; }
.home-square-posts a {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 0;
    text-decoration: none;
}
.home-square-posts a:hover b { color: #06ad56; }
.home-square-posts b {
    font-size: 14px;
    color: #333;
    font-weight: 600;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.home-square-posts span {
    font-size: 12px;
    color: #8a979b;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.home-square-posts em { font-style: normal; font-size: 12px; color: #9aa7ab; }
.home-user-row { display: flex; flex-wrap: wrap; gap: 10px; }
.home-user {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    color: #555;
    font-size: 12px;
    width: 56px;
}
.home-user i {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #07c160, #0aa1d6);
    color: #fff;
    font-style: normal;
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    aspect-ratio: 1 / 1;
}
.home-user img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    aspect-ratio: 1 / 1;
    background: #eef2f3; /* 加载中/失败兜底底色 */
}
.home-user span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 响应式（复用 news.css 断点体系） ---------- */
@media (max-width: 900px) {
    .home-aggregate-grid { grid-template-columns: 1fr; }
    /* 单列时拆开两列容器，按内容语义重排：新闻→资料→手册→热门榜
       （桌面端为左右列高度平衡做了配对，单列需还原浏览顺序） */
    .home-col { display: contents; }
    /* display:contents 后区块直接成为 grid item（⚠️ DOM 父级仍是 .home-col，
       display:contents 不改 DOM 树，选择器必须写 .home-col > ）：横向滑动容器
       的固有内容宽会把 item 撑破轨道（min-width:auto 默认值），必须显式归零 */
    .home-col > .home-block { min-width: 0; max-width: 100%; }
    .home-blk-news { order: 1; }
    .home-blk-tech { order: 2; }
    .home-blk-lib { order: 3; }
    .home-blk-hot { order: 4; }
    .home-square-grid { grid-template-columns: 1fr 1fr; }
    .home-square-users { grid-column: span 2; }
}

@media (max-width: 768px) {
    /* 让位 fixed 头部 56px（原 padding:10px 简写会覆盖 news.css 的 padding-top:80，首屏被盖的根因） */
    .home-main { padding: 80px 12px 30px; }
    /* 手机模式精简：轮播大区域（含热榜迷你条）、聚合区热门资料、新闻资讯区块、
       热门话题 chips、快捷入口四链接卡片（新闻资讯/技术资料/手册书籍/话题广场）不显示 */
    .home-carousel-wrap { display: none; }
    .home-blk-hot { display: none; }
    .home-blk-news { display: block; }
    .home-blk-news .home-news-hot { display: none; }
    .home-square-topics { display: none; }
    .home-quick { display: none; }
    /* 统计卡简化排版：一行四列、去卡片边框、居中数字+标签 */
    .home-stat-grid { grid-template-columns: repeat(4, 1fr); gap: 0; }
    .home-stat { background: none; border: none; border-radius: 0; padding: 4px 2px; align-items: center; text-align: center; }
    .home-stat b { font-size: 17px; }
    .home-stat span { font-size: 11px; }
    /* 统计区纵向留白再收紧：空广告位外距与容器 gap 不再占用纵向空间，
       数字/标签行高收窄，消除文字上下的大片空白 */
    .home-side { gap: 0; }
    /* 三级选择器压过 ads.css 的二级同属性规则（ads.css 在 home.css 之后加载） */
    .home-side .ad-slot[data-ad-slot="home_side"] { margin: 0; }
    .home-stat { padding: 2px 2px; gap: 0; }
    .home-stat b { line-height: 1.15; }
    .home-stat span { line-height: 1.3; }
    /* hero 白卡原为轮播+数据卡外层（news.css padding:48px 32px），轮播隐藏后只剩统计一行，收紧内边距 */
    .home-hero { padding: 6px 4px; margin-bottom: 12px; border-radius: 10px; }
    /* 首屏折叠：数据卡+快捷入口单列铺开 */
    .home-hero-grid { grid-template-columns: 1fr; }
    /* 封面卡改横向滑动：一屏多看内容 */
    .home-cards {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        padding-bottom: 6px;
    }
    .home-card {
        flex: 0 0 46%;
        min-width: 46%;
        scroll-snap-align: start;
    }
    .home-card-cover { aspect-ratio: 4 / 3; }
    .home-news-grid { grid-template-columns: 1fr; }
    .home-news-hot { border-left: none; padding-left: 0; border-top: 1px solid #eef2f3; padding-top: 10px; }
    .home-square-grid { grid-template-columns: 1fr; gap: 14px; }
    .home-square-users { grid-column: auto; }
    .home-block { padding: 14px; }
}

@media (max-width: 480px) {
    .home-stat b { font-size: 18px; }
    .home-quick { grid-template-columns: repeat(4, 1fr); padding: 10px 6px; }
    .home-card { flex: 0 0 62%; min-width: 62%; }
    .home-slide-text { padding: 0 18px; }
    .home-slide-text strong { font-size: 17px; }
    .home-block-head h2 { font-size: 16px; }
}