@charset "utf-8";

/* ================================
   Article details page (CLS 优化版)
   - 禁用 transform 动画，避免 layout shift
   - 关键元素使用固定/可预测的高度比例
   - 图片一律 contain: cover + aspect-ratio 预留空间
   - 桌面端左右分栏布局
   ================================ */

.main-article{
    padding:5vw 0;
}

/* ================================
   Desktop Layout - Left Content / Right Sidebar
   ================================ */
.main-article .article-layout{
    display:flex;
    align-items:flex-start;
    gap:3%;
    margin-top:2vw;
    width:var(--container-width);
    margin:2vw auto 0;
}

.main-article .article-main{
    width:65%;
    flex-shrink:0;
}

.main-article .article-sidebar{
    width:32%;
    flex-shrink:0;
    position:sticky;
    top:4vw;
    height:fit-content;
    display:flex;
    flex-direction:column;
    gap:2vw;
}

@media only screen and (min-width:901px){
    .main-article .article-layout.is-video-layout{
        display:grid;
        grid-template-columns:minmax(0,68fr) minmax(280px,29fr);
        grid-template-areas:
            "main author"
            "main products"
            "main share"
            "related related";
        gap:clamp(24px,2vw,38px) 3%;
    }
    .main-article .article-layout.is-video-layout .article-main{
        grid-area:main;
        width:auto;
    }
    .main-article .article-layout.is-video-layout .article-sidebar{
        display:contents;
    }
    .main-article .article-layout.is-video-layout .author-card-inline{
        grid-area:author;
    }
    .main-article .article-layout.is-video-layout .related-products{
        grid-area:products;
    }
    .main-article .article-layout.is-video-layout .share{
        grid-area:share;
    }
    .main-article .article-layout.is-video-layout .related{
        grid-area:related;
        margin-top:clamp(12px,1vw,20px);
    }
    .main-article .article-layout.is-video-layout .related .article-grid{
        display:grid;
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:clamp(16px,1.5vw,24px);
    }
}

/* Title & meta */
.main-article .title{
    width:var(--container-width);
    margin:0 auto 2vw;
    padding-bottom:1vw;
    border-bottom:1px solid rgba(255,255,255,.2);
    /* 固定最小高度，避免标题长短导致的整体位移 */
    min-height:6vw;
}
.main-article .title h1{
    margin-bottom:1.5vw;
    font-size:var(--sikary-page-title-size);
    font-weight:var(--sikary-title-weight);
    color:var(--sikary-text);
    line-height:1.15;
    word-break:break-word;
}
.main-article .title .info{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    column-gap:2vw;
    row-gap:1vw;
    font-size:clamp(12px,.82vw,15px);
    font-weight:var(--sikary-body-weight);
    color:var(--sikary-muted);
    min-height:1.5vw; /* 预留，避免 meta 为空时塌陷 */
}
.main-article .title .info time{color:var(--sikary-muted);}
.main-article .title .info .info-author{color:var(--sikary-text-secondary);}
.main-article .title .info .info-author a{color:var(--main-color);font-weight:600;margin-left:.2vw;}
.main-article .title .info .info-author em{font-style:normal;color:#c8c8c8;margin-left:.2vw;}

/* 分类徽标，与 news/blog 风格一致 */
.type-badge{
    display:inline-flex;
    align-items:center;
    padding:.3vw .8vw;
    background:#2a2a2a;
    color:#fff;
    font-size:clamp(11px,.72vw,13px);
    font-weight:700;
    border-radius:var(--sikary-radius-sm);
    letter-spacing:.08em;
}
.type-badge.video{
    background:#b94416;
    color:#fff;
}

/* Video section in article —— 使用固定 aspect-ratio 预先占位 */
.main-article .article-video{
    width:100%;
    max-width:none;
    margin:0 0 clamp(24px,2vw,36px);
    background:var(--sikary-panel);
    border:0;
    border-radius:var(--sikary-radius-lg);
    overflow:hidden;
    box-shadow:0 20px 54px rgba(0,0,0,.2);
}
.main-article .article-video .article-video-player{
    display:block;
    width:100%;
    /* 固定比例占位，避免视频加载时 layout shift */
    aspect-ratio:16/9;
    height:auto;
    background:#000;
    object-fit:contain;
}
.main-article .article-video .article-video-fallback{
    display:block;
    width:100%;
    aspect-ratio:16/9;
    background:#000;
    overflow:hidden;
}
.main-article .article-video .article-video-fallback img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}
.main-article .article-video .video-desc{
    padding:clamp(18px,1.5vw,26px) clamp(20px,1.8vw,30px);
    margin:0;
    font-size:var(--sikary-body-size);
    font-weight:var(--sikary-body-weight);
    color:var(--sikary-text-secondary);
    line-height:1.7;
    border-top:1px solid rgba(255,255,255,.06);
}

