/**
 * 技術・事業（technology）single: ブロック間余白パターン
 *
 * 各ブロックに余白クラス（u-mbs / is-mg-level-* など）を付与するのをやめ、
 * 「隣接する要素の組み合わせ」で余白を固定するためのスタイル。
 *
 * - 前半: フロント（.single-technology）用
 * - 後半: ブロックエディタ（#growp-editor-wrapper）用
 *   エディタでは各ブロックが .wp-block[data-type] でラップされるため、
 *   同じパターンをラッパー階層の隣接セレクタで再現している。
 *
 * 余白トークン（PC / SP）は :root で定義し、ルール側は 1 行で参照する。
 */

:root {
	--tech-gap-2xl: 5rem;    /* 80px : 大見出し前・CTA前 */
	--tech-gap-xl: 3.75rem;  /* 60px : 中見出し前 */
	--tech-gap-lg: 2.5rem;   /* 40px : 既定 */
	--tech-gap-md: 1.5rem;   /* 24px : 大見出し直後 */
	--tech-gap-sm: 1.25rem;  /* 20px : 中見出し直後 */
	--tech-gap-xs: 0.75rem;  /* 12px : 小見出し直後・テキスト連続 */
}

@media screen and (width < 750px) {
	:root {
		--tech-gap-2xl: 2.5rem;  /* 40px */
		--tech-gap-xl: 2rem;     /* 32px */
		--tech-gap-lg: 1.5rem;   /* 24px */
		--tech-gap-md: 1.25rem;  /* 20px */
		--tech-gap-sm: 1rem;     /* 16px */
		--tech-gap-xs: 0.75rem;  /* 12px */
	}
}

/* ========================================
   セクション：上余白なし（余白スペーサーで調整する場合）
   ======================================== */

/*
 * 通常の is-inner-border-top-◯ は「上余白と同じ位置」に線を引く。
 * 上余白を 0 にして線だけを本文の頭（＝セクション上端）に残すための指定。
 * 線幅を決める変数は .l-section / .is-in-2col 側で設定済みのものを使う。
 */
.l-section.is-inner-border-top-none {
	background-image: linear-gradient(var(--color-gray-100), var(--color-gray-100));
	background-size: var(--_section-line-width) 1px;
	background-repeat: no-repeat;
	background-position: var(--_section-line-x) top 0;
}

/* ========================================
   セクションの下余白（最終セクションのみ）
   ======================================== */

/*
 * 静的HTMLでは is-2xl-bottom が必ず最終セクションにだけ付いていたため、
 * 「最終セクション」用のプリセットを持たずに CSS で自動付与する。
 */
.single-technology .l-two-column__main > .l-section:last-of-type {
	padding-bottom: 11.25rem; /* 180px */
}

@media screen and (width < 750px) {
	.single-technology .l-two-column__main > .l-section:last-of-type {
		padding-bottom: 5rem; /* 80px */
	}
}

/* 編集画面でも最後のセクションだけ下余白を再現する */
#growp-editor-wrapper.growp-post-content .is-root-container > [data-type="acf/technology-section"]:last-child .l-section {
	padding-bottom: 11.25rem;
}

/* ========================================
   フロント: セクション直下のブロック間余白
   ======================================== */

/* 1. 既定（すべての隣接） */
.single-technology :is(.l-section, .l-section > .l-container) > * + * {
	margin-top: var(--tech-gap-lg);
}

/* 2. 小サイズテキスト（キャプション的な文）の直後は詰める */
.single-technology :is(.l-section, .l-section > .l-container) > :where(.c-border-block.u-text-ja-sm4, .c-border-block.is-style-tech-text-sm) + * {
	margin-top: var(--tech-gap-xs);
}

/* 3. テキストの連続は詰める */
.single-technology :is(.l-section, .l-section > .l-container) > :where(.c-border-block) + :where(.c-border-block) {
	margin-top: var(--tech-gap-xs);
}

