/*
 * MOVER Corporate — COMPANY (/company/) styles. v0.4.0
 *
 * 読み込み: スラッグ company の固定ページで「AI HTML / Full Canvas」テンプレートを使うときだけ、
 *           inc/enqueue.php が自動で読み込む（assets/css/pages/{slug}.css）。
 * スコープ:  content/company.html のルート要素 .mv-company 配下だけ。HOME（.mv-home）とは共有しない。
 *
 * 構成（縦のリズム）:
 *  1. 共通部品        ラベル / 見出し / Signal の罫線 / 矢印リンク / PC だけの改行
 *  2. INTRO           Canvas。大きな h1「MOVER = 動かす人。」+ 短い説明 + ページ内リンク
 *  3. WHAT WE VALUE   White。4 つの進め方（2×2）
 *  4. OUR WORK        Ink。3 つの領域（HOME の WHAT WE DO と同じ区分）
 *  5. COMPANY PROFILE Canvas。項目 / 値の 2 列（スマホは縦積み）+ 当社の取り組み
 *  6. CONTACT         Ink
 *  7. Breakpoints     640 / 768 / 1024
 *
 * ルール: 値は theme.json 由来の変数のみ（見出しサイズの clamp は例外）。カード UI・影なし。!important なし。JS なし。
 */

/* ------------------------------------------------------------------
 * 1. Shared
 * ------------------------------------------------------------------ */
/*
 * 本文も見出しも文節で折り返す（「取られてい / るのか」のような分割を避ける）。
 * word-break: auto-phrase 未対応のブラウザは従来どおりの折り返し。
 */
.mv-company {
	--mv-co-gap: var(--mover-space-2xl);

	word-break: auto-phrase;
}

.mv-company p {
	text-wrap: pretty;
}

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

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

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

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

.mv-company .mv-co-lead {
	margin: var(--mover-space-lg) 0 0;
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.9;
}

/* 「=」は大きな文字なので 3:1 以上が必要。Signal（2.84:1）ではなく Signal Dark */
.mv-company .mv-eq {
	color: var(--mover-signal-dark);
}

/* 段落は短い行で区切る */
.mv-company p {
	margin-block: 0;
}

/* ------------------------------------------------------------------
 * 2. INTRO
 * ------------------------------------------------------------------ */
/*
 * INTRO（HERO）の位置・余白・文字サイズは下層ページ共通ルール（assets/css/ai-html.css「Sub-page HERO」）。
 * ここではページ固有の部品（ページ内リンク）の見た目だけを持つ。
 * COMPANY の h1 は行が短いので --mv-subhero-h1-scale で少し大きくする（視覚的な重さを他ページと揃える）。
 */
.mv-company .mv-co-intro {
	--mv-subhero-h1-scale: 1.2;
}

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

.mv-company .mv-co-toc ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--mover-space-lg);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mv-company .mv-co-toc a {
	display: inline-flex;
	align-items: center;
	min-height: var(--mover-tap-size);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 0.3em;
	text-decoration-thickness: 1px;
}

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

/* ------------------------------------------------------------------
 * 3. WHAT WE VALUE — 4 つの進め方
 * ------------------------------------------------------------------ */
.mv-company .mv-co-values {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--mover-ink);
}

.mv-company .mv-co-value__item {
	padding-block: var(--mover-space-xl);
	border-bottom: 1px solid var(--mover-border);
}

/* 番号 + 右に Signal の短い線（HOME の 01/02/03 より小さく） */
.mv-company .mv-co-num {
	display: flex;
	align-items: center;
	gap: var(--mover-space-sm);
	margin-block-end: var(--mover-space-md);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--mover-ink);
}

.mv-company .mv-co-num::after {
	content: "";
	width: 24px;
	height: 3px;
	background-color: var(--mover-signal);
}

.mv-company .mv-co-value__title {
	margin-block-end: var(--mover-space-sm);
	font-size: var(--wp--preset--font-size--xl);
	line-height: 1.4;
}

.mv-company .mv-co-value__item > p:last-child {
	line-height: 1.8;
	color: var(--mover-muted);
}

/* ------------------------------------------------------------------
 * 4. OUR WORK — 3 つの領域
 * ------------------------------------------------------------------ */
.mv-company .mv-co-work .mv-co-lead {
	color: var(--mover-border);
}

