/**
 * css/components/content-grid.css
 * ============================================================
 * A LEGEND 2：Content Grid
 * ============================================================
 *
 * 役割：
 * - template-parts/components/content-grid.php の一覧グリッドを装飾します。
 * - Archive / TOP / Related で共通利用します。
 *
 * 今回の改修：
 * - content-grid.php から出力されるCSS変数に対応します。
 * - PC / タブレット / スマホごとの列数を、グリッド単位で制御できるようにします。
 * - 既存の .aleg2-content-grid--2 / --4 は後方互換として維持します。
 * - card_image_ratio 用のCSS変数も受け取り、カード側が利用できるようにします。
 * - どの一覧レイアウトでも画像比率を尊重し、横並びlistではArchive側で
 *   画像比率を保ったまま本文カラムを整えます。
 *
 * 重要：
 * - 旧来の固定3列指定は fallback として残します。
 * - 新しいArchive設定では、以下のCSS変数が優先されます。
 *   - --aleg2-content-grid-columns-pc
 *   - --aleg2-content-grid-columns-tablet
 *   - --aleg2-content-grid-columns-sp
 *   - --aleg2-content-grid-card-image-ratio
 *
 * 設計方針：
 * - PHP側で解決した common / 個別設定の結果を、CSS変数として素直に反映します。
 * - テンプレートごとのCSS分岐を増やさず、グリッドコンポーネント単位で完結させます。
 * - TOP / Archive / Related など既存利用箇所を壊さないよう、既存class互換を維持します。
 */

.aleg2-content-grid {
	/*
	 * 基本レイアウト。
	 *
	 * 旧仕様：
	 * - 固定で3列。
	 *
	 * 新仕様：
	 * - content-grid.php から出力される
	 *   --aleg2-content-grid-columns-pc を優先します。
	 * - CSS変数が未出力の場所では、従来どおり3列になります。
	 */
	display: grid;
	grid-template-columns: repeat(var(--aleg2-content-grid-columns-pc, 3), minmax(0, 1fr));
	gap: clamp(18px, 2.6vw, 34px);
	width: min(100% - (var(--aleg2-container-padding) * 2), var(--aleg2-container-lg));
	margin-inline: auto;

	/*
	 * カードhover / focus時の安全表示域。
	 *
	 * .aleg2-post-card / .aleg2-card はカード自身が上方向へliftします。
	 * grid側に上下の逃げ代がないと、Archive / TOP / Relatedなどで
	 * 枠線・影・hover移動分が親領域に切られるため、共通grid側で吸収します。
	 *
	 * paddingだけを増やすとセクション余白が変わるため、
	 * negative marginと組み合わせて見た目の基準位置はできるだけ維持します。
	 */
	--aleg2-content-grid-interaction-safe-space: var(--aleg2-card-interaction-safe-space, 7px);
	padding-block: var(--aleg2-content-grid-interaction-safe-space);
	margin-block: calc(var(--aleg2-content-grid-interaction-safe-space) * -1);

	/*
	 * カード画像比率の受け皿。
	 *
	 * 役割：
	 * - content-grid.php から --aleg2-content-grid-card-image-ratio が渡された場合、
	 *   post-card / media-frame 側がこの値を継承して使えます。
	 * - カード側CSSが未対応でも害はありません。
	 */
	--aleg2-card-image-ratio: var(--aleg2-content-grid-card-image-ratio, 16 / 10);
}

.aleg2-content-grid__empty {
	grid-column: 1 / -1;
	padding: var(--aleg2-space-8);
	margin: 0;
	color: var(--aleg2-color-text-muted);
	text-align: center;
	background: var(--aleg2-color-surface);
	border: 1px solid var(--aleg2-color-border);
	border-radius: var(--aleg2-radius-lg);
	backdrop-filter: var(--aleg2-backdrop-glass);
}

.aleg2-content-grid--compact {
	gap: var(--aleg2-space-5);
}

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

