/*
 * P4 列表与详情页补充样式。
 *
 * newslist.css 
 */

/* ---------------------------------------------------------------
 * 1. 页面容器
 *
 * newslist.css 
 * --------------------------------------------------------------- */
.srs-news--single,
.srs-news--cases,
.srs-news--docs {
    min-height: 0;
    padding: 60px 0 122px;
    background: url(../img/newslist_bg.png) top center no-repeat, linear-gradient(180deg, #edf1f5 0%, #f8fafc 45%, #edf1f5 100%)
}

.srs-news--single {
    padding-top: 0px;
}

.srs-news-empty {
    margin-top: 30px;
}

.srs-news__desc {
    max-width: 900px;
    margin: 18px 0 0;
    color: var(--news-muted);
    font-size: 16px;
    line-height: 28px
}

/* ---------------------------------------------------------------
 * 2. PHP 直出分页（paginate_links 输出 a.page-numbers / span.current）
 * --------------------------------------------------------------- */
.srs-news-pagination .page-numbers {
    min-width: 50px;
    height: 50px;
    padding: 0 15px;
    border: 1px solid #cfd5de;
    border-radius: 3px;
    color: #626b78;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    transition: border-color .25s, color .25s
}

.srs-news-pagination a.page-numbers:hover,
.srs-news-pagination .page-numbers.current {
    border-color: var(--news-blue);
    color: var(--news-blue)
}

.srs-news-pagination .page-numbers.current {
    box-shadow: inset 0 0 0 1px var(--news-blue)
}

.srs-news-pagination .page-numbers.dots {
    border-color: transparent;
    background: transparent
}

/* ---------------------------------------------------------------
 * 3. 文章正文（新闻详情 / 案例详情共用）
 *
 * --------------------------------------------------------------- */
.srs-article {
    margin-top: 40px;
    padding: 56px 72px 64px;
    border-radius: 12px;
    background: #fff
}

.srs-article__head {
    padding-bottom: 28px;
    border-bottom: 1px solid #e8ecf1
}

.srs-article__head h1 {
    margin: 0;
    color: #000;
    font-size: 38px;
    font-weight: 600;
    line-height: 1.34;
    letter-spacing: .5px
}

.srs-article__meta {
    margin-top: 22px;
    display: flex;
    align-items: center;
    gap: 16px;
    color: var(--news-muted);
    font-size: 15px
}

.srs-article__tag {
    height: 30px;
    padding: 0 14px;
    border-radius: 15px;
    color: var(--news-blue);
    background: rgba(21, 42, 211, .08);
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    transition: background-color .25s
}

.srs-article__tag:hover {
    background: rgba(21, 42, 211, .16)
}

.srs-article__thumb {
    margin: 40px 0 0;
    border-radius: 8px;
    overflow: hidden
}

.srs-article__thumb img {
    width: 100%;
    height: auto;
    display: block
}

.srs-article__content {
    margin-top: 40px;
    color: #3d4554;
    font-size: 17px;
    line-height: 32px
}

.srs-article__content>*:first-child {
    margin-top: 0
}

.srs-article__content>*:last-child {
    margin-bottom: 0
}

.srs-article__content h2 {
    margin: 48px 0 20px;
    color: #000;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.4
}

.srs-article__content h3 {
    margin: 36px 0 16px;
    color: #000;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.45
}

.srs-article__content h4 {
    margin: 28px 0 14px;
    color: #111827;
    font-size: 18px;
    font-weight: 600
}

.srs-article__content p {
    margin: 0 0 22px
}

.srs-article__content a {
    color: var(--news-blue);
    text-decoration: underline;
    text-underline-offset: 3px
}

.srs-article__content ul,
.srs-article__content ol {
    margin: 0 0 22px;
    padding-left: 26px
}

.srs-article__content li {
    margin-bottom: 10px
}

.srs-article__content blockquote {
    margin: 28px 0;
    padding: 20px 26px;
    border-left: 3px solid var(--news-blue);
    border-radius: 0 8px 8px 0;
    color: #4a5364;
    background: #f4f7fb
}

.srs-article__content blockquote p:last-child {
    margin-bottom: 0
}

.srs-article__content img {
    max-width: 100%;
    height: auto;
    margin: 12px 0;
    border-radius: 8px;
    display: block
}

.srs-article__content figure {
    margin: 28px 0
}

.srs-article__content figcaption {
    margin-top: 10px;
    color: #8b929e;
    font-size: 14px;
    text-align: center
}

.srs-article__content table {
    width: 100%;
    margin: 28px 0;
    border-collapse: collapse;
    font-size: 15px
}

.srs-article__content th,
.srs-article__content td {
    padding: 12px 16px;
    border: 1px solid #e3e8ef;
    text-align: left
}

.srs-article__content th {
    color: #111827;
    background: #f4f7fb;
    font-weight: 600
}

/* ---------------------------------------------------------------
 * 4. 上下篇导航
 * --------------------------------------------------------------- */
.srs-article__nav {
    margin-top: 40px;
    display: flex;
    gap: 24px;
    flex-wrap: wrap
}

.srs-article__nav>span {
    flex: 1 1 320px;
    min-width: 0;
    padding: 22px 26px;
    border-radius: 10px;
    background: #fff;
    transition: box-shadow .3s
}

.srs-article__nav>span:hover {
    box-shadow: 0 10px 28px rgba(16, 32, 64, .1)
}

.srs-article__nav a {
    color: #2a3342;
    font-size: 16px;
    line-height: 26px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.srs-article__nav a:hover {
    color: var(--news-blue)
}

.srs-article__nav>span::before {
    display: block;
    margin-bottom: 8px;
    color: #8b929e;
    font-size: 13px;
    letter-spacing: 1px
}

.srs-article__nav-prev::before {
    content: "上一篇"
}

.srs-article__nav-next::before {
    content: "下一篇"
}

.srs-article__nav-next {
    text-align: right
}

/* ---------------------------------------------------------------
 * 5. 相关新闻
 * --------------------------------------------------------------- */
.srs-article__related {
    margin-top: 72px
}

.srs-article__related-title {
    margin: 0 0 32px;
    color: #000;
    font-size: 30px;
    font-weight: 600;
    letter-spacing: 1px
}

/* ---------------------------------------------------------------
 * 6. 案例 / 资料的分类筛选条
 *
 * --------------------------------------------------------------- */
.srs-case-filter {
    height: 90px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap
}

.srs-case-filter a {
    position: relative;
    color: #717988;
    font-size: 18px;
    white-space: nowrap;
    padding-bottom: 8px
}

.srs-case-filter a::after {
    content: "";
    position: absolute;
    right: 50%;
    bottom: 0;
    left: 50%;
    height: 3px;
    border-radius: 3px;
    background: var(--news-blue);
    transition: .25s
}

.srs-case-filter a:hover,
.srs-case-filter a.is-active {
    color: var(--news-blue)
}

.srs-case-filter a.is-active::after {
    right: 0;
    left: 0
}

/* ---------------------------------------------------------------
 * 7. 案例详情 · 卡片内的案例字段
 *
 * --------------------------------------------------------------- */
.srs-article__fact {
    display: inline-flex;
    align-items: baseline;
    gap: 6px
}

.srs-article__fact b {
    color: #111827;
    font-weight: 500
}

/*
 */
.srs-news--case .srs-article__meta>.srs-article__fact:not(:first-child)::before,
.srs-news--case .srs-article__meta>time:not(:first-child)::before {
    margin-right: 16px;
    color: #ccd2db;
    content: "·"
}

/* ---------------------------------------------------------------
 * 8. 案例详情 · 关键成果 / 现场图
 * --------------------------------------------------------------- */
.srs-article .srs-case-metrics {
    margin-top: 40px;
    padding-top: 0
}

.srs-article .srs-case-metrics__item {
    padding: 28px 26px;
    background: #f4f7fa
}

.srs-article .srs-case-gallery {
    margin-top: 56px
}

.srs-article .srs-case-gallery__grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px
}

.srs-article .srs-case__heading {
    margin-bottom: 24px;
    font-size: 24px
}

/* ---------------------------------------------------------------
 * 9. 案例详情 · 关键成果 / 现场图 / 关联推荐
 * --------------------------------------------------------------- */
.srs-case__heading {
    margin: 0 0 32px;
    color: #000;
    font-size: 30px;
    font-weight: 600;
    letter-spacing: 1px
}

.srs-case-metrics {
    padding-top: 72px
}

.srs-case-metrics__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px
}

