/**
 * AOSE WordPress
 * aose-layout.css
 *
 * AOSE 共通レイアウト
 * 対象：aose.jp / SWELL CHILD
 *
 * 役割：
 * - Wide / Content / Narrow の3幅
 * - PC / Tablet / SP ガター
 * - Section余白
 * - 共通Grid
 * - 写真＋文章等の共通Split
 * - 横幅超過を防ぐ基本処理
 *
 * 注意：
 * - Typographyは aose-typography.css
 * - HERO / Card / CTA等は aose-components.css
 * - ページ種別固有配置は
 *   aose-home.css / aose-parent.css / aose-child.css
 * - SWELL固有調整は aose-swell.css
 *
 * Based on:
 * 青清 AOSE WordPress再構築 全体設計仕様書 v1.0
 */


/* =========================================================
   1. LAYOUT VARIABLES
   ========================================================= */

.aose-page {

	/*
	 * Mobile First
	 */
	--aose-layout-gutter: var(--aose-gutter);

	/*
	 * 通常Sectionの基本値
	 * SP 64px
	 */
	--aose-layout-section-space: var(--aose-section-space-sp);

	/*
	 * Grid gap
	 */
	--aose-layout-grid-gap: var(--aose-space-3);
}


/* =========================================================
   2. COMMON CONTAINER
   ========================================================= */

/*
 * AOSEの基本Container。
 *
 * 通常はModifierと組み合わせて使用する。
 *
 * .aose-container--wide
 * .aose-container--content
 * .aose-container--narrow
 */
.aose-container {
	width: calc(100% - (var(--aose-layout-gutter) * 2));
	margin-inline: auto;
}


/*
 * Wide
 * 最大 1200px
 *
 * 用途：
 * - 大型画像
 * - カード一覧
 * - 関連記事
 * - 共通下部
 * - 広いレイアウト
 */
.aose-container--wide {
	max-width: var(--aose-width-wide);
}


/*
 * Content
 * 最大 800px
 *
 * 用途：
 * - 通常本文
 * - 導入
 * - レシピ本文
 * - 情報本文
 */
.aose-container--content {
	max-width: var(--aose-width-content);
}


/*
 * Narrow
 * 最大 680px
 *
 * 用途：
 * - 長い読みもの
 * - Story本文
 * - 読ませる文章
 */
.aose-container--narrow {
	max-width: var(--aose-width-narrow);
}


/* =========================================================
   3. WIDTH UTILITIES
   ========================================================= */

/*
 * WordPress Block等で
 * Containerそのものを追加しにくい場合の幅指定用。
 *
 * 外側ガターは親Container側で管理する。
 */
.aose-width-wide {
	width: 100%;
	max-width: var(--aose-width-wide);
	margin-inline: auto;
}

.aose-width-content {
	width: 100%;
	max-width: var(--aose-width-content);
	margin-inline: auto;
}

.aose-width-narrow {
	width: 100%;
	max-width: var(--aose-width-narrow);
	margin-inline: auto;
}


/* =========================================================
   4. SECTION
   ========================================================= */

/*
 * AOSE主要Sectionの基本。
 *
 * SP：64px
 * PC：80pxを基本
 *
 * 内容密度やStory等はModifierで変更する。
 */
.aose-section {
	position: relative;
	padding-block: var(--aose-layout-section-space);
}


/*
 * 情報密度が高いSection。
 *
 * 例：
 * - How-to
 * - 営業情報
 * - FAQ周辺
 * - 子ページB / C
 */
.aose-section--dense {
	padding-block: var(--aose-space-7);
}


/*
 * 広めに見せたいSection。
 *
 * PCでは96pxを使用する。
 */
.aose-section--large {
	padding-block: var(--aose-space-8);
}


/*
 * 同じ背景色のSectionを連続させる場合など、
 * 上下余白が二重に見えるケースで使用する。
 *
 * 自動判定はせず、
 * 意図して連続させる場合だけ指定する。
 */
