/* ============================================================
   newsite 移动端适配（手机 / 小平板）
   本文件在 style.css 之后加载，仅在小屏生效，不改动桌面布局。
   断点：980 通用防护 / 640 大手机 / 480 小手机 / 390 超小手机
   ============================================================ */

/* ---------- 通用防护：杜绝横向滚动、媒体自适应 ---------- */
@media (max-width: 980px) {
	html { overflow-x: hidden; }
	body { overflow-x: clip; }            /* clip 不会破坏 sticky 顶栏 */

	/* 关键修复：style.css 末尾"版式加宽"补丁（约 7340 行）无媒体查询包裹，
	   会把 .e-shell 重新写死为 264px 两列、.e-main 左边距 40px，
	   覆盖掉原有的 ≤980 单列规则，导致手机端正文被挤成窄条。此处压回单列。 */
	.e-shell { grid-template-columns: 1fr; }
	.e-main { padding: 22px 16px 32px; }

	/* 侧栏目录在移动端由抽屉导航取代，隐藏原横向滑动条 */
	.e-side { display: none; }

	img, video, canvas, iframe, embed, object { max-width: 100%; height: auto; }
	table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
	pre, code, .code {
		white-space: pre-wrap !important;
		word-break: break-word;
		overflow-wrap: anywhere;
	}
	input, textarea, select, button { max-width: 100%; font-size: 16px; } /* 防止 iOS 聚焦缩放 */
}

/* ---------- 大手机 / 竖屏平板（≤640） ---------- */
@media (max-width: 640px) {
	.ns-wrap { padding: 0 14px; }

	/* 产品 / 版块卡：固定 200px 图列改为整列堆叠，去掉强制最小高度 */
	.e-pcard {
		grid-template-columns: 1fr;
		min-height: 0;
		padding: 14px;
	}
	.pc-img { min-height: 160px; }

	/* 版块卡头：信息在上，进入按钮整行 */
	.fb-head { flex-wrap: wrap; }
	.fb-head .e-btn.p {
		width: 100%;
		margin-top: 4px;
		justify-content: center;
	}

	/* 列表 / Tab 字号收敛，避免溢出 */
	.fb-topics li { font-size: 15px; gap: 8px; padding: 10px 14px; }
	.fb-topics .e-time { font-size: 13px; }
	.fb-tab { font-size: 15px; padding: 6px 10px; }
	.fb-desc, .pc-desc { font-size: 15px; line-height: 1.7; }

	/* 顶部导航字号收敛 */
	.ns-nav a { font-size: 15px; padding: 7px 10px; }
	.e-side a, .e-side-tt { font-size: 15px; }

	/* 产品页头部按钮换行 */
	.pc-head { gap: 10px; }
	.pc-cta-mini { width: 100%; }
}

/* ---------- 小手机（≤480） ---------- */
@media (max-width: 480px) {
	.ns-topnav .bar { gap: 8px; }
	.ns-logo { font-size: 16px; }
	.ns-nav a { font-size: 14px; padding: 6px 8px; }
	.ns-user a.login { font-size: 14px; }

	.e-h1 { font-size: clamp(22px, 7.5vw, 28px); }
	.e-sec-hd .e-h2 { font-size: 19px; }
	.e-pcard h3 { font-size: 19px; }
	.pc-desc { font-size: 14px; }

	.fb-topics li { font-size: 14px; }
	.fb-av { width: 38px; height: 38px; font-size: 19px; }

	/* CTA 按钮整行堆叠 */
	.e-cta { flex-wrap: wrap; }
	.e-cta .e-btn { width: 100%; justify-content: center; }
}

/* ---------- 超小手机（≤390，如 iPhone SE / 12 mini） ---------- */
@media (max-width: 390px) {
	.ns-wrap { padding: 0 12px; }
	.ns-nav a { font-size: 13px; padding: 6px 7px; }
	.e-pcard { padding: 12px; }
	.fb-topics li { padding: 9px 12px; }
}

