/* 首页第 1 屏 首屏、第 2 屏 乐器探索（第三轮 U1，ART_DIRECTION 第五节第 1、2 行与第八节；原型 design-v3/prototype/home.html 的 .hero 与第一个 .sec）。
   首屏：768 起整幅照片在页头下面（高 = 视口 - 页头，600 至 860），底部与左侧渐变遮罩，左下压字；手机图文分离（1:1 照片在上，文字白底，按钮通栏竖排）；
   无图或图加载失败（inc/media.php 给 .vz-hero 加 .vz-hero--text）为纯文字版式。
   base.css 的旧首屏规则（.vz-hero 1024 起左右分屏与 826 高、.vz-hero--full 遮罩、.vz-hero__text 内边距、.vz-hero__bar 黑条）不再用：
   本屏子元素只用 .vz-home-hero__* 类名，段本身用 .vz-hero.vz-home-hero 提高一级覆盖 display / 栅格 / 最小高度。 */

/* ---- 首屏：手机与纯文字（默认） ---- */
.vz-hero.vz-home-hero { position: relative; display: block; grid-template-columns: none; min-height: 0; height: auto; max-height: none; margin: 0; padding: 0; border: 0; background: var(--vz-color-surface-page); color: var(--vz-color-text-primary); overflow: hidden; }
.vz-home-hero__media { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--vz-color-surface-subtle); }
.vz-home-hero__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.vz-home-hero__text { display: grid; justify-items: start; gap: 18px; padding-block: 24px 8px; }
@media (max-width: 767px) { .vz-hero--text .vz-home-hero__text { padding-top: 48px; } }
.vz-home-hero .vz-eyebrow { color: var(--vz-color-brand-red); }
.vz-home-hero__title { color: inherit; }
.vz-home-hero__lead { max-width: 34em; color: inherit; }
.vz-home-hero__actions { display: flex; flex-direction: column; align-items: stretch; gap: 12px; width: 100%; }
.vz-home-hero__actions .vz-btn { width: 100%; } /* 手机通栏，高 48 来自 v3.css 的 .vz-btn（1024 起 52） */

@media (min-width: 768px) {
	.vz-home-hero__text { gap: 28px; max-width: 760px; padding-block: 96px 0; }
	.vz-home-hero__lead { word-break: keep-all; text-wrap: balance; } /* 中文只在标点处折行、两行等长，末行不剩一两个字；手机不用（窄屏按字折行） */
	.vz-home-hero__actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px 28px; width: auto; }
	.vz-home-hero__actions .vz-btn { width: auto; }

	/* 有图：整幅照片贴着页头下沿（页头高 + 1px 底线），文字压在左下 */
	.vz-hero.vz-home-hero--img:not(.vz-hero--text) {
		display: flex; align-items: flex-end;
		height: calc(100vh - var(--vz-v3-hdr) - 1px); height: calc(100svh - var(--vz-v3-hdr) - 1px);
		min-height: 600px; max-height: 860px;
		background: var(--vz-color-surface-dark); color: var(--vz-color-text-inverse);
	}
	.vz-home-hero--img:not(.vz-hero--text) .vz-home-hero__media { position: absolute; inset: 0; aspect-ratio: auto; background: transparent; }
	.vz-home-hero--img:not(.vz-hero--text) .vz-home-hero__media::after {
		content: ""; position: absolute; inset: 0; pointer-events: none;
		background: linear-gradient(180deg, rgba(17, 17, 19, 0) 45%, rgba(17, 17, 19, 0.78) 100%), linear-gradient(90deg, rgba(17, 17, 19, 0.5) 0%, rgba(17, 17, 19, 0) 55%);
	}
	.vz-home-hero--img:not(.vz-hero--text) .vz-home-hero__inner { position: relative; z-index: 1; }
	.vz-home-hero--img:not(.vz-hero--text) .vz-home-hero__text { padding-block: 0 80px; }
	.vz-home-hero--img:not(.vz-hero--text) .vz-eyebrow { color: var(--vz-color-text-inverse); }
	.vz-home-hero--img:not(.vz-hero--text) .vz-home-hero__ghost { border-color: var(--vz-color-text-inverse); color: var(--vz-color-text-inverse); }
	.vz-home-hero--img:not(.vz-hero--text) .vz-home-hero__ghost:hover { background: var(--vz-color-neutral-0); color: var(--vz-color-text-primary); }
	.vz-home-hero--img:not(.vz-hero--text) :focus-visible { outline-color: var(--vz-color-focus-on-dark); }
}

/* ---- 乐器探索：手机圆角小图横滑（72px 方图 + 名称，390 宽露出 4 个多；末格 全部乐器） ---- */
.vz-home-explore__list { list-style: none; } /* 手机的外边距与内边距来自 .vz-v3-rail（通栏横滑），768 起归零 */
.vz-home-explore__item { min-width: 0; }
.vz-home-explore__fam { display: grid; justify-items: center; align-content: start; gap: 8px; color: var(--vz-color-text-primary); text-align: center; text-decoration: none; }
.vz-home-explore__media { position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: var(--vz-radius-lg); }
.vz-home-explore__img { display: block; width: 100%; height: 100%; }
.vz-home-explore__media--all { display: grid; place-items: center; background: var(--vz-color-surface-dark); color: var(--vz-color-text-inverse); font-size: 20px; line-height: 1; }
.vz-home-explore__name { font-size: 12px; font-weight: 500; line-height: 1.4; overflow-wrap: anywhere; text-wrap: balance; transition: color 0.15s; }
.vz-home-explore__fam:hover .vz-home-explore__name { color: var(--vz-color-brand-red); }
@media (max-width: 767px) {
	/* v3.css 的 .vz-v3-sec ul { margin: 0 } 特异性高于 .vz-v3-rail，会吃掉横滑的负外边距，这里补回；顶部留 6，键盘焦点框不被横滑容器裁掉 */
	.vz-home-explore__list.vz-v3-rail { --vz-rail-w: 72px; margin: 0 calc(-1 * var(--vz-layout-margin)); padding-top: 6px; }
}

/* 平板：四列换行（7 个品类 + 全部乐器 = 两排），3:4 竖图 */
@media (min-width: 768px) {
	.vz-home-explore__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 16px; margin: 0; padding: 0; }
	.vz-home-explore__fam { justify-items: stretch; gap: 12px; text-align: left; }
	.vz-home-explore__media { aspect-ratio: 3 / 4; border-radius: 0; }
	.vz-home-explore__media--all { font-size: 28px; }
	.vz-home-explore__name { font-size: 15px; line-height: 1.5; }
}
/* 桌面：一排 7 格；末格 全部乐器 隐藏（段标题行右侧已有同一链接） */
@media (min-width: 1024px) {
	.vz-home-explore__list { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 16px; }
	.vz-home-explore__item--all { display: none; }
}