/*
 * MOVER Corporate — AI SUPPORT (/ai-support/) styles. v0.11.0
 *
 * 読み込み: スラッグ ai-support の固定ページで「AI HTML / Full Canvas」テンプレートを使うときだけ、
 *           inc/enqueue.php が自動で読み込む（assets/css/pages/{slug}.css）。
 * スコープ:  content/ai-support.html のルート要素 .mv-ais 配下だけ。HOME / COMPANY とは共有しない。
 *
 * 構成（背景のリズム）:
 *  1. 共通部品
 *  2. HERO           Canvas
 *  3. AI SECRETARY   White
 *  4. HOW IT WORKS   Canvas。図解 4 ステップ（1024px〜 横並び、それ以下は縦積み。04 が Pale Blue 面）
 *  5. AI / HUMAN     Ink。図解 3 ステップ（768px〜 横並び。03「人が決める」が White 面）
 *  6. USE CASES      White。仕事の例 7 つ
 *  7. TOOLS          Pale Blue（色面の変化だけに使う）
 *  8. FEATURED       Ink
 *  9. WHO IT FITS    White
 * 10. APPROACH       Canvas
 * 11. CONTACT        Ink
 * 12. Breakpoints    640 / 768 / 1024
 *
 * ルール: 値は theme.json 由来の変数のみ（見出しサイズの clamp は例外）。カード UI・影・グラデーションなし。
 *         !important なし。JS なし。
 */

/* ------------------------------------------------------------------
 * 1. Shared
 * ------------------------------------------------------------------ */

/* 本文も見出しも文節で折り返す（未対応ブラウザは従来どおり） */
.mv-ais {
	--mv-ais-gap: var(--mover-space-2xl);
	--mv-ais-line: var(--mover-border);

	word-break: auto-phrase;
}

.mv-ais p {
	margin-block: 0;
	text-wrap: pretty;
}

.mv-ais :is(h1, h2, h3) {
	text-wrap: pretty;
}

.mv-ais .mover-section {
	padding-block: var(--mover-space-section);
}

.mv-ais .mover-section--dark {
	--mv-ais-line: color-mix(in srgb, var(--mover-white) 20%, transparent);
}

.mv-ais .mover-label--signal,
.mv-ais .mover-section--dark .mover-label--signal {
	color: var(--mover-signal);
}

.mv-ais .mv-ais-head {
	max-width: var(--mover-reading);
	margin-block-end: var(--mv-ais-gap);
}

.mv-ais .mv-ais-name {
	margin-block-end: var(--mover-space-sm);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 700;
}

.mv-ais .mv-ais-title {
	margin-block-end: 0;
	font-size: var(--wp--preset--font-size--2-xl);
	line-height: 1.3;
	letter-spacing: 0.01em;
}

.mv-ais .mover-section--dark .mv-ais-title {
	color: var(--mover-white);
}

.mv-ais .mv-ais-lead,
.mv-ais .mv-ais-body {
	margin-block-start: var(--mover-space-lg);
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.9;
}

.mv-ais .mv-ais-body p + p {
	margin-block-start: var(--mover-space-md);
}

.mv-ais .mover-section--dark :is(.mv-ais-lead, .mv-ais-body) {
	color: var(--mover-border);
}

/* 見出し直下の具体化の一文（何を・どこまで） */
.mv-ais .mv-ais-body__lead {
	font-weight: 700;
	color: var(--mover-ink);
}

.mv-ais .mover-section--dark .mv-ais-body__lead {
	color: var(--mover-white);
}

.mv-ais .mv-ais-note {
	margin-block-start: var(--mover-space-lg);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.8;
	color: var(--mover-muted);
}

/* ボタン + テキストリンクの並び（HERO 内の位置は ai-html.css の共通ルール） */
.mv-ais .mv-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mover-space-md) var(--mover-space-lg);
}

