/*
 * MOVER Corporate — AI HTML / Full Canvas.
 *
 * page-templates/ai-html.php を使うページでだけ読み込まれる。
 * 貼り付けた HTML は <div class="ai-html ai-html--{slug}"> の中に描画される。
 *
 * 目的:
 *  - 貼り付けた HTML がテーマ全体（ヘッダー・フッター・他ページ）に影響しないように、
 *    AI HTML 側の CSS はすべて `.ai-html` または `.ai-html--{slug}` を起点に書く
 *  - よく使う部品（セクション / コンテナ / グリッド / スタック）を用意し、
 *    AI が毎回ゼロから CSS を書かなくて済むようにする
 *
 * 部品一覧（すべて theme.json のトークンを参照）:
 *  .mover-section            上下にセクション余白（72–144px）
 *  .mover-section--white     白背景
 *  .mover-section--dark      ダーク背景 + 白文字
 *  .mover-container          最大 1200px、左右ガター付き
 *  .mover-container--reading 最大 760px（読み物向け）
 *  .mover-stack              子要素を縦に等間隔で並べる（--stack-gap で調整）
 *  .mover-grid               自動折返しグリッド（--grid-min で最小カラム幅）
 *  .mover-label              セクション見出し上の小ラベル
 *  .mover-lead               リード文（やや大きめ）
 *  .mover-btn / --signal / --outline  ボタン（screen.css）
 *
 * 書き方のルールは docs/AI_HTML_GUIDE.md を参照。
 */

/* ------------------------------------------------------------------
 * Canvas
 * ------------------------------------------------------------------ */
.ai-html {
	/* 貼り付け HTML 側で使える簡易トークン（--mover-* は screen.css で定義済み） */
	--stack-gap: var(--mover-space-lg);
	--grid-min: 16rem;
	--grid-gap: var(--mover-space-xl);

	width: 100%;
	min-width: 0;
}

.ai-html > :first-child {
	margin-block-start: 0;
}

.ai-html > :last-child {
	margin-block-end: 0;
}

.ai-html img,
.ai-html svg,
.ai-html video,
.ai-html iframe {
	max-width: 100%;
}

.ai-html img,
.ai-html video {
	height: auto;
}

/* 貼り付け HTML 内の h1 は theme.json の h1 サイズ（3xl）を使う */
.ai-html h1 {
	font-size: var(--wp--preset--font-size--3xl);
	line-height: 1.25;
}

/* ------------------------------------------------------------------
 * Layout helpers
 * ------------------------------------------------------------------ */
.ai-html .mover-stack {
	display: flex;
	flex-direction: column;
	gap: var(--stack-gap);
}

.ai-html .mover-stack > * {
	margin-block: 0;
}

.ai-html .mover-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min), 100%), 1fr));
	gap: var(--grid-gap);
}

.ai-html .mover-grid > * {
	min-width: 0;
	margin-block: 0;
}

/* ------------------------------------------------------------------
 * Text helpers
 * ------------------------------------------------------------------ */
.ai-html .mover-label {
	display: block;
	margin-block-end: var(--mover-space-sm);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--mover-muted);
}

.mover-section--dark .mover-label {
	color: var(--mover-border);
}

.ai-html .mover-lead {
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.8;
}

.ai-html .mover-muted {
	color: var(--mover-muted);
}

/* 見出しの最大幅（長い日本語見出しの行長を抑える） */
.ai-html .mover-measure {
	max-width: var(--mover-reading);
}

/* ------------------------------------------------------------------
 * Simple definition list / table for facts (company profile 等)
 * ------------------------------------------------------------------ */
.ai-html .mover-facts {
	display: grid;
	grid-template-columns: minmax(8rem, 1fr) 3fr;
	gap: 0;
	margin: 0;
	border-top: 1px solid var(--mover-border);
}

.ai-html .mover-facts > dt,
.ai-html .mover-facts > dd {
	margin: 0;
	padding: var(--mover-space-md) 0;
	border-bottom: 1px solid var(--mover-border);
}

.ai-html .mover-facts > dt {
	font-weight: 700;
}

@media (max-width: 639.98px) {
	.ai-html .mover-facts {
		grid-template-columns: 1fr;
	}

	.ai-html .mover-facts > dt {
		padding-bottom: 0;
		border-bottom: 0;
	}
}