/**
 * layout.css · 12 栅格三栏 + 容器 + 断点（media query 数值只允许 576/768/992/1200/1440）
 *
 * 断点（design-spec §4.3）：
 *  xs  <576      1 列，padding 20，section 48
 *  sm  576–767   1 列（产品网格 2 列），padding 24，section 56
 *  md  768–991   两栏 4/8（首页：中+右），padding 24，section 64
 *  lg  992–1199  两栏 3/9，padding 24，section 72
 *  xl  1200–1439 三栏 3/6/3，padding 24，section 96
 *  2xl ≥1440     三栏 3/6/3，容器内容宽仍 1230 封顶，section 96
 *
 * @package wig-brand
 */

/* ═══ 1. 容器 ═══ */
/* 关键：--container-max 是**内容宽**（1230 = 3×394 + 2×24）。
 * 因为 border-box 下 padding 会吃掉内容宽，所以 max-width 要加上左右 padding，
 * 否则 1366 宽屏上主推款卡会从 394 缩到 ~380。 */
.wig-container {
	width: 100%;
	max-width: calc(var(--container-max) + var(--page-padding) * 2);
	margin-inline: auto;
	padding-inline: var(--page-padding-xs);
}

.wig-container--prose {
	max-width: var(--container-prose);
}

.wig-container--full {
	max-width: none;
	padding-inline: 0;
}

/* ═══ 2. 栅格 ═══ */
.wig-grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--grid-gap-sm);
}

.wig-grid > * {
	min-width: 0;
}

/* ═══ 3. 区块节奏 ═══ */
.wig-section {
	padding-block: var(--section-space);
}

.wig-section--tight {
	padding-block: var(--space-9);
}

.wig-section--surface {
	background-color: var(--color-surface-2);
}

.wig-section--flush-top {
	padding-top: 0;
}

/* ═══ 4. body / main 基础 ═══ */
.wig-main {
	display: block;
	min-height: 40vh;
}

.wig-page-head {
	padding-top: var(--space-8);
	padding-bottom: var(--space-6);
}

/* ═══ 5. 页头 / 导航 ═══ */
.wig-header {
	position: sticky;
	top: 0;
	z-index: var(--z-header);
	background-color: transparent;
	border-bottom: 1px solid transparent;
	transition: background-color var(--dur-2) var(--ease-out),
		height var(--dur-2) var(--ease-out),
		box-shadow var(--dur-2) var(--ease-out),
		border-color var(--dur-2) var(--ease-out);
	will-change: height;
}

.wig-header__inner {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	height: var(--header-h-mobile);
}

.wig-header.is-stuck {
	background-color: var(--color-glass);
	-webkit-backdrop-filter: blur(18px) saturate(1.6);
	backdrop-filter: blur(18px) saturate(1.6);
	border-bottom-color: var(--color-border-subtle);
	box-shadow: var(--shadow-3);
}

/* 不支持 backdrop-filter 时不保留半透明中间态（design-spec §5.2.1） */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.wig-header.is-stuck {
		background-color: var(--color-glass-solid);
	}
}

/* ═══ 6. 页脚 ═══ */
.wig-footer {
	background-color: var(--color-footer-bg);
	color: var(--color-text-inverse-2);
	padding-top: var(--space-11);
	margin-top: var(--section-space);
}

.wig-footer a {
	color: var(--color-text-inverse-2);
}

.wig-footer a:hover {
	color: var(--color-text-inverse);
}

.wig-footer__cols {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-8);
	padding-bottom: var(--space-10);
}

.wig-footer__divider {
	border-top: 1px solid var(--color-border-inverse);
}

.wig-footer__bottom {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-3);
	min-height: var(--space-10);
	padding-block: var(--space-5);
	text-align: center;
	font-size: var(--font-size-caption);
	color: var(--color-text-inverse-3);
}