/**
 * 既存列数class互換
 * ------------------------------------------------------------
 *
 * 重要：
 * - 既存テンプレートやTOPセクションが .aleg2-content-grid--2 / --4 を
 *   前提にしている可能性があるため維持します。
 * - ただし、新しい content-grid.php ではCSS変数も出力されるため、
 *   CSS変数がある場合は .aleg2-content-grid 本体の指定が基本になります。
 * - ここでは後方互換として、CSS変数未指定時にも期待どおり動くようにします。
 */
.aleg2-content-grid--2 {
	grid-template-columns: repeat(var(--aleg2-content-grid-columns-pc, 2), minmax(0, 1fr));
}

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

/**
 * 新しい列数class
 * ------------------------------------------------------------
 *
 * 役割：
 * - content-grid.php が出力する
 *   .aleg2-content-grid--columns-pc-{n}
 *   .aleg2-content-grid--columns-tablet-{n}
 *   .aleg2-content-grid--columns-sp-{n}
 *   に対応します。
 *
 * 注意：
 * - 基本はCSS変数で制御するため、ここでは補助classとして定義します。
 * - CSS変数が使えない特殊な上書き環境でも、classだけで列数が分かるようにします。
 */
.aleg2-content-grid--columns-pc-1 {
	--aleg2-content-grid-columns-pc: 1;
}

.aleg2-content-grid--columns-pc-2 {
	--aleg2-content-grid-columns-pc: 2;
}

.aleg2-content-grid--columns-pc-3 {
	--aleg2-content-grid-columns-pc: 3;
}

.aleg2-content-grid--columns-pc-4 {
	--aleg2-content-grid-columns-pc: 4;
}

.aleg2-content-grid--columns-pc-5 {
	--aleg2-content-grid-columns-pc: 5;
}

.aleg2-content-grid--columns-pc-6 {
	--aleg2-content-grid-columns-pc: 6;
}

.aleg2-content-grid--columns-tablet-1 {
	--aleg2-content-grid-columns-tablet: 1;
}

.aleg2-content-grid--columns-tablet-2 {
	--aleg2-content-grid-columns-tablet: 2;
}

.aleg2-content-grid--columns-tablet-3 {
	--aleg2-content-grid-columns-tablet: 3;
}

.aleg2-content-grid--columns-tablet-4 {
	--aleg2-content-grid-columns-tablet: 4;
}

.aleg2-content-grid--columns-sp-1 {
	--aleg2-content-grid-columns-sp: 1;
}

.aleg2-content-grid--columns-sp-2 {
	--aleg2-content-grid-columns-sp: 2;
}

.aleg2-content-grid--columns-sp-3 {
	--aleg2-content-grid-columns-sp: 3;
}

/**
 * レイアウト別補助
 * ------------------------------------------------------------
 *
 * 既存の layout class を活かしながら、一覧設定の layout 値に応じて
 * グリッドの見た目を軽く調整できる余地を残します。
 */

.aleg2-content-grid--layout-list {
	/*
	 * リスト表示では1列を基本にします。
	 *
	 * PHP側から columns が渡されていても、listレイアウトでは
	 * 横並びカードより縦並びのほうが自然なため、CSS側で1列に寄せます。
	 */
	grid-template-columns: minmax(0, 1fr);
}

.aleg2-content-grid--layout-masonry {
	/*
	 * masonry用の最低限の受け皿です。
	 *
	 * 本格的な masonry はCSS masonry対応やJS補助が必要になるため、
	 * ここでは通常gridとして破綻しない見た目を維持します。
	 */
	align-items: start;
}

.aleg2-content-grid--layout-editorial {
	/*
	 * editorialは通常gridより少し余白を広くし、
	 * 記事カードが窮屈に見えにくいようにします。
	 */
	gap: clamp(22px, 3vw, 42px);
}