/* 4. 大見出し（h2）の前は大きく空ける */
.single-technology :is(.l-section, .l-section > .l-container) > * + :where(.c-heading.is-xlg) {
	margin-top: var(--tech-gap-2xl);
}

/* 5. 中見出し（h3）の前 */
.single-technology :is(.l-section, .l-section > .l-container) > * + :where(.c-heading.is-lg) {
	margin-top: var(--tech-gap-xl);
}

/* 6. ただしテキスト直後の中見出しは 1 段詰める */
.single-technology :is(.l-section, .l-section > .l-container) > :where(.c-border-block) + :where(.c-heading.is-lg) {
	margin-top: var(--tech-gap-lg);
}

/* 7. CTA ボタンセットの前は大きく空ける */
.single-technology :is(.l-section, .l-section > .l-container) > * + :where(.c-buttons-block) {
	margin-top: var(--tech-gap-2xl);
}

/* 8. 大見出し（h2）の直後 */
.single-technology :is(.l-section, .l-section > .l-container) > :where(.c-heading.is-xlg) + * {
	margin-top: var(--tech-gap-md);
}

/* 9. 中見出し（h3）の直後 */
.single-technology :is(.l-section, .l-section > .l-container) > :where(.c-heading.is-lg) + * {
	margin-top: var(--tech-gap-sm);
}

/* 10. 小見出し（h4）の直後 */
.single-technology :is(.l-section, .l-section > .l-container) > :where(.c-heading.is-md, .c-heading.is-sm) + * {
	margin-top: var(--tech-gap-xs);
}

/*
 * 11. 余白スペーサーの前後のマージンは 0
 *
 * スペーサー自身の padding-top（ブロックで選んだサイズ）が
 * そのまま前後のコンテンツの間隔になるようにする。
 */
.single-technology :is(.l-section, .l-section > .l-container) > * + :where(.c-border-spacer),
.single-technology :is(.l-section, .l-section > .l-container) > :where(.c-border-spacer) + * {
	margin-top: 0;
}

/* ========================================
   コアブロック（【技術・事業】セクション囲み直下）
   ======================================== */

/*
 * 枠（c-border-block）はフロントでは render_block で自動付与されるため
 * ここでは扱わない。文字サイズだけをブロックスタイルで切り替える。
 * フロント・編集画面のどちらでも同じクラスが付くので 1 か所で定義できる。
 */
.is-style-tech-text-sm {
	font-size: var(--font-ja-size-text-sm4);
}

/* 編集画面では c-border-block が付かないため、見た目だけを再現する */
#growp-editor-wrapper.growp-post-content [data-type="acf/technology-section"] p[data-type="core/paragraph"],
#growp-editor-wrapper.growp-post-content [data-type="acf/technology-section"] ul[data-type="core/list"],
#growp-editor-wrapper.growp-post-content [data-type="acf/technology-section"] ol[data-type="core/list"] {
	border-block: 1px solid var(--color-gray-100);
	padding-block: 8px;
}

/* 編集画面のリストにもフロントと同じアイコン付きの見た目を出す */
#growp-editor-wrapper.growp-post-content [data-type="acf/technology-section"] ul[data-type="core/list"] {
	list-style: none;
	padding-left: 0;
}

/*
 * 見出し: フロントでは render_block で c-heading + サイズクラスが付く。
 * 編集画面では付かないため、見出しレベルごとに見た目を再現する。
 */
#growp-editor-wrapper.growp-post-content [data-type="acf/technology-section"] :where(h2, h3, h4, h5)[data-type="core/heading"] {
	font-weight: 700;
	line-height: 1.6;
	border-block: 1px solid var(--color-gray-100);
	margin: 0;
}

#growp-editor-wrapper.growp-post-content [data-type="acf/technology-section"] h2[data-type="core/heading"] {
	font-size: var(--font-ja-size-title-xl);
}