.srs-case-metrics__item {
    padding: 36px 32px;
    border-radius: 12px;
    background: #fff
}

.srs-case-metrics__value {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 6px;
    color: var(--news-blue)
}

.srs-case-metrics__value span {
    font-size: 46px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -1px
}

.srs-case-metrics__value i {
    font-size: 18px;
    font-style: normal;
    font-weight: 500
}

.srs-case-metrics__label {
    margin: 14px 0 0;
    color: var(--news-muted);
    font-size: 16px;
    line-height: 24px
}

.srs-case-gallery {
    margin-top: 72px
}

.srs-case-gallery__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px
}

.srs-case-gallery__grid figure {
    margin: 0;
    border-radius: 10px;
    overflow: hidden;
    background: #e5eaf0
}

.srs-case-gallery__grid img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    aspect-ratio: 3/2
}

.srs-case-solutions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px
}

.srs-case-solutions__item {
    padding: 26px 30px;
    border-radius: 10px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    transition: box-shadow .3s, transform .3s
}

.srs-case-solutions__item:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(16, 32, 64, .12)
}

.srs-case-solutions__item span {
    color: #2a3342;
    font-size: 17px;
    line-height: 26px
}

.srs-case-solutions__item img {
    width: 22px;
    flex: none
}

/* ---------------------------------------------------------------
 * 9. 产品资料列表
 * --------------------------------------------------------------- */
