/*
 * 应用菜单 —— 列表页与详情页样式
 *
 * 与旧站 Yycd.asp 的结构性区别：旧站把 20 款饮品堆在一个页面里，
 * 每块「大图 + 配方」占满整行；这里拆成列表（卡片网格）与详情（两栏配方卡）。
 *
 * 版式基准仍是本站的 1000px 固定宽（页头 <meta name="viewport" content="width=1000">），
 * 媒体查询只在桌面窗口被拖窄时起作用。
 */

/* ================= 通用容器 ================= */

.yycd-page .yycd_wrap {
	width: 1000px;
	margin: 0 auto;
	padding-top: 30px;
}

.yycd-page .yycd_head {
	margin-bottom: 20px;
}

.yycd-page .yycd_head h1 {
	position: relative;
	padding-left: 14px;
	font-size: 28px;
	font-weight: normal;
	line-height: 1.3;
	color: #222;
}

.yycd-page .yycd_head h1::before {
	content: "";
	position: absolute;
	left: 0;
	top: 6px;
	bottom: 6px;
	width: 4px;
	background: #da251c;
	border-radius: 2px;
}

.yycd-page .yycd_note {
	margin-top: 10px;
	padding-left: 14px;
	color: #888;
	font-size: 14px;
	line-height: 24px;
}

/* ================= 列表：卡片网格 ================= */

.yycd-page .yycd_grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.yycd-page .yycd_card {
	min-width: 0;
}

/* 整张卡片就是一个链接：卡片内不出现第二个可交互元素，
   键盘 Tab 与屏幕阅读器都只经过一次 */
.yycd-page .yycd_card_link {
	display: block;
	overflow: hidden;
	box-sizing: border-box;
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
	text-decoration: none;
	transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.yycd-page .yycd_card_link:hover,
.yycd-page .yycd_card_link:focus-visible {
	border-color: #f0b9a4;
	box-shadow: 0 8px 22px rgba(218, 37, 28, 0.12);
	transform: translateY(-3px);
}

.yycd-page .yycd_card_pic {
	display: block;
	overflow: hidden;
	background: #f5f5f5;
	line-height: 0;
}

/* 源图为 549×322：CSS 只约束宽度，必须配 height:auto，
   否则 <img> 属性里的高度会把画面撑变形 */
.yycd-page .yycd_card_img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 0.45s ease;
}

.yycd-page .yycd_card_link:hover .yycd_card_img,
.yycd-page .yycd_card_link:focus-visible .yycd_card_img {
	transform: scale(1.05);
}

.yycd-page .yycd_card_body {
	display: block;
	padding: 14px 16px 16px;
}

.yycd-page .yycd_card_name {
	display: block;
	overflow: hidden;
	color: #222;
	font-size: 17px;
	line-height: 26px;
	text-overflow: ellipsis;
	white-space: nowrap;
	transition: color 0.2s ease;
}

.yycd-page .yycd_card_link:hover .yycd_card_name,
.yycd-page .yycd_card_link:focus-visible .yycd_card_name {
	color: #da251c;
}

.yycd-page .yycd_card_ing {
	display: block;
	overflow: hidden;
	margin-top: 5px;
	color: #9a9a9a;
	font-size: 12px;
	line-height: 20px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* 列表底部：总数 + 分页 */
.yycd-page .yycd_foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-top: 26px;
}

.yycd-page .yycd_total {
	color: #888;
	font-size: 14px;
}

.yycd-page .yycd_total b {
	color: #da251c;
	font-weight: normal;
}

.yycd-page .yycd_total_page {
	margin-left: 10px;
}

