/**
 * Shared article body media — scoped to `.content-body`.
 * Covers: centered images, video max-height on small screens,
 * wide-diagram horizontal scroll on small screens.
 */

.content-body {
	--article-gutter: var(--wp--style--root--padding-left, 20px);
}

/* -------------------------------------------------------------------------- */
/* 1. Default center images (respect explicit alignments)                    */
/* -------------------------------------------------------------------------- */

/*
 * Default (landscape etc.): center the image; figure stays content-width so
 * full-width photos keep captions aligned to the content column.
 * Portrait uses a photo-driven shrink-wrap below (not display:table).
 */
.content-body .wp-block-image:not(.alignleft):not(.alignright):not(.alignwide):not(.alignfull):not(.is-wide-diagram):not(.is-portrait) {
	text-align: center;
}

.content-body .wp-block-image:not(.alignleft):not(.alignright):not(.alignwide):not(.alignfull):not(.is-wide-diagram):not(.is-portrait) img {
	display: block;
	margin-inline: auto;
	max-width: 100%;
	height: auto;
}

.content-body .wp-block-image:not(.alignleft):not(.alignright):not(.alignwide):not(.alignfull):not(.is-wide-diagram):not(.is-portrait) figcaption {
	text-align: start;
}

/*
 * Portrait: photo-driven shrink-wrap + center.
 * `display:table; width:1px` grows to the image width; long captions wrap
 * inside that box and cannot widen or re-center the figure.
 * Image max-width uses the content/viewport size (not 100% of the 1px table).
 */
.content-body .wp-block-image.is-portrait:not(.alignleft):not(.alignright):not(.alignwide):not(.alignfull):not(.is-wide-diagram) {
	display: table;
	width: 1px;
	margin-left: auto;
	margin-right: auto;
}

.content-body .wp-block-image.is-portrait:not(.alignleft):not(.alignright):not(.alignwide):not(.alignfull):not(.is-wide-diagram) img {
	display: block;
	width: auto;
	height: auto;
	margin-inline: 0;
	max-width: min(
		var(--wp--style--global--content-size, 760px),
		calc(100vw - (2 * var(--article-gutter, 20px)))
	);
}

.content-body .wp-block-image.is-portrait:not(.alignleft):not(.alignright):not(.alignwide):not(.alignfull):not(.is-wide-diagram) figcaption {
	display: table-caption;
	caption-side: bottom;
	text-align: start;
	overflow-wrap: break-word;
}

/* Portrait body images — cap height on desktop/tablet only */
@media (min-width: 601px) {
	.content-body .wp-block-image.is-portrait:not(.alignleft):not(.alignright):not(.alignwide):not(.alignfull):not(.is-wide-diagram) img {
		max-height: 820px;
	}
}

/* -------------------------------------------------------------------------- */
/* 2. Video — keep source aspect ratio; cap height for portrait only         */
/* -------------------------------------------------------------------------- */

.content-body .wp-block-video {
	text-align: center;
}

.content-body .wp-block-video video {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	margin-inline: auto;
}

/* Portrait (9:16 etc.): limit height so the full frame fits on notebook screens */
.content-body .wp-block-video.is-portrait video {
	max-height: 75vh;
	object-fit: contain; /* never crop; box already matches source ratio */
}

@media (max-width: 600px) {
	.content-body .wp-block-video.is-portrait video {
		max-height: 70vh;
	}
}

/* -------------------------------------------------------------------------- */
/* 3. Wide diagrams — mobile horizontal scroll (class: is-wide-diagram)       */
/* -------------------------------------------------------------------------- */

@media (max-width: 600px) {
	/*
	 * Figure stays in the content column so figcaption matches body width.
	 * Only the scroll wrapper breaks out to the viewport edges.
	 * Gutters live inside the scroll track as padding (move while swiping).
	 */
	.content-body .wp-block-image.is-wide-diagram {
		width: 100%;
		max-width: 100%;
		text-align: start;
	}

	.content-body .wp-block-image.is-wide-diagram .is-wide-diagram__scroll {
		width: 100vw;
		max-width: 100vw;
		margin-left: calc(50% - 50vw);
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
		scrollbar-width: thin;
		padding-left: var(--article-gutter);
		padding-right: var(--article-gutter);
		box-sizing: border-box;
	}

	.content-body .wp-block-image.is-wide-diagram .is-wide-diagram__scroll img {
		display: block;
		width: auto;
		max-width: 1024px; /* sizeSlug large 相当。原寸以上の拡大を避ける */
		min-width: 720px;
		height: auto;
	}

	/* Caption: content column only — not full-bleed, not in the scroll track */
	.content-body .wp-block-image.is-wide-diagram > figcaption {
		display: block;
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
		margin-left: 0;
		margin-right: 0;
		padding-left: 0;
		padding-right: 0;
		text-align: start;
	}
}

/* Desktop / tablet: diagrams behave like normal images (no scroll) */
@media (min-width: 601px) {
	.content-body .wp-block-image.is-wide-diagram .is-wide-diagram__scroll {
		overflow: visible;
	}

	.content-body .wp-block-image.is-wide-diagram .is-wide-diagram__scroll img {
		width: 100%;
		max-width: 100%;
		height: auto;
	}
}