/* MOK width contract: section paint, content boundary and readable text are separate. */
:root, .editor-styles-wrapper {
	/*
	 * 参与 calc() 的变量全部带默认值：内联变量被剔除时不会算出非法 calc()，也不会静默变成背景铺满。
	 * 默认值只来自 theme.json 的 custom.layout.max-width（内容宽度单一来源），
	 * 运行时由 includes/width.php 用后台设置覆盖这一组变量。
	 */
	--mok-centered-max: var(--wp--custom--layout--max-width, 1292px);
	--mok-site-limit: var(--mok-centered-max, 1292px);
	--mok-layout-max: var(--mok-site-limit, 1292px);
	--mok-safe-gutter: 24px;
	/* 可读性 token：正文行长上限与同组卡片宽度上限（默认值来自 theme.json settings.custom）。 */
	--mok-reading-max: var(--wp--custom--reading--max, 880px);
	--mok-card-max: var(--wp--custom--grid--card-max, 400px);
}
@media (max-width: 781px) { :root, .editor-styles-wrapper { --mok-safe-gutter: 16px; } }

/* Header/footer share the same inner edge as modules; no double padding. */
.mok-header .mok-header__inner { width: calc(100% - 2 * var(--mok-safe-gutter, 24px)); max-width: var(--mok-site-limit, 1292px); padding-inline: 0; margin-inline: auto; }
.mok-footer { padding-inline: var(--mok-safe-gutter, 24px); }
.mok-footer.is-layout-constrained > :not(.alignleft):not(.alignright):not(.alignfull) { width: 100%; max-width: var(--mok-site-limit, 1292px); margin-inline: auto; }

/* Module overrides affect content only. Full background remains the default. */
.mok-home-frame { position: relative; isolation: isolate; width: 100%; max-width: none; margin: 0; --mok-content-limit: var(--mok-site-limit, 1292px); }
.mok-home-frame.mok-width--boxed { --mok-content-limit: var(--mok-centered-max, 1292px); }
.mok-home-frame.mok-width--full { --mok-content-limit: none; }
.mok-home-frame::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-color: var(--mok-background-color, var(--mok-band-bg, var(--wp--preset--color--base))); }
/*
 * 分段背景单一来源：模块在第几个「可着色模块」由 PHP 决定（mok-band--base / --surface），
 * 交替值写在这里；后台「模块外观」显式设置的背景色/背景图（内联 --mok-background-color）
 * 优先级更高，仍然能覆盖交替默认值。
 */
.mok-home-frame.mok-band--base { --mok-band-bg: var(--wp--preset--color--base); }
.mok-home-frame.mok-band--surface { --mok-band-bg: var(--wp--preset--color--surface); }
.mok-home-frame.mok-background--boxed::before { inset-inline: max(var(--mok-safe-gutter, 24px), calc((100% - var(--mok-centered-max, 1292px)) / 2)); }
.mok-home-frame[data-background-image]::before { background-image: linear-gradient(rgba(10,16,28,.72),rgba(10,16,28,.72)),var(--mok-module-image); background-size: cover; background-position: center; }
.mok-home-frame > .mok-width-surface { width: 100%; max-width: none; margin: 0; background: transparent; }
.mok-home-frame .mok-width-surface > .mok-width-container { width: 100%; max-width: var(--mok-content-limit, var(--mok-site-limit, 1292px)); margin-inline: auto; }
.mok-home-frame .mok-section { padding-inline: var(--mok-safe-gutter, 24px); background: transparent; }
.mok-home-frame .mok-width-container > :is(.alignwide,.mok-grid,.mok-faq-list,.mok-timeline,.mok-about-intro__media-text,.mok-showcase) { width: 100%; max-width: none; margin-inline: 0; }
/*
 * 内层 section 只负责铺底，不再自带左右留白；安全边距由宽度容器或外层 section 承担。
 * div 根模块（产品/案例/新闻：div.mok-module > div.mok-width-container > section）的
 * 容器自身必须带上安全边距，否则 ≤1240px 视口下标题与卡片会直接贴到视口边缘。
 */