.yycd-page .yycd_pager {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.yycd-page .yycd_pager_item a,
.yycd-page .yycd_pager_item span {
	display: inline-block;
	min-width: 38px;
	height: 36px;
	padding: 0 12px;
	box-sizing: border-box;
	border: 1px solid #e4e4e4;
	border-radius: 4px;
	background: #fff;
	color: #555;
	font-size: 14px;
	line-height: 34px;
	text-align: center;
	transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.yycd-page .yycd_pager_item a:hover {
	border-color: #da251c;
	color: #da251c;
}

.yycd-page .yycd_pager_item .current {
	border-color: #da251c;
	background: #da251c;
	color: #fff;
}

.yycd-page .yycd_pager_item .dots {
	border: 0;
	color: #bbb;
}

.yycd-page .yycd_empty {
	padding: 80px 0;
	border: 1px solid #ececec;
	border-radius: 8px;
	background: #fff;
	color: #999;
	font-size: 15px;
	text-align: center;
}

/* ================= 详情 ================= */

.yycd-single .yycd_crumb {
	margin-bottom: 14px;
	color: #999;
	font-size: 13px;
	line-height: 22px;
}

.yycd-single .yycd_crumb a {
	color: #666;
}

.yycd-single .yycd_crumb a:hover {
	color: #da251c;
}

.yycd-single .yycd_crumb_sep {
	margin: 0 8px;
	color: #ccc;
}

.yycd-single .yycd_crumb em {
	color: #999;
	font-style: normal;
}

/* 两栏：左大图 500px、右配方自适应。
   500px 而不是源图的 549px —— 卡片有 26px 内边距，且再放大只会发虚 */
.yycd-single .yycd_detail {
	display: grid;
	grid-template-columns: 500px 1fr;
	gap: 34px;
	align-items: start;
	padding: 26px;
	box-sizing: border-box;
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.yycd-single .yycd_detail_pic {
	margin: 0;
	overflow: hidden;
	border-radius: 6px;
	background: #f5f5f5;
	line-height: 0;
}

.yycd-single .yycd_detail_img {
	display: block;
	width: 100%;
	height: auto;
}

/* 网格子项默认 min-width:auto，长内容会把列撑破 */
.yycd-single .yycd_detail_body {
	min-width: 0;
}

.yycd-single .yycd_title {
	position: relative;
	margin: 0 0 4px;
	padding-bottom: 14px;
	font-size: 30px;
	font-weight: normal;
	line-height: 1.35;
	color: #1f1f1f;
}

.yycd-single .yycd_title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 46px;
	height: 3px;
	background: #da251c;
	border-radius: 2px;
}

.yycd-single .yycd_sec {
	margin-top: 22px;
}

.yycd-single .yycd_sec_tit {
	position: relative;
	margin: 0 0 10px;
	padding-left: 10px;
	color: #da251c;
	font-size: 15px;
	font-weight: normal;
	line-height: 1.4;
}

.yycd-single .yycd_sec_tit::before {
	content: "";
	position: absolute;
	left: 0;
	top: 3px;
	bottom: 3px;
	width: 3px;
	background: #da251c;
	border-radius: 2px;
}

/* 原材料：拆成「小标签」，比一整行长句好扫读 */
.yycd-single .yycd_ing {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.yycd-single .yycd_ing li {
	padding: 4px 12px;
	box-sizing: border-box;
	background: #fafafa;
	border: 1px solid #eee;
	border-radius: 20px;
	color: #555;
	font-size: 13px;
	line-height: 20px;
}

/* 制作方法：真 <ol> + 自绘圆形序号 */
.yycd-single .yycd_steps {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: yycd-step;
}

.yycd-single .yycd_steps li {
	position: relative;
	padding-left: 28px;
	margin-bottom: 9px;
	color: #444;
	font-size: 14px;
	line-height: 1.85;
}

.yycd-single .yycd_steps li:last-child {
	margin-bottom: 0;
}

.yycd-single .yycd_steps li::before {
	counter-increment: yycd-step;
	content: counter(yycd-step);
	position: absolute;
	left: 0;
	top: 4px;
	width: 19px;
	height: 19px;
	box-sizing: border-box;
	border-radius: 50%;
	background: #fff2e2;
	color: #d98014;
	font-size: 11px;
	line-height: 19px;
	text-align: center;
}

.yycd-single .yycd_taste {
	margin: 0;
	color: #444;
	font-size: 14px;
	line-height: 1.95;
}

/* 上一款 / 下一款 */
.yycd-single .yycd_nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin-top: 22px;
}

.yycd-single .yycd_nav_item {
	display: block;
	padding: 12px 16px;
	box-sizing: border-box;
	border: 1px solid #ececec;
	border-radius: 6px;
	background: #fcfcfc;
	text-decoration: none;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.yycd-single a.yycd_nav_item:hover,
.yycd-single a.yycd_nav_item:focus-visible {
	border-color: #da251c;
	background: #fffaf3;
}

.yycd-single .yycd_nav_item span {
	display: block;
	margin-bottom: 4px;
	color: #999;
	font-size: 13px;
}

.yycd-single .yycd_nav_item em {
	display: block;
	overflow: hidden;
	color: #333;
	font-size: 15px;
	font-style: normal;
	line-height: 24px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.yycd-single .yycd_nav_item.is-next {
	text-align: right;
}

.yycd-single .yycd_nav_item.is-empty em {
	color: #c8c8c8;
}

.yycd-single .yycd_back {
	margin: 18px 0 0;
	text-align: center;
}

.yycd-single .yycd_back a {
	color: #da251c;
	font-size: 14px;
}

.yycd-single .yycd_back a:hover {
	text-decoration: underline;
}

/* ================= 窄桌面窗口 ================= */

@media (max-width: 1040px) {
	.yycd-page .yycd_wrap {
		width: 100%;
		max-width: 1000px;
		padding-left: 14px;
		padding-right: 14px;
		box-sizing: border-box;
	}

	.yycd-single .yycd_detail {
		grid-template-columns: minmax(0, 500px) 1fr;
		gap: 24px;
	}
}

@media (max-width: 780px) {
	.yycd-page .yycd_grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px 14px;
	}

	.yycd-single .yycd_detail {
		grid-template-columns: 1fr;
		padding: 18px;
	}

	.yycd-single .yycd_title {
		font-size: 24px;
	}

	.yycd-page .yycd_foot {
		flex-direction: column;
		align-items: flex-start;
	}

	.yycd-single .yycd_nav {
		grid-template-columns: 1fr;
	}

	.yycd-single .yycd_nav_item.is-next {
		text-align: left;
	}
}

@media (prefers-reduced-motion: reduce) {
	.yycd-page .yycd_card_link,
	.yycd-page .yycd_card_img,
	.yycd-page .yycd_card_name,
	.yycd-page .yycd_pager_item a,
	.yycd-single .yycd_nav_item {
		transition: none;
	}

	.yycd-page .yycd_card_link:hover {
		transform: none;
	}
}