/* Content —— 富文本图片依赖服务端输出的 width/height 预留空间 */
.main-article .content{
    color:var(--sikary-text-secondary);
    font-size:var(--sikary-body-size);
    font-weight:var(--sikary-body-weight);
    line-height:1.8;
    overflow-wrap:break-word;
    word-break:break-word;
}
.main-article .content > *{margin:2vw 0;}
.main-article .content .article-media-frame{
    display:block;
    width:100%;
    overflow:hidden;
    background:#1a1a1a;
    border-radius:var(--sikary-radius);
    line-height:0;
}
.main-article .content .article-media-frame a{
    display:block;
    width:100%;
    height:100%;
}
.main-article .content img{
    max-width:100%;
    width:100%;
    height:auto;
    border-radius:var(--sikary-radius);
    display:block;
    /* 后台历史内容若缺少尺寸，保留 16/9 兜底；本地图片会在 PHP 输出真实 width/height。 */
    aspect-ratio:auto 16/9;
    background:#1a1a1a;
}
.main-article .content .article-media-frame img{
    height:100%;
    object-fit:cover;
    border-radius:0;
}
.main-article .content iframe,
.main-article .content video{
    max-width:100%;
    display:block;
    aspect-ratio:16/9;
}
.main-article .content h2{font-size:var(--sikary-section-title-size);font-weight:var(--sikary-title-weight);color:var(--sikary-text);}
.main-article .content h3{font-size:var(--sikary-subtitle-size);font-weight:var(--sikary-title-weight);color:var(--sikary-text);}
.main-article .content p{font-size:var(--sikary-body-size);font-weight:var(--sikary-body-weight);}
.main-article .content a{color:var(--main-color);text-decoration:underline;}
.main-article .content a:hover{color:#ff8a3c;}
.main-article .content strong{color:#fff;}
.main-article .content ul,
.main-article .content ol{padding-left:1.5vw;}
.main-article .content ul li,
.main-article .content ol li{margin-bottom:.8vw;}
.main-article .content blockquote{
    border-left:3px solid var(--main-color);
    padding:.5vw 1.5vw;
    color:var(--sikary-text-secondary);
    background:var(--sikary-panel);
    border-radius:var(--sikary-radius-sm);
}

/* Author Card inline - 侧边栏垂直布局 */
.main-article .author-card-inline{
    background:var(--sikary-panel);
    border-radius:var(--sikary-radius-lg);
    padding:2vw;
}
.main-article .author-card-inline .inner{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:1.5vw;
}
.main-article .author-card-inline .avatar{
    width:80px;
    height:80px;
    border-radius:50%;
    overflow:hidden;
    background:var(--main-color);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}
.main-article .author-card-inline .avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.main-article .author-card-inline .avatar .avatar-fallback{
    width:100%;
    height:100%;
    background:var(--main-color);
    color:#fff;
    font-size:34px;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
}
.main-article .author-card-inline .info h3{
    margin:0 0 .3vw;
    font-size:clamp(16px,1.05vw,22px);
    font-weight:700;
    color:#fff;
}
.main-article .author-card-inline .info h3 a{
    color:#fff;
    transition:color .25s ease;
}
.main-article .author-card-inline .info h3 a:hover{color:var(--main-color);}
.main-article .author-card-inline .info .job{
    margin:0 0 .4vw;
    color:var(--main-color);
    font-size:clamp(12px,.78vw,15px);
    font-weight:var(--sikary-body-weight);
}
.main-article .author-card-inline .info .bio{
    margin:.4vw 0 0;
    color:var(--sikary-muted);
    font-size:clamp(12px,.78vw,15px);
    font-weight:var(--sikary-body-weight);
    line-height:1.6;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.main-article .author-card-inline .view-articles{
    display:inline-block;
    color:var(--main-color);
    font-weight:700;
    font-size:clamp(12px,.78vw,15px);
    margin-top:.5vw;
}
.main-article .author-card-inline .view-articles:hover{color:#fff;}

/* Share */
.main-article .share{
    background:var(--sikary-panel);
    border-radius:var(--sikary-radius-lg);
    padding:2vw;
    text-align:center;
}
.main-article .share h3{
    margin-bottom:1.5vw;
    color:var(--sikary-muted);
    font-size:clamp(12px,.78vw,15px);
    font-weight:700;
    letter-spacing:.1em;
}
.main-article .share .icon{
    display:flex;
    justify-content:center;
    gap:.8vw;
    min-height:2.6vw;
}
.main-article .share .icon a{
    width:max(2.6vw,44px);
    height:max(2.6vw,44px);
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--sikary-panel);
    border-radius:50%;
    transition:background .25s ease;
    flex-shrink:0;
}
.main-article .share .icon a:hover{background:var(--main-color);}
.main-article .share .icon img{
    width:1.4vw;
    height:1.4vw;
    display:block;
}

/* Related Products */
.main-article .related-products{
    padding:clamp(22px,1.7vw,30px) 0 0;
    border-top:1px solid rgba(255,255,255,.12);
    background:transparent;
}
.main-article .related-products .head{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:clamp(12px,1vw,18px);
}
.main-article .related-products .head h2{
    font-size:clamp(16px,1.05vw,22px);
    font-weight:700;
    color:var(--main-color);
}
.main-article .related-products .head::after{
    content:"";
    height:1px;
    flex:1;
    background:rgba(255,255,255,.08);
}
.main-article .related-products ul{
    display:flex;
    flex-direction:column;
    gap:0;
    padding:0;
    margin:0;
}
.main-article .related-products li{
    border-bottom:1px solid rgba(255,255,255,.08);
    background:transparent;
    transition:border-color .25s ease;
}
.main-article .related-products li:hover{
    border-color:rgba(244,110,48,.5);
}
.main-article .related-products .product-card{
    display:grid;
    grid-template-columns:minmax(88px,34%) minmax(0,1fr);
    gap:clamp(14px,1vw,20px);
    align-items:center;
    padding:clamp(16px,1.2vw,22px) 0;
    color:#fff;
}
.main-article .related-products .pic{
    display:block;
    aspect-ratio:1/1;
    background:transparent;
    border-radius:0;
    overflow:hidden;
}
.main-article .related-products .pic img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    transition:transform .35s ease;
}
.main-article .related-products li:hover .pic img{transform:scale(1.04);}
.main-article .related-products .text{
    display:flex;
    flex-direction:column;
    gap:clamp(6px,.45vw,9px);
    min-width:0;
}
.main-article .related-products .text strong{
    color:#fff;
    font-size:clamp(14px,.92vw,18px);
    font-weight:700;
    line-height:1.35;
}
.main-article .related-products .text em{
    color:var(--sikary-muted);
    font-size:clamp(12px,.76vw,14px);
    font-weight:var(--sikary-body-weight);
    line-height:1.45;
    font-style:normal;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.main-article .related-products .view-product{
    color:var(--main-color);
    font-size:clamp(12px,.76vw,14px);
    font-weight:700;
}

/* Related —— 侧边栏内单列显示 */
.main-article .related{
    padding:clamp(26px,2vw,38px) 0 0;
    border-top:1px solid rgba(255,255,255,.12);
    background:transparent;
}
.main-article .related .head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    margin-bottom:clamp(22px,1.7vw,32px);
}
.main-article .related .head h2{font-size:clamp(16px,1.05vw,22px);font-weight:700;color:var(--main-color);}
.main-article .related .head a{font-size:clamp(12px,.82vw,15px);font-weight:700;color:#fff;}
.main-article .related .head a:hover{color:var(--main-color);}
.main-article .related .article-grid{
    display:flex;
    flex-direction:column;
    gap:1.5vw;
    list-style:none;
    padding:0;
    margin:0;
}
.main-article .related .article-grid li.article-item{
    position:relative;
    min-width:0;
    background:transparent;
    overflow:visible;
    transition:transform .25s ease;
}
.main-article .related .article-grid li.article-item:hover{
    transform:translateY(-3px);
}
.main-article .related .article-grid li.article-item .pic{
    position:relative;
    aspect-ratio:16/9;
    overflow:hidden;
    background:#0b0e17;
    border-radius:var(--sikary-radius);
}
.main-article .related .article-grid li.article-item .pic img{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .4s ease;
}
.main-article .related .article-grid li.article-item:hover .pic img{transform:scale(1.05);}

/* VIDEO 徽章 */
.main-article .related .article-grid li.article-item .pic .video-badge{
    position:absolute;
    left:.8vw;
    top:.8vw;
    display:inline-flex;
    align-items:center;
    gap:.25vw;
    background:#b94416;
    color:#fff;
    font-size:clamp(10px,.65vw,12px);
    font-weight:700;
    letter-spacing:.1em;
    padding:.25vw .5vw;
    border-radius:.25vw;
    z-index:2;
}
.main-article .related .article-grid li.article-item .pic .video-badge svg{
    width:10px;
    height:10px;
    fill:#fff;
}

.main-article .related .article-grid li.article-item .text{padding:clamp(14px,1vw,20px) 0 0;}
.main-article .related .article-grid li.article-item .text .meta{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:.8vw;
    font-size:clamp(11px,.72vw,13px);
    font-weight:var(--sikary-body-weight);
    color:var(--sikary-muted);
    margin-bottom:.6vw;
}
.main-article .related .article-grid li.article-item .text h3{
    margin-bottom:.5vw;
    font-size:clamp(14px,.92vw,18px);
    font-weight:700;
    color:#fff;
    line-height:1.35;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.main-article .related .article-grid li.article-item .text p{
    font-size:clamp(12px,.78vw,15px);
    font-weight:var(--sikary-body-weight);
    color:var(--sikary-muted);
    line-height:1.5;
    margin-bottom:.8vw;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.main-article .related .article-grid li.article-item .text > a{
    font-size:clamp(12px,.78vw,15px);
    color:var(--main-color);
    font-weight:700;
}
.main-article .related .article-grid li.article-item .text > a:hover{color:#fff;}

/* Tablet/Mobile —— 移动端保持单列堆叠 */
@media only screen and (max-width:900px){
    .main-article .article-layout{
        display:block;
        margin-top:20px;
        width:var(--container-width);
        margin-left:auto;
        margin-right:auto;
    }
    .main-article .article-layout.is-video-layout{
        display:block;
    }
    .main-article .article-main,
    .main-article .article-sidebar{
        width:100%;
        position:static;
        height:auto;
    }
    .main-article .article-sidebar{
        margin-top:30px;
        padding-top:30px;
        border-top:1px solid rgba(255,255,255,.1);
        display:block;
    }
    .main-article .article-sidebar > * + *{
        margin-top:20px;
    }
}

@media only screen and (max-width:640px){

    .main-article{padding:25px 0 40px;}
    .main-article .title{width:var(--container-width);margin:0 auto 20px;padding-bottom:10px;min-height:auto;}
    .main-article .article-video{width:var(--container-width);margin:15px auto 25px;}
    .main-article .content{width:var(--container-width);margin:0 auto;}
    .main-article .title h1{margin-bottom:15px;font-size:var(--sikary-page-title-size);line-height:1.15;}
    .main-article .title .info{column-gap:18px;row-gap:8px;font-size:12px;min-height:auto;}

    .type-badge{padding:4px 10px;font-size:11px;border-radius:4px;}

    .main-article .article-video{margin:15px 0 25px;border-radius:var(--sikary-radius-lg);}
    .main-article .article-video .video-desc{padding:12px 15px 18px;font-size:14px;}

    .main-article .content{margin:0;font-size:14px;}
    .main-article .content > *{margin:15px 0;}
    .main-article .content .article-media-frame{border-radius:var(--sikary-radius);}
    .main-article .content img{border-radius:var(--sikary-radius);}
    .main-article .content h2{font-size:18px;}
    .main-article .content h3{font-size:16px;}
    .main-article .content p{font-size:14px;}

    .main-article .author-card-inline{margin-bottom:15px;padding:15px;border-radius:var(--sikary-radius-lg);}
    .main-article .author-card-inline .inner{
        flex-direction:row;
        align-items:center;
        text-align:left;
        gap:15px;
    }
    .main-article .author-card-inline .avatar{width:60px;height:60px;flex-shrink:0;}
    .main-article .author-card-inline .avatar .avatar-fallback{font-size:24px;}
    .main-article .author-card-inline .info{flex:1;}
    .main-article .author-card-inline .info h3{font-size:16px;margin-bottom:4px;}
    .main-article .author-card-inline .info .job{font-size:12px;margin-bottom:4px;}
    .main-article .author-card-inline .info .bio{font-size:13px;line-height:1.5;-webkit-line-clamp:2;color:#d0d0d0;}
    .main-article .author-card-inline .view-articles{
        flex-shrink:0;
        margin-top:0;
        font-size:12px;
    }

    .main-article .share{margin-bottom:15px;padding:15px;border-radius:var(--sikary-radius-lg);}
    .main-article .share h3{margin-bottom:10px;font-size:13px;}
    .main-article .share .icon{column-gap:10px;min-height:44px;}
    .main-article .share .icon a{width:44px;height:44px;}
    .main-article .share .icon img{width:18px;height:18px;}

    .main-article .related-products{margin-bottom:15px;padding:20px 0 0;border-radius:0;}
    .main-article .related-products .head{margin-bottom:12px;}
    .main-article .related-products .head h2{font-size:16px;}
    .main-article .related-products ul{gap:0;}
    .main-article .related-products li{border-radius:0;}
    .main-article .related-products .product-card{
        grid-template-columns:94px 1fr;
        gap:12px;
        padding:14px 0;
    }
    .main-article .related-products .pic{border-radius:0;}
    .main-article .related-products .text{gap:5px;}
    .main-article .related-products .text strong{font-size:14px;}
    .main-article .related-products .text em{font-size:12px;}
    .main-article .related-products .view-product{font-size:12px;}

    .main-article .related{margin-bottom:15px;padding:22px 0 0;border-radius:0;}
    .main-article .related .head{margin-bottom:12px;}
    .main-article .related .head h2{font-size:16px;}
    .main-article .related .head a{font-size:13px;}
    .main-article .related .article-grid{gap:12px;}
    .main-article .related .article-grid li.article-item{border-radius:0;}
    .main-article .related .article-grid li.article-item .pic{aspect-ratio:16/9;}
    .main-article .related .article-grid li.article-item .pic .video-badge{
        font-size:10px;
        padding:3px 6px;
        border-radius:4px;
        gap:3px;
        left:8px;
        top:8px;
    }
    .main-article .related .article-grid li.article-item .pic .video-badge svg{width:10px;height:10px;}
    .main-article .related .article-grid li.article-item .text{padding:12px 0 0;}
    .main-article .related .article-grid li.article-item .text h3{font-size:14px;margin-bottom:4px;}
    .main-article .related .article-grid li.article-item .text p{font-size:12px;margin-bottom:6px;}
    .main-article .related .article-grid li.article-item .text > a{font-size:12px;}
    .main-article .related .article-grid li.article-item .text .meta{font-size:11px;gap:6px;}
}