.aose-section--continue {
	padding-block-start: 0;
}


/*
 * 上側だけ余白をなくす。
 */
.aose-section--no-top {
	padding-block-start: 0;
}


/*
 * 下側だけ余白をなくす。
 */
.aose-section--no-bottom {
	padding-block-end: 0;
}


/*
 * 上下とも余白をなくす。
 */
.aose-section--flush {
	padding-block: 0;
}


/* =========================================================
   5. BACKGROUND SECTIONS
   ========================================================= */

/*
 * 背景色の意味を統一する。
 *
 * ページごとに直接 #xxxxxx を追加しない。
 */
.aose-bg-white {
	background-color: var(--aose-color-white);
}

.aose-bg-soft {
	background-color: var(--aose-color-koji-white);
}

.aose-bg-beige {
	background-color: var(--aose-color-koji-beige);
}


/* =========================================================
   6. COMMON GRID
   ========================================================= */

/*
 * Gridの共通土台。
 */
.aose-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--aose-layout-grid-gap);
}


/*
 * Grid内部の要素が
 * 長い文字列や画像によって
 * 横幅を押し広げることを防ぐ。
 */
.aose-grid > * {
	min-width: 0;
}


/* ---------------------------------------------------------
   6-1. 2 Columns
   --------------------------------------------------------- */

/*
 * SP：1列
 * Tablet以上：2列
 */
.aose-grid--2 {
	grid-template-columns: minmax(0, 1fr);
}


/* ---------------------------------------------------------
   6-2. 3 Columns
   --------------------------------------------------------- */

/*
 * SP：1列
 * Tablet：2列
 * PC：3列
 */
.aose-grid--3 {
	grid-template-columns: minmax(0, 1fr);
}


/* ---------------------------------------------------------
   6-3. 4 Columns
   --------------------------------------------------------- */

/*
 * SP：1列
 * Tablet：2列
 * PC：4列
 *
 * WordPress編集カード等で必要な場合のみ使用。
 */
.aose-grid--4 {
	grid-template-columns: minmax(0, 1fr);
}


/* =========================================================
   7. GRID GAP UTILITIES
   ========================================================= */

.aose-grid--gap-sm {
	gap: var(--aose-space-2);
}

.aose-grid--gap-md {
	gap: var(--aose-space-3);
}

.aose-grid--gap-lg {
	gap: var(--aose-space-4);
}


/* =========================================================
   8. SPLIT LAYOUT
   ========================================================= */

/*
 * 写真＋文章などの共通2分割。
 *
 * SP：縦積み
 * Tablet以上：2列
 */
.aose-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--aose-space-4);
	align-items: center;
}


/*
 * Split内部の横幅超過防止。
 */
.aose-split > * {
	min-width: 0;
}


/*
 * 上揃えが必要な場合。
 */
.aose-split--start {
	align-items: start;
}


/*
 * 下揃えが必要な場合。
 */
.aose-split--end {
	align-items: end;
}


/* =========================================================
   9. FLEX / CLUSTER
   ========================================================= */

/*
 * ボタン群・タグ群・小さなUI群など、
 * 横並び＋折返しが必要な場所の共通土台。
 */
.aose-cluster {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--aose-space-2);
}


/*
 * 中央寄せ。
 */
.aose-cluster--center {
	justify-content: center;
}


/*
 * 両端配置。
 */
.aose-cluster--between {
	justify-content: space-between;
}


/* =========================================================
   10. STACK
   ========================================================= */

/*
 * 縦方向の要素間隔を一定にしたい場合。
 *
 * Typography側の見出し余白とは別に、
 * UIや小さなContent群で使用する。
 */
.aose-stack {
	display: flex;
	flex-direction: column;
	gap: var(--aose-space-3);
}

.aose-stack--sm {
	gap: var(--aose-space-2);
}

.aose-stack--lg {
	gap: var(--aose-space-4);
}