.srs-doc-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 20px
}

.srs-doc-item {
    padding: 32px 36px;
    border-radius: 12px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    transition: box-shadow .3s
}

.srs-doc-item:hover {
    box-shadow: 0 12px 30px rgba(16, 32, 64, .1)
}

.srs-doc-item__body {
    min-width: 0
}

.srs-doc-item__title {
    margin: 0;
    color: #000;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.45
}

.srs-doc-item__summary {
    margin: 12px 0 0;
    color: var(--news-muted);
    font-size: 16px;
    line-height: 26px
}

.srs-doc-item__meta {
    margin: 16px 0 0;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    color: #8b929e;
    font-size: 14px
}

.srs-doc-item__ext {
    height: 24px;
    padding: 0 10px;
    border-radius: 4px;
    color: #fff;
    background: #07294c;
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px
}

.srs-doc-item__action {
    flex: none
}

.srs-doc-item__download {
    height: 48px;
    padding: 0 24px;
    border-radius: 24px;
    color: #fff;
    background: var(--news-blue);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    transition: opacity .25s
}

.srs-doc-item__download:hover {
    opacity: .86
}

.srs-doc-item__download img {
    width: 18px;
    filter: brightness(0) invert(1)
}

.srs-doc-item__hint {
    color: #8b929e;
    font-size: 15px
}

/* ---------------------------------------------------------------
 * 10. 响应式
 * --------------------------------------------------------------- */
@media(max-width:1480px) {
    .srs-article {
        padding: 44px 48px 52px
    }
}

