/* ===========================================================
   Object / Project / STEP（P-12 / P-12b）
   pattern-step-with-image / pattern-step-flow 共通スタイル。
   ・カード本体は is-style-bordered を流用（白背景＋navy-300枠＋角丸16px）
   ・見出し先頭の「1. 」「STEP 1｜」だけピンクに着色
   ・STEP間の下向きピンク点線矢印（icon-arrow-under.svg）はセンタリング
   ・画像サイズ: PC 400×240（最大）/ SP 全幅×200px
   ・画像有無の混在に対応: 画像が無いカードは本文を全幅に拡張
     （:has() を使用、CLAUDE.md の対応ブラウザ＝最新Chrome/Safari/Edge/Firefox
       および iOS Safari/Android Chrome は :has() を全てサポート）
   =========================================================== */

/* カード本体 */
.p-step-card {
	width: 100%;
}

/* カード内の2カラム間 gap（画像ありSTEP用） */
.p-step-card__cols.wp-block-columns {
	gap: 16px;
}

@media (min-width: 768px) {
	.p-step-card__cols.wp-block-columns {
		gap: 32px;
	}
}

/* ===========================================================
   画像列のサイズと位置（画像ありSTEPの既定値）
   PC では画像列は固定幅 400px、本文列が残りを占有。

   ※ WP 標準の .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column
      （詳細度 0,3,0）を確実に上書きするため、詳細度 0,4,0 で書く。
      （image-text と同じ問題。!important は使わない）
   ※ 「>」（直下子結合子）は使わず子孫セレクタにする。
      .p-step-card は core/group のため WP コアが wp-block-group__inner-container
      ラッパーを挟む可能性があり、「>」では貫通できないため。
      （columns 自体は wrapper を挟まないが、安全側に倒して子孫で書く）
   =========================================================== */

@media (min-width: 768px) {
	.p-step-card__cols.wp-block-columns .wp-block-column.p-step-card__media {
		flex: 0 0 400px;
		max-width: 400px;
	}

	.p-step-card__cols.wp-block-columns .wp-block-column.p-step-card__body {
		flex: 1 1 auto;
		min-width: 0;
	}
}

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

@media (min-width: 768px) {
	.p-step-card__cols.wp-block-columns .wp-block-column.p-step-card__media {
		order: 2;
	}

	.p-step-card__cols.wp-block-columns .wp-block-column.p-step-card__body {
		order: 1;
	}
}

/* 画像本体 */
.p-step-card .p-step-card__image {
	margin: 0;
}

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

@media (min-width: 768px) {
	.p-step-card .p-step-card__image img {
		width: 400px;
		max-width: 100%;
		height: 240px;
	}
}

/* ===========================================================
   画像が削除されたカードのフォールバック
   ・編集者が core/image を削除しても media 列の wrapper は残ることがある。
     その場合 media 列を非表示にし、body 列を全幅化する。
   ・SP/PC 共通で適用。
   =========================================================== */

.p-step-card__cols:not(:has(.p-step-card__media .wp-block-image)) .p-step-card__media {
	display: none;
}

.p-step-card__cols:not(:has(.p-step-card__media .wp-block-image)) .p-step-card__body {
	flex: 1 1 100%;
	max-width: 100%;
}

/* ===========================================================
   見出し
   =========================================================== */

.p-step-card__heading {
	margin: 0;
	color: var(--color-text);
	font-size: 18px;
	font-weight: 700;
	line-height: var(--lh-tight);
}

@media (min-width: 768px) {
	.p-step-card__heading {
		font-size: 20px;
	}
}

/* 番号プレフィックス（pink-500） */
.p-step-card__num {
	color: var(--color-pink-500);
	font-weight: 700;
}

/* ===========================================================
   見出し直後の本文を少し離す
   ・画像あり(pattern-step-with-image) と 画像なし(pattern-step-flow) の
     どちらも H3 に同じ className `p-step-card__heading` を付けているため、
     1ルールで両パターン共通に効かせられる。
   ・隣接兄弟セレクタ `+ *` を使うので、直後の本文（段落・ボタン・他ブロック）
     何が来てもマージンが乗る。
   ・SP 12px / PC 16px。!important は使用しない。
   =========================================================== */

.p-step-card__heading + * {
	margin-top: 12px;
}

@media (min-width: 768px) {
	.p-step-card__heading + * {
		margin-top: 16px;
	}
}

/* ===========================================================
   STEP 間の下向き矢印
   ・矢印は「カードとカードの間」だけに表示される。
     末尾（直後に .p-step-card が来ない）の矢印は :has() で非表示。
   ・カード数 3/4/5… と増減しても :has() で自動制御するため、
     :nth-child 等の個数依存ルールは使わない。
   =========================================================== */

.p-step-arrow {
	margin: 0;
	text-align: center;
}

.p-step-arrow img {
	display: inline-block;
	width: 15px;
	height: auto;
}

/* 直後に .p-step-card が無い矢印は非表示（末尾の取り残し対策） */
.l-page__inner .p-step-arrow:not(:has(+ .p-step-card)) {
	display: none;
}

/* .l-page__inner 配下では矢印前後を詰める（縦リズム上書き）
   PC/SP 共通で margin-top: -6px。矢印が前カードに少し食い込むよう
   見える詰めの量。 */
.l-page__inner .p-step-arrow {
	margin-top: -6px;
}

.l-page__inner .p-step-arrow + .p-step-card {
	margin-top: -6px;
}