/* ==========================================================================
   大观门户 · 组件改造层 (Layer 2) — refine.css
   --------------------------------------------------------------------------
   目标：把 CNET 的设计语言落到现有 dg-* 组件上（不改 PHP 结构、不改类名，
        全部通过覆盖既有规则实现，53 处 dg-card 复用零改动即生效）。
   对标要点：
     · 标题用衬线 → 媒体权威感（现为纯无衬线，与 CNET 最大差距）
     · 卡片标题放大 + 取消强制占位 → 层级清晰（现 15.5px + min-height:48px）
     · 摘要文字提深 → 可读性（现 #8b97ab 在白底偏灰）
     · 分类标签 chip 化 → 强调色只做"点"
     · 圆角/边框/分隔线全部走令牌 → 消除 10+ 种硬编码蓝灰
     · 卡片箭头弱化 → 降视觉噪音
   部署：必须在 style.css 与模板内联样式之后加载（见 README）。
   优先级：所有覆盖选择器刻意加高特异性，确保压过模板内联 <style>。
   ========================================================================== */

/* ==========================================================================
   1. 全局基线
   ========================================================================== */
body {
	font-family: var(--dg-font-sans);
	color: var(--dg-color-body);
}

.dg-portal {
	background: var(--dg-page-bg);
}

.dg-portal-inner {
	max-width: var(--dg-container);
}

/* ==========================================================================
   2. 文章卡片 dg-card（首页 53 处复用，最大面积）
   ========================================================================== */
body .dg-card {
	border-radius: var(--dg-radius-lg);
	border-color: var(--dg-color-border);
	box-shadow: var(--dg-shadow-sm);
}

body .dg-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--dg-shadow-lg);
	border-color: var(--dg-brand-300);
}

body .dg-card-body {
	padding: var(--dg-space-4) var(--dg-space-4) var(--dg-space-5);
}

/* 标题：放大 + 衬线 + 取消强制两行占位（原 min-height:48px 会顶出空档） */
body .dg-card-title,
body .dg-portal .dg-layout-grid .dg-card-title {
	font-family: var(--dg-font-serif);
	font-size: 18px;
	line-height: 1.5;
	font-weight: 700;
	letter-spacing: -.2px;
	color: var(--dg-color-heading);
	min-height: 0;
	margin-bottom: var(--dg-space-2);
	transition: color .2s ease;
}

body .dg-card:hover .dg-card-title {
	color: var(--dg-brand-600);
}

/* 摘要：提深一档 + 稍放开行高 */
body .dg-card-desc {
	font-size: 14px;
	line-height: 1.75;
	color: var(--dg-ink-600);
	margin-bottom: var(--dg-space-3);
}

/* 元信息行 */
body .dg-card-foot {
	border-top-color: var(--dg-color-border-soft);
	padding-top: var(--dg-space-2);
}

body .dg-card-time {
	color: var(--dg-ink-400);
}

/* 箭头：常态弱化，hover 才点亮（降噪，但保留方向暗示） */
body .dg-card-arrow {
	color: var(--dg-ink-300);
	opacity: .55;
	transition: color .25s ease, transform .25s ease, opacity .25s ease;
}

body .dg-card:hover .dg-card-arrow {
	color: var(--dg-color-accent);
	opacity: 1;
}

/* 缩略图底色 */
body .dg-thumb {
	background: var(--dg-surface-100);
}

/* ==========================================================================
   3. 分类标签 dg-tag → chip 化（强调色只做"点"）
   ========================================================================== */
body .dg-tag {
	display: inline-flex;
	align-items: center;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .3px;
	/* 保留频道色（--cc 由模板按频道注入），仅在缺省时回落到品牌蓝 */
	color: var(--cc, var(--dg-brand-700));
	background: var(--dg-brand-050);
	border: 1px solid var(--dg-brand-300);
	border-radius: var(--dg-radius-pill);
	padding: 2px 9px;
	margin-bottom: var(--dg-space-2);
}

/* ==========================================================================
   4. 区块标题 dg-sec-head / dg-sec-title → 衬线 + 竖条（与子页标题统一）
   ========================================================================== */
