/*
 * 联系方式 / 高德地图 / 广告位 / 页脚扩展（rev6-sprint-5: F-021 ~ F-024）。
 *
 * 只使用 theme.json 的调色板与自定义 token（--wp--preset--color-*、--wp--custom--radius--*），
 * 不新增硬编码色值，也不使用 !important。
 */

/* ------------------------------------------------------------ 联系方式 */

.mok-contact__inline {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 10px;
}

.mok-contact__list {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mok-contact__item {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	min-width: 0;
	font-size: var(--wp--preset--font-size--small, 14px);
	line-height: 1.6;
	color: var(--wp--preset--color--muted, #525252);
}

.mok-contact--list .mok-contact__item {
	display: flex;
	padding: 0;
}

.mok-contact--inline .mok-contact__item {
	color: inherit;
}

.mok-contact__label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--wp--preset--color--meta, #6b6b6b);
	white-space: nowrap;
}

.mok-contact__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--primary, #007bff);
}

.mok-contact__icon-svg {
	width: 16px;
	height: 16px;
}

.mok-contact__text,
.mok-contact__link {
	min-width: 0;
	overflow-wrap: anywhere;
}

.mok-contact__link {
	color: var(--wp--preset--color--primary, #007bff);
	text-decoration: none;
}

.mok-contact__link:hover,
.mok-contact__link:focus-visible {
	color: var(--wp--preset--color--primary-dark, #0059bf);
	text-decoration: underline;
}

.mok-contact--inline .mok-contact__link {
	color: inherit;
}

.mok-contact--inline .mok-contact__link:hover,
.mok-contact--inline .mok-contact__link:focus-visible {
	color: var(--wp--preset--color--primary, #007bff);
}

.mok-contact__copy {
	padding: 2px 8px;
	border: 1px solid var(--wp--preset--color--border, #e7ebf3);
	border-radius: var(--wp--custom--radius--button, 6px);
	background-color: var(--wp--preset--color--base, #fff);
	font-size: 12px;
	line-height: 1.5;
	color: var(--wp--preset--color--primary, #007bff);
	cursor: pointer;
}

.mok-contact__copy:hover {
	border-color: var(--wp--preset--color--primary, #007bff);
}

.mok-contact__copy:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary, #007bff);
	outline-offset: 2px;
}

.mok-contact__status {
	font-size: 12px;
	color: var(--wp--preset--color--meta, #6b6b6b);
}

.mok-contact__more-item {
	list-style: none;
}

.mok-contact__more {
	display: inline-flex;
	align-items: center;
	font-size: var(--wp--preset--font-size--small, 14px);
	font-weight: 600;
	color: var(--wp--preset--color--primary, #007bff);
	text-decoration: none;
}

.mok-contact__more:hover,
.mok-contact__more:focus-visible {
	color: var(--wp--preset--color--primary-dark, #0059bf);
	text-decoration: underline;
}

/*
 * 页头联系方式：唯一来源是 contact_items 的 header 位置（模板里不再硬编码电话）。
 * 单行展示；≤781px 由 theme.css 的 .mok-header__phone 规则收进联系页，390px 不会换行溢出。
 */
.mok-header .mok-contact--pos-header.mok-header__phone {
	flex-direction: row;
	align-items: center;
	gap: 4px 14px;
	line-height: 1.25;
	text-align: right;
}

.mok-header .mok-contact--pos-header .mok-contact__inline {
	flex-wrap: nowrap;
	gap: 4px 14px;
}

.mok-header .mok-contact--pos-header .mok-contact__item {
	font-size: var(--wp--preset--font-size--small, 14px);
	color: var(--wp--preset--color--meta);
}

/* 第一项（主电话/主邮箱）保留页头原来的醒目排版，追加的其它条目为次要信息。 */
.mok-header .mok-contact--pos-header .mok-contact__inline > .mok-contact__item:first-child .mok-contact__link,
.mok-header .mok-contact--pos-header .mok-contact__inline > .mok-contact__item:first-child .mok-contact__text {
	font-size: var(--wp--preset--font-size--lead, 18px);
	font-weight: 800;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--ink);
}

.mok-contact--empty {
	margin: 0;
	color: var(--wp--preset--color--meta, #6b6b6b);
	font-size: var(--wp--preset--font-size--small, 14px);
}

.mok-contact-card {
	padding: 24px;
}

.mok-support__item {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
}

.mok-support__label {
	color: var(--wp--preset--color--meta, #6b6b6b);
}

/* ------------------------------------------------------------- 高德地图 */

.mok-map {
	margin: 24px 0;
}

.mok-map__canvas {
	width: 100%;
	height: var(--mok-map-height, 320px);
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--border, #e7ebf3);
	border-radius: var(--wp--custom--radius--card, 6px);
	background-color: var(--wp--preset--color--surface, #f3f5f7);
}

.mok-map__canvas--error {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	color: var(--wp--preset--color--muted, #525252);
	font-size: var(--wp--preset--font-size--small, 14px);
	text-align: center;
}

.mok-map__notice,
.mok-map__fallback {
	margin: 0;
	padding: 16px 20px;
	border: 1px dashed var(--wp--preset--color--border, #e7ebf3);
	border-radius: var(--wp--custom--radius--card, 6px);
	color: var(--wp--preset--color--meta, #6b6b6b);
	font-size: var(--wp--preset--font-size--small, 14px);
}

/* --------------------------------------------------------------- 广告位 */

.mok-ad {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--mok-layout-max, 1292px);
	margin: 24px auto;
	padding: 0 24px;
}

.mok-ad--below-nav {
	margin-top: 0;
	padding-top: 16px;
}

.mok-ad img,
.mok-ad iframe {
	max-width: 100%;
	height: auto;
}

.mok-ad__mobile {
	display: none;
}

/* --------------------------------------------------------- 页脚扩展内容 */

.mok-footer__copy,
.mok-footer__meta,
.mok-footer__friends {
	margin: 4px 0 0;
	text-align: center;
	overflow-wrap: anywhere;
}

.mok-footer__friends {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px 12px;
}

.mok-footer__friends-label {
	color: var(--wp--preset--color--footer-muted, #9baac3);
}

.mok-footer__sep {
	margin: 0 6px;
	color: var(--wp--preset--color--footer-muted, #9baac3);
}

.mok-footer__qr {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 12px;
}

.mok-footer__qr-item {
	margin: 0;
	text-align: center;
}

.mok-footer__qr-image {
	width: 88px;
	height: 88px;
	padding: 4px;
	border-radius: var(--wp--custom--radius--card, 6px);
	background-color: var(--wp--preset--color--white, #fff);
	object-fit: contain;
}

.mok-footer__qr-text {
	margin: 4px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--wp--preset--color--footer-muted, #9baac3);
}

@media (max-width: 781px) {
	.mok-contact-card {
		padding: 20px;
	}

	.mok-map__canvas {
		height: 240px;
	}

	.mok-ad {
		margin: 16px auto;
		padding: 0 16px;
	}

	.mok-ad__desktop {
		display: none;
	}

	.mok-ad__mobile {
		display: block;
	}

	.mok-footer__qr-image {
		width: 72px;
		height: 72px;
	}
}

/* ============================================================ rev6 F-025 短代码 */

/*
 * 选项卡（[tabs] / [tab]）复用 theme.css 里 mok/product-tabs 区块的同一套 .mok-tabs 样式，
 * 这里只补短代码特有的外间距，不重复定义面板/按钮外观。
 */
.mok-tabs--shortcode {
	margin-block: var(--wp--custom--section--gap, 24px);
}

.mok-shortcode-error {
	margin-block: 16px;
	padding: 12px 16px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card);
	background-color: var(--wp--preset--color--light);
	font-size: var(--wp--preset--font-size--small, 14px);
	line-height: 1.6;
	color: var(--wp--preset--color--meta);
}

.mok-shortcode-note {
	margin-block: 16px;
	padding: 12px 16px;
	border: 1px dashed var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card);
	font-size: var(--wp--preset--font-size--small, 14px);
	color: var(--wp--preset--color--muted);
}

/* 合作咨询短代码：只负责外层标题与间距，表单本体由组件插件输出。 */
.mok-cooperate {
	display: grid;
	gap: var(--wp--custom--grid--gap, 24px);
	margin-block: var(--wp--custom--section--gap, 24px);
}

.mok-cooperate__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--h3, 24px);
	line-height: 1.4;
	color: var(--wp--preset--color--ink);
}

/* ============================================================ rev6 F-026 小工具 */

.mok-widget {
	padding: var(--wp--custom--card--padding, 24px);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card);
	background-color: var(--wp--preset--color--white);
	box-shadow: var(--wp--custom--shadow--card);
	overflow-wrap: anywhere;
}

.mok-widget + .mok-widget {
	margin-block-start: var(--wp--custom--grid--gap, 24px);
}

.mok-widget__title {
	margin: 0 0 16px;
	padding-block-end: 12px;
	border-bottom: 1px solid var(--wp--preset--color--border);
	font-size: var(--wp--preset--font-size--x-large, 20px);
	line-height: 1.4;
	color: var(--wp--preset--color--ink);
}

.mok-widget__empty {
	margin: 0;
	font-size: var(--wp--preset--font-size--small, 14px);
	color: var(--wp--preset--color--muted);
}

.mok-widget-cats,
.mok-widget-cats ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mok-widget-cats ul {
	margin-inline-start: 14px;
}

.mok-widget-cats li {
	padding-block: 6px;
	font-size: var(--wp--preset--font-size--small, 14px);
	line-height: 1.6;
}

.mok-widget-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mok-widget-tags__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill, 999px);
	font-size: var(--wp--preset--font-size--small, 14px);
	line-height: 1.6;
	color: var(--wp--preset--color--meta);
	text-decoration: none;
}

.mok-widget-tags__link:hover,
.mok-widget-tags__link:focus-visible {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

.mok-widget-tags__count {
	font-size: 12px;
	color: var(--wp--preset--color--muted);
}

.mok-widget-slider {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
}

.mok-widget-slider__slide {
	flex: 0 0 100%;
	margin: 0;
	scroll-snap-align: start;
}

.mok-widget-slider__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--card);
}

/* 聚合文章：4 种布局是真实不同的 DOM 结构（媒体节点只在 thumb/grid 存在）。 */
.mok-widget-posts {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mok-widget-posts__item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	min-width: 0;
}

.mok-widget-posts__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.mok-widget-posts__title {
	font-size: var(--wp--preset--font-size--small, 14px);
	line-height: 1.6;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	overflow-wrap: anywhere;
}

.mok-widget-posts__title:hover,
.mok-widget-posts__title:focus-visible {
	color: var(--wp--preset--color--primary);
}

.mok-widget-posts__date,
.mok-widget-posts__meta {
	font-size: 12px;
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
}

.mok-widget-posts__media {
	flex: 0 0 72px;
	width: 72px;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--light);
}

.mok-widget-posts__media--empty {
	display: block;
	border: 1px dashed var(--wp--preset--color--border);
}

.mok-widget-posts__thumb {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 列表：单列文字行，无媒体节点。 */
.mok-widget-posts--list .mok-widget-posts__item {
	padding-block-end: 10px;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.mok-widget-posts--list .mok-widget-posts__item:last-child {
	padding-block-end: 0;
	border-bottom: 0;
}

/* 缩略图：图左文右（媒体 72px）。 */
.mok-widget-posts--thumb .mok-widget-posts__item {
	align-items: center;
}

/* 网格：两列图片卡，图在上、标题在下。 */
.mok-widget-posts--grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--custom--grid--gap, 24px);
}

.mok-widget-posts--grid .mok-widget-posts__item {
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
}

.mok-widget-posts--grid .mok-widget-posts__media {
	flex: 0 0 auto;
	width: 100%;
	aspect-ratio: 3 / 2;
}

/* 紧凑：纯标题行，无日期/作者节点。 */
.mok-widget-posts--compact {
	gap: 6px;
}

.mok-widget-posts--compact .mok-widget-posts__item {
	align-items: baseline;
}

.mok-widget-posts--compact .mok-widget-posts__title {
	display: inline-block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

/* ================================================= rev6 F-027 归档布局变体 */

/* 产品 / 案例的「2 列」形态：同组等宽、同行等高。 */
.mok-archive-grid.mok-archive-layout--2col,
.mok-archive-grid.mok-archive-layout--cases-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-rows: 1fr;
	align-items: stretch;
}

.mok-archive-grid.mok-archive-layout--2col .mok-archive-card__media {
	aspect-ratio: 2 / 1;
}

/* 案例的「2 列竖向卡」：行卡改为竖向卡（图在上、body 在下）。 */
.mok-archive-grid--cases.mok-archive-layout--cases-grid .mok-archive-card--case {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	padding: 0;
}

.mok-archive-grid--cases.mok-archive-layout--cases-grid .mok-archive-card__media {
	flex: 0 0 auto;
	width: 100%;
	aspect-ratio: 3 / 2;
}

.mok-archive-grid--cases.mok-archive-layout--cases-grid .mok-archive-card__body {
	justify-content: flex-start;
	padding: 16px 24px 24px;
}

/* 新闻 / 默认的「3 列图片卡」：新增通用卡片变体 .mok-archive-card--news。 */
.mok-archive-grid.mok-archive-layout--cards {
	grid-template-columns: repeat(
		auto-fit,
		minmax(min(100%, var(--wp--custom--archive--products--card-min, 300px)), 1fr)
	);
	grid-auto-rows: 1fr;
	align-items: stretch;
}

.mok-archive-card--news .mok-archive-card__media {
	aspect-ratio: 3 / 2;
}

.mok-archive-card--news .mok-archive-card__body {
	padding: 16px 24px 24px;
	min-height: 96px;
}

/* 新闻 / 默认的「紧凑文本行」：行距收紧，不输出摘要节点。 */
.mok-archive-rows.mok-archive-layout--compact {
	gap: 0;
}

.mok-archive-layout--compact .mok-archive-row {
	padding-block: 12px;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.mok-archive-layout--compact .mok-archive-row:last-child {
	border-bottom: 0;
}

/* FAQ 的「单列」形态。 */
.mok-archive-grid--faqs.mok-archive-layout--faqs-single {
	grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 781px) {
	/* 小工具的「手机端隐藏」：纯 CSS，不依赖 JS。 */
	.mok-widget--hide-mobile {
		display: none;
	}

	.mok-widget-posts--grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.mok-archive-grid.mok-archive-layout--2col,
	.mok-archive-grid.mok-archive-layout--cases-grid,
	.mok-archive-grid.mok-archive-layout--cards,
	.mok-archive-grid--faqs.mok-archive-layout--faqs-single {
		grid-template-columns: minmax(0, 1fr);
	}

	.mok-archive-grid--cases.mok-archive-layout--cases-grid .mok-archive-card__body {
		padding: 14px 15px 16px;
	}
}

/* ============================== 案例「4 列小卡」grid4（用户 2026-10-28 表格口径） */
/*
 * 用户表格：案例归档 4 列 305px 卡 + 图片 1.5。4×305 + 3×24 = 1292，默认 1240 容器
 * 再减 320 侧栏只剩 896，放不下；所以 grid4 时：
 *   1) 主题不渲染侧栏模板部件（includes/frontend.php 的 wide-grid 过滤，只对 cases+grid4 生效）；
 *   2) 归档容器上限从 1240 放宽到 1292（下方的 :has 规则），1440 下正好 305×4、gap 24，居中且无横滚；
 *   3) 视口 < 1200 时降级 2 列（1440 恰好 4×305；1200–1439 每列 270–305），390/320 也是 2 列。
 * 默认 row（896×248 横向行卡）与 sprint 4 已验收基线完全不变。
 */
.mok-archive-grid.mok-archive-layout--cases-grid4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: 1fr;
	align-items: stretch;
	gap: var(--wp--custom--grid--gap, 24px);
}

.mok-archive-grid--cases.mok-archive-layout--cases-grid4 .mok-archive-card--case {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	padding: 0;
}

.mok-archive-grid--cases.mok-archive-layout--cases-grid4 .mok-archive-card__media {
	flex: 0 0 auto;
	width: 100%;
	aspect-ratio: 3 / 2;
}

.mok-archive-grid--cases.mok-archive-layout--cases-grid4 .mok-archive-card__thumb {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mok-archive-grid--cases.mok-archive-layout--cases-grid4 .mok-archive-card__body {
	flex: 1 1 auto;
	justify-content: flex-start;
	gap: 8px;
	padding: 16px 24px 24px;
}

/* 容器放宽：只在案例 grid4 生效，其他布局仍是 1240。 */
.mok-archive-layout:has(.mok-archive__inner--style-grid4) {
	max-width: var(--mok-archive-cases-grid4-max, 1292px);
}

.mok-archive__inner--style-grid4 {
	max-width: none;
}

/* 视口 < 1200 放不下 4×305（容器 = 视口 − 48）：退 2 列，卡宽随容器等分，不出现横滚。 */
@media (max-width: 1199px) {
	.mok-archive-grid.mok-archive-layout--cases-grid4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* 390 / 320：仍是 2 列（用户表格允许），内边距收紧。 */
@media (max-width: 781px) {
	.mok-archive-grid.mok-archive-layout--cases-grid4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mok-archive-grid--cases.mok-archive-layout--cases-grid4 .mok-archive-card__body {
		padding: 14px 15px 16px;
	}
}