/*
 * QDWHCM Media - 补充样式（与 style.css 配合使用）
 * 说明：主要视觉样式均在 style.css 中；本文件补充少量布局辅助与打印/兼容样式。
 */

/* 图片懒加载占位背景 */
.card__media img[loading="lazy"],
.hero__slide {
	background-color: #EFEAE3;
}

/* 文章卡片网格在归档页保持两列 */
.grid .card .card__media {
	aspect-ratio: 16 / 10;
}

/* 页脚小工具区 */
.footer-widgets {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
	padding: 48px 0 0;
}
.footer-widgets .widget {
	border: 0;
	box-shadow: none;
	background: transparent;
	padding: 0;
	color: #B9B4AE;
}
.footer-widgets .widget h4 {
	color: #fff;
}
@media (max-width: 860px) {
	.footer-widgets { grid-template-columns: 1fr; gap: 20px; }
}

/* 高亮搜索关键词 */
mark {
	background: #F7E3E4;
	color: #B5121B;
	padding: 0 2px;
	border-radius: 2px;
}

/* 表单校验态 */
.form-field input.is-invalid,
.form-field textarea.is-invalid {
	border-color: #B5121B !important;
	box-shadow: 0 0 0 3px #F7E3E4 !important;
}

/* 评论列表头像圆角 */
.comment-list .avatar {
	border-radius: 50%;
}

/* 侧边栏搜索小工具适配 */
.widget .search-form input[type="search"] {
	width: 100%;
	border: 1px solid var(--line);
	border-radius: var(--radius-btn);
	padding: 10px 14px;
	margin-bottom: 10px;
}