/* ============================================================
 * 九州微电 · 列表页统一设计（应用方案 / 新闻资讯共用）
 * 编辑式静态页 · 去卡片 · 纯净白底 · 大空间 · 精致细节
 * ============================================================ */

.main-content { background: var(--jz-white); }

/* ============================================================
 * 1. 顶部图片 Banner（轻量版 · 仅图片）
 * 覆盖 main-content 的 nav-h padding，使图片从 nav 底部开始
 * ============================================================ */
.page-banner-bg {
    position: relative;
    min-height: clamp(240px, 28vw, 380px);
    background-color: var(--jz-black);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}
.page-banner-bg__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(14, 17, 22, .15) 0%, rgba(14, 17, 22, .35) 100%);
    pointer-events: none;
}

/* ============================================================
 * 2. 页首 Hero（标题 / 描述 / 分类 tabs）
 * ============================================================ */
.listing-hero {
    padding: clamp(var(--sp-8), 6vw, var(--sp-11)) 0 clamp(var(--sp-7), 5vw, var(--sp-9));
    background: var(--jz-white);
}
.listing-hero .container { max-width: var(--container-wide); }

.listing-hero .page-hero__crumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12.5px;
    color: var(--jz-gray-500);
    margin-bottom: clamp(var(--sp-6), 4vw, var(--sp-8));
}
.listing-hero .page-hero__crumb a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--jz-gray-700);
    transition: color var(--transition-base);
}
.listing-hero .page-hero__crumb a:hover { color: var(--jz-red); }
.listing-hero .page-hero__crumb a:last-child { color: var(--jz-ink); pointer-events: none; }
.listing-hero .page-hero__crumb-sep { color: var(--jz-gray-300); font-size: 11px; }

.listing-hero__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: var(--sp-6);
    padding-bottom: clamp(var(--sp-5), 4vw, var(--sp-7));
    border-bottom: 1px solid var(--border-color);
}
.listing-hero__text { min-width: 0; flex: 1 1 auto; }

.listing-eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .22em;
    color: var(--jz-red);
    text-transform: uppercase;
    margin-bottom: var(--sp-3);
}
.listing-title {
    font-family: var(--font-display);
    font-size: clamp(32px, 4vw, 54px);
    font-weight: 300;
    color: var(--jz-ink);
    line-height: 1.1;
    letter-spacing: -0.025em;
    margin: 0;
    word-break: break-word;
}
.listing-desc {
    margin: var(--sp-4) 0 0;
    font-size: var(--fs-14);
    color: var(--jz-gray-700);
    line-height: 1.75;
    max-width: 640px;
}

/* 分类 tabs（文字式 · 下划线红） */
.listing-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding-bottom: 2px;
}
.listing-tabs a {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    font-size: 13px;
    color: var(--jz-gray-700);
    transition: color var(--transition-base);
    white-space: nowrap;
}
.listing-tabs a::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 16px;
    right: 16px;
    height: 1.5px;
    background: var(--jz-red);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--transition-base);
}
.listing-tabs a:hover { color: var(--jz-ink); }
.listing-tabs a.is-active {
    color: var(--jz-ink);
    font-weight: 500;
}
.listing-tabs a.is-active::after { transform: scaleX(1); }

/* ============================================================
 * 2. 列表区
 * ============================================================ */
.listing-section {
    padding: clamp(var(--sp-6), 4vw, var(--sp-8)) 0 clamp(var(--sp-8), 6vw, var(--sp-10));
    background: var(--jz-white);
}
.listing-section .container { max-width: var(--container-wide); }

