/* =========================================================
   NSR 首页专用样式（home.css）
   加载顺序：style.css -> responsive.css -> home.css（index.html 内引入）
   复用公共类：.nsr-container / .nsr-grid--4 / .img-ratio*（见 responsive.css）
   断点：1299 / 991 / 767 / 479，与 responsive.css 约定一致
   品牌色：红 #dd1015 · 黑 #17181a · 金 #b8934a
   ========================================================= */

:root {
	--nsr-red: #dd1015;
	--nsr-red-dark: #b70d11;
	--nsr-black: #17181a;
	--nsr-gold: #b8934a;
	--nsr-text: #333;
}

/* ---------- 0. 容器窄屏内边距（.nsr-container 不在 responsive.css 的 1299 清单里，这里补齐） ---------- */
@media (max-width: 1299px) {
	.nsr-container {
		padding-left: 15px;
		padding-right: 15px;
		box-sizing: border-box;
	}
}

/* ---------- 1. Hero：全屏宽淡入淡出轮播 ---------- */
.nsr-hero {
	position: relative;
	width: 100%;
	height: clamp(420px, 38vw, 660px);
	overflow: hidden;
	background: var(--nsr-black);
}
.nsr-hero__slide {
	position: absolute;
	inset: 0;
}
/* 无 JS 兜底：仅显示第一张 */
.nsr-hero__slide:not(:first-child) { opacity: 0; visibility: hidden; }
.nsr-hero__slide:first-child { opacity: 1; visibility: visible; }

/* JS 接管（home.js 给 .nsr-hero 加 .nsr-hero--js）后：淡入淡出。
   visibility 延迟到退场动画结束再隐藏，兼顾过渡与 Tab 焦点序（隐藏页不可聚焦）。 */
.nsr-hero--js .nsr-hero__slide {
	opacity: 0;
	visibility: hidden;
	transition: opacity .7s ease, visibility 0s linear .7s;
	will-change: opacity;
}
.nsr-hero--js .nsr-hero__slide.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity .7s ease;
	z-index: 1;
}

.nsr-hero__media { position: absolute; inset: 0; }
.nsr-hero__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* 幻灯传视频时由 home.js 把 <img> 换成 <video>（静音自动循环播放） */
.nsr-hero__media video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: #000;
}
/* 底部渐变压底：统一压暗下沿保证 CTA 对比度，同时避开画面中上部的烧字区 */
.nsr-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(8, 8, 8, .42) 100%);
	pointer-events: none;
}

/* 整图点击层（链接来自幻灯 link 字段）；tabindex=-1 避免与 CTA 重复进 Tab 序 */
.nsr-hero__cover {
	position: absolute;
	inset: 0;
	z-index: 2;
}

.nsr-hero__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	padding-bottom: 44px;
	pointer-events: none; /* 文字层空白区域放行给整图链接 */
}
.nsr-hero__cta {
	pointer-events: auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 26px;
	background: var(--nsr-red);
	color: #fff;
	font-size: 16px;
	letter-spacing: 2px;
	text-decoration: none;
	border-radius: 999px;
	box-shadow: 0 6px 18px rgba(221, 16, 21, .35);
	transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.nsr-hero__cta:hover {
	background: var(--nsr-red-dark);
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(221, 16, 21, .4);
}
.nsr-hero__cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.nsr-hero__cta-arrow { transition: transform .2s ease; }
.nsr-hero__cta:hover .nsr-hero__cta-arrow { transform: translateX(4px); }

/* 首张幻灯的 HTML 文字层（图内仅品牌 logo，无双重文案冲突） */
.nsr-hero__textbox {
	pointer-events: auto;
	max-width: 640px;
}
.nsr-hero__title {
	margin: 0 0 10px;
	color: #fff;
	font-size: clamp(26px, 3.4vw, 46px);
	line-height: 1.25;
	letter-spacing: 3px;
	text-shadow: 0 2px 14px rgba(0, 0, 0, .35);
}
.nsr-hero__subtitle {
	margin: 0 0 22px;
	color: rgba(255, 255, 255, .92);
	font-size: clamp(13px, 1.2vw, 17px);
	letter-spacing: 4px;
	text-shadow: 0 1px 8px rgba(0, 0, 0, .4);
}

/* 前后切换按钮（无 JS 时不显示，由 home.js 的 .nsr-hero--js 打开） */
.nsr-hero__nav {
	display: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 4;
	width: 46px;
	height: 46px;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, .35);
	color: #fff;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	transition: background-color .2s ease;
}
.nsr-hero--js .nsr-hero__nav { display: flex; }
.nsr-hero__nav:hover { background: var(--nsr-red); }
.nsr-hero__nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.nsr-hero__nav--prev { left: 18px; }
.nsr-hero__nav--next { right: 18px; }