/* =========================================================
   11. MEDIA FRAME
   ========================================================= */

/*
 * 画像のレイアウト枠。
 *
 * 実際のaspect-ratioは
 * Card / HERO等のComponent側で定義する。
 */
.aose-media {
	width: 100%;
	min-width: 0;
	overflow: hidden;
}


/*
 * 枠いっぱいに画像を表示する場合。
 */
.aose-media > :where(
	img,
	picture,
	video
) {
	width: 100%;
}


/* =========================================================
   12. SAFE CHILD WIDTH
   ========================================================= */

/*
 * Flex / Grid内部の長文や画像が
 * 横幅を押し広げるのを防ぐためのUtility。
 */
.aose-min-width-0 {
	min-width: 0;
}


/* =========================================================
   13. TABLET
   768px - 1023px
   ========================================================= */

@media (min-width: 768px) {

	.aose-page {
		--aose-layout-grid-gap: var(--aose-space-3);
	}


	/* 2 Columns */
	.aose-grid--2 {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}


	/* 3 Columns → Tabletは2列 */
	.aose-grid--3 {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}


	/* 4 Columns → Tabletは2列 */
	.aose-grid--4 {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}


	/* Split */
	.aose-split {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
		gap: var(--aose-space-5);
	}

}


/* =========================================================
   14. PC
   1024px -
   ========================================================= */

@media (min-width: 1024px) {

	.aose-page {

		/*
		 * PC主要Section
		 * 80pxを共通基準とする。
		 */
		--aose-layout-section-space:
			var(--aose-section-space-pc-min);

		/*
		 * Grid gap
		 */
		--aose-layout-grid-gap:
			var(--aose-space-4);
	}


	/*
	 * Dense Section
	 * PC 64px
	 */
	.aose-section--dense {
		padding-block: var(--aose-space-8);
	}


	/*
	 * Large Section
	 * PC 96px
	 */
	.aose-section--large {
		padding-block: var(--aose-space-12);
	}


	/*
	 * Continue指定はPCでも
	 * 上余白を0のまま維持する。
	 */
	.aose-section--continue {
		padding-block-start: 0;
	}


	.aose-section--no-top {
		padding-block-start: 0;
	}


	.aose-section--no-bottom {
		padding-block-end: 0;
	}


	.aose-section--flush {
		padding-block: 0;
	}


	/* 3 Columns */
	.aose-grid--3 {
		grid-template-columns:
			repeat(3, minmax(0, 1fr));
	}


	/* 4 Columns */
	.aose-grid--4 {
		grid-template-columns:
			repeat(4, minmax(0, 1fr));
	}


	/* Split */
	.aose-split {
		gap: var(--aose-space-8);
	}

}


/* =========================================================
   15. LARGE
   1280px -
   ========================================================= */

@media (min-width: 1280px) {

	/*
	 * Large画面でも本文そのものは
	 * 1200 / 800 / 680pxを超えて拡大しない。
	 *
	 * 余白だけが広がる。
	 */

}


/* =========================================================
   16. IMPLEMENTATION RULES
   ========================================================= */

/*
 * AOSEレイアウトでは以下を原則とする。
 *
 * 1.
 * Wide / Content / Narrow のContainerを
 * 不必要に入れ子にしない。
 *
 * 2.
 * 外側ガターはContainerが担当する。
 * 内側Componentで同じガターを重複させない。
 *
 * 3.
 * Section間隔を増やすために
 * margin-top / margin-bottomをページごとに乱造しない。
 *
 * 4.
 * 同背景Sectionの連続で余白が過大になる場合は
 * .aose-section--continue 等を使用する。
 *
 * 5.
 * 横はみ出しが発生した場合、
 * overflow-x:hidden で隠さず原因を修正する。
 *
 * 6.
 * ページ固有の列数・HERO寸法・特殊配置は
 * home / parent / child 等のページ種別CSSで扱う。
 */