/* 箇条書きの共通リセット */
.mv-ais :is(.mv-ais-list, .mv-ais-cases__list, .mv-ais-tools__list, .mv-ais-fit__list, .mv-ais-approach__list) {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 見出し | 内容 の 2 列（1024px〜。それ以下は縦積み） */
.mv-ais .mv-ais-split {
	display: grid;
	gap: 0 var(--mv-ais-gap);
	align-items: start;
}

/* ------------------------------------------------------------------
 * 2. HERO
 * ------------------------------------------------------------------ */
/*
 * 位置・余白・文字サイズは下層ページ共通ルール（assets/css/ai-html.css「Sub-page HERO」）。
 * AI SUPPORT の h1 は 1 行目（AIを増やすより、）が長いので少しだけ小さくし、2 行を保つ。
 */
.mv-ais .mv-ais-hero {
	--mv-subhero-h1-scale: 0.9;
}

/* ------------------------------------------------------------------
 * 3. AI SECRETARY
 * ------------------------------------------------------------------ */

/* 「決めるのは、いつも人です。」— 左に Signal の線 */
.mv-ais .mv-ais-callout {
	margin-block-start: var(--mover-space-xl);
	padding-inline-start: var(--mover-space-md);
	border-inline-start: 3px solid var(--mover-signal);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	line-height: 1.5;
}

.mv-ais .mv-ais-list-title {
	margin-block-end: var(--mover-space-sm);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	color: var(--mover-muted);
}

.mv-ais .mv-ais-list {
	display: grid;
	border-top: 1px solid var(--mover-ink);
}

.mv-ais .mv-ais-list li {
	padding-block: var(--mover-space-sm);
	border-bottom: 1px solid var(--mover-border);
	font-weight: 700;
	line-height: 1.6;
}

/* ------------------------------------------------------------------
 * 4〜5. 図解（順序付きリスト）— HOW IT WORKS（4 ステップ）/ AI / HUMAN（3 ステップ）
 *
 * .mv-ais-flow は <ol>。順番は ①番号「01」②並び順 ③矢印 で示す（色だけに頼らない）。
 * 番号は <ol> が読み上げるので aria-hidden。矢印は CSS の装飾（読み上げない）。
 * 最後のステップ（--final）だけ色面 + Signal の太線で一番強く見せる:
 *   HOW IT WORKS（Canvas）→ Pale Blue 面 / AI / HUMAN（Ink）→ White 面（決めるのは人）
 * 縦積みのときは ↓、横並び（AI / HUMAN は 768px〜、HOW IT WORKS は 1024px〜）のときは →。
 * ------------------------------------------------------------------ */
.mv-ais .mv-ais-how {
	background-color: var(--mover-canvas);
}

.mv-ais .mv-ais-flow {
	--mv-ais-flow-gap: var(--mover-space-xl);
	--mv-ais-flow-rule: var(--mover-ink);
	--mv-ais-flow-num: var(--mover-muted);
	--mv-ais-flow-title: var(--mover-ink);
	--mv-ais-flow-text: var(--mover-muted);
	--mv-ais-flow-arrow: var(--mover-muted);
	--mv-ais-flow-final-bg: var(--wp--custom--mover--pale-blue, #E7F2FB);

	display: grid;
	gap: var(--mv-ais-flow-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mv-ais .mover-section--dark .mv-ais-flow {
	--mv-ais-flow-rule: color-mix(in srgb, var(--mover-white) 40%, transparent);
	--mv-ais-flow-num: var(--mover-border);
	--mv-ais-flow-title: var(--mover-white);
	--mv-ais-flow-text: var(--mover-border);
	--mv-ais-flow-arrow: var(--mover-border);
	--mv-ais-flow-final-bg: var(--mover-white);
}

.mv-ais .mv-ais-flow__step {
	position: relative;
	padding: var(--mover-space-md) var(--mover-space-lg) var(--mover-space-lg);
	border-top: 1px solid var(--mv-ais-flow-rule);
}

/* 矢印（次のステップへ）: 縦積みのときは下向き */
.mv-ais .mv-ais-flow__step:not(:last-child)::after {
	content: "↓";
	content: "↓" / "";
	position: absolute;
	inset-block-start: 100%;
	inset-inline-start: var(--mover-space-lg);
	display: flex;
	align-items: center;
	height: var(--mv-ais-flow-gap);
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1;
	color: var(--mv-ais-flow-arrow);
}

.mv-ais .mv-ais-flow__num {
	margin-block-end: var(--mover-space-sm);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--mv-ais-flow-num);
}

.mv-ais .mv-ais-flow__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.45;
	color: var(--mv-ais-flow-title);
}

.mv-ais .mv-ais-flow__items {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--mover-space-md);
	margin: var(--mover-space-sm) 0 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.8;
	color: var(--mv-ais-flow-text);
}

/* 最後のステップ: 一番強く（色面 + Signal の太線 + 大きい見出し） */
.mv-ais .mv-ais-flow__step--final {
	--mv-ais-flow-num: var(--mover-ink);
	--mv-ais-flow-title: var(--mover-ink);
	--mv-ais-flow-text: var(--mover-ink);

	background-color: var(--mv-ais-flow-final-bg);
	border-top: 3px solid var(--mover-signal);
	color: var(--mover-ink);
}

.mv-ais .mv-ais-flow__step--final .mv-ais-flow__title {
	font-size: var(--wp--preset--font-size--xl);
}

/* 図解の下の一文 */
.mv-ais .mv-ais-flow__note {
	max-width: var(--mover-reading);
	margin-block-start: var(--mover-space-xl);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 700;
	line-height: 1.9;
	color: var(--mover-ink);
}

.mv-ais .mover-section--dark .mv-ais-flow__note {
	color: var(--mover-white);
}

/* ------------------------------------------------------------------
 * 6. USE CASES — 仕事の例
 * ------------------------------------------------------------------ */
.mv-ais .mv-ais-cases__list {
	display: grid;
	gap: 0 var(--mover-space-xl);
	border-top: 1px solid var(--mover-ink);
}

.mv-ais .mv-ais-case {
	padding-block: var(--mover-space-lg);
	border-bottom: 1px solid var(--mover-border);
}

.mv-ais .mv-ais-case__title {
	margin-block-end: var(--mover-space-xs);
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.45;
}

.mv-ais .mv-ais-case > p {
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.8;
	color: var(--mover-muted);
}

/* ------------------------------------------------------------------
 * 7. TOOLS — Pale Blue
 * ------------------------------------------------------------------ */
.mv-ais .mv-ais-tools {
	/* theme.json の変数が出力されない場合に備えて同じ値をフォールバックに持つ */
	background-color: var(--wp--custom--mover--pale-blue, #E7F2FB);
	color: var(--mover-ink);
}

/* 順番は「仕事 → 使い分けの考え方 → ツール名」。ツール名は主役にしない */
.mv-ais .mv-ais-tools__work {
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 700;
	line-height: 1.5;
}

.mv-ais .mv-ais-tools .mv-ais-body {
	margin-block-start: var(--mover-space-md);
}

.mv-ais .mv-ais-tools__label {
	margin-block-start: var(--mover-space-xl);
	padding-block-start: var(--mover-space-md);
	border-top: 1px solid color-mix(in srgb, var(--mover-ink) 15%, transparent);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--mover-muted);
}

/* ツール名: 小さく横に並べるだけ（比較表にしない） */
.mv-ais .mv-ais-tools__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mover-space-xs) var(--mover-space-lg);
	margin-block-start: var(--mover-space-xs);
}

