/**
 * css/foundation/layout.css
 * ============================================================
 * A LEGEND 2：Layout
 * ============================================================
 *
 * 役割：
 * - 共通コンテナ、セクション、基本グリッドを定義します。
 *
 * 今回の改修：
 * - design.layout.max_width / wide_width / page_side / section_y / section_y_sm を
 *   tokens.css 経由で全ページ共通レイアウトへ反映します。
 * - 既存の .aleg2-container / .aleg2-section / .aleg2-grid / .aleg2-split は維持します。
 * - TOP / archive / single / page / contact など、ページ側CSSが個別に幅や余白を
 *   固定値で持たなくてもよいよう、foundation層の基準を強化します。
 * - スマホ時のsection余白も固定値ではなく、共通tokenを基準にしたclampへ寄せます。
 */

/* ------------------------------------------------------------
 * Containers
 * ------------------------------------------------------------
 *
 * 目的：
 * - 各ページで共通して使う横幅制御です。
 * - design.layout.max_width は --aleg2-container-lg / --aleg2-container-max へ接続されます。
 * - design.layout.wide_width は --aleg2-container-xl / --aleg2-container-wide へ接続されます。
 * - design.layout.page_side は --aleg2-container-padding へ接続されます。
 *
 * 注意：
 * - width: min(...) の構造は維持します。
 * - ページごとの直接px指定を避け、Design Token経由で幅と左右余白を統一します。
 */

.aleg2-container {
	width: min(100% - (var(--aleg2-container-padding) * 2), var(--aleg2-container-lg));
	margin-inline: auto;
}

/**
 * 小さめコンテナ。
 *
 * 記事本文や狭めの説明ブロックで使います。
 * sm自体は固定tokenとして維持しつつ、左右余白はDesign設定に追従します。
 */
.aleg2-container--sm {
	width: min(100% - (var(--aleg2-container-padding) * 2), var(--aleg2-container-sm));
	margin-inline: auto;
}

/**
 * 中間幅コンテナ。
 *
 * archive header / single header などで使いやすい幅です。
 */
.aleg2-container--md {
	width: min(100% - (var(--aleg2-container-padding) * 2), var(--aleg2-container-md));
	margin-inline: auto;
}

/**
 * 広幅コンテナ。
 *
 * TOP Hero / Gallery / Application など、横幅を広く使うセクションで利用します。
 * design.layout.wide_width に追従します。
 */
.aleg2-container--xl {
	width: min(100% - (var(--aleg2-container-padding) * 2), var(--aleg2-container-xl));
	margin-inline: auto;
}

/**
 * 明示的な通常最大幅コンテナ。
 *
 * 既存 .aleg2-container と同等ですが、今後CSS側で「通常最大幅」を明示したい場合に使えます。
 * 既存HTMLへ影響しない追加クラスです。
 */
.aleg2-container--max {
	width: min(100% - (var(--aleg2-container-padding) * 2), var(--aleg2-container-max));
	margin-inline: auto;
}

/**
 * 明示的な広幅コンテナ。
 *
 * .aleg2-container--xl と同じ意味ですが、Design Token名に合わせた補助クラスです。
 */
.aleg2-container--wide {
	width: min(100% - (var(--aleg2-container-padding) * 2), var(--aleg2-container-wide));
	margin-inline: auto;
}

/* ------------------------------------------------------------
 * Sections
 * ------------------------------------------------------------
 *
 * 目的：
 * - 全ページ共通のsection上下余白を定義します。
 * - design.layout.section_y / section_y_sm を反映します。
 *
 * 注意：
 * - 背景や装飾の具体表現はページCSS側へ残します。
 * - ここではsectionの基礎余白とレイヤーだけを扱います。
 */

.aleg2-section {
	position: relative;
	padding-block: var(--aleg2-section-padding-y);
}

/**
 * コンパクトsection。
 *
 * 関連記事、補助ブロック、CTAなどに使います。
 */
.aleg2-section--compact {
	padding-block: var(--aleg2-section-padding-y-sm);
}

/**
 * section背景装飾用の下地。
 *
 * 既存構造を維持します。
 * 各ページCSSで .aleg2-section::before を使う場合に備え、
 * pointer-events: none と z-index を維持します。
 */
.aleg2-section::before {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	content: "";
}

/**
 * section内の先頭・末尾余白を抑えたい場合の補助クラスです。
 * 既存クラスには影響しない追加クラスです。
 */
.aleg2-section--flush-top {
	padding-top: 0;
}

.aleg2-section--flush-bottom {
	padding-bottom: 0;
}

/* ------------------------------------------------------------
 * Grids
 * ------------------------------------------------------------
 *
 * 目的：
 * - 共通カード一覧やセクション内レイアウトで使う基本グリッドです。
 * - gapは既存の spacing token を維持します。
 */

.aleg2-grid {
	display: grid;
	gap: var(--aleg2-space-6);
}

.aleg2-grid--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.aleg2-grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.aleg2-grid--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

/**
 * gap違いの補助クラス。
 *
 * 既存 .aleg2-grid の挙動を変えず、必要な場面だけ調整できるようにします。
 */
.aleg2-grid--gap-sm {
	gap: var(--aleg2-space-4);
}