/* ═══ 7. 首页 12 栅格（DOM 顺序 = 移动端折叠顺序，桌面用显式 grid-row 重新编组） ═══
   DOM: hero → trust → category → featured → hot → guide → faq → brand → ad → cta
   <768：单栏，顺序即 DOM；brand / ad 收进抽屉（此处不渲染）
   768–1199：两栏（中 8 / 右 4），brand 移到内容流之后
   ≥1200：三栏 3/6/3
   ═══ */
.wig-home {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--space-6) var(--grid-gap-sm);
	align-items: start;
	width: 100%;
	max-width: calc(var(--container-max) + var(--page-padding) * 2);
	margin-inline: auto;
	padding-inline: var(--page-padding-xs);
}

.wig-home > * {
	grid-column: 1 / -1;
	min-width: 0;
}

/* —— 移动端（默认）：品牌卡与广告位不在正文流出现 —— */
.wig-home__brand,
.wig-home__ad {
	display: none;
}

.wig-home__hero,
.wig-home__cat,
.wig-home__featured,
.wig-home__cta {
	grid-column: 1 / -1;
}

/* hero 与 CTA 横幅内部自带 .wig-container；在首页里父级已经是容器，
 * 这一层只负责「内容对齐」，不再加 padding 也不限宽。 */
.wig-home__hero .wig-container,
.wig-home__cta .wig-container {
	max-width: none;
	padding-inline: 0;
}

/* CTA 横幅要通栏深墨底：跳出 1230 容器（否则深底只有中间一条，很难看） */
.wig-home__cta {
	width: 100vw;
	margin-inline: calc(50% - 50vw);
}

.wig-home__cta .wig-container {
	max-width: calc(var(--container-max) + var(--page-padding) * 2);
	margin-inline: auto;
	padding-inline: var(--page-padding-xs);
}

@media (min-width: 576px) {
	.wig-home__cta .wig-container {
		padding-inline: var(--page-padding);
	}
}

/* ═══ 7b. 首屏栅格在 components.css 里（见「首页 hero」段）═══
 * 这里**不要**再写 .wig-hero__grid / __copy / __media：
 * 曾经有一份 ≥992 的 12 栏版本与 components.css 的 grid-template-areas 版本并存，
 * 两者断点不同（992 vs 768），在 992 以上靠加载顺序压过对方 —— 谁后加载谁生效，
 * 改一个文件看起来「没反应」，其实是另一个文件在覆盖。
 * 首屏相关规则只允许存在于 components.css 一处。
 */

@media (max-width: 575px) {
	.wig-hero .wig-carousel__viewport {
		aspect-ratio: 4 / 3;
		border-radius: var(--radius-lg);
	}

	.wig-hero {
		padding-bottom: var(--space-7);
	}
}

/* ═══ 8. 通用两栏 / 三栏页（/guide/ /contact/ 单品页） ═══ */
.wig-cols {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--grid-gap-sm);
	align-items: start;
}

.wig-cols > * {
	min-width: 0;
}

.wig-cols__aside,
.wig-cols__main {
	grid-column: 1 / -1;
}

/* ═══ 9. 产品网格 / 卡片网格 ═══ */
.wig-card-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
}

/* 横滑条（<768 的主推款：卡宽 calc(100vw - 88px)，右侧露边 32px；≥768 恢复静态网格） */
.wig-hscroll {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc(100vw - 88px);
	gap: var(--space-4);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding-right: var(--space-7);
	scrollbar-width: none;
}

.wig-hscroll::-webkit-scrollbar {
	display: none;
}

.wig-hscroll > * {
	scroll-snap-align: start;
}

/* ═══ 10. 页头吸顶时的占位（首屏透明态需要纸张色带） ═══ */
.wig-site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.wig-site__body {
	flex: 1 0 auto;
}

/* body 底部留白 = 移动端常驻条高度，保证正文最后一行不被遮 */
@media (max-width: 767px) {
	body.wig-has-mobile-bar,
	body {
		padding-bottom: calc(var(--mobile-bar-h) + env(safe-area-inset-bottom, 0px));
	}
}

