/**
 * 图片瀑布流版式（工程案例等版块）
 *
 * 取自原模板 forum/forumdisplay_list.htm 里 ul#waterfall 那一段内联样式。
 * 原站那份样式配合 JS 做绝对定位排版（卡片固定 393px 宽，靠 JS 摆列），
 * 这里换成 CSS Grid：不依赖 JS、列宽随容器自适应，视觉与原站一致。
 *
 * 配套模板：parts/archive-case.php（接入点在 archive.php）。
 * 只在这个模板用，所以样式自带一份 .cit-tit / .product-up，
 * 不去依赖 forum-list.css 里那套带 scoped 属性（[data-v-150ea020]）的选择器。
 */

/* ------------------------------------------------------------------
 * 标题区（原模板 .cit-tit，桌面端尺寸）
 * ------------------------------------------------------------------ */

.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;
}

/* ------------------------------------------------------------------
 * 版块规则简介（原模板 .product-up，对应 $_G['forum']['rules']）
 * ------------------------------------------------------------------ */

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

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

/* ------------------------------------------------------------------
 * 卡片瀑布流（原模板 ul#waterfall）
 * ------------------------------------------------------------------ */

.waterfall {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px 10px;         /* 行距 30px、列距 10px，对应原站 li 的 margin: 0 10px 30px 0 */
	margin: 0;              /* 顶部间距改由 .case-list 的 padding 控制（内容区满铺后） */
	padding: 0;
	min-height: 400px;
}

.waterfall li {
	background: #ffffff;      /* 2026-10-16 用户要求：卡片恢复白底，浮在满铺浅蓝底上形成层次感 */
	border: 0;                /* 通用样式表给 li 带了 1px 上边框，原站模板里是显式清掉的 */
	border-radius: 8px;
	overflow: hidden;         /* 让顶部封面图跟着卡片一起切出上圆角，不露直角 */
	box-sizing: border-box;
}

.waterfall .c {
	padding: 0;
	background: none;
	border: 0;                /* theme-common 给了左右 1px #EAEAEA 边框 + #F8F8F8 底，一并清掉 */
}

/* 图片区固定 220px 高，超出部分裁掉 —— 与原站 .c a 的写法一致。
   宽度必须显式 100%：模板里的 <a class="z"> 带 float，浮动元素会收缩到内容宽度，
   原站是靠内联样式里的 width:100% !important 兜住的，这里在样式表里补上。 */
.waterfall .c a {
	position: relative;
	display: block;
	width: 100%;
	height: 220px;
	overflow: hidden;
	border-radius: 8px 8px 0 0;  /* 只留上圆角：封面图贴在白卡顶部，下直角自然过渡到标题区 */
}

.waterfall .c a img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 没有封面图时的占位（原模板的 <span class="nophoto nopic">）。
   要盖掉 theme-common.css 给 .nophoto:before 配的 dzicon 图标字体，
   主题里并没有那个字体文件，照原样会显示成一个方框。 */
.waterfall .nophoto {
	display: block;
	height: 220px;
	line-height: 220px;
	text-align: center;
	color: #9aa8b5;
	font-size: 14px;
}

.waterfall .nophoto:before {
	content: "暂无图片";
	display: block;
	font-family: inherit;
	font-size: inherit;
	color: inherit;
}

.waterfall h3 {
	margin: 0 30px;
	padding: 0;
	border-bottom: 1px solid #cccccc;
	border-left: 0;           /* theme-common 给 h3 左右各 1px #EAEAEA 边框 + #F8F8F8 底，清掉 */
	border-right: 0;
	background: none;
	font-weight: 400;
}

/* 标题单行、70px 高，长标题省略号截断 —— 与原站一致 */
.waterfall h3 a {
	display: block;
	height: 70px;
	line-height: 70px;
	font-size: 16px;
	color: #555555;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* 标题前的装饰图标（case-7.png，19×26）。浮动和 margin 写在模板的内联
   style 里（跟原模板一致），内联优先，所以这里只管尺寸、不要重复设 margin。 */
.waterfall h3 a img {
	width: 19px;
	height: 26px;
}

.waterfall .auth {
	height: 70px;
	line-height: 70px;
	padding: 0 30px;
	font-size: 14px;
	color: #888888;
	background: none;         /* theme-common 给 .auth 铺了 #F8F8F8 底 + 底边框 #B9B9B9，清掉 */
	border: 0;
	box-sizing: border-box;
}

.waterfall .auth a {
	color: #888888;
}

/* 原站的排法：回复数用 cite.y 右浮动，日期是普通 inline，两者落在同一个行盒里，
   借 .auth 的 line-height:70px 垂直居中。日期这里也必须保持 inline ——
   一旦给它加 float，模板里 cite 与 span 之间的空白文本会先撑出一个 70px 高的
   空行盒，把日期挤到第二行去（卡片凭空多出 20px，日期掉到底边）。
   另外主题通用样式里有条历史规则「.ml p, .ml span { display:block; height:20px }」
   （原站瀑布流给摘要 span 用的）会把日期压成 20px 高的块，这里显式拉回 inline，
   行为对齐原站的 <a>。 */
.waterfall .auth .date {
	display: inline;
	height: auto;
	width: auto;
	float: none;
	overflow: visible;
}

/* 卡片底部摘要块（fid45 解决方案模板专用，对应原模板的 .bottom_info）。
   原站写在 li 的内联 style 里，这里抽到样式表，由模板按
   ldx_case_has_summary() 决定是否输出这个 div。2 行截断靠固定高 + overflow。 */
.waterfall .bottom_info {
	height: 44px;
	line-height: 22px;
	padding: 0 30px;
	margin: 0 0 30px 0;
	font-size: 15px;
	color: #888888;
	overflow: hidden;
	box-sizing: border-box;
}

/* ------------------------------------------------------------------
 * 窄屏：对齐原模板里那段移动端规则（单列、图片 180px）
 * ------------------------------------------------------------------ */

@media (max-width: 1100px) {
	.waterfall {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 800px) {
	.waterfall {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.waterfall .c a,
	.waterfall .nophoto {
		height: 180px;
		line-height: 180px;
	}

	.waterfall h3 {
		margin: 0;
		padding: 15px 30px 10px;
		border-bottom: 0;
	}

	.waterfall h3 a {
		height: auto;
		line-height: 21px;
		font-size: 15px;
		white-space: normal;
	}

	/* 图标在窄屏回到原模板的写法：!important 才压得住模板里的内联 margin */
	.waterfall h3 a img {
		margin: 0 10px 0 0 !important;
	}

	.waterfall .auth {
		height: 20px;
		line-height: 20px;
		padding: 0 30px 20px;
		font-size: 13px;
	}

	.waterfall .bottom_info {
		padding: 0 30px 15px;
		margin: 0 0 15px 0;
		font-size: 13px;
	}
}