.listing-grid {
    display: grid;
    gap: clamp(var(--sp-6), 4vw, var(--sp-8)) clamp(var(--sp-5), 3vw, var(--sp-6));
}
.listing-grid--3 { grid-template-columns: repeat(3, 1fr); }
.listing-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- 列表项（无边框无底色 · 纯编辑式） ---------- */
.listing-item {
    display: flex;
    flex-direction: column;
    color: inherit;
    gap: var(--sp-4);
}
.listing-item__fig {
    position: relative;
    aspect-ratio: 4 / 3;
    margin: 0;
    overflow: hidden;
    background: linear-gradient(135deg, #f5f7fa 0%, #eceef2 100%);
    border-radius: var(--radius-sm);
}
/* 无图占位 · 默认显示，img 加载成功覆盖在上面 */
.listing-item__fig::before {
    content: "\f03e";
    font-family: FontAwesome;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--jz-gray-300);
    font-size: 36px;
    z-index: 0;
    pointer-events: none;
}
.listing-item__fig img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s var(--ease-out);
}
.listing-item__fig img.is-broken { display: none; }
.listing-item:hover .listing-item__fig img { transform: scale(1.04); }
/* 图片底部极细红色进度线（hover 时显示） */
.listing-item__fig::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--jz-red);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .5s var(--ease-out);
}
.listing-item:hover .listing-item__fig::after { transform: scaleX(1); }

.listing-item__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 2px;
}

/* meta 行（分类 · 日期） */
.listing-item__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--jz-gray-500);
    letter-spacing: .04em;
}
.listing-item__cate {
    color: var(--jz-red);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.listing-item__dot { color: var(--jz-gray-300); }
.listing-item__date {
    font-family: var(--font-display);
    letter-spacing: .04em;
}

/* 标题 */
.listing-item__title {
    font-family: var(--font-sans);
    font-size: var(--fs-16);
    font-weight: 600;
    color: var(--jz-ink);
    line-height: 1.4;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 44px;
    word-break: break-word;
    transition: color var(--transition-base);
}
.listing-item:hover .listing-item__title { color: var(--jz-red); }

/* 描述 */
.listing-item__desc {
    font-size: 13px;
    color: var(--jz-gray-700);
    line-height: 1.65;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 底部：阅读量 + "Read More" */
.listing-item__foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
    padding-top: var(--sp-3);
    border-top: 1px solid var(--border-color);
    font-size: 12px;
}
.listing-item__views {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--jz-gray-500);
}
.listing-item__views i { color: var(--jz-gray-500); font-size: 11px; }

/* Read More / Learn More 链式 */
.listing-item__more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--jz-ink);
    letter-spacing: .06em;
    text-transform: uppercase;
    transition: color var(--transition-base);
}
.listing-item__more i { transition: transform var(--transition-base); }
.listing-item:hover .listing-item__more { color: var(--jz-red); }
.listing-item:hover .listing-item__more i { transform: translateX(4px); }

/* ---------- 空态 ---------- */
.listing-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
    padding: clamp(var(--sp-11), 12vw, var(--sp-13)) var(--sp-6);
    text-align: center;
}
.listing-empty__icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--jz-gray-50);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--jz-gray-300);
    font-size: 30px;
}
.listing-empty h3 {
    font-size: var(--fs-18);
    color: var(--jz-ink);
    font-weight: 500;
    margin: 0;
}
.listing-empty p {
    font-size: 13.5px;
    color: var(--jz-gray-700);
    margin: 0;
}

/* ---------- 分页 ---------- */
.listing-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-4);
    margin-top: clamp(var(--sp-6), 4vw, var(--sp-8));
    padding: clamp(var(--sp-4), 3vw, var(--sp-5)) 0 0;
    border-top: 1px solid var(--border-color);
}
.listing-pagination__total {
    font-size: 12px;
    color: var(--jz-gray-500);
    letter-spacing: .04em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.listing-pagination__total strong {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--jz-red);
    letter-spacing: 0;
    text-transform: none;
}
.listing-pagination .list-pager { margin: 0; }

/* ---------- 响应式 ---------- */
@media (max-width: 1200px) {
    .listing-grid--3 { grid-template-columns: repeat(3, 1fr); }
    .listing-grid--4 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 992px) {
    .listing-hero__head { flex-direction: column; align-items: flex-start; }
    .listing-grid--3,
    .listing-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px) {
    .listing-grid--3,
    .listing-grid--4 { grid-template-columns: 1fr; gap: var(--sp-7); }
    .listing-title { font-size: 30px; }
    .listing-pagination { justify-content: center; }
}