#growp-editor-wrapper.growp-post-content [data-type="acf/technology-section"] h3[data-type="core/heading"] {
	font-size: var(--font-ja-size-title-lg);
	display: grid;
	grid-template-columns: 3px auto 1fr;
	align-items: center;
	gap: 12px;
}

#growp-editor-wrapper.growp-post-content [data-type="acf/technology-section"] h3[data-type="core/heading"]::before {
	content: "";
	display: block;
	width: 3px;
	height: 100%;
	background-color: currentColor;
}

#growp-editor-wrapper.growp-post-content [data-type="acf/technology-section"] h4[data-type="core/heading"] {
	font-size: var(--font-ja-size-title-md);
	padding-block: 4px;
}

#growp-editor-wrapper.growp-post-content [data-type="acf/technology-section"] h5[data-type="core/heading"] {
	font-size: var(--font-ja-size-title-sm);
	padding-block: 4px;
	border-bottom: none;
}

/*
 * 見出しのラベル（バッジ）プレビュー
 * 文言は JS が --tech-heading-label に流し込む
 */
#growp-editor-wrapper.growp-post-content [data-type="core/heading"][style*="--tech-heading-label"]::after {
	content: var(--tech-heading-label);
	justify-self: start;
	display: inline-block;
	width: fit-content;
	margin-left: 12px;
	padding: 4px 8px;
	border: 1px solid var(--color-black);
	border-radius: 2px;
	background-color: var(--color-black);
	color: var(--color-white);
	font-size: var(--font-ja-size-title-3xs);
	font-weight: 700;
	line-height: 1.6;
	vertical-align: middle;
}

#growp-editor-wrapper.growp-post-content h3[data-type="core/heading"][style*="--tech-heading-label"]::after {
	margin-left: 0;
}

/* ========================================
   ブロックエディタ: 同一パターンをブロックラッパーに適用
   ======================================== */

/* ブロック内部の余白はラッパー側で管理するため打ち消す */
#growp-editor-wrapper.growp-post-content [data-type^="acf/technology-"] .acf-block-preview > * {
	margin-block: 0 !important;
}

/*
 * 以下の :where() リストは要素の役割を表す。
 *   ALL     … 技術・事業の ACF ブロック + コアの段落 / リスト / 表
 *   TEXT    … そのうち枠付きテキストになるもの（ACFは c-border-block を持つ／コア段落・リスト）
 *   TEXT-SM … 小サイズテキスト
 */

/* 1. 既定 */
#growp-editor-wrapper.growp-post-content :where([data-type^="acf/technology-"], [data-type="core/paragraph"], [data-type="core/list"], [data-type="core/table"], [data-type="core/heading"]) + :where([data-type^="acf/technology-"], [data-type="core/paragraph"], [data-type="core/list"], [data-type="core/table"], [data-type="core/heading"]) {
	margin-top: var(--tech-gap-lg);
}

/* 2. 小サイズテキストの直後 */
#growp-editor-wrapper.growp-post-content :where([data-type="acf/technology-border-block"]:has(.c-border-block.u-text-ja-sm4), [data-type="core/paragraph"].is-style-tech-text-sm) + :where([data-type^="acf/technology-"], [data-type="core/paragraph"], [data-type="core/list"], [data-type="core/table"], [data-type="core/heading"]) {
	margin-top: var(--tech-gap-xs);
}

/* 3. テキストの連続 */
#growp-editor-wrapper.growp-post-content :where([data-type^="acf/technology-"]:has(.c-border-block), [data-type="core/paragraph"], [data-type="core/list"]) + :where([data-type^="acf/technology-"]:has(.c-border-block), [data-type="core/paragraph"], [data-type="core/list"]) {
	margin-top: var(--tech-gap-xs);
}

/* 4. 大見出し（h2）の前 */
#growp-editor-wrapper.growp-post-content :where([data-type^="acf/technology-"], [data-type="core/paragraph"], [data-type="core/list"], [data-type="core/table"], [data-type="core/heading"]) + :where([data-type="acf/technology-heading"]:has(.c-heading.is-xlg), h2[data-type="core/heading"]) {
	margin-top: var(--tech-gap-2xl);
}