.mv-ais .mv-ais-tools__list li {
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.8;
	white-space: nowrap;
}

/* ------------------------------------------------------------------
 * 8. FEATURED
 * ------------------------------------------------------------------ */
.mv-ais .mv-ais-featured .mv-ais-name {
	color: var(--mover-white);
}

.mv-ais .mv-ais-featured .mv-ais-body {
	margin-block-start: 0;
}

.mv-ais .mv-ais-featured__cta {
	margin-block-start: var(--mover-space-lg);
	color: var(--mover-white);
}

/* ------------------------------------------------------------------
 * 9. WHO IT FITS — Signal の小さな四角 + 項目
 * ------------------------------------------------------------------ */
.mv-ais .mv-ais-fit__list {
	display: grid;
	gap: 0 var(--mover-space-xl);
	border-top: 1px solid var(--mover-ink);
}

.mv-ais .mv-ais-fit__list li {
	display: flex;
	align-items: baseline;
	gap: var(--mover-space-sm);
	padding-block: var(--mover-space-md);
	border-bottom: 1px solid var(--mover-border);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	line-height: 1.5;
}

.mv-ais .mv-ais-fit__list li::before {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	background-color: var(--mover-signal);
	transform: translateY(-0.15em);
}

/* ------------------------------------------------------------------
 * 10. APPROACH — 番号付きの 6 行
 * ------------------------------------------------------------------ */
.mv-ais .mv-ais-approach {
	background-color: var(--mover-canvas);
}