.mv-company .mv-co-areas {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--mover-white);
}

.mv-company .mv-co-area {
	padding-block: var(--mover-space-xl);
	border-bottom: 1px solid color-mix(in srgb, var(--mover-white) 20%, transparent);
}

.mv-company .mv-co-area__cat {
	margin-block-end: var(--mover-space-sm);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--mover-signal);
	word-break: keep-all;
}

.mv-company .mv-co-area__title {
	margin-block-end: var(--mover-space-md);
	font-size: var(--wp--preset--font-size--xl);
	line-height: 1.4;
	color: var(--mover-white);
}

/* 扱っている内容: 項目名は単語の途中で折り返さない（必要なら行頭で折る） */
.mv-company .mv-co-area__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mv-company .mv-co-area__list li {
	padding-block: var(--mover-space-xs);
	border-top: 1px solid color-mix(in srgb, var(--mover-white) 20%, transparent);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.7;
	color: var(--mover-border);
	word-break: keep-all;
	overflow-wrap: anywhere;
}

.mv-company .mv-co-more {
	margin-block-start: var(--mover-space-xl);
}

/* ------------------------------------------------------------------
 * 5. COMPANY PROFILE — 軽い 2 列の表（背景色・枠で囲まない）
 * ------------------------------------------------------------------ */
.mv-company .mv-co-profile {
	background-color: var(--mover-canvas);
}

.mv-company .mv-co-profile__grid {
	display: grid;
	gap: 0 var(--mv-co-gap);
	align-items: start;
}

.mv-company .mv-co-facts {
	margin: 0;
	border-top: 1px solid var(--mover-ink);
}

.mv-company .mv-co-facts > div {
	display: grid;
	gap: var(--mover-space-xs);
	padding-block: var(--mover-space-md);
	border-bottom: 1px solid var(--mover-border);
}

.mv-company .mv-co-facts dt {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--mover-muted);
}

.mv-company .mv-co-facts dd {
	margin: 0;
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.8;
}

.mv-company .mv-co-facts ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

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

.mv-company .mv-co-policy {
	margin-block-start: var(--mover-space-2xl);
}

.mv-company .mv-co-policy__title {
	margin-block-end: var(--mover-space-sm);
	font-size: var(--wp--preset--font-size--lg);
}

.mv-company .mv-co-policy__list {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--sm);
}

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

.mv-company .mv-co-contact .mv-co-title {
	color: var(--mover-white);
}

.mv-company .mv-co-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-company .mv-co-contact__body p + p {
	margin-block-start: var(--mover-space-xs);
}

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

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

.mv-company .mv-co-contact__mail a {
	color: var(--mover-white);
}

/* ------------------------------------------------------------------
 * 7. Breakpoints
 * ------------------------------------------------------------------ */
@media (min-width: 640px) {
	/* 会社概要: 項目 | 値 の 2 列 */
	.mv-company .mv-co-facts > div {
		grid-template-columns: 9rem minmax(0, 1fr);
		gap: var(--mover-space-lg);
		align-items: baseline;
	}

	.mv-company .mv-co-facts dt {
		font-size: var(--wp--preset--font-size--sm);
	}

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

@media (min-width: 768px) {
	/* WHAT WE VALUE: 2×2 */
	.mv-company .mv-co-values {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--mover-space-2xl);
	}

	/* OUR WORK: 3 列 + 縦の罫線 */
	.mv-company .mv-co-areas {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		border-bottom: 1px solid color-mix(in srgb, var(--mover-white) 20%, transparent);
	}

	.mv-company .mv-co-area {
		padding-inline-end: var(--mover-space-lg);
		border-bottom: 0;
	}

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

	.mv-company .mv-co-area__title {
		font-size: var(--wp--preset--font-size--lg);
	}

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

	/* CONTACT: 見出し・本文 | ボタン */
	.mv-company .mv-co-contact__grid {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		gap: var(--mover-space-2xl);
	}

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

@media (min-width: 1024px) {
	/* 会社概要: 見出し | 表。見出しはスクロールしても左に残す */
	.mv-company .mv-co-profile__grid {
		grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	}

	.mv-company .mv-co-profile__head {
		position: sticky;
		top: var(--mover-space-xl);
		margin-block-end: 0;
	}

	.mv-company .mv-co-area__title {
		font-size: var(--wp--preset--font-size--xl);
	}
}