.mok-home-frame .mok-width-container > .mok-section { padding-inline: 0; }
.mok-home-frame > .mok-module.mok-width-surface > .mok-width-container { width: calc(100% - 2 * var(--mok-safe-gutter, 24px)); max-width: var(--mok-content-limit, var(--mok-site-limit, 1292px)); margin-inline: auto; }
.mok-home-frame .mok-width-container > .mok-section > :is(.mok-grid,.mok-showcase__list,.mok-section__head,.mok-showcase__head) { width: 100%; max-width: none; margin-inline: 0; }
.mok-home-frame .mok-width-container .mok-section__head { width: 100%; max-width: none; margin-inline: 0; }
/* Only copy, not the entire card/grid/module, retains a readable line length. */
.mok-home-frame .mok-section__head > .mok-lead { max-width: 68ch; margin-inline: auto; }
.mok-home-frame .mok-width-container { min-width: 0; }

/* Dynamic HTML must not depend on core block CSS having been pre-enqueued. */
.mok-home-frame .mok-about-intro__media-text { display: grid; grid-template-columns: minmax(0,46%) minmax(0,1fr); align-items: center; gap: var(--wp--custom--grid--gap,24px); }
.mok-home-frame .mok-about-intro__media-text > * { min-width: 0; }
.mok-home-frame .wp-block-media-text__media { margin: 0; }
.mok-home-frame .wp-block-media-text__media :is(img,video) { display: block; width: 100%; height: auto; border-radius: var(--wp--custom--radius--card); }
.mok-home-frame .wp-block-media-text__content { padding: 0; }
.mok-home-frame .mok-about-intro__media-text.has-media-on-the-right { grid-template-columns: minmax(0,1fr) minmax(0,46%); }
.mok-home-frame .mok-about-intro__media-text.has-media-on-the-right > .wp-block-media-text__content { grid-column: 1; grid-row: 1; }
.mok-home-frame .mok-about-intro__media-text.has-media-on-the-right > .wp-block-media-text__media { grid-column: 2; grid-row: 1; }

/* Hero paint may span the screen; its content edge follows the same module contract. */
.mok-home-frame .mok-hero__slide { padding-inline: var(--mok-safe-gutter, 24px); }
.mok-hero__content { position: relative; z-index: 2; width: 100%; max-width: var(--mok-content-limit, var(--mok-site-limit, 1292px)); margin-inline: auto; }
.mok-home-frame .mok-hero__panel { max-width: 640px; }
.mok-home-frame.mok-background--boxed :is(.mok-hero__media,.mok-hero__slide::after) { inset-inline: max(var(--mok-safe-gutter, 24px), calc((100% - var(--mok-centered-max, 1292px)) / 2)); }

/* CTA core/cover structure with a real independent text container. */
.mok-home-frame .mok-banner { position: relative; display: flex; align-items: center; min-height: 320px; padding: 56px var(--mok-safe-gutter, 24px); color: var(--wp--preset--color--white); }
.mok-home-frame .mok-banner > :is(.wp-block-cover__image-background,.wp-block-cover__background) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mok-home-frame .mok-banner > .wp-block-cover__background { background: var(--wp--preset--color--ink); opacity: .72; }
.mok-home-frame .mok-banner > .wp-block-cover__inner-container { position: relative; z-index: 1; }
.mok-home-frame .mok-banner :is(h2,p) { color: inherit; }
.mok-home-frame.mok-background--boxed .mok-banner > :is(.wp-block-cover__image-background,.wp-block-cover__background) { left: max(var(--mok-safe-gutter, 24px), calc((100% - var(--mok-centered-max, 1292px)) / 2)); right: max(var(--mok-safe-gutter, 24px), calc((100% - var(--mok-centered-max, 1292px)) / 2)); width: auto; }

/* Explicit fullwidth template wins; no-sidebar only changes the column count. */
.mok-page--fullwidth { --mok-layout-max: none; }
.mok-page--fullwidth > * { max-width: none; }

@media (max-width: 781px) {
 .mok-home-frame .mok-about-intro__media-text, .mok-home-frame .mok-about-intro__media-text.has-media-on-the-right { display: flex; flex-direction: column; gap: 24px; }
 .mok-home-frame .mok-about-intro__media-text > * { width: 100%; }
 .mok-home-frame .mok-hero__panel { max-width: 100%; }
 .mok-home-frame .mok-banner { padding-block: 40px; }
}