/*
 * MOVER Corporate — SERVICE (/service/) styles. v0.6.0
 *
 * 読み込み: スラッグ service の固定ページで「AI HTML / Full Canvas」テンプレートを使うときだけ、
 *           inc/enqueue.php が自動で読み込む（assets/css/pages/{slug}.css）。
 * スコープ:  content/service.html のルート要素 .mv-svc 配下だけ。HOME / COMPANY / AI SUPPORT とは共有しない。
 *
 * 構成（背景のリズム）:
 *  1. 共通部品
 *  2. HERO             Canvas
 *  3. 領域 01〜03      White / Canvas / White。左: 大きな番号 + 見出し、右: 本文と扱う内容（カードにしない）
 *  4. HOW WE WORK      Ink。4 段階
 *  5. NOT SURE         Pale Blue（色面の変化だけに使う）
 *  6. CONTACT          Ink
 *  7. Breakpoints      640 / 768 / 1024
 *
 * ルール: 値は theme.json 由来の変数のみ（見出しサイズの clamp は例外）。カード UI・影・グラデーションなし。
 *         !important なし。JS なし。
 */

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

/* 本文も見出しも文節で折り返す（未対応ブラウザは従来どおり） */
.mv-svc {
	--mv-svc-gap: var(--mover-space-2xl);
	--mv-svc-num-size: clamp(44px, 12vw, 56px);

	word-break: auto-phrase;
}

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

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

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

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

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

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

.mv-svc .mv-eq {
	color: var(--mover-signal);
}

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

/* 箇条書きの共通リセット */
.mv-svc :is(.mv-svc-steps, .mv-svc-list, .mv-svc-own, .mv-svc-flow, .mv-svc-toc ul) {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ------------------------------------------------------------------
 * 2. HERO
 * ------------------------------------------------------------------ */
/* 位置・余白・文字サイズは下層ページ共通ルール（assets/css/ai-html.css「Sub-page HERO」） */

/* ページ内リンク: 3 領域へ。小さな横並び、44px のタップ領域 */
.mv-svc .mv-svc-toc {
	margin-block-start: var(--mover-space-xl);
	padding-block-start: var(--mover-space-sm);
	border-top: 1px solid var(--mover-border);
}

.mv-svc .mv-svc-toc ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--mover-space-lg);
}

.mv-svc .mv-svc-toc a {
	display: inline-flex;
	align-items: center;
	min-height: var(--mover-tap-size);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-decoration: underline;
	text-underline-offset: 0.3em;
	text-decoration-thickness: 1px;
	white-space: nowrap;
}

.mv-svc .mv-svc-toc a:hover,
.mv-svc .mv-svc-toc a:focus-visible {
	color: var(--mover-signal-dark);
}

/* ------------------------------------------------------------------
 * 3. 領域 01〜03
 * ------------------------------------------------------------------ */
.mv-svc .mv-svc-area--canvas {
	background-color: var(--mover-canvas);
}

.mv-svc .mv-svc-area__grid {
	display: grid;
	gap: var(--mover-space-xl) var(--mv-svc-gap);
	align-items: start;
}

/* 01 / 02 / 03 — HOME の WHAT WE DO と同じ扱い。番号の右に Signal の短い線 */
.mv-svc .mv-svc-num {
	display: flex;
	align-items: center;
	gap: var(--mover-space-md);
	margin-block-end: var(--mover-space-lg);
	font-size: var(--mv-svc-num-size);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.03em;
}

.mv-svc .mv-svc-num::after {
	content: "";
	width: 48px;
	height: 4px;
	background-color: var(--mover-signal);
}

.mv-svc .mv-svc-area__body {
	padding-block-start: var(--mover-space-lg);
	border-top: 1px solid var(--mover-ink);
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.9;
}

.mv-svc .mv-svc-area__body > p + p {
	margin-block-start: var(--mover-space-sm);
}

.mv-svc .mv-svc-lead {
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	line-height: 1.6;
}

/* AI に任せる流れ: 横に並べて → でつなぐ（狭い画面では折り返す） */
.mv-svc .mv-svc-steps {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mover-space-xs) 0;
	margin-block: var(--mover-space-md);
}

.mv-svc .mv-svc-steps li {
	display: inline-flex;
	align-items: center;
	font-weight: 700;
	white-space: nowrap;
}

/* 矢印は項目の後ろに付ける（折り返したとき行頭が「→」にならないように） */
.mv-svc .mv-svc-steps li:not(:last-child)::after {
	content: "→";
	content: "→" / "";
	padding-inline: var(--mover-space-sm);
	color: var(--mover-signal-dark);
}

/* 小見出し（扱う内容の例 / 自社運営の例） */
.mv-svc .mv-svc-label {
	margin-block-start: var(--mover-space-xl);
	padding-block-end: var(--mover-space-xs);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--mover-muted);
}

