/* ============================================================
   jinqiao-chuida.css —— 金桥吹打专属版式
   主题：铜管蓝金 · 山谷回声，突出唢呐家族的音高阶梯
   ============================================================ */

:root {
	--jq-bg: #eef4f6;
	--jq-ink: #22333d;
	--jq-accent: #1f6f8f;
	--jq-gold: #c9982a;
	--jq-deep: #0f3a52;
}

/* ---------- Hero：山谷铜声 ---------- */
.jq-hero {
	position: relative;
	background:
		radial-gradient(640px 300px at 80% -20%, rgba(201, 152, 42, .35), transparent 60%),
		linear-gradient(105deg, var(--jq-deep) 0%, var(--jq-accent) 100%);
	color: #f2f8fa;
	padding: 76px 22px 70px;
	overflow: hidden;
}

/* 底部音波装饰 */
.jq-hero .wave {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 90px;
	background: repeating-radial-gradient(ellipse 140px 60px at 50% 130%, rgba(201, 152, 42, .22) 0 2px, transparent 2px 34px);
	pointer-events: none;
}

.jq-hero .inner { max-width: 1080px; margin: 0 auto; position: relative; z-index: 1; }
.jq-hero .kicker { font-size: 13px; letter-spacing: 6px; opacity: .88; margin-bottom: 10px; }
.jq-hero h1 { font-size: clamp(30px, 4.8vw, 46px); letter-spacing: 10px; }
.jq-hero .slogan { margin-top: 12px; font-size: 15px; letter-spacing: 3px; opacity: .92; max-width: 720px; }
.jq-hero .chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.jq-hero .chip { padding: 5px 15px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 6px; font-size: 12.5px; letter-spacing: 2px; background: rgba(0, 0, 0, .16); }

/* ---------- 唢呐音高阶梯 ---------- */
.suona-scale { display: flex; align-items: flex-end; gap: 12px; min-height: 260px; }

.suona-scale .pipe {
	flex: 1;
	background: linear-gradient(180deg, #fff, #f2f7f9);
	border: 1px solid #d5e2e8;
	border-top: 6px solid var(--jq-gold);
	border-radius: 10px 10px 6px 6px;
	padding: 14px 12px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	box-shadow: 0 6px 14px rgba(15, 58, 82, .08);
	transition: transform .2s;
}
.suona-scale .pipe:hover { transform: translateY(-6px); border-top-color: var(--jq-accent); }

.suona-scale .pipe h4 { font-size: 15px; color: var(--jq-deep); margin-bottom: 4px; }
.suona-scale .pipe .len { font-size: 20px; font-weight: bold; color: var(--jq-accent); margin-bottom: 6px; }
.suona-scale .pipe p { font-size: 12px; color: #6d8291; line-height: 1.6; }

/* 音高对应的柱高 */
.pipe.h1 { height: 90px; }
.pipe.h2 { height: 125px; }
.pipe.h3 { height: 165px; }
.pipe.h4 { height: 205px; }
.pipe.h5 { height: 240px; }

/* ---------- 马蜂腔面板 ---------- */
.feng-panel {
	background: linear-gradient(115deg, var(--jq-deep) 0%, var(--jq-accent) 100%);
	color: #eef6f9;
	border-radius: 16px;
	padding: 30px 32px;
	position: relative;
	overflow: hidden;
}
.feng-panel::after {
	content: "马蜂渴";
	position: absolute;
	right: -10px; bottom: -22px;
	font-family: "STKaiti", "KaiTi", serif;
	font-size: 100px;
	color: rgba(255, 255, 255, .08);
}
.feng-panel h3 { font-size: 18px; margin-bottom: 10px; color: #ffe4a8; }
.feng-panel p { font-size: 14px; line-height: 1.9; opacity: .94; max-width: 720px; }

/* ---------- 打击乐家族网格 ---------- */
.gu-family { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.gu-family article {
	background: #fff; border: 1px solid #d5e2e8; border-radius: 12px;
	padding: 18px 16px; text-align: center;
	transition: box-shadow .2s;
}
.gu-family article:hover { box-shadow: 0 10px 22px rgba(15, 58, 82, .12); }
.gu-family .glyph {
	width: 54px; height: 54px; margin: 0 auto 10px;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-family: "STKaiti", "KaiTi", serif; font-size: 24px; color: #fff;
	background: linear-gradient(150deg, var(--jq-gold), var(--jq-accent));
}
.gu-family h4 { font-size: 15px; color: var(--jq-deep); margin-bottom: 4px; }
.gu-family p { font-size: 12.5px; color: #6d8291; line-height: 1.6; }

@media (max-width: 768px) {
	.suona-scale { flex-wrap: wrap; }
	.suona-scale .pipe { min-width: 45%; height: auto !important; }
	.gu-family { grid-template-columns: repeat(2, 1fr); }
}