/**
 * 文档卡片版式（技术支持等资料类版块）
 *
 * 取自原站 fid46 页面（elec_2023_led_fuwuzhichi 模板）的内联样式：
 * .itemx1 白色圆角卡片（120px 高、左标题右文档图标、hover 阴影），
 * 原站一行 3 张（392px 定宽浮动），这里按需求改成 CSS Grid 两列。
 *
 * 配套模板：parts/archive-doc.php（接入点在 archive.php）。
 * 标题区 .cit-tit / .product-up 与 case-list.css 保持同一份写法
 * （doc 页面不加载 forum-list.css，所以这里自带一份通用规则）。
 */

/* ------------------------------------------------------------------
 * 标题区（同 case-list.css，桌面端尺寸）
 * ------------------------------------------------------------------ */

.section1 .cit-tit {
	margin-bottom: 40px;
}

.section1 .cit-tit h1 {
	color: #001f89;
	margin-bottom: 17px;
	font-size: 28px;
	line-height: 32px;
	font-weight: 400;
}

.section1 .cit-tit h2 {
	color: #ff8a00;
	font-size: 24px;
	line-height: 23px;
	font-family: "Rajdhani-Bold", "Rajdhani", Arial, sans-serif;
	text-transform: uppercase;
	letter-spacing: -1px;
	margin-top: -6px;
}

.section1 .product-up {
	margin-bottom: 30px;
}

.section1 .product-up .p p {
	font-size: 14px;
	line-height: 26px;
	color: #666666;
}

/* ------------------------------------------------------------------
 * 文档卡片网格（两列，对应原站 .item-wrap + .itemx1）
 * ------------------------------------------------------------------ */

/* 浅蓝底整屏满铺：对应原站 .wrap-mpn2 —— 这层在 .wp 定宽容器之外，
   背景从屏幕左铺到右；卡片居中由内部 .doc-grid.wp（复用全站 1200px
   定宽）负责，所以这里左右不设 padding。 */
.doc-list {
	margin-top: 40px;
	background: #f0f8fd;
	padding: 45px 0;
}

/* 模板里写成 class="doc-grid wp cl"：借全站 .wp 的 1200px 定宽居中，
   这里只管网格本身（两列、间距对齐原站 .itemx1 的 margin）。
   max-width:100% 是窄窗口保险：视口不足 1200px 时收缩到视口宽，
   不再横向溢出；桌面 ≥1200px 时仍是 1200 定宽居中，互不影响。 */
.doc-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	max-width: 100%;
}

/* 卡片本体：对应原站 .itemx1（120px 高、**白底**、圆角 8px、
   flex 两端对齐让标题和图标分居左右）。
   2026-10-16：恢复白色底色 + 圆角 —— 卡片浮在满铺浅蓝底上形成层次感
   （用户要求，与瀑布流卡片"融入底色"的处理不同，文档卡片保留白卡）。 */
.doc-item a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 120px;
	padding: 0 30px;
	background: #ffffff;
	border-radius: 8px;
	box-sizing: border-box;
	transition: all .5s;
}

/* hover 阴影对齐原站 .wrap-mpn2 .item:hover */
.doc-item a:hover {
	box-shadow: 0 10px 15px 5px #dde9f0;
}

/* 标题：对应原站 .itemx1 h4（16px / #4c4c4c / 最多两行截断）。
   用 flex:1 占满图标左侧空间，替代原站 240px 定宽 —— 两列布局下
   列宽本来就比原站三列宽，定宽会留白过多。 */
.doc-item h4 {
	flex: 1;
	margin: 0 26px 0 0;
	font-size: 16px;
	font-weight: 400;
	color: #4c4c4c;
	line-height: 26px;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* 右侧文档图标（原模板 portal/paper.png，62×62） */
.doc-item img {
	width: 62px;
	height: 62px;
	flex-shrink: 0;
}

/* ------------------------------------------------------------------
 * 窄屏：单列、卡片高度自适应
 * ------------------------------------------------------------------ */

@media (max-width: 800px) {
	.doc-list {
		padding: 15px 0;
	}

	/* 双保险收窄：全站窄屏 .wp 规则若未覆盖到，这里用两级选择器稳压。 */
	.doc-list .doc-grid {
		width: 92%;
	}

	.doc-grid {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.doc-item a {
		height: auto;
		min-height: 90px;
		padding: 15px 20px;
	}

	.doc-item h4 {
		font-size: 15px;
		line-height: 22px;
		margin: 0 15px 0 0;
	}

	.doc-item img {
		width: 48px;
		height: 48px;
	}
}