/* 北海明珠官网：内页、文章详情、侧边栏、列表与分页 */

.page-hero{padding:76px 0 66px;color:#fff;background:linear-gradient(110deg,rgba(10,34,73,.98),rgba(29,73,139,.88))}
.page-hero h1{font-size:45px;margin:10px 0}
.page-hero p{max-width:720px;color:rgba(255,255,255,.78);font-size:16px}
.content-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:30px}
.content-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:34px}
.article-content{font-size:17px;line-height:2}
.article-content h2{font-size:28px;margin:38px 0 12px}
.article-content h3{font-size:22px;margin:30px 0 10px}
.article-content img{max-width:100%;height:auto;border-radius:14px;margin:22px auto}
.article-content p{margin:0 0 20px}
.detail-cover{width:100%;max-height:580px;object-fit:cover;border-radius:18px;margin:0 0 30px}
.detail-meta{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 25px}
.detail-meta span{padding:6px 11px;border-radius:999px;background:var(--primary-soft);color:var(--primary);font-size:12px;font-weight:800}
.sidebar-box{position:sticky;top:105px;padding:22px;background:var(--bg);border-radius:16px}
.sidebar-box h3{margin-top:0}
.sidebar-box a{display:block;padding:10px 0;border-bottom:1px solid var(--line);color:#516078}
.filters{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:28px}
.filters a{padding:8px 13px;border-radius:999px;border:1px solid var(--line);font-size:13px}
.filters a.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.pagination{display:flex;gap:8px;justify-content:center;margin-top:35px}
.pagination a{width:38px;height:38px;border-radius:9px;border:1px solid var(--line);display:grid;place-items:center}
.pagination a.active{background:var(--primary);color:#fff}
@media (max-width:850px){
.content-grid{grid-template-columns:1fr}
.sidebar-box{position:static}
}
@media (max-width:620px){
.page-hero{padding:58px 0}
.page-hero h1{font-size:35px}
.content-card{padding:22px}
.article-content{font-size:16px}
}
.breadcrumbs{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin:0 0 22px;color:#7d899d;font-size:13px}
.breadcrumbs a{color:var(--primary);font-weight:700}
.breadcrumbs span:last-child{max-width:720px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.content-list-hero{padding:68px 0 62px}
.content-list-hero .breadcrumbs{color:rgba(255,255,255,.68)}
.content-list-hero .breadcrumbs a{color:#fff}
.content-list-hero h1{max-width:850px}
.detail-heading-section{padding:68px 0 52px;background:linear-gradient(180deg,#f4f7fc 0%,#fff 100%);border-bottom:1px solid var(--line)}
.detail-heading-section h1{max-width:980px;margin:13px 0 15px;font-size:clamp(36px,4.5vw,56px);line-height:1.22;letter-spacing:-.045em}
.detail-heading-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:30px}
.detail-lead{max-width:860px;margin:0 0 18px;color:var(--muted);font-size:18px;line-height:1.9}
.detail-main-section{padding-top:54px}
.detail-content-grid{grid-template-columns:minmax(0,1fr) 310px;align-items:start}
.article-detail-card{min-width:0}
.detail-sidebar{position:sticky;top:102px;align-self:start;display:grid;gap:17px}
.detail-sidebar .sidebar-box{position:static}
.booking-sidebar{background:linear-gradient(145deg,#10274b,#163f7b);color:#fff}
.booking-sidebar .eyebrow{color:#9bbcff}
.booking-sidebar h3{font-size:22px;line-height:1.45}
.booking-sidebar p{color:rgba(255,255,255,.72);font-size:13px}
.booking-sidebar>a:not(.primary-btn){color:#cbd9f5;border-color:rgba(255,255,255,.14)}
.booking-sidebar .primary-btn{margin:8px 0 5px;color:#fff;border:0}
.sidebar-links a{display:flex;align-items:center;justify-content:space-between}
.sidebar-links a.active{color:var(--primary);font-weight:800}
.sidebar-links small{font-size:14px}
.sidebar-recent-list a{padding:11px 0}
.sidebar-recent-list strong,.sidebar-recent-list small{display:block}
.sidebar-recent-list strong{font-size:13px;line-height:1.55;color:#34435c}
.sidebar-recent-list small{margin-top:3px;color:#929daf;font-size:11px}
.article-tags{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding-top:24px;margin-top:32px;border-top:1px solid var(--line)}
.article-tags strong{margin-right:4px;font-size:13px}
.article-tags span{padding:6px 11px;border-radius:999px;background:var(--bg);color:#526079;font-size:12px}
.article-neighbors{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
.article-neighbors>div{min-width:0;padding:16px;background:var(--bg);border-radius:13px}
.article-neighbors>div:last-child{text-align:right}
.article-neighbors small,.article-neighbors a,.article-neighbors span{display:block}
.article-neighbors small{color:#8a96a8;margin-bottom:5px}
.article-neighbors a{color:#2d3c56;font-weight:800;line-height:1.55}
.article-neighbors span{color:#9aa4b3;font-size:13px}
.related-section{padding-top:68px}
.content-channel-nav{margin-bottom:22px}
.list-summary{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:22px;padding:14px 17px;background:var(--bg);border-radius:12px;color:var(--muted);font-size:13px}
.list-summary strong{color:var(--ink);font-size:15px}
.list-booking-cta{display:flex;align-items:center;justify-content:space-between;gap:28px;margin-top:44px;padding:30px 34px;border-radius:18px;background:linear-gradient(125deg,#10274b,#24549a);color:#fff}
.list-booking-cta h2{margin:4px 0 5px}
.list-booking-cta p{margin:0;color:rgba(255,255,255,.72)}
.list-booking-cta .primary-btn{flex:0 0 auto}
.fixed-page-detail .article-content{min-height:280px}
@media (max-width:850px){
.detail-content-grid{grid-template-columns:1fr}
.detail-sidebar{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}
.detail-sidebar .booking-sidebar{grid-column:1/-1}
.list-booking-cta{align-items:flex-start}
}
@media (max-width:620px){
.breadcrumbs{font-size:12px}
.breadcrumbs span:last-child{max-width:260px}
.content-list-hero{padding:52px 0 48px}
.detail-heading-section{padding:46px 0 35px}
.detail-heading-section h1{font-size:34px}
.detail-lead{font-size:16px}
.detail-main-section{padding-top:35px}
.detail-sidebar{grid-template-columns:1fr}
.article-neighbors{grid-template-columns:1fr}
.article-neighbors>div:last-child{text-align:left}
.list-summary{align-items:flex-start;flex-direction:column;gap:4px}
.list-booking-cta{align-items:flex-start;flex-direction:column;padding:24px}
}
.list-booking-cta{display:block;margin-top:0;border-radius:0;background:linear-gradient(125deg,#10274b,#24549a);color:#fff}
.list-booking-cta>.container{display:flex;align-items:center;justify-content:space-between;gap:28px}
.list-booking-cta h2{margin:4px 0 5px}
.list-booking-cta p{margin:0;color:rgba(255,255,255,.72)}
.list-booking-cta .eyebrow.blue{color:#a9c3ff}
@media (max-width:620px){
.list-booking-cta>.container{align-items:flex-start;flex-direction:column}
.list-booking-cta .primary-btn{width:100%}
}

/* =========================================================
 * 文章详情页宽版布局与侧边栏重设计
 * 固定功能文件名，通过 frontend-assets.php 的 filemtime 自动刷新缓存。
 * ========================================================= */

@media (min-width:1121px){
    .content-detail-page .detail-main-section .detail-content-grid{
        width:min(calc(100% - 56px),1360px);
        grid-template-columns:minmax(0,1fr) 300px;
        gap:36px;
    }

    .content-detail-page .article-detail-card{
        padding:40px 42px;
    }
}

.content-detail-page .article-detail-card{
    border-color:#e1e8f2;
    box-shadow:0 18px 48px rgba(18,44,82,.055);
}

.content-detail-page .article-detail-card .article-content{
    width:100%;
    max-width:none;
}

.content-detail-page .detail-sidebar{
    gap:18px;
}

.content-detail-page .detail-sidebar .sidebar-box{
    position:relative;
    overflow:hidden;
    padding:0;
    background:#fff;
    border:1px solid #e1e8f2;
    border-radius:20px;
    box-shadow:0 14px 38px rgba(19,45,83,.07);
}

.content-detail-page .sidebar-feature-card{
    padding:27px 25px 24px !important;
    color:#fff;
    background:
        radial-gradient(circle at 88% 5%,rgba(115,166,255,.26),transparent 34%),
        linear-gradient(145deg,#0d2b59 0%,#164d9b 62%,#2863df 100%) !important;
    border:0 !important;
    box-shadow:0 20px 45px rgba(21,66,137,.22) !important;
}

.content-detail-page .sidebar-feature-card::after{
    content:"";
    position:absolute;
    right:-38px;
    bottom:-44px;
    width:145px;
    height:145px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:50%;
    box-shadow:0 0 0 24px rgba(255,255,255,.035),0 0 0 48px rgba(255,255,255,.025);
    pointer-events:none;
}

.content-detail-page .sidebar-feature-icon{
    position:relative;
    z-index:1;
    display:grid;
    place-items:center;
    width:48px;
    height:48px;
    margin-bottom:21px;
    border:1px solid rgba(255,255,255,.2);
    border-radius:15px;
    color:#fff;
    background:rgba(255,255,255,.13);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.15);
}

.content-detail-page .sidebar-feature-icon .site-icon{
    width:24px;
    height:24px;
}

.content-detail-page .sidebar-feature-card .eyebrow{
    position:relative;
    z-index:1;
    display:block;
    margin-bottom:8px;
    color:#b8d1ff;
    font-size:10px;
    letter-spacing:.16em;
}

.content-detail-page .sidebar-feature-card h3{
    position:relative;
    z-index:1;
    margin:0 0 11px;
    color:#fff;
    font-size:23px;
    line-height:1.4;
    letter-spacing:-.02em;
}

.content-detail-page .sidebar-feature-card p{
    position:relative;
    z-index:1;
    margin:0;
    color:rgba(255,255,255,.74);
    font-size:13px;
    line-height:1.85;
}

.content-detail-page .sidebar-feature-actions{
    position:relative;
    z-index:1;
    display:grid;
    gap:10px;
    margin-top:21px;
}

.content-detail-page .sidebar-feature-actions .primary-btn{
    width:100%;
    min-height:48px;
    gap:8px;
    padding:11px 15px;
    color:#174b94;
    background:#fff;
    box-shadow:0 10px 22px rgba(5,29,70,.18);
}

.content-detail-page .sidebar-feature-actions .primary-btn:hover{
    color:#0f3b79;
    background:#f4f8ff;
}

.content-detail-page .sidebar-feature-actions .primary-btn .site-icon{
    width:17px;
    height:17px;
}

.content-detail-page .sidebar-contact-link{
    display:flex !important;
    align-items:center;
    gap:9px;
    min-height:42px;
    padding:9px 12px !important;
    color:rgba(255,255,255,.88) !important;
    background:rgba(255,255,255,.09);
    border:1px solid rgba(255,255,255,.12) !important;
    border-radius:11px;
    font-size:13px;
    font-weight:700;
    transition:transform .2s ease,background .2s ease;
}

.content-detail-page .sidebar-contact-link:hover{
    transform:translateY(-2px);
    background:rgba(255,255,255,.15);
}

.content-detail-page .sidebar-contact-link .site-icon{
    flex:0 0 auto;
    width:18px;
    height:18px;
}

.content-detail-page .sidebar-box-heading{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:12px;
    padding:21px 22px 16px;
    border-bottom:1px solid #edf1f6;
}

.content-detail-page .sidebar-box-heading span{
    min-width:0;
}

.content-detail-page .sidebar-box-heading small,
.content-detail-page .sidebar-box-heading strong{
    display:block;
}

.content-detail-page .sidebar-box-heading small{
    margin-bottom:4px;
    color:#2b63c7;
    font-size:9px;
    font-weight:900;
    letter-spacing:.16em;
}

.content-detail-page .sidebar-box-heading strong{
    color:#172a49;
    font-size:17px;
    line-height:1.35;
}

.content-detail-page .sidebar-box-heading>a{
    flex:0 0 auto;
    padding:0 !important;
    color:#2b63c7 !important;
    border:0 !important;
    font-size:12px;
    font-weight:800;
}

.content-detail-page .sidebar-links{
    display:grid;
    padding:8px 11px 12px;
}

.content-detail-page .sidebar-links>a{
    display:grid;
    grid-template-columns:38px minmax(0,1fr) 18px;
    align-items:center;
    gap:11px;
    min-height:65px;
    padding:9px 9px !important;
    color:#2b3c57 !important;
    border:0 !important;
    border-radius:13px;
    transition:background .2s ease,transform .2s ease,color .2s ease;
}

.content-detail-page .sidebar-links>a:hover,
.content-detail-page .sidebar-links>a.active{
    color:#174ea6 !important;
    background:#edf4ff;
    transform:translateX(3px);
}

.content-detail-page .sidebar-links>a>i{
    display:grid;
    place-items:center;
    width:38px;
    height:38px;
    color:#2d66ca;
    background:#edf4ff;
    border-radius:11px;
    font-style:normal;
}

.content-detail-page .sidebar-links>a.active>i{
    color:#fff;
    background:#2863df;
}

.content-detail-page .sidebar-links .site-icon{
    width:18px;
    height:18px;
}

.content-detail-page .sidebar-links>a>span{
    min-width:0;
}

.content-detail-page .sidebar-links>a>span strong,
.content-detail-page .sidebar-links>a>span small{
    display:block;
}

.content-detail-page .sidebar-links>a>span strong{
    overflow:hidden;
    color:inherit;
    font-size:14px;
    line-height:1.45;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.content-detail-page .sidebar-links>a>span small{
    overflow:hidden;
    margin-top:2px;
    color:#8a96a8;
    font-size:10px;
    line-height:1.45;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.content-detail-page .sidebar-links>a>.site-icon{
    width:15px;
    height:15px;
    color:#9aa7b8;
}

.content-detail-page .sidebar-recent-list{
    display:grid;
    padding:7px 14px 14px;
}

.content-detail-page .sidebar-recent-list>a{
    display:grid;
    grid-template-columns:32px minmax(0,1fr);
    gap:10px;
    align-items:start;
    padding:13px 7px !important;
    color:#2b3b55 !important;
    border-bottom:1px solid #edf1f6 !important;
    transition:color .2s ease,transform .2s ease;
}

.content-detail-page .sidebar-recent-list>a:last-child{
    border-bottom:0 !important;
}

.content-detail-page .sidebar-recent-list>a:hover{
    color:#2863df !important;
    transform:translateX(3px);
}

.content-detail-page .sidebar-recent-list>a>b{
    display:grid;
    place-items:center;
    width:30px;
    height:30px;
    color:#2a62c5;
    background:#edf4ff;
    border-radius:9px;
    font-size:10px;
    font-weight:900;
}

.content-detail-page .sidebar-recent-list>a>span{
    min-width:0;
}

.content-detail-page .sidebar-recent-list strong{
    display:-webkit-box;
    overflow:hidden;
    color:inherit;
    font-size:13px;
    line-height:1.55;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
}

.content-detail-page .sidebar-recent-list small{
    display:block;
    margin-top:5px;
    color:#97a2b3;
    font-size:10px;
}

.content-detail-page .sidebar-empty{
    margin:0;
    padding:22px 8px;
    color:#929daf;
    text-align:center;
    font-size:12px;
}

@media (max-width:1120px){
    .content-detail-page .detail-main-section .detail-content-grid{
        width:min(calc(100% - 40px),980px);
        grid-template-columns:1fr;
    }

    .content-detail-page .detail-sidebar{
        position:static;
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        align-items:start;
    }

    .content-detail-page .sidebar-feature-card{
        grid-column:1/-1;
    }
}

@media (max-width:700px){
    .content-detail-page .detail-main-section .detail-content-grid{
        width:min(calc(100% - 28px),var(--container));
    }

    .content-detail-page .article-detail-card{
        padding:20px;
    }

    .content-detail-page .detail-sidebar{
        grid-template-columns:1fr;
        gap:14px;
    }

    .content-detail-page .sidebar-feature-card{
        padding:23px 21px 21px !important;
    }

    .content-detail-page .sidebar-feature-card h3{
        font-size:21px;
    }
}
