/**
 * 施工事例(works)単一ページ「施工写真ギャラリー」フロント表示スタイル
 *
 * 役割:
 *  - 土台（flex・is-cropped のトリミング等）はコアの wp-block-gallery / wp-block-image を
 *    enqueue して流用する（inc/works-gallery-render.php）。
 *  - 本ファイルは「カラム数（既定ギャラリー= PC3カラム）」と「画像間の余白（gap=1.5rem）」を
 *    明示的に指定し、本文ギャラリーだった頃と完全に同じ見た目を再現する。
 *    ※ コアの columns-default ルールはセパレートアセット環境のカスケード差で適用順が不安定な
 *      ため、`.bp-works-gallery` を付与して詳細度を確保し確実に当てている。
 *
 * @package x-t9-child
 */

/* 画像間の余白（コアの既定ギャラリー gap と同じ 1.5rem） */
.bp-works-gallery {
	--wp--style--unstable-gallery-gap: 1.5rem;
}

@media ( min-width: 600px ) {
	/* 既定（columns-default）= 3カラム */
	.bp-works-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image) {
		width: calc( 33.33% - var( --wp--style--unstable-gallery-gap, 16px ) * 0.66667 );
	}

	/* 画像が2枚だけのとき = 2カラム */
	.bp-works-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image):first-child:nth-last-child(2),
	.bp-works-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image):first-child:nth-last-child(2) ~ figure.wp-block-image:not(#individual-image) {
		width: calc( 50% - var( --wp--style--unstable-gallery-gap, 16px ) * 0.5 );
	}

	/* 画像が1枚だけのとき = 全幅 */
	.bp-works-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image):first-child:last-child {
		width: 100%;
	}
}

/* アイキャッチ（タイトル直下のヒーロー画像） */
.bp-works-featured {
	margin: 0 0 1.5rem;
}

.bp-works-featured img,
.bp-works-featured .bp-works-featured__img {
	display: block;
	width: 100%;
	height: auto;
}