/* ═══════════════════════════════════════════════════════════
   断点：576
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 576px) {
	.wig-container,
	.wig-home {
		padding-inline: var(--page-padding);
	}

	/* 窄屏容器上限放宽：内容仍 1230，padding 不压内容 */
	.wig-container--prose {
		max-width: var(--container-prose);
	}

	.wig-section {
		padding-block: 56px;
	}

	.wig-card-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--grid-gap-sm);
	}
}

/* ═══════════════════════════════════════════════════════════
   断点：768 · 两栏
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
	.wig-section {
		padding-block: var(--space-10);
	}

	.wig-header__inner {
		height: var(--header-h);
	}

	/* 首页两栏：中 8 / 右 4 */
	.wig-home__hero {
		grid-column: 1 / -1;
		grid-row: 1;
	}

	.wig-home__cat {
		grid-column: 1 / -1;
		grid-row: 2;
	}

	.wig-home__featured {
		grid-column: 1 / -1;
		grid-row: 3;
	}

	.wig-home__trust {
		grid-column: 1 / -1;
		grid-row: 4;
	}

	.wig-home__guide {
		grid-column: 1 / 9;
		grid-row: 5;
	}

	.wig-home__hot {
		grid-column: 9 / 13;
		grid-row: 5;
	}

	/* 右栏顺序：热销 → FAQ（内容榜已降 L3，本期不占网格行） */
	.wig-home__faq {
		grid-column: 9 / 13;
		grid-row: 6;
	}

	/* 左栏品牌卡在平板移到内容流之后（design-spec §4.4）
	   行号连续不留空行：grid 会为空行保留 row-gap，等于凭空多一段间距。 */
	.wig-home__brand {
		display: block;
		grid-column: 1 / 9;
		grid-row: 7;
	}

	.wig-home__cta {
		grid-column: 1 / -1;
		grid-row: 8;
	}

	.wig-card-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* ≥768：主推款/产品网格恢复静态两列（<768 才是横滑） */
	.wig-hscroll {
		display: grid;
		grid-auto-flow: row;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-columns: auto;
		overflow: visible;
		padding-right: 0;
		scroll-snap-type: none;
	}

	.wig-footer__cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-8);
	}

	.wig-footer__bottom {
		flex-direction: row;
		justify-content: space-between;
		text-align: left;
	}

	/* 联系页 / 内容区：表单 7 + 侧栏 5 的两栏在 <768 是单列 */
	.wig-cols--contact .wig-cols__main {
		grid-column: 1 / 13;
	}

	.wig-cols--contact .wig-cols__aside {
		grid-column: 1 / 13;
	}
}

/* ═══════════════════════════════════════════════════════════
   断点：992 · 两栏 3/9（lg）
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 992px) {
	.wig-section {
		padding-block: 72px;
	}

	.wig-card-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--grid-gap);
	}

	.wig-hscroll {
		display: grid;
		grid-auto-flow: row;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		grid-auto-columns: auto;
		overflow: visible;
		padding-right: 0;
	}

	.wig-cols__main {
		grid-column: 1 / 10;
	}

	.wig-cols__aside {
		grid-column: 10 / 13;
	}

	.wig-cols--contact .wig-cols__main {
		grid-column: 1 / 8;
	}

	.wig-cols--contact .wig-cols__aside {
		grid-column: 8 / 13;
	}

	/* 单品页 6/6 */
	.wig-cols--product .wig-cols__main {
		grid-column: 1 / 7;
	}

	.wig-cols--product .wig-cols__aside {
		grid-column: 7 / 13;
	}

	.wig-footer__cols {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--space-6);
	}

	.wig-footer__cols > :first-child {
		grid-column: span 1;
	}
}

