/* R101 行业推荐用字板块 —— 品牌色：铜棕 #9D581F / 深褐 #74321B / 金 #CEA35F / 米 #FFFBF3·#FFF8EE / 边框 #f0dcc1
   设计目标：嵌进 .zq 土金色横幅里做一张"米色金边卡"，与上方白色输入框、红色按钮同一视觉家族 */
.hyrec {
	/* R102b：888px = 上方输入行实宽（城市290+10+行业420+10+按钮150），左右边缘与输入框严格对齐 */
	max-width: 888px;
	margin: 14px auto 8px;
	padding: 0;
	background: #FFFBF3;
	border: 1px solid #CEA35F;
	border-radius: 10px;
	box-shadow: 0 6px 18px rgba(74, 40, 12, .22), inset 0 0 0 3px rgba(255, 251, 243, .9);
	overflow: hidden;
}
/* 头部：深褐底金线，像横幅标题的延伸 */
.hyrec-hd {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	padding: 10px 18px;
	background: linear-gradient(90deg, #74321B, #93551F);
	border-bottom: 2px solid #CEA35F;
}
.hyrec-t {
	font-size: 16px;
	font-weight: bold;
	color: #FFF8EE;
	letter-spacing: 2px;
	line-height: 1.3;
}
.hyrec-t::before { content: '◈ '; color: #CEA35F; letter-spacing: 0; }
.hyrec-s { margin-left: auto; font-size: 12px; color: #e8cfa2; letter-spacing: 1px; }
/* 内容区：CSS Grid 自动填满——列数随容器宽度自适应，行末不再留白 */
.hyrec-bd {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
	gap: 8px;
	padding: 12px 18px;
	min-height: 40px;
	background: #FFFBF3;
}
.hyrec-tip {
	grid-column: 1 / -1;
	font-size: 13px;
	color: #9D581F;
	line-height: 22px;
	padding: 6px 0 10px;
	letter-spacing: 1px;
}
/* 字块：米底金边，5星金色；≥4星为 hot 金底 */
.hyrec-w {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 0;
	padding: 7px 2px 6px;
	background: #FFF8EE;
	border: 1px solid #e6cfa4;
	border-radius: 6px;
	overflow: hidden;
	cursor: default;
	transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.hyrec-w b { font-size: 20px; font-weight: normal; color: #5a3210; line-height: 24px; }
.hyrec-w.hot { border-color: #CEA35F; background: #FFF3DC; }
.hyrec-w.hot b { color: #9D581F; font-weight: bold; }
.hyrec-star { font-style: normal; font-size: 9px; color: #d99c2e; letter-spacing: -1px; line-height: 10px; margin-top: 2px; white-space: nowrap; }
.hyrec-meta { font-style: normal; font-size: 10px; color: #a98f63; line-height: 12px; margin-top: 1px; white-space: nowrap; }
.hyrec-w:hover {
	transform: translateY(-2px);
	box-shadow: 0 5px 14px rgba(157, 88, 31, .25);
	border-color: #9D581F;
	background: #ffffff;
}

@media (max-width: 1199px) {
	.hyrec { margin: 10px 12px 6px; }
	.hyrec-hd { padding: 8px 12px; }
	.hyrec-bd {
		grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
		gap: 6px;
		padding: 10px 12px;
	}
	.hyrec-s { margin-left: 0; width: 100%; margin-top: 2px; }
	.hyrec-w { padding: 5px 1px 4px; }
	.hyrec-w b { font-size: 17px; line-height: 21px; }
	.hyrec-star { font-size: 8px; letter-spacing: -1px; }
	.hyrec-meta { font-size: 9px; }
}