.aleg2-grid--gap-lg {
	gap: var(--aleg2-space-8);
}

.aleg2-grid--gap-xl {
	gap: var(--aleg2-space-10);
}

/* ------------------------------------------------------------
 * Stack
 * ------------------------------------------------------------
 *
 * 縦方向に要素を積む基本ユーティリティです。
 * 既存挙動を維持します。
 */

.aleg2-stack > * + * {
	margin-top: var(--aleg2-space-6);
}

/**
 * stack間隔違いの補助クラス。
 *
 * 既存 .aleg2-stack へ影響しない追加です。
 */
.aleg2-stack--sm > * + * {
	margin-top: var(--aleg2-space-4);
}

.aleg2-stack--lg > * + * {
	margin-top: var(--aleg2-space-8);
}

/* ------------------------------------------------------------
 * Cluster
 * ------------------------------------------------------------
 *
 * タグ・ボタン・metaなどを横並びで折り返す基本ユーティリティです。
 * 既存挙動を維持します。
 */

.aleg2-cluster {
	display: flex;
	flex-wrap: wrap;
	gap: var(--aleg2-space-3);
	align-items: center;
}

/**
 * clusterの整列補助です。
 * 既存 .aleg2-cluster へ影響しない追加クラスです。
 */
.aleg2-cluster--between {
	justify-content: space-between;
}

.aleg2-cluster--center {
	justify-content: center;
}

.aleg2-cluster--end {
	justify-content: flex-end;
}

/* ------------------------------------------------------------
 * Split layout
 * ------------------------------------------------------------
 *
 * 目的：
 * - テキスト + メディア、説明 + カードなどの2カラム基礎です。
 * - gapは固定pxではなくclampを維持し、レスポンシブ性を保ちます。
 */

.aleg2-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
	gap: clamp(32px, 6vw, 96px);
	align-items: center;
}

/**
 * splitの左右比率違い。
 *
 * 既存 .aleg2-split は維持し、必要な場面だけ補助クラスで変えます。
 */
.aleg2-split--reverse {
	grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1fr);
}

.aleg2-split--equal {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.aleg2-split--wide-media {
	grid-template-columns: minmax(0, 0.82fr) minmax(360px, 1.18fr);
}

/* ------------------------------------------------------------
 * Panels
 * ------------------------------------------------------------
 *
 * 共通パネルの基礎クラスです。
 * 既存HTMLへ影響しない追加ですが、今後Contact / Archive filter / Adult Gateなどを
 * 共通Design Tokenへ寄せる時の受け皿になります。
 */

.aleg2-panel {
	position: relative;
	color: var(--aleg2-color-text);
	background: var(--aleg2-glass-bg);
	border: 1px solid var(--aleg2-color-border);
	border-radius: var(--aleg2-radius-panel);
	box-shadow: var(--aleg2-shadow-panel);
	backdrop-filter: var(--aleg2-backdrop-glass);
}

.aleg2-panel--soft {
	background: var(--aleg2-color-surface);
	box-shadow: var(--aleg2-shadow-soft);
}

.aleg2-panel--strong {
	background: var(--aleg2-glass-bg-strong);
	border-color: var(--aleg2-color-border-strong);
}

/* ------------------------------------------------------------
 * Media helpers
 * ------------------------------------------------------------
 *
 * 共通メディア枠です。
 * radius.media を全体で使いやすくするための補助クラスです。
 */

.aleg2-media {
	display: block;
	overflow: hidden;
	border-radius: var(--aleg2-radius-media);
}

.aleg2-media img,
.aleg2-media video,
.aleg2-media iframe {
	display: block;
	width: 100%;
	height: auto;
	border-radius: inherit;
}

/* ------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------
 *
 * 既存ブレークポイントは維持します。
 * section余白は固定値ではなく、共通tokenを使ったclampへ寄せます。
 */

@media (max-width: 960px) {
	.aleg2-grid--3,
	.aleg2-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.aleg2-split,
	.aleg2-split--reverse,
	.aleg2-split--equal,
	.aleg2-split--wide-media {
		grid-template-columns: 1fr;
	}

	.aleg2-cluster--between,
	.aleg2-cluster--end {
		justify-content: flex-start;
	}
}

@media (max-width: 640px) {
	.aleg2-grid--2,
	.aleg2-grid--3,
	.aleg2-grid--4 {
		grid-template-columns: 1fr;
	}

	/**
	 * スマホ時のsection余白。
	 *
	 * 旧コードの clamp(56px, 16vw, 84px) をベースにしつつ、
	 * --aleg2-section-padding-y-sm を上限として扱えるようにします。
	 * これにより design.layout.section_y_sm の変更もスマホ側へ反映されます。
	 */
	.aleg2-section {
		padding-block: clamp(48px, 16vw, var(--aleg2-section-padding-y-sm));
	}

	.aleg2-section--compact {
		padding-block: clamp(36px, 12vw, var(--aleg2-section-padding-y-sm));
	}

	.aleg2-container,
	.aleg2-container--sm,
	.aleg2-container--md,
	.aleg2-container--xl,
	.aleg2-container--max,
	.aleg2-container--wide {
		width: min(100% - (var(--aleg2-container-padding) * 2), 100%);
	}
}