/* ===========================================================
   Object / Project / Image + Text パターン（P-21）
   pattern-image-text: 画像＋説明文の2カラム。
   ・PC 横並び（画像左／テキスト右）、画像はテキストに対し上下中央
   ・SP 縦積み（画像上／テキスト下）、画像はカラム全幅 × 高さ200px
   ・画像とテキストの間隔: PC 40px / SP 16px
   ・画像は角丸 16px

   ※ WP 標準の .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column
      （詳細度 0,3,0、PC で flex-basis:0; flex-grow:1）が効くと
      画像カラムが拡張してしまうため、こちらは詳細度 0,4,0 で
      確実に上書きする（!important は使わない）。
   =========================================================== */

.p-image-text.wp-block-columns {
	gap: 16px;
}

@media (min-width: 768px) {
	.p-image-text.wp-block-columns {
		gap: 40px;
		align-items: center;
	}
}

/* ===========================================================
   カラム幅（PC のみ。SP は WP デフォルトで flex-basis:100% に強制される）
   セレクタ詳細度 0,4,0 で WP コアを確実に上書き。
   ※ 「>」（直下子結合子）は使わず子孫セレクタにする。
      pattern-image-text 自体は core/columns のため inner-container は
      挟まらないが、編集者が外側に core/group を被せる等のケースに備えて
      子孫セレクタの方が堅牢。具体的な対象は
      .wp-block-column.p-image-text__media / __body の唯一キーで識別される。
   =========================================================== */

@media (min-width: 768px) {
	.p-image-text.wp-block-columns .wp-block-column.p-image-text__media {
		flex: 0 0 400px;
		max-width: 400px;
	}

	.p-image-text.wp-block-columns .wp-block-column.p-image-text__body {
		flex: 1 1 auto;
		min-width: 0;
	}
}

/* ===========================================================
   PC: 画像と本文の左右並びを反転（画像右・文字左）
   ・SP（縦積み）は変更しない（PC媒体クエリ内のみ）
   ・order で個別制御（row-reverse は align/justify の基準も反転するため避ける）
   ・core/columns は __inner-container を挟まないため、
     .wp-block-column.p-image-text__{media,body} は実際の flex item に
     直接該当する → order が確実に効く
   =========================================================== */

@media (min-width: 768px) {
	.p-image-text.wp-block-columns .wp-block-column.p-image-text__media {
		order: 2;
	}

	.p-image-text.wp-block-columns .wp-block-column.p-image-text__body {
		order: 1;
	}
}

/* ===========================================================
   画像本体
   =========================================================== */

.p-image-text .p-image-text__image {
	margin: 0;
}

.p-image-text .p-image-text__image img {
	display: block;
	width: 100%;
	height: 200px;
	object-fit: cover;
	border-radius: var(--radius-lg);
}

@media (min-width: 768px) {
	.p-image-text .p-image-text__image img {
		width: 400px;
		max-width: 100%;
		height: 240px;
	}
}