/* 5. 中見出し（h3）の前 */
#growp-editor-wrapper.growp-post-content :where([data-type^="acf/technology-"], [data-type="core/paragraph"], [data-type="core/list"], [data-type="core/table"], [data-type="core/heading"]) + :where([data-type="acf/technology-heading"]:has(.c-heading.is-lg), h3[data-type="core/heading"]) {
	margin-top: var(--tech-gap-xl);
}

/* 6. テキスト直後の中見出し */
#growp-editor-wrapper.growp-post-content :where([data-type^="acf/technology-"]:has(.c-border-block), [data-type="core/paragraph"], [data-type="core/list"]) + :where([data-type="acf/technology-heading"]:has(.c-heading.is-lg), h3[data-type="core/heading"]) {
	margin-top: var(--tech-gap-lg);
}

/* 7. CTA ボタンセットの前 */
#growp-editor-wrapper.growp-post-content :where([data-type^="acf/technology-"], [data-type="core/paragraph"], [data-type="core/list"], [data-type="core/table"], [data-type="core/heading"]) + :where([data-type="acf/technology-buttons-block"]) {
	margin-top: var(--tech-gap-2xl);
}

/* 8. 大見出し（h2）の直後 */
#growp-editor-wrapper.growp-post-content :where([data-type="acf/technology-heading"]:has(.c-heading.is-xlg), h2[data-type="core/heading"]) + :where([data-type^="acf/technology-"], [data-type="core/paragraph"], [data-type="core/list"], [data-type="core/table"], [data-type="core/heading"]) {
	margin-top: var(--tech-gap-md);
}

/* 9. 中見出し（h3）の直後 */
#growp-editor-wrapper.growp-post-content :where([data-type="acf/technology-heading"]:has(.c-heading.is-lg), h3[data-type="core/heading"]) + :where([data-type^="acf/technology-"], [data-type="core/paragraph"], [data-type="core/list"], [data-type="core/table"], [data-type="core/heading"]) {
	margin-top: var(--tech-gap-sm);
}

/* 10. 小見出し（h4）の直後 */
#growp-editor-wrapper.growp-post-content :where([data-type="acf/technology-heading"]:has(.c-heading.is-md), h4[data-type="core/heading"]) + :where([data-type^="acf/technology-"], [data-type="core/paragraph"], [data-type="core/list"], [data-type="core/table"], [data-type="core/heading"]),
#growp-editor-wrapper.growp-post-content :where([data-type="acf/technology-heading"]:has(.c-heading.is-sm), h5[data-type="core/heading"]) + :where([data-type^="acf/technology-"], [data-type="core/paragraph"], [data-type="core/list"], [data-type="core/table"], [data-type="core/heading"]) {
	margin-top: var(--tech-gap-xs);
}

/* 11. 余白スペーサーの前後 */
#growp-editor-wrapper.growp-post-content :where([data-type^="acf/technology-"], [data-type="core/paragraph"], [data-type="core/list"], [data-type="core/table"], [data-type="core/heading"]) + :where([data-type="acf/technology-border-spacer"]),
#growp-editor-wrapper.growp-post-content :where([data-type="acf/technology-border-spacer"]) + :where([data-type^="acf/technology-"], [data-type="core/paragraph"], [data-type="core/list"], [data-type="core/table"], [data-type="core/heading"]) {
	margin-top: 0;
}

/*
 * 余白スペーサーは中身が空で編集画面では掴めないため、
 * プレビューにだけ確保している余白が見えるガイドを表示する
 */
#growp-editor-wrapper.growp-post-content [data-type="acf/technology-border-spacer"] .c-border-spacer {
	background-image: repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.06) 0 6px, transparent 6px 12px);
	outline: 1px dashed rgba(0, 0, 0, 0.15);
	outline-offset: -1px;
}