body .dg-sec-title {
	font-family: var(--dg-font-serif);
	font-weight: 700;
	color: var(--dg-color-heading);
	letter-spacing: -.2px;
}

body .dg-sec-head {
	border-bottom: 1px solid var(--dg-color-border-soft);
	padding-bottom: var(--dg-space-3);
}

body .dg-sec-head .dg-sec-title {
	position: relative;
	padding-left: 12px;
}

body .dg-sec-head .dg-sec-title::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 3px;
	height: 15px;
	background: var(--dg-color-accent);
	border-radius: 2px;
}

/* ==========================================================================
   5. 排行榜 dg-rank-item → 序号改徽章
   ========================================================================== */
body .dg-rank-no {
	background: var(--dg-brand-050);
	color: var(--dg-brand-700);
	border: 1px solid var(--dg-brand-300);
	border-radius: var(--dg-radius-sm);
	font-weight: 700;
	transition: background .2s ease, color .2s ease;
}

body .dg-rank-item:hover .dg-rank-no {
	background: var(--dg-color-accent);
	color: #fff;
	border-color: var(--dg-color-accent);
}

body .dg-rank-item {
	border-bottom-color: var(--dg-color-border-soft);
}

/* ==========================================================================
   6. 侧栏盒子 dg-side-box
   ========================================================================== */
body .dg-side-box {
	border-radius: var(--dg-radius-lg);
	border-color: var(--dg-color-border);
	background: var(--dg-surface);
}

/* ==========================================================================
   7. 轮播 slide → 衬线大标题 + 亮蓝 CTA（对标 CNET 撞色主按钮）
   ========================================================================== */
body .dg-slide-title {
	font-family: var(--dg-font-serif);
	font-weight: 700;
	letter-spacing: -.4px;
}

body .dg-slide-kicker {
	color: var(--dg-brand-300);
	letter-spacing: .14em;
}

body .dg-slide-cta {
	background: var(--dg-color-accent);
	border-radius: var(--dg-radius-sm);
	font-weight: 600;
	transition: background .2s ease;

	/* 2026-11-04: CTA too small, text clipped -> enlarge + nowrap */
	padding: 10px 22px;
	font-size: 16px;
	line-height: 1.4;
	white-space: nowrap;
	display: inline-block;
	letter-spacing: .3px;}

body .dg-slide-cta:hover {
	background: #1A82D8;
}

body .dg-badge {
	background: rgba(255, 255, 255, .16);
	backdrop-filter: blur(4px);
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: var(--dg-radius-pill);
}

/* ==========================================================================
   8. 子页面正文 dg-prose → 阅读舒适度（正文锁宽、行高放开）
   ========================================================================== */
body .dg-prose {
	max-width: var(--dg-content);
	font-size: 16px;
	line-height: 2;
	color: var(--dg-ink-900);
}

body .dg-prose h2,
body .dg-prose h3 {
	font-family: var(--dg-font-serif);
	color: var(--dg-color-heading);
}

/* ==========================================================================
   9. 卡片 hover 时的图片微动效（已有 scale(1.06)，补缓动）
   ========================================================================== */
body .dg-thumb img {
	transition: transform .35s ease;
}

/* ==========================================================================
   10. 响应式：窄屏收敛标题字号与内边距
   ========================================================================== */
@media (max-width: 1024px) {
	body .dg-card-title,
	body .dg-portal .dg-layout-grid .dg-card-title {
		font-size: 16.5px;
	}
}

@media (max-width: 680px) {
	body .dg-card-body {
		padding: var(--dg-space-3) var(--dg-space-3) var(--dg-space-4);
	}

	body .dg-card-desc {
		font-size: 13.5px;
	}
}

/* ============================================================
 * 06-ratio-fix.css  图片位比例统一（2026-11-03）
 * 目标：所有图位容器统一 16:9，一张封面处处完整显示，
 *       不再出现遮盖 / 压缩 / 空白。与 02-refine.css 末尾拼接加载。
 * ============================================================ */

/* 1. 轮播 .dg-banner：高度固定 430px 时比例在 2.62/1.78/1.18 之间跳
 *    → 改为跟随宽度的 16:9，比例恒定 */