/**
 * タブレット
 * ------------------------------------------------------------
 *
 * content-grid.php から渡された
 * --aleg2-content-grid-columns-tablet を優先します。
 *
 * 既存仕様：
 * - 1100px以下で2列。
 *
 * 新仕様：
 * - CSS変数があれば任意の1〜4列。
 * - 未指定なら従来どおり2列。
 */
@media (max-width: 1100px) {
	.aleg2-content-grid,
	.aleg2-content-grid--2,
	.aleg2-content-grid--4 {
		grid-template-columns: repeat(var(--aleg2-content-grid-columns-tablet, 2), minmax(0, 1fr));
	}

	.aleg2-content-grid--layout-list {
		grid-template-columns: minmax(0, 1fr);
	}
}

/**
 * スマホ
 * ------------------------------------------------------------
 *
 * content-grid.php から渡された
 * --aleg2-content-grid-columns-sp を優先します。
 *
 * 既存仕様：
 * - 640px以下で1列。
 *
 * 新仕様：
 * - CSS変数があれば任意の1〜3列。
 * - 未指定なら従来どおり1列。
 */
@media (max-width: 640px) {
	.aleg2-content-grid,
	.aleg2-content-grid--2,
	.aleg2-content-grid--4 {
		grid-template-columns: repeat(var(--aleg2-content-grid-columns-sp, 1), minmax(0, 1fr));
	}

	.aleg2-content-grid--layout-list {
		grid-template-columns: minmax(0, 1fr);
	}
}

/*
 * Archive layout：tiles
 * ------------------------------------------------------------
 * - tiles はGALLERY専用ではなく、一覧コンテナの表示方式です。
 * - カード内部の構造や装飾は post-card 側へ委譲します。
 * - full bleed はグリッド本体だけに効かせ、ヘッダーやページネーションを巻き込みません。
 */
.aleg2-content-grid {
	gap: var(--aleg2-content-grid-gap, clamp(18px, 2.6vw, 34px));
}

.aleg2-content-grid--gap-none { --aleg2-content-grid-gap: 0px; }
.aleg2-content-grid--gap-xs { --aleg2-content-grid-gap: 8px; }
.aleg2-content-grid--gap-sm { --aleg2-content-grid-gap: 14px; }
.aleg2-content-grid--gap-md { --aleg2-content-grid-gap: clamp(18px, 2.6vw, 34px); }
.aleg2-content-grid--gap-lg { --aleg2-content-grid-gap: clamp(28px, 4vw, 52px); }

.aleg2-content-grid--layout-tiles {
	width: min(100% - (var(--aleg2-container-padding) * 2), var(--aleg2-container-xl, var(--aleg2-container-lg)));
	gap: var(--aleg2-content-grid-gap, 0px);
}

.aleg2-content-grid--layout-tiles.aleg2-content-grid--full-bleed {
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
}

.aleg2-content-grid > * {
	min-width: 0;
}

.aleg2-content-grid--layout-list {
	grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 782px) {
	.aleg2-content-grid--layout-tiles.aleg2-content-grid--full-bleed {
		width: 100vw;
		margin-inline: calc(50% - 50vw);
	}
}

/*
 * カード画像比率の伝播
 * ------------------------------------------------------------
 * TOP Galleryなどの呼び出し元が --aleg2-card-image-ratio を直接渡した場合も、
 * content-grid内のカードへ同じ比率が伝播するよう明示します。
 *
 * 重要：
 * - card_image_ratio は「カード画像エリアの比率」として管理画面から指定されるため、
 *   grid / tiles / list など一覧の並び方にかかわらず尊重します。
 * - 横並びlistでテキスト位置がずれる問題は、画像比率を外して解決するのではなく、
 *   archive.css 側で左メディア列と右本文列のグリッド構造を整理して解決します。
 * - これにより、縦長画像でも全体表示に戻らず、設定された比率の枠内で
 *   object-fit: cover による安定したトリミングになります。
 */
.aleg2-content-grid .aleg2-post-card__media {
	aspect-ratio: var(--aleg2-content-grid-card-image-ratio, var(--aleg2-card-image-ratio, 16 / 10));
}