/* =========================================================
   全站补充：认证页 / 用户中心 / 产品详情 / 列表 / 表单 CTA
   ========================================================= */

/* ---- 登录 / 注册：两栏 → 单列 ---- */
@media (max-width: 640px) {
	.auth-wrap {
		grid-template-columns: 1fr;
		margin: 18px auto 36px;
	}
	.auth-side {
		border-right: 0;
		border-bottom: 1px solid var(--border);
		padding: 28px 22px;
	}
	.auth-main { padding: 26px 22px; }
	.auth-qr img { width: 200px; height: 200px; max-width: 100%; }
}

/* ---- 用户中心：头像行 / 账号卡 堆叠 ---- */
@media (max-width: 640px) {
	.set-facerow { flex-direction: column; align-items: flex-start; }
	.set-me { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ---- 版块页头部：修复文字列被挤成窄条 ----
   style.css ≤820 时 .board-head 开启 flex-wrap，而 .bh-info 是 flex:1（basis 为 0），
   换行计算下文字列只分到「容器-头像-按钮」的零头宽度，导致每行仅四五个字。 */
@media (max-width: 640px) {
	.bh-info { flex: 1 1 0; min-width: 0; }  /* basis 0：与头像同行并撑满剩余空间（按钮已整行换行，不再抢宽度） */
	.bh-av { align-self: flex-start; }       /* 头像与名称顶部对齐（同一行） */
	.bh-post {
		flex: 1 1 100%;                      /* 发帖按钮整行放底部 */
		justify-content: center;
	}
	.bh-desc {                               /* 简介限 3 行，避免拉出超高卡片 */
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
	}
	.bh-desc.open { -webkit-line-clamp: unset; display: block; }  /* 展开全部 */
	.bh-more {
		display: inline-block;
		margin-top: 6px;
		font-size: 13px;
		font-weight: 700;
		color: var(--e-brand);
		cursor: pointer;
		user-select: none;
	}
}

/* ---- 产品详情页 ---- */
@media (max-width: 640px) {
	.prod-hero h2 { font-size: clamp(22px, 7vw, 30px); }
	.prod-cta { flex-direction: column; align-items: stretch; }
	.prod-cta .btn { width: 100%; justify-content: center; }
	.tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
	.tabs .tab { white-space: nowrap; }
	.entries { grid-template-columns: 1fr; grid-template-rows: auto; padding: 24px 0 36px; }
	.dl-row { gap: 10px; }
	.dl-main { min-width: 0; }
}

/* ---- 通用：表单 CTA / Markdown 工具栏 换行、认证标题收敛 ---- */
@media (max-width: 480px) {
	.cta { flex-wrap: wrap; }
	.cta .btn { width: 100%; justify-content: center; }
	.mdtool { flex-wrap: wrap; }
	.atab { font-size: 15px; padding: 9px 12px; }
	.auth-title { font-size: 24px; }
	.e-lede { font-size: 15px; }
}

/* =========================================================
   移动端抽屉导航（≤980 显示：汉堡 | 居中 logo | 用户入口）
   ========================================================= */
.ns-burger, .ns-mask, .ns-drawer { display: none; }

body.ns-noscroll { overflow: hidden; }

@media (max-width: 980px) {
	/* 顶栏：汉堡在左，logo 绝对居中，用户入口在右 */
	.ns-burger {
		display: inline-flex;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		width: 40px;
		height: 40px;
		padding: 8px;
		border: 0;
		background: transparent;
		cursor: pointer;
	}
	.ns-burger span {
		display: block;
		height: 2px;
		width: 100%;
		background: #e8ecf6;
		border-radius: 2px;
	}
	.ns-topnav .bar { position: relative; }
	.ns-logo { position: absolute; left: 50%; transform: translateX(-50%); }
	.ns-user { margin-left: auto; }
	.ns-nav { display: none; }   /* 顶部横排导航由抽屉取代 */

	/* 遮罩 */
	.ns-mask {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(4, 7, 15, .55);
		opacity: 0;
		visibility: hidden;
		transition: .2s;
		z-index: 998;
	}
	.ns-mask.on { opacity: 1; visibility: visible; }

	/* 抽屉层 */
	.ns-drawer {
		display: flex;
		flex-direction: column;
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: min(78vw, 320px);
		background: #0b1020;
		color: #e8ecf6;
		z-index: 999;
		transform: translateX(-102%);
		transition: transform .24s ease;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		box-shadow: 0 0 40px rgba(0, 0, 0, .5);
	}
	.ns-drawer.open { transform: translateX(0); }

	.nd-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 14px 16px;
		border-bottom: 1px solid rgba(255, 255, 255, .08);
		position: sticky;
		top: 0;
		background: #0b1020;
	}
	.nd-logo { font-size: 18px; font-weight: 850; }
	.nd-logo .g {
		background: var(--grad);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}
	.nd-close {
		border: 0;
		background: transparent;
		color: #97a1bb;
		font-size: 20px;
		padding: 6px 10px;
		cursor: pointer;
	}

	.nd-nav { padding: 10px 8px 20px; }
	.nd-lv1, .nd-tt {
		display: block;
		padding: 13px 14px 6px;
		font-size: 17px;
		font-weight: 800;
		color: #e8ecf6;
	}
	.nd-group a {
		display: block;
		padding: 10px 14px 10px 30px;
		font-size: 15px;
		color: #97a1bb;
		border-radius: 8px;
	}
	.nd-group a:hover, .nd-group a:active { background: rgba(255, 255, 255, .07); color: #fff; }
	.nd-lv1:hover, .nd-lv1:active { background: rgba(255, 255, 255, .07); }

	/* 与 web 侧栏一致：条目编号 + 当前页高亮（数据源同为 $arrSide） */
	.nd-group a .n { margin-right: 8px; font-size: 12px; font-weight: 800; color: #6b7694; }
	.nd-group a.on { background: rgba(47, 95, 214, .32); color: #fff; }
	.nd-group a.on .n { color: #9db7ff; }

	/* 折叠分组：首页 / 论坛 / 资源 */
	.nd-achd {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 13px 14px;
		border: 0;
		background: transparent;
		color: #e8ecf6;
		font-size: 17px;
		font-weight: 800;
		text-align: left;
		border-radius: 8px;
		cursor: pointer;
	}
	.nd-achd .ar {
		flex: none;
		width: 8px;
		height: 8px;
		margin-right: 4px;
		border-right: 2px solid #97a1bb;
		border-bottom: 2px solid #97a1bb;
		transform: rotate(45deg);
		transition: transform .2s;
	}
	.nd-accitem.open .nd-achd .ar { transform: rotate(225deg); }
	.nd-acbd { display: none; padding: 2px 8px 10px; }
	.nd-accitem.open .nd-acbd { display: block; }

	.nd-foot {
		margin-top: auto;
		padding: 14px 16px 22px;
		border-top: 1px solid rgba(255, 255, 255, .08);
		display: flex;
		flex-direction: column;
		gap: 10px;
	}
	.nd-btn {
		display: block;
		text-align: center;
		padding: 11px 0;
		border-radius: 10px;
		background: var(--brand);
		color: #fff;
		font-weight: 700;
		font-size: 15px;
	}
	.nd-btn.ghost { background: rgba(255, 255, 255, .08); color: #e8ecf6; }

	/* 移动端：点击头像展开用户下拉菜单（触屏无 :hover，改用 .show 类） */
	.ns-user .me-menu.show { display: block; }
	.ns-user .me-menu a { padding: 12px 14px; font-size: 14px; }  /* 加大点击热区 */
}