.dg-banner {
    height: auto !important;
    aspect-ratio: 16 / 9;
}
@media (max-width: 720px) {
    .dg-banner {
        height: auto !important;
    }
}

/* 2. 横排缩略图 .dg-hrow .dg-thumb：被 flex stretch 拉到与正文同高
 *    （比例随标题行数在 1.44–1.71 浮动）→ 锁死 16:9 */
.dg-hrow-link {
    align-items: flex-start;
}
.dg-hrow .dg-thumb {
    height: auto;
    aspect-ratio: 16 / 9;
    align-self: flex-start;
}

/* 3. 统一保险：所有图位图片 cover 填充 + 居中（配合 AI 图中央构图，
 *    各容器裁切安全区已验证 6 样图 × 4 比例主体完整） */
.dg-thumb img,
.dg-card .dg-thumb img,
.dg-slide-bg {
    object-fit: cover;
    object-position: center;
}
/* ===== 08-module-spacing: 模块上下间距加大（2026-11-03 用户要求）=====
   轮播 / 子频道列表 / 最新 / 产品 / 企业 等模块之间统一 40px（移动端 28px）
   相邻外边距折叠后取大者，实际间隙即为该值 */
.dg-portal .dg-banner,
.dg-portal .dg-channels,
.dg-portal .dg-two-col,
.dg-portal .dg-section {
    margin-top: 40px !important;
    margin-bottom: 40px !important;
}
.dg-portal-inner > :first-child,
.dg-portal .dg-main > :first-child,
.dg-portal .dg-side > :first-child {
    margin-top: 0 !important;
}
.dg-portal-inner > :last-child,
.dg-portal .dg-main > :last-child {
    margin-bottom: 0 !important;
}
@media (max-width: 720px) {
    .dg-portal .dg-banner,
    .dg-portal .dg-channels,
    .dg-portal .dg-two-col,
    .dg-portal .dg-section {
        margin-top: 28px !important;
        margin-bottom: 28px !important;
    }
}

/* ===== 09-products-gap: 仅「新品上架」模块上方加大（2026-11-03 三调）=====
   用户定调：只加大 两栏区(dg-two-col)→新品上架 一处间隙，其余全部维持 40px 原状 */
@media (min-width: 721px) {
    .dg-portal .dg-two-col + .dg-section {
        margin-top: 64px !important;
    }
}

/* ===== 10-products-fix: 新品上架产品卡修复（2026-11-03）=====
   根因：body .dg-thumb 的 background 简写把 dg-thumb-gen 渐变重置为灰盒。
   修复：恢复渐变 / 品牌全名标记 / 型号单行省略 / 标题防断字 / 脚注贴底 */
body .dg-card .dg-thumb-gen {
    background: linear-gradient(135deg, var(--c1) 0%, var(--c2) 100%);
}
body .dg-prodcard .dg-thumb-mark {
    font-size: 20px;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.55);
    max-width: 86%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body .dg-prodcard .dg-card-time {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
body .dg-prodcard .dg-card-title {
    word-break: keep-all;
    overflow-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
body .dg-prodcard {
    display: flex;
    flex-direction: column;
}
body .dg-prodcard > .dg-card-link {
    display: flex;
    flex-direction: column;
    flex: 1;
}
body .dg-prodcard .dg-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
}
body .dg-prodcard .dg-card-foot {
    margin-top: auto;
}

/* 区块底部「查看全部」 (2026-11-04) */
body .dg-sec-foot {
	margin-top: 18px;
	padding-top: 14px;
	border-top: 1px solid var(--dg-color-border-soft);
	text-align: center;
}
body .dg-sec-foot .dg-more {
	display: inline-block;
	padding: 8px 26px;
	border: 1px solid var(--dg-color-accent);
	border-radius: var(--dg-radius-sm);
	font-size: 14px;
	font-weight: 600;
	color: var(--dg-color-accent);
	text-decoration: none;
	transition: background .2s ease, color .2s ease;
}
body .dg-sec-foot .dg-more:hover {
	background: var(--dg-color-accent);
	color: #fff;
}
body .dg-sec-foot .dg-more i {
	font-style: normal;
	margin-left: 4px;
}