/* 新闻详情页快照样式
 * 来源：wierpower.com/news/awd40-工业级acdc电源优选/index.html
 *   → tbs-block/build/template-news-recommended/style-index.css
 * 真实类名（主模板）：vertical-overlap / recommended-news-container / recommended-news-title
 *                    wp-block-tbs-block-template-news-recommended
 * 真实类名（子模板 news-detail-recommended-item.html）：
 *   recommended-news-item / recommended-news-item-link / recommended-news-content
 *   recommended-news-image / recommended-news-thumbnail / recommended-news-name
 */

/* vertical-overlap：新闻正文+侧边栏并排的 layout 辅助类 */
.wp-block-group.vertical-overlap {
    align-items: flex-start;
}

/* 推荐新闻侧边栏容器 */
.wp-block-tbs-block-template-news-recommended {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    overflow: hidden;
}

.recommended-news-container {
    padding: 20px;
}

/* 区块标题（含左侧红色竖条） */
.recommended-news-title {
    color: #333;
    font-size: 1.1em;
    font-weight: 700;
    margin-bottom: 15px;
    padding-left: 15px;
    position: relative;
}
.recommended-news-title::before {
    background-color: #e74c3c;
    border-radius: 2px;
    content: "";
    height: 16px;
    left: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
}

/* 推荐条目链接包装 */
.recommended-news-item-link {
    color: inherit;
    display: block;
    text-decoration: none;
    text-decoration-skip-ink: none;
}
.recommended-news-item-link:hover { text-decoration: none; }
.recommended-news-item-link:hover .recommended-news-item {
    background-color: #f8f9fa;
    transition: background-color 0.3s ease;
}
.recommended-news-item-link:hover .recommended-news-thumbnail {
    transform: scale(1.02);
}
.recommended-news-item-link:focus {
    outline: none;
    text-decoration: none;
}

/* 推荐条目行 */
.recommended-news-item {
    align-items: center;
    border-bottom: 1px solid #eee;
    display: flex;
    gap: 20px;
    height: 135px;
    margin-bottom: 20px;
    padding: 10px;
    transition: background-color 0.3s ease;
}
.recommended-news-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

/* 条目文字区 */
.recommended-news-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

/* 条目标题文字 */
.recommended-news-name {
    color: #333;
    display: -webkit-box;
    font-size: 0.8em;
    font-weight: 700;
    -webkit-line-clamp: 4;
    margin-bottom: 0;
    padding-left: 15px;
    position: relative;
    -webkit-box-orient: vertical;
    line-height: 1.4;
    overflow: hidden;
}

/* 缩略图区域 */
.recommended-news-image {
    align-items: center;
    background-color: #f8f9fa;
    border-radius: 4px;
    display: flex;
    flex: 0 0 100px;
    height: 100%;
    justify-content: center;
    overflow: hidden;
}
.recommended-news-thumbnail {
    display: block;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    width: 100%;
}
.recommended-news-thumbnail:hover {
    transform: scale(1.02);
}


/* == news-detail two-column layout ================================= */

/* 桌面端：左列正文(3fr) + 右列推荐新闻(1fr) */
.wp-block-group.vertical-overlap.is-layout-grid {
    display: grid !important;
    grid-template-columns: 3fr 1fr !important;
    gap: 40px;
    align-items: start;
}

/* 移动端：单列 */
@media (max-width: 767px) {
    .wp-block-group.vertical-overlap.is-layout-grid {
        grid-template-columns: 1fr !important;
        gap: 24px;
    }
}


/* 明确指定右列（推荐新闻）在第 2 列，
   无论 grid 里多出来几个意外子元素都不受影响 */
.wp-block-group.vertical-overlap.is-layout-grid > div:has(.recommended-news-container) {
    grid-column: 2;
    grid-row: 1 / span 99;
}


/* 强制右列（推荐新闻）始终在第 2 列，从第 1 行跨到底
   无论左列正文的 HTML 有没有破坏嵌套都不受影响 */
.yike-news-rec-col {
    grid-column: 2 !important;
    grid-row: 1 / span 99 !important;
}

.yike-news-main-col {
    grid-column: 1 !important;
}


/* 右列（推荐新闻）在 DOM 里第一，CSS 强制排到第 2 列 */
.yike-news-rec-col {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: start;
    position: sticky;
    top: 20px;
}

/* 左列（正文）在 DOM 里第二，CSS 强制排到第 1 列 */
.yike-news-main-col {
    grid-column: 1 !important;
    grid-row: 1 !important;
}

@media (max-width: 767px) {
    .yike-news-rec-col,
    .yike-news-main-col {
        grid-column: 1 !important;
        grid-row: auto !important;
        position: static;
    }
}


/* hr 和上下篇导航如果被正文 HTML 破坏嵌套推出了 grid，
   强制它们回到第 1 列，不占据第 2 列（推荐新闻那里） */
.vertical-overlap.is-layout-grid > .wp-block-separator {
    grid-column: 1 !important;
}

.vertical-overlap.is-layout-grid > .wp-block-group.is-layout-flex {
    grid-column: 1 !important;
}