/* ===== カスタムブロック共通レイアウト =====
 * ブロック用の変数定義・アラインメント・ページコンテンツラッパー
 * 別テーマへの移植時はこのファイルごと持っていく
 */

/* ----- セクション間隔の変数定義 ----- */
:root {
	--oc-section-gap: var(--wp--preset--spacing--4-xl, 8.75rem);
	--oc-content-gutter: var(--wp--preset--spacing--md, 1.5rem);
	--oc-content-width: calc(var(--wp--style--global--content-size, 1248px) - var(--oc-content-gutter) * 2);
}

@media (max-width: 768px) {

	:root {
		--oc-section-gap: var(--wp--preset--spacing--2-xl, 4rem);
	}
}

/* ----- WordPress ブロックアラインメント ----- */
.alignfull {
	width: 100%;
	max-width: none;
}

.alignwide {
	width: 100%;
	max-width: var(--wp--style--global--wide-size, 1248px);
	margin-left: auto;
	margin-right: auto;
}

/* ----- 固定ページ: ブロックコンテンツのレイアウト ----- */
.oc-page-content {
	display: grid;
	grid-template-columns:
		[full-start] minmax(var(--oc-content-gutter), 1fr)
		[content-start] min(var(--oc-content-width), calc(100% - var(--oc-content-gutter) * 2))
		[content-end] minmax(var(--oc-content-gutter), 1fr)
		[full-end];
	width: 100%;
	margin: 0;
	padding: 0;
}

/* 既定は content 列。:where() で specificity 0 にし、
   各ブロックが必要に応じて grid-column を上書きできるようにする。
   .alignfull / .alignwide（下記）は引き続き有効。 */
:where(.oc-page-content) > * {
	grid-column: content-start / content-end;
	min-width: 0;
}

.oc-page-content > .alignwide {
	grid-column: full-start / full-end;
	width: min(var(--wp--style--global--wide-size, 1248px), calc(100% - var(--oc-content-gutter) * 2));
	max-width: none;
	margin-left: auto;
	margin-right: auto;
}

.oc-page-content > .alignfull {
	grid-column: full-start / full-end;
	width: 100%;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

/* ----- エディター内: フロント用レイアウトを無効化 -----
 * エディターは独自の alignfull 処理を持つ。
 * フロント用の grid-column 指定がエディター iframe 内で
 * 適用されると編集幅とずれるため、リセットする。
 */
.editor-styles-wrapper .alignfull,
.editor-styles-wrapper .oc-page-content > .alignfull,
.editor-styles-wrapper .oc-page-content > .alignwide {
	grid-column: auto !important;
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* エディター内の全 octheme ブロックが親幅を超えないようにする */
.editor-styles-wrapper [class*="wp-block-octheme-"] {
	max-width: 100%;
	overflow-x: auto;
	box-sizing: border-box;
}

/* ----- セクションブロック共通スタイル -----
 * 各ブロックの <section> に .oc-section を付与すると、
 * セクション間隔・隣接ブロック間の二重padding解消が自動適用される
 */
.oc-section {
	padding-top: var(--oc-section-gap);
	padding-bottom: var(--oc-section-gap);
}

/* 隣接セクションの二重padding解消：
 * 原則として後続セクションの padding-top を 0 にし、
 * 前のセクションの padding-bottom だけで間隔を取る。
 * 背景色が異なる場合（色の切れ目）のみ padding-top を復元する。
 */
.oc-section + .oc-section {
	padding-top: 0;
}

/* 背景色の切れ目（bg あり→なし、なし→あり）：padding-top を復元 */
.oc-section.oc-section--has-bg + .oc-section:not(.oc-section--has-bg),
.oc-section:not(.oc-section--has-bg) + .oc-section.oc-section--has-bg {
	padding-top: var(--oc-section-gap);
}

/* 非セクション要素（見出し・段落等）の直後のセクション：
 * 前の要素の margin-bottom だけで十分な間隔があるため、
 * セクション自体の padding-top を除去して二重余白を防ぐ。
 */
.oc-page-content > :not(.oc-section) + .oc-section {
	padding-top: 0;
}

/* ----- エディター内: セクション間隔の適用 -----
 * エディターではブロックが .wp-block-octheme-* の div でラップされるため、
 * .oc-section の隣接セレクタが効かない。ブロックラッパーレベルで制御する。
 * .is-root-container > で限定し、InnerBlocks（treatment-step 等）に影響しないようにする。
 */
.editor-styles-wrapper .is-root-container > [class*="wp-block-octheme-"] {
	padding-top: var(--oc-section-gap);
	padding-bottom: var(--oc-section-gap);
}

.editor-styles-wrapper .is-root-container > [class*="wp-block-octheme-"] + [class*="wp-block-octheme-"] {
	padding-top: 0;
}

/* 非ブロック要素（見出し等）の直後の octheme ブロック：padding-top を除去 */
.editor-styles-wrapper .is-root-container > :not([class*="wp-block-octheme-"]) + [class*="wp-block-octheme-"] {
	padding-top: 0;
}