/* 分页圆点（home.js 生成） */
.nsr-hero__dots {
	display: none;
	position: absolute;
	right: 28px;
	bottom: 62px;
	z-index: 4;
	gap: 10px;
}
.nsr-hero--js .nsr-hero__dots { display: flex; }
.nsr-hero__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .55);
	cursor: pointer;
	transition: background-color .2s ease, transform .2s ease;
}
.nsr-hero__dot:hover { background: #fff; }
.nsr-hero__dot[aria-current="true"] { background: var(--nsr-red); transform: scale(1.3); }
.nsr-hero__dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* 单张幻灯：隐藏全部控件（home.js 另加 .nsr-hero--single） */
.nsr-hero--single .nsr-hero__nav,
.nsr-hero--single .nsr-hero__dots { display: none !important; }

/* ---------- 2. 产品推荐区 ---------- */
.nsr-products {
	padding: 76px 0 60px;
	background: #fff;
}
.nsr-sechead {
	text-align: center;
	margin: 0 0 42px;
}
.nsr-sechead__title {
	margin: 0;
	color: var(--nsr-black);
	font-size: clamp(24px, 2.6vw, 34px);
	font-weight: 600;
	letter-spacing: 6px;
	line-height: 1.3;
}
.nsr-sechead__title::after {
	content: "";
	display: block;
	width: 46px;
	height: 3px;
	margin: 14px auto 12px;
	background: var(--nsr-red);
}
.nsr-sechead__sub {
	margin: 0;
	color: var(--nsr-gold);
	font-size: 12px;
	letter-spacing: 5px;
	text-transform: uppercase;
}
.nsr-pgrid { gap: 24px; }

.nsr-pcard {
	display: block;
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 8px;
	overflow: hidden;
	text-decoration: none;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.nsr-pcard:hover,
.nsr-pcard:focus-visible {
	transform: translateY(-5px);
	box-shadow: 0 14px 30px rgba(23, 24, 26, .13);
	border-color: rgba(221, 16, 21, .35);
}
.nsr-pcard:focus-visible {
	outline: 2px solid var(--nsr-red);
	outline-offset: 2px;
}
.nsr-pcard__pic {
	overflow: hidden;
	background: #fff;
	border-bottom: 1px solid #f0f0f0;
}
.nsr-pcard__pic .img-ratio { transition: transform .45s ease; }
.nsr-pcard:hover .nsr-pcard__pic .img-ratio,
.nsr-pcard:focus-visible .nsr-pcard__pic .img-ratio { transform: scale(1.05); }
.nsr-pcard__name {
	margin: 0;
	padding: 16px 16px 6px;
	color: var(--nsr-text);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5;
	text-align: center;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.nsr-pcard__more {
	display: block;
	padding: 0 16px 18px;
	color: #999;
	font-size: 12px;
	letter-spacing: 2px;
	text-align: center;
	transition: color .2s ease;
}
.nsr-pcard:hover .nsr-pcard__more { color: var(--nsr-red); }
.nsr-pcard__more-arrow { transition: transform .2s ease; }
.nsr-pcard:hover .nsr-pcard__more-arrow { transform: translateX(3px); }

.nsr-pmore {
	margin-top: 40px;
	text-align: center;
}
.nsr-btnline {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 34px;
	border: 1px solid var(--nsr-black);
	border-radius: 999px;
	color: var(--nsr-black);
	font-size: 15px;
	letter-spacing: 3px;
	text-decoration: none;
	transition: background-color .25s ease, color .25s ease, transform .25s ease;
}
.nsr-btnline:hover {
	background: var(--nsr-black);
	color: #fff;
	transform: translateY(-2px);
}
.nsr-btnline:focus-visible {
	outline: 2px solid var(--nsr-red);
	outline-offset: 3px;
}
.nsr-btnline-arrow { transition: transform .25s ease; }
.nsr-btnline:hover .nsr-btnline-arrow { transform: translateX(4px); }

/* ---------- 3. 断点适配 ---------- */
@media (max-width: 991px) {
	.nsr-hero { height: clamp(360px, 46vw, 520px); }
	.nsr-hero__nav { width: 40px; height: 40px; font-size: 22px; }
	.nsr-hero__dots { bottom: 56px; }
	.nsr-products { padding: 56px 0 48px; }
	.nsr-sechead { margin-bottom: 32px; }
}

@media (max-width: 767px) {
	.nsr-hero { height: clamp(300px, 52vw, 430px); }
	.nsr-hero__caption { padding-bottom: 26px; }
	.nsr-hero__cta {
		padding: 10px 20px;
		font-size: 14px;
		letter-spacing: 1px;
	}
	.nsr-hero__nav { display: none !important; } /* 触屏改滑动 + 圆点 */
	.nsr-hero__dots { right: 16px; bottom: 30px; gap: 8px; }
	/* 窄屏 cover 裁切加剧：烧字在左的幻灯（2 新品合集/3 SWING/4 S3）窗口左移，完整保住烧字主体 */
	.nsr-hero__slide:nth-child(2) .nsr-hero__media img,
	.nsr-hero__slide:nth-child(3) .nsr-hero__media img,
	.nsr-hero__slide:nth-child(4) .nsr-hero__media img { object-position: 6% center; }
	.nsr-hero__dot { width: 8px; height: 8px; }
	.nsr-products { padding: 44px 0 40px; }
	.nsr-sechead { margin-bottom: 26px; }
	.nsr-sechead__title { letter-spacing: 4px; }
	.nsr-pgrid { gap: 14px; }
	.nsr-pcard { border-radius: 6px; }
	.nsr-pcard__name { font-size: 14px; padding: 12px 12px 4px; }
	.nsr-pcard__more { padding-bottom: 14px; }
	.nsr-pmore { margin-top: 28px; }
}

@media (max-width: 479px) {
	.nsr-hero { height: clamp(280px, 64vw, 340px); }
	.nsr-hero__title { letter-spacing: 2px; margin-bottom: 6px; }
	.nsr-hero__subtitle {
		letter-spacing: 2px;
		margin-bottom: 14px;
		font-size: 12px;
	}
	.nsr-hero__cta {
		padding: 9px 18px;
		font-size: 13px;
		box-shadow: 0 4px 12px rgba(221, 16, 21, .3);
	}
	.nsr-hero__dots { bottom: 26px; }
	.nsr-pgrid { gap: 12px; }
	.nsr-btnline {
		padding: 10px 26px;
		font-size: 14px;
		letter-spacing: 2px;
	}
}

/* ---------- 4. 动效偏好：减少动画 ---------- */
@media (prefers-reduced-motion: reduce) {
	.nsr-hero--js .nsr-hero__slide,
	.nsr-hero--js .nsr-hero__slide.is-active,
	.nsr-hero__cta,
	.nsr-hero__cta-arrow,
	.nsr-hero__nav,
	.nsr-hero__dot,
	.nsr-pcard,
	.nsr-pcard__pic .img-ratio,
	.nsr-pcard__more-arrow,
	.nsr-btnline,
	.nsr-btnline-arrow {
		transition: none !important;
	}
}

/* ===== 产品家族卡（首页四大分类，B&W 式：大图 + 名称 + 简介 + 查看系列） ===== */
.nsr-famgrid { gap: 26px; }
.nsr-fam {
	display: block;
	text-decoration: none;
	color: inherit;
	outline-offset: 3px;
}
.nsr-fam__pic {
	background: #F6F7F8;
	border-radius: 4px;
	overflow: hidden;
}
.nsr-fam__pic .img-ratio { transition: transform .45s ease; }
.nsr-fam:hover .nsr-fam__pic .img-ratio,
.nsr-fam:focus-visible .nsr-fam__pic .img-ratio { transform: scale(1.04); }
.nsr-fam__name {
	margin: 16px 0 6px;
	font-size: 17px;
	font-weight: bold;
	color: #1E1E1E;
	letter-spacing: .5px;
}
.nsr-fam__desc {
	margin: 0 0 10px;
	font-size: 13px;
	line-height: 1.7;
	color: #8A8A8A;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.nsr-fam__more {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 13px;
	color: #FF6700;
	letter-spacing: 1px;
}
.nsr-fam__arrow { transition: transform .25s ease; }
.nsr-fam:hover .nsr-fam__arrow,
.nsr-fam:focus-visible .nsr-fam__arrow { transform: translateX(3px); }
@media (max-width: 479px) {
	.nsr-fam__name { margin-top: 12px; font-size: 16px; }
}