/** 
 * @file _block-width.scss
 * @description ブロックの幅調整
 *
 * コンテンツ幅指定 ( is-layout-constrained / is-layout-flow 切り替え ) 非対応用CSS
 * あくまで本文欄などは外側でコンテンツ幅指定されている前提
 *
*/

/*
インナーブロックは全幅か幅広の時のみ指定
そうでないと container-padding が余分についてしまう

entry-body
	wp-block-cover
		wp-block-cover__inner-container
*/

// 1カラムの時だけ全幅や幅広を有効に指定したいが、
// モバイル時には１カラムになるので、2カラムでも一旦幅広・全幅指定する。

.alignfull,
.alignwide {
	div[class*="__inner-container"]{
		max-width: calc( var(--vk-width-container) - var(--vk-width-container-padding) * 2 );
		margin-left:auto;
		margin-right:auto;
	}
}
.alignfull:where(:not( [class*="section--base--on"] .alignfull )) {
	// & だけで全ての .alignfull にマッチするため、:is() 側は同じ宣言を詳細度 (0,2,0) で重ねる役割になっている。
	// css.md の方針どおり :where() で包んで詳細度を下げる対応は、既存レイアウトへの影響が大きいため #1383 で別途検討する。
	// .swiper-container は _g2 期のマークアップ向けの既存エントリ。Lightning の現行スライダーは
	// alignfull を持たない（class-ltg-g3-slider.php の出力は swiper / swiper-container / ltg-slide のみ）
	// ため、このリストには依存していない。
	// Swiper が v8 でリネームした現行名 .swiper は、alignfull と swiper を同一要素に持つ
	// マークアップが存在しないため入れていない。
	// もし将来そのマークアップが出た場合、必要になる理由は詳細度を上げたいからではなく、
	// vk-swiper-style が lightning-common-style より後に読み込まれ、同詳細度の
	// .swiper{margin-left:auto;margin-right:auto} がソース順で .alignfull に勝つため。
	// その場合は #1383 の :where() 化と同じ土俵（詳細度とソース順の整理）で判断する。
	&,
	&:is(
	.swiper-container,
	.vk_slider,
	.wp-block-image,
	.wp-block-cover-image,
	.wp-block-cover
	) {
		width:auto; /* Don't use 100svw!! cope with windows */
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		max-width: var(--vk-width-full);
	}
}
.alignwide:where(:not( [class*="section--base--on"] .alignwide )) {
	&,
	&:is(
	.vk_slider,
	.wp-block-image,
	.wp-block-cover-image,
	.wp-block-cover
	) {
		// --vk-width-container != 100% なので注意
		// Lightningの幅広 = コンテナの「表示エリア（100%）	」 + 左右余白分の丁度半分
		width: calc( 100% + ( var(--vk-width-full) - 100% ) / 2 );
		margin-left: calc( ( 100% - var(--vk-width-full) ) / 4 );
		margin-right: calc( ( 100% - var(--vk-width-full) ) / 4 );
		max-width: var(--vk-width-full);
	}
}
// 通常サイズの中に幅広対策
:where(:is(.wp-block-cover,.wp-block-group):not(.alignfull,.alignwide)),
// 全幅カバーの中に幅広ブロックを入れた時に、コアのCSSに
// body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
//     max-width: var(--wp--style--global--content-size);
//     margin-left: auto !important;
//     margin-right: auto !important;
// }
// を入れられて幅広にならないので打ち消し処理
body :where(.alignfull,.alignwide):where(:not(.vk_outer-paddingLR-zero)) {
	& > .is-layout-constrained > .alignwide:where(:not( [class*="section--base--on"] .alignwide )) {
		margin-left: calc( ( 100% - var(--vk-width-full) ) / 4 ) !important;
		margin-right: calc( ( 100% - var(--vk-width-full) ) / 4 ) !important;
	}
	& > .is-layout-constrained > .alignfull:where(:not( [class*="section--base--on"] .alignfull )) {
		margin-left: calc( ( 100% - var(--vk-width-full) ) / 2 ) !important;
		margin-right: calc( ( 100% - var(--vk-width-full) ) / 2 ) !important;
	}
}
// body がないと ↑ に負ける（↑もbodyがないとコアに負ける）
@media ( $md-max < width ) { // モバイル１カラムでは2カラムにならないので、２カラム時のみ制御（モバイルでは全幅/幅広が効く）
body .main-section--col--two,
body .sub-section--col--two {
	.alignfull:where(:not( [class*="section--base--on"] .alignfull ) ),
	.alignwide:where(:not( [class*="section--base--on"] .alignwide ) ) {
		--wp--style--global--wide-size:100%;
		--wp--style--global--full-size:100%;
		max-width: 100%;
		margin-left:0 !important;
		margin-right:0 !important;
		&.wp-block-image {
			// Default block style overwrite
			max-width: 100%;
		}
	}
	.vk_outer-width-full.vk_outer-paddingLR-none {
		padding-left:0;
		padding-right:0;
	}
}
}