/**
 * No.22 セクション見出し（core/heading ブロックスタイル）。
 * - .section-title--primary = h2（Figma size=primary）
 * - .section-title--secondary = h3（Figma size=secondary）
 * - is-style-first-letter: 先頭文字を .section-title__mark で装飾
 * - is-style-numbering: 通し番号を counter + ::before で付与
 *
 * 行頭の飾りは primary / secondary の background（top left）。
 * 通し番号はページ（.wp-block-post-content / .is-root-container）単位。
 * パターン内で 1 から振り直す場合は、ラッパーに
 * .has-section-title-numbers を付ける（counter-reset）。
 */

.wp-block-post-content,
.entry-content,
.is-root-container,
.has-section-title-numbers {
	counter-reset: sumida-section-title;
}

/* container-type は style containment を持つため、親の counter-reset が届かない */
.has-section-title-numbers :is(.section-feature__track, .section-chart__track) {
	counter-reset: sumida-section-title;
}

/*
 * トラックが flex のとき、見出し側の increment は flex item をまたげない。
 * 通し番号は __item で進め、::before はそれを参照する。
 */
.has-section-title-numbers .section-chart__item {
	counter-increment: sumida-section-title;
}

.has-section-title-numbers .section-chart__item .section-title.is-style-numbering {
	counter-increment: none;
}

.section-title {
	background-repeat: no-repeat;
	background-position: top left;
	font-family: var(--wp--preset--font-family--jp-sans);
	font-weight: var(--wp--custom--font-weight--bold);
	line-height: var(--wp--custom--line-height--regular);
	color: var(--wp--preset--color--base-black);
	overflow-wrap: anywhere;
}

.section-title--primary,
.section-title--secondary {
	display: flex;
	align-items: baseline;
}

.section-title--primary {
	--section-title-mark: 9rem;
	--section-title-mark-h: 8.9375rem;
	--section-title-glyph: 4rem;
	--section-title-mark-w: 6.1rem;
	--section-title-mark-offset: 2.3rem;
	min-height: var(--section-title-mark-h);
	padding-top: 3rem;
	background-size: var(--section-title-mark) var(--section-title-mark-h);
	font-size: var(--wp--preset--font-size--heading-md);
	gap: 0.5rem;
}

.section-title--secondary {
	--section-title-mark: 5.5rem;
	--section-title-mark-h: 5.4375rem;
	--section-title-glyph: 3rem;
	--section-title-mark-w: 3.7rem;
	--section-title-mark-offset: 1.4rem;
	min-height: var(--section-title-mark-h);
	padding-top: 1.6rem;
	background-size: var(--section-title-mark) var(--section-title-mark-h);
	font-size: var(--wp--preset--font-size--heading-xs);
	gap: 0.35rem;
}

.section-title--primary.is-style-first-letter {
	background-image: url("../images/heading/first-letter-bg-yellow-primary.svg");
}

.section-title--primary.is-style-numbering {
	padding-top: 3.1rem;
	background-image: url("../images/heading/first-letter-bg-blue-primary.svg");
}

.section-title--secondary.is-style-first-letter {
	background-image: url("../images/heading/first-letter-bg-yellow-secondary.svg");
}

.section-title--secondary.is-style-numbering {
	padding-top: 1.7rem;
	background-image: url("../images/heading/first-letter-bg-blue-secondary.svg");
}

.section-title.is-style-numbering {
	counter-increment: sumida-section-title;
}

.section-title.is-style-first-letter .section-title__mark,
.section-title.is-style-first-letter:not(:has(.section-title__mark))::before,
.section-title.is-style-numbering::before {
	box-sizing: border-box;
	flex-shrink: 0;
	width: var(--section-title-mark-w);
	margin-left: var(--section-title-mark-offset);
	font-size: var(--section-title-glyph);
	text-align: center;
	font-weight: var(--wp--custom--font-weight--bold);
	line-height: 1;
	letter-spacing: 0;
}

.section-title.is-style-first-letter .section-title__mark,
.section-title.is-style-first-letter:not(:has(.section-title__mark))::before {
	color: var(--wp--preset--color--base-black);
}

.section-title.is-style-first-letter:not(:has(.section-title__mark))::before {
	content: var(--section-title-initial);
}

.section-title.is-style-numbering::before {
	content: counter(sumida-section-title);
	font-family: var(--wp--preset--font-family--en-sans);
	color: var(--wp--preset--color--base-white);
}

@media (max-width: 767px) {
	.section-title--primary {
		--section-title-mark: 4.625rem;
		--section-title-mark-h: 4.8125rem;
		--section-title-glyph: 3rem;
		--section-title-mark-w: 3.7rem;
		--section-title-mark-offset: 0.65rem;
		padding-top: 1.2rem;
		gap: 0.15rem;
	}

	.section-title--secondary {
		--section-title-mark: 3.4375rem;
		--section-title-mark-h: 3.5rem;
		--section-title-glyph: 2rem;
		--section-title-mark-w: 2.7rem;
		--section-title-mark-offset: 0.5rem;
		padding-top: 0.9rem;
		gap: 0.25rem;
	}

	.section-title--primary.is-style-first-letter {
		background-image: url("../images/heading/first-letter-bg-yellow-primary-sp.svg");
	}

	.section-title--primary.is-style-numbering {
		padding-top: 1.3rem;
		background-image: url("../images/heading/first-letter-bg-blue-primary-sp.svg");
	}

	.section-title--secondary.is-style-first-letter {
		background-image: url("../images/heading/first-letter-bg-yellow-secondary-sp.svg");
	}

	.section-title--secondary.is-style-numbering {
		padding-top: 1rem;
		background-image: url("../images/heading/first-letter-bg-blue-secondary-sp.svg");
	}

	.section-title.is-style-first-letter .section-title__mark,
	.section-title.is-style-first-letter:not(:has(.section-title__mark))::before,
	.section-title.is-style-numbering::before {
		line-height: var(--wp--custom--line-height--none);
	}
}