@media(max-width:1024px) {
    .srs-article {
        padding: 36px 32px 40px
    }

    .srs-article__head h1 {
        font-size: 30px
    }

    .srs-case-metrics,
    .srs-case-gallery,
    .srs-article__related {
        margin-top: 0;
        padding-top: 56px
    }

    .srs-article .srs-case-metrics {
        padding-top: 32px
    }

    .srs-article .srs-case-gallery {
        padding-top: 44px
    }

    .srs-case__heading,
    .srs-article__related-title {
        font-size: 24px
    }

    .srs-case-filter {
        height: auto;
        padding: 20px 0;
        gap: 24px
    }

    .srs-doc-item {
        padding: 26px 24px;
        flex-direction: column;
        align-items: flex-start;
        gap: 20px
    }
}

@media(max-width:640px) {
    .srs-article {
        padding: 28px 20px 32px
    }

    .srs-article__head h1 {
        font-size: 24px
    }

    .srs-article__content {
        font-size: 16px;
        line-height: 29px
    }

    .srs-article__content h2 {
        font-size: 21px
    }

    .srs-article__content h3 {
        font-size: 18px
    }

    .srs-article__nav>span {
        flex: 1 1 100%
    }

    .srs-article__nav-next {
        text-align: left
    }

    .srs-case-metrics__value span {
        font-size: 36px
    }

    /*
     */
    .srs-news--case .srs-article__meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px
    }

    .srs-news--case .srs-article__meta>.srs-article__fact:not(:first-child)::before,
    .srs-news--case .srs-article__meta>time:not(:first-child)::before {
        content: none
    }

    .srs-case-filter {
        gap: 18px
    }

    .srs-case-filter a {
        font-size: 16px
    }

    .srs-doc-item__title {
        font-size: 18px
    }

    .srs-news-pagination .page-numbers {
        min-width: 42px;
        height: 42px;
        padding: 0 10px;
        font-size: 14px
    }
}

/* ---------------------------------------------------------------
 * 11. 推荐轮播补强
 *
 * --------------------------------------------------------------- */

.srs-news-feature__media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(100deg, #e5eaf0 30%, #f2f5f8 50%, #e5eaf0 70%) 0 0/300% 100%;
    animation: srs-feature-skeleton 1.4s ease-in-out infinite;
    transition: opacity .32s ease
}

.srs-news-feature__media.is-ready::before {
    opacity: 0;
    animation: none
}

@keyframes srs-feature-skeleton {
    0% {
        background-position: 100% 0
    }

    100% {
        background-position: 0 0
    }
}

.srs-news-feature__media>img {
    position: relative;
    z-index: 2
}

a.srs-news-feature__media {
    display: block
}

/*
 */
.srs-news-feature__link,
.srs-news-feature__summary {
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-decoration: none;
    transition: color .25s
}

.srs-news-feature__link:hover {
    color: var(--news-blue)
}

.srs-news-feature__summary:hover {
    color: #596273
}

.srs-news-feature__link:focus-visible,
.srs-news-feature__summary:focus-visible,
a.srs-news-feature__media:focus-visible {
    outline: 2px solid var(--news-blue);
    outline-offset: 3px;
    border-radius: 4px
}

.srs-news-feature__copy p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden
}

@media(prefers-reduced-motion:reduce) {

    .srs-news-feature__media::before {
        animation: none
    }

    .srs-news-feature__link,
    .srs-news-feature__summary {
        transition: none
    }
}

/* ---------------------------------------------------------------
 * 12. 详情页面包屑
 *
 * --------------------------------------------------------------- */
.srs-article .srs-news__breadcrumb {
    position: static;
    margin-bottom: 26px;
    justify-content: flex-end;
    flex-wrap: wrap
}

/*
 */
.srs-article .srs-news__breadcrumb>span[aria-current] {
    max-width: 34ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

@media(max-width:1024px) {
    .srs-article .srs-news__breadcrumb {
        margin-bottom: 20px
    }

    .srs-article .srs-news__breadcrumb>span[aria-current] {
        max-width: 20ch
    }
}

@media(max-width:640px) {

    .srs-article .srs-news__breadcrumb {
        margin-bottom: 16px;
        justify-content: flex-start
    }

    .srs-article .srs-news__breadcrumb>span[aria-current] {
        max-width: 14ch
    }
}