.mv-ais .mv-ais-approach__list {
	counter-reset: mv-ais-approach;
	border-top: 1px solid var(--mover-ink);
}

.mv-ais .mv-ais-approach__list li {
	counter-increment: mv-ais-approach;
	display: grid;
	grid-template-columns: 2.5rem minmax(0, 1fr);
	align-items: baseline;
	padding-block: var(--mover-space-md);
	border-bottom: 1px solid var(--mover-border);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	line-height: 1.5;
}

.mv-ais .mv-ais-approach__list li::before {
	content: counter(mv-ais-approach, decimal-leading-zero);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.08em;
	color: var(--mover-signal-dark);
}

/* ------------------------------------------------------------------
 * 11. CONTACT
 * ------------------------------------------------------------------ */
.mv-ais .mv-ais-contact__grid {
	display: grid;
	gap: var(--mover-space-xl);
	align-items: start;
}

.mv-ais .mv-ais-contact__body {
	margin-block-start: var(--mover-space-lg);
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.9;
	color: var(--mover-border);
}

.mv-ais .mv-ais-contact__actions .mover-btn {
	width: 100%;
}

.mv-ais .mv-ais-contact__mail {
	margin-block-start: var(--mover-space-lg);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--mover-border);
}

/* メールのリンクもタップ領域 44px を確保（見た目の行間は変えない） */
.mv-ais .mv-ais-contact__mail a {
	display: inline-block;
	padding-block: 0.7em;
	margin-block: -0.7em;
	font-weight: 700;
	color: var(--mover-white);
}

/* ------------------------------------------------------------------
 * 12. Breakpoints
 * ------------------------------------------------------------------ */
@media (min-width: 640px) {
	.mv-ais .mv-ais-list,
	.mv-ais .mv-ais-cases__list,
	.mv-ais .mv-ais-fit__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--mover-space-xl);
	}

	.mv-ais .mv-ais-contact__actions .mover-btn {
		width: auto;
	}
}

@media (min-width: 768px) {
	/* AI / HUMAN の図解: 3 列。矢印は右向き（番号の行の高さ） */
	.mv-ais .mv-ais-flow--prep {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.mv-ais .mv-ais-flow--prep .mv-ais-flow__step:not(:last-child)::after {
		content: "→";
		content: "→" / "";
		inset-block-start: var(--mover-space-md);
		inset-inline-start: 100%;
		justify-content: center;
		width: var(--mv-ais-flow-gap);
		height: 1.5rem;
	}

	.mv-ais .mv-ais-flow__note {
		font-size: var(--wp--preset--font-size--lg);
	}

	.mv-ais .mv-ais-lead,
	.mv-ais .mv-ais-body,
	.mv-ais .mv-ais-contact__body {
		font-size: var(--wp--preset--font-size--lg);
	}

	.mv-ais .mv-ais-contact__grid {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		gap: var(--mover-space-2xl);
	}

	.mv-ais .mv-ais-contact__actions {
		justify-self: end;
		text-align: end;
		padding-block-start: var(--mover-space-2xl);
	}
}

@media (min-width: 1024px) {
	/* 見出し | 内容 */
	.mv-ais .mv-ais-split {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	}

	.mv-ais .mv-ais-split > .mv-ais-head {
		margin-block-end: 0;
	}

	.mv-ais .mv-ais-cases__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* HOW IT WORKS の図解: 4 列は 1024px〜（768px では 1 行 4〜5 文字になり読みにくいため縦積みのまま） */
	.mv-ais .mv-ais-flow--trial {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.mv-ais .mv-ais-flow--trial .mv-ais-flow__step:not(:last-child)::after {
		content: "→";
		content: "→" / "";
		inset-block-start: var(--mover-space-md);
		inset-inline-start: 100%;
		justify-content: center;
		width: var(--mv-ais-flow-gap);
		height: 1.5rem;
	}

	/* 4 列のときの 04 は lg（xl だと 3 行になる）。1280px〜 で xl */
	.mv-ais .mv-ais-flow--trial .mv-ais-flow__step--final .mv-ais-flow__title {
		font-size: var(--wp--preset--font-size--lg);
	}
}

@media (min-width: 1280px) {
	.mv-ais .mv-ais-flow--trial .mv-ais-flow__step--final .mv-ais-flow__title {
		font-size: var(--wp--preset--font-size--xl);
	}
}