/*
 *	mobile.css —— 移动端适配样式
 *	只作用于 index.html，覆盖 main.css 中桌面端写死的尺寸。
 *	采用 desktop-first 的 max-width 断点覆盖，分三档：768 / 480 / 360。
 *	原 main.css 桌面端样式不变，删掉本文件或其 <link> 即可回滚。
 */

/* 站点标题（替换原废弃的 <font> 标签） */
.site-title {
	color: #fff;
	font-family: "open_bold", Helvetica, Arial, sans-serif;
	font-weight: bold;
	vertical-align: middle;
	white-space: nowrap;
}


/* ============================================================
 *	平板及以下（≤768px）
 * ============================================================ */
@media (max-width: 768px) {

	/* ---------- Header ---------- */
	header {
		height: auto !important;
		padding: 18px 0;
	}

	header .container {
		text-align: center;
	}

	header .logo {
		display: inline-block;
		margin: 0 !important;
		text-align: center;
	}

	header .logo img {
		height: 40px;
		width: auto;
		vertical-align: middle;
	}

	.site-title {
		font-size: 22px;
		margin-left: 8px;
	}


	/* ---------- Hero 首屏 ---------- */
	.hero {
		/* 原固定 560px 高在小屏会裁切内容；改为自适应高度 */
		height: auto !important;
		min-height: 460px;
		padding: 70px 15px;

		/* fixed 在 iOS Safari 上失效，会拉伸/跳动；改回 scroll */
		background-attachment: scroll !important;
		background-position: center center;
	}

	.hero .container {
		width: 100%;
	}

	/* 取消绝对定位的垂直居中，回到常规文档流 */
	.hero .caption {
		position: static !important;
		max-width: 100% !important;
		margin: 0 auto !important;
		padding: 0 10px;
		text-align: center;
		transform: none !important;
		-webkit-transform: none !important;
	}

	.hero .caption h1 {
		font-size: 26px;
		text-align: center;
	}

	.hero .caption p {
		font-size: 15px;
		line-height: 26px;
		text-align: center;
	}

	/* 隐藏模板里写死的 <br>，统一用 margin 控制间距 */
	.hero .caption br {
		display: none;
	}

	/* 下载按钮：占满宽度，方便点击 */
	.hero .caption a.app_store_btn {
		display: block;
		width: 80%;
		max-width: 280px;
		margin: 20px auto 0 auto;
		padding: 14px 20px;
		text-align: center;
	}

	.hero .caption p:last-of-type {
		margin-top: 28px;
	}


	/* ---------- Footer 备案信息 ---------- */
	footer {
		padding: 30px 15px !important;
	}

	footer .copyright {
		font-size: 12px !important;
		line-height: 1.8;
		word-break: break-all;
	}

	footer .copyright img {
		vertical-align: middle;
		height: 16px;
		width: auto;
	}
}


/* ============================================================
 *	小屏手机（≤480px）
 * ============================================================ */
@media (max-width: 480px) {

	/* Header 进一步缩小 */
	header {
		padding: 14px 0;
	}

	header .logo img {
		height: 34px;
	}

	.site-title {
		font-size: 19px;
		margin-left: 6px;
	}

	/* Hero 进一步紧凑 */
	.hero {
		min-height: 400px;
		padding: 50px 15px;
	}

	.hero .caption h1 {
		font-size: 23px;
	}

	.hero .caption p {
		font-size: 14px;
		line-height: 24px;
	}

	.hero .caption a.app_store_btn {
		padding: 12px 16px;
		font-size: 15px;
	}

	footer .copyright {
		font-size: 11px;
		line-height: 1.7;
	}
}


/* ============================================================
 *	超小屏手机（≤360px，如 iPhone SE / 较老 Android）
 * ============================================================ */
@media (max-width: 360px) {

	header .logo img {
		height: 30px;
	}

	.site-title {
		font-size: 17px;
	}

	.hero {
		min-height: 360px;
		padding: 40px 12px;
	}

	.hero .caption h1 {
		font-size: 21px;
	}

	/* 按钮几乎占满屏幕，确保可点 */
	.hero .caption a.app_store_btn {
		width: 90%;
		font-size: 14px;
	}
}