.mv-svc .mv-svc-area__body > .mv-svc-label + * {
	margin-block-start: 0;
}

.mv-svc .mv-svc-list {
	display: grid;
}

.mv-svc .mv-svc-list li {
	padding-block: var(--mover-space-sm);
	border-top: 1px solid var(--mover-border);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	line-height: 1.6;
	word-break: keep-all;
	overflow-wrap: anywhere;
}

/* 自社運営の例: 控えめなリンク */
.mv-svc .mv-svc-own li {
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.6;
}

.mv-svc .mv-svc-own a {
	display: inline-block;
	padding-block: 0.7em;
	text-decoration: underline;
	text-underline-offset: 0.3em;
	text-decoration-thickness: 1px;
}

.mv-svc .mv-svc-own a:hover,
.mv-svc .mv-svc-own a:focus-visible {
	color: var(--mover-signal-dark);
}

.mv-svc .mv-svc-more {
	margin-block-start: var(--mover-space-lg);
}

/* ------------------------------------------------------------------
 * 4. HOW WE WORK
 * ------------------------------------------------------------------ */
.mv-svc .mv-svc-head__lead {
	margin-block-start: var(--mover-space-lg);
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.9;
	color: var(--mover-border);
}

.mv-svc .mv-svc-flow {
	display: grid;
	border-top: 1px solid var(--mover-white);
}

.mv-svc .mv-svc-flow__item {
	display: grid;
	grid-template-columns: 3rem minmax(0, 1fr);
	gap: 0 var(--mover-space-md);
	padding-block: var(--mover-space-lg);
	border-bottom: 1px solid color-mix(in srgb, var(--mover-white) 20%, transparent);
}

.mv-svc .mv-svc-flow__num {
	grid-row: span 2;
	padding-block-start: 0.35em;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--mover-signal);
}

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

.mv-svc .mv-svc-flow__item > p:last-child {
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.8;
	color: var(--mover-border);
}

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

.mv-svc .mv-svc-unsure__grid {
	display: grid;
	gap: 0 var(--mv-svc-gap);
	align-items: start;
}

.mv-svc .mv-svc-unsure__body {
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	line-height: 1.8;
}

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

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

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

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

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

/* ------------------------------------------------------------------
 * 7. Breakpoints
 * ------------------------------------------------------------------ */
@media (min-width: 640px) {
	.mv-svc {
		--mv-svc-num-size: clamp(56px, 7vw, 80px);
	}

	.mv-svc .mv-svc-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--mover-space-xl);
	}

	.mv-svc .mv-svc-flow {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--mover-space-2xl);
	}

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

@media (min-width: 768px) {
	.mv-svc .mv-svc-area__body,
	.mv-svc .mv-svc-head__lead {
		font-size: var(--wp--preset--font-size--lg);
	}

	.mv-svc .mv-svc-lead {
		font-size: var(--wp--preset--font-size--xl);
	}

	.mv-svc .mv-svc-unsure__body {
		font-size: var(--wp--preset--font-size--xl);
	}

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

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

@media (min-width: 1024px) {
	/* 領域: 見出し | 本文。見出しが 3 行に割れないよう 6:6 にし、左列の h2 は少しだけ小さく */
	.mv-svc .mv-svc-area__grid,
	.mv-svc .mv-svc-unsure__grid {
		grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
	}

	.mv-svc .mv-svc-area__grid .mv-svc-title,
	.mv-svc .mv-svc-unsure__grid .mv-svc-title {
		font-size: clamp(28px, 2.5vw, 36px);
	}

	.mv-svc .mv-svc-unsure__grid .mv-svc-head {
		margin-block-end: 0;
	}

	/* 見出しはスクロールしても左に残す */
	.mv-svc .mv-svc-area__head {
		position: sticky;
		top: var(--mover-space-xl);
	}

	/* HOW WE WORK: 4 列 + 縦の罫線 */
	.mv-svc .mv-svc-flow {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		column-gap: 0;
		border-bottom: 1px solid color-mix(in srgb, var(--mover-white) 20%, transparent);
	}

	.mv-svc .mv-svc-flow__item {
		grid-template-columns: minmax(0, 1fr);
		align-content: start;
		padding: var(--mover-space-lg) var(--mover-space-lg) var(--mover-space-xl) 0;
		border-bottom: 0;
	}

	.mv-svc .mv-svc-flow__item + .mv-svc-flow__item {
		padding-inline-start: var(--mover-space-lg);
		border-inline-start: 1px solid color-mix(in srgb, var(--mover-white) 20%, transparent);
	}

	.mv-svc .mv-svc-flow__num {
		grid-row: auto;
		margin-block-end: var(--mover-space-md);
		padding-block-start: 0;
	}
}