/* ═══════════════════════════════════════════════════════════
   断点：1200 · 三栏 3/6/3（xl）
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 1200px) {
	.wig-section {
		padding-block: var(--section-space);
	}

	.wig-home {
		gap: var(--space-6);
	}

	.wig-home__hero {
		grid-column: 1 / -1;
		grid-row: 1;
	}

	.wig-home__cat {
		grid-column: 1 / -1;
		grid-row: 2;
	}

	.wig-home__featured {
		grid-column: 1 / -1;
		grid-row: 3;
	}

	/* 左栏：品牌卡 → 数据块 → 广告位 */
	.wig-home__brand {
		display: block;
		grid-column: 1 / 4;
		grid-row: 4;
	}

	.wig-home__trust {
		grid-column: 1 / 4;
		grid-row: 5;
	}

	.wig-home__ad {
		display: block;
		grid-column: 1 / 4;
		grid-row: 6;
	}

	/* 中栏：内容流 3 篇（跨 3 行，与左右栏同高） */
	.wig-home__guide {
		grid-column: 4 / 10;
		grid-row: 4 / span 3;
	}

	/* 右栏：热销 3 → FAQ 5（内容榜已降 L3） */
	.wig-home__hot {
		grid-column: 10 / 13;
		grid-row: 4;
	}

	.wig-home__faq {
		grid-column: 10 / 13;
		grid-row: 5;
	}

	.wig-home__cta {
		grid-column: 1 / -1;
		grid-row: 7;
	}

	/* 右栏与侧栏吸顶跟随 */
	.wig-home__hot {
		position: sticky;
		top: 96px;
	}

	.wig-sticky {
		position: sticky;
		top: 96px;
	}
}

/* ═══════════════════════════════════════════════════════════
   断点：1440 · 只放大页边距，容器仍封顶 1230（不覆盖 --container-max）
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 1440px) {
	:root {
		--sidebar-width: 290px;
	}

	.wig-home,
	.wig-container {
		--page-padding: 24px;
	}
}

/* ═══════════════════════════════════════════════════════════
   内容区首页 `/guide/`（design-spec §6.5）：≥1200 三栏 3/6/3
   ───────────────────────────────────────────────────────────
   工具栏与中栏同列宽（603），右栏 290。
   768–1199：左栏保持 3/12、右栏**下沉**到信息流之后（不是挤成两栏）。
   <768：左栏变顶部横滑 Tab，右栏最后。
   ═══════════════════════════════════════════════════════════ */
.wig-cols--guide .wig-cols__nav {
	grid-column: 1 / -1;
}

.wig-feed-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
}

@media (max-width: 767px) {
	/* 左栏 -> 顶部横滑 Tab */
	.wig-catnav--h {
		flex-direction: row;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
		padding-bottom: var(--space-1);
	}

	.wig-catnav--h::-webkit-scrollbar {
		display: none;
	}

	.wig-catnav--h > li {
		flex: none;
		scroll-snap-align: start;
	}

	.wig-catnav--h .wig-catnav__item {
		min-height: var(--tap-min);
		white-space: nowrap;
	}

	/* 横滑时不用左侧竖金线，改成底部下划线，避免「竖线躺在横向卡片左端」的怪样子 */
	.wig-catnav--h .wig-catnav__item[aria-current="page"]::before,
	.wig-catnav--h .wig-catnav__item.is-active::before {
		top: auto;
		left: var(--space-3);
		right: var(--space-3);
		bottom: 0;
		width: auto;
		height: 2px;
	}
}

@media (min-width: 576px) {
	.wig-feed-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 768px) {
	.wig-cols--guide .wig-cols__nav {
		grid-column: 1 / 4;
		position: sticky;
		top: 96px;
	}

	.wig-cols--guide .wig-cols__main {
		grid-column: 4 / 13;
	}

	/* 右栏在 768–1199 下沉到中栏之后（design-spec §4 折叠清单） */
	.wig-cols--guide .wig-cols__aside {
		grid-column: 1 / -1;
	}

	.wig-cols--guide .wig-cols__aside--stack {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-5);
		align-items: start;
	}
}

@media (min-width: 1200px) {
	.wig-cols--guide .wig-cols__main {
		grid-column: 4 / 10;
	}

	.wig-cols--guide .wig-cols__aside {
		grid-column: 10 / 13;
	}

	.wig-cols--guide .wig-cols__aside--stack {
		display: block;
		position: sticky;
		top: 96px;
	}
}