/*
 * Harashina Standard — 【詳細1】いざケロウナへ（page ID 521）専用CSS
 *
 * 2026-09-24: 旧Snow Monkey Blocks（snow-monkey-blocks/section、
 * snow-monkey-blocks/media-text×9）をWordPress標準の
 * core/group + core/columns + core/column + core/heading + core/paragraph
 * + core/image へ置き換えた際の、現在の見た目を再現するための最小限のCSS。
 * 新しいデザインは作らず、旧SMB実装の実測値（SMBプラグイン自身の
 * fallback.css内フォントスケール計算式・spacingトークンの実値）を
 * そのまま数値化して再現している。
 *
 * DOM順序は9セクションとも「画像カラム→文章カラム」で統一している
 * （PC/スマホとも同じ順序）。スマホ（1024px未満）はcore/columnsの
 * 標準スタック挙動により、この順序どおり「画像→文章」に自動的になる
 * ため、モバイル側の追加CSSは不要。PC（1024px以上）で「文章が左」に
 * すべきセクションだけ、.kelowna-row--text-left修飾クラスを付与し、
 * flexのorderプロパティで見た目だけ入れ替えている（DOM順・スマホ表示は
 * 変更しない）。
 */

/* ---- ページ全体の横幅（旧SMBの.c-container、1280px）----
 * harashina-standardの通常固定ページ幅（.entry-content、1180px）より
 * 広いため、ID521だけ.entry-contentの外側へ広げて再現する。
 * .entry-content自体はmargin:autoで画面中央に配置されているため、
 * その中央を基準に1280pxへ広げれば、画面全体としては中央のまま拡張できる
 * （viewport手前のスクロールバー等の誤差を避けるため、vwではなく
 * 親要素基準のleft:50%+transformで中央基準の拡張を行う）。
 */
.kelowna-content-width {
	max-width: 1280px;
	width: 100%;
	margin-left: 50%;
	transform: translateX(-50%);
}

/* ---- 9セクション共通のレイアウト（旧.c-row、gutter 1.6rem） ----
 * セクション間の余白（旧SMBでも実質はWordPress標準のブロック間gap
 * 相当の仕組みで作られていた）は、既にtheme.json（styles.spacing.blockGap
 * =1.5rem）でこのテーマ全体に適用されている標準の間隔をそのまま使う
 * （旧SMBの1.6remとほぼ同値のため、追加のmargin指定はしない）。 */
.kelowna-row.wp-block-columns {
	gap: 1.6rem;
}

/* 1024px未満は標準のcore/columnsスタック挙動（画像→文章の順）をそのまま使う。
   782〜1023pxの範囲だけ、標準のブレークポイント(782px)より広い1024pxまで
   スタックを維持するよう上書きする（旧SMBのdata-sm-split-point="lg"と同じ
   1024pxのブレークポイントに合わせるため）。 */
@media (max-width: 1023px) {
	.kelowna-row.wp-block-columns {
		flex-wrap: wrap !important;
	}
	.kelowna-row.wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
		flex-grow: 0;
	}

	/* 2026-09-24追記: 1024px未満でスタックした際、画像→文章（同じ項目内）の
	   間隔は基本ルールのgap:1.6remのままだと、項目間の余白（theme.jsonの
	   標準blockGap 1.5rem）とほぼ同じ大きさになり、どこまでが1つの項目か
	   分かりにくかった。同じ項目内はgapを小さく（--space-xs）、項目間は
	   このルールでmargin-bottomを追加して明確に大きく（--space-l）し、
	   「画像＋文章がひとまとまり→大きい余白→次の項目」という見え方にする。
	   画像キャプションは画像側のcore/image内部要素のため、この調整の
	   対象（画像・文章間のgap）には含まれず、常に画像側の一部として残る。
	   この@media (max-width:1023px)ブロック内のみの変更のため、
	   1024px以上のPC表示（横並び時のgap・項目間余白）には影響しない。 */
	.kelowna-row.wp-block-columns {
		gap: var(--space-xs);
		margin-bottom: var(--space-l);
		
	}
	/* キャプション下の余白をなくし、
   同一項目内の画像＋キャプション＋文章をひとまとまりにする */
	.kelowna-row .wp-block-image figcaption {
		margin-bottom: 0;
	}
	/* 見出しと本文の間隔を小さくする */
	.kelowna-row .wp-block-heading + .wp-block-paragraph {
		margin-top: var(--space-xs);
	}
}

@media (min-width: 1024px) {
	.kelowna-row.wp-block-columns {
		flex-wrap: nowrap !important;
	}
	.kelowna-row.wp-block-columns > .wp-block-column {
		flex-basis: 0;
		flex-grow: 1;
	}

	/* 「文章が左」のセクションだけ、PC幅でorderを入れ替えて見た目を反転する
	   （DOM順は画像→文章のまま。スマホのスタック順には影響しない）。 */
	.kelowna-row--text-left > .wp-block-column:first-child {
		order: 2;
	}
	.kelowna-row--text-left > .wp-block-column:last-child {
		order: 1;
	}
}

/* ---- 見出し（旧.smb-media-text__title、fluid font-size level4相当） ----
 * 見出しと本文の間隔も、上のセクション間余白と同じ理由で
 * theme.jsonの標準blockGap（1.5rem、旧SMBの1.6remとほぼ同値）に任せ、
 * 追加のmargin-bottomは指定しない。文字サイズ・行間だけを再現する。 */
.kelowna-row .wp-block-column > .wp-block-heading {
	font-size: clamp(1.8rem, 1.73rem + 0.02vw, 2rem);
	line-height: 1.433;
	margin: 0;
}

/* ---- キャプション（旧.smb-media-text__caption、level-1相当、固定値） ---- */
.kelowna-row .wp-block-image figcaption {
	font-size: 0.89rem;
	line-height: 1.6;
	margin-top: 0.5333rem;
}

/* ---- 末尾ボタン群の上余白（2026-09-24追記） ----
 * 9セクション（.kelowna-content-width）の直後にある既存のcore/buttons
 * （戻る／詳細２へ／ご利用料金について／お問い合わせへ）が本文に近すぎた
 * ため、直後の兄弟セレクタで上余白だけを追加する。post_content・
 * ボタン自体の構造は変更していない。.kelowna-content-widthはID521専用
 * クラスのため、この指定も他ページには影響しない。新しい数値は作らず、
 * 既存のspacing scale（--space-xl、clamp(3rem,7vw,4.5rem)）をそのまま
 * 使う（page-catalog-header.cssの見出しセクション上余白と同じ考え方）。
 * 下側の余白・Footerには触れない。
 */
.kelowna-content-width + .wp-block-buttons {
	margin-top: var(--space-xl);
}