/**
 * css/components/post-card-layouts.css
 * ============================================================
 * A LEGEND 2：Post Card Layout Variants
 * ============================================================
 *
 * 役割：
 * - template-parts/components/post-card/layout-*.php の4種類のカード骨格を装飾します。
 * - 「一覧の並び方」ではなく「1枚のカード内部構造」を担当します。
 *
 * 設計方針：
 * - BLOG / NEWS / GALLERY / APPLICATION のカード構造差分をこのファイルに集約します。
 * - archive-news.css などのページ固有CSSには、カード骨格を持たせません。
 * - card_decoration は背景・枠線・影だけを切り替え、画像位置や本文位置は変更しません。
 * - NEWS / APPLICATION のような横並びカードでも画像比率は維持し、
 *   画像側の height:100% で本文領域を引っ張らないようにします。
 * - 本文側には min-size / overflow の安全策を持たせ、画像比率枠と
 *   カード外枠の高さが分離して見える事故を防ぎます。
 */

/* ------------------------------------------------------------
 * Decoration
 * ------------------------------------------------------------ */

/*
 * standard は base post-card.css の質感をそのまま使う基準装飾です。
 * 明示classを用意しておくことで、HTML確認や将来の差分追加がしやすくなります。
 */
.aleg2-post-card--decoration-standard {
	background: var(--aleg2-color-surface);
	border-color: var(--aleg2-color-border);
	box-shadow: var(--aleg2-shadow-card);
}

.aleg2-post-card--decoration-flat {
	background: transparent;
	box-shadow: none;
	backdrop-filter: none;
}

.aleg2-post-card--decoration-bordered {
	background: var(--aleg2-color-surface);
	border-color: var(--aleg2-color-border-strong);
	box-shadow: none;
}

.aleg2-post-card--decoration-shadow {
	box-shadow: var(--aleg2-shadow-panel);
}

/* ------------------------------------------------------------
 * BLOG layout
 * ------------------------------------------------------------ */

.aleg2-post-card--layout-blog .aleg2-post-card__body {
	gap: var(--aleg2-space-3);
}

.aleg2-post-card--layout-blog .aleg2-post-card__terms {
	margin-top: 0;
	padding-top: 0;
}

.aleg2-post-card--layout-blog .aleg2-post-card__footer {
	display: flex;
	flex-wrap: wrap;
	gap: var(--aleg2-space-3);
	align-items: center;
	justify-content: space-between;
	margin-top: auto;
	padding-top: var(--aleg2-space-5);
	color: var(--aleg2-color-text-faint);
	font-family: var(--aleg2-font-latin);
	font-size: var(--aleg2-font-size-xs);
	font-weight: 800;
	letter-spacing: var(--aleg2-letter-spacing-wide);
	text-transform: uppercase;
}

/* ------------------------------------------------------------
 * NEWS layout
 * ------------------------------------------------------------ */

.aleg2-post-card--layout-news .aleg2-post-card__link {
	display: grid;
	grid-template-columns: minmax(180px, 320px) minmax(0, 1fr);
	min-height: 220px;
}

.aleg2-post-card--layout-news .aleg2-post-card__media {
	/*
	 * NEWS型カードでも、管理画面のカード画像比率を尊重します。
	 * 以前のように min-height:100% + aspect-ratio:auto にすると、
	 * 横並びカードで縦長画像が大きく出るため、比率ボックスとして扱います。
	 */
	align-self: start;
	min-height: 0;
	aspect-ratio: var(--aleg2-card-image-ratio, 16 / 9);
}

.aleg2-post-card--layout-news .aleg2-post-card__body {
	min-width: 0;
	min-height: 0;
	overflow: hidden;
	justify-content: center;
	padding: clamp(20px, 3vw, 38px);
}

.aleg2-post-card--layout-news .aleg2-post-card__title {
	font-size: clamp(var(--aleg2-font-size-xl), 2.4vw, var(--aleg2-font-size-3xl));
	line-height: 1.22;
}

.aleg2-post-card--layout-news .aleg2-post-card__excerpt {
	display: -webkit-box;
	max-width: 760px;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

/* ------------------------------------------------------------
 * GALLERY layout
 * ------------------------------------------------------------ */

.aleg2-post-card--layout-gallery .aleg2-post-card__link {
	position: relative;
	display: block;
	min-height: 100%;
}

.aleg2-post-card--layout-gallery .aleg2-post-card__media {
	height: 100%;
	aspect-ratio: var(--aleg2-card-image-ratio, 4 / 5);
}

.aleg2-post-card--layout-gallery .aleg2-post-card__overlay {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: var(--aleg2-space-5);
	color: var(--aleg2-color-text);
	background:
		linear-gradient(
			180deg,
			transparent 0%,
			var(--aleg2-overlay-soft) 46%,
			var(--aleg2-overlay-strong) 100%
		);
	opacity: 0;
	transform: translateY(8px);
	transition:
		opacity var(--aleg2-duration-normal) var(--aleg2-ease-standard),
		transform var(--aleg2-duration-normal) var(--aleg2-ease-standard);
}

.aleg2-post-card--layout-gallery:hover .aleg2-post-card__overlay,
.aleg2-post-card--layout-gallery:focus-within .aleg2-post-card__overlay {
	opacity: 1;
	transform: translateY(0);
}

.aleg2-post-card--layout-gallery .aleg2-post-card__terms {
	margin-top: 0;
	padding-top: 0;
}

.aleg2-post-card--layout-gallery .aleg2-post-card__title {
	color: var(--aleg2-color-text);
	text-shadow: 0 12px 32px var(--aleg2-overlay-strong);
}

.aleg2-post-card--layout-gallery .aleg2-post-card__date {
	margin-top: var(--aleg2-space-2);
	color: var(--aleg2-color-text-muted);
	font-family: var(--aleg2-font-latin);
	font-size: var(--aleg2-font-size-xs);
	font-weight: 800;
	letter-spacing: var(--aleg2-letter-spacing-wide);
	text-transform: uppercase;
}

/* ------------------------------------------------------------
 * APPLICATION layout
 * ------------------------------------------------------------ */

.aleg2-post-card--layout-application {
	/*
	 * APPLICATIONカードは、一覧内でロゴ画像・横長バナー・縦長画像が混在しやすい
	 * 投稿タイプです。カード全体に固定の最小高さを持たせると、横長比率では
	 * 画像だけが上に細く残り、本文カラムとの間に不要な空白が発生します。
	 *
	 * ここでは「画像比率は画像枠」「本文量は本文カラム」という責務に分け、
	 * 画像をカード高へ無理に引き伸ばさず、設定された比率の枠として安定表示します。
	 */
	--aleg2-application-card-media-min-width: 160px;
	--aleg2-application-card-media-width: 42%;
	--aleg2-application-card-body-padding: clamp(18px, 2.4vw, 32px);
}

.aleg2-post-card--layout-application .aleg2-post-card__link {
	display: grid;
	grid-template-columns:
		minmax(var(--aleg2-application-card-media-min-width), var(--aleg2-application-card-media-width))
		minmax(0, 1fr);
	align-items: center;
	min-height: 0;
}

.aleg2-post-card--layout-application .aleg2-post-card__media {
	/*
	 * 管理画面の「カード画像比率」をそのまま尊重します。
	 * height:100% や align-self:stretch で本文量に追従させると、
	 * 比率設定の意味が薄れ、本文が長いカードだけ画像が縦に伸びます。
	 *
	 * align-self:center により、本文量のほうが多いカードでも画像が上端に
	 * 張り付いて見えず、横長・正方形・縦長のどの比率でも自然に揃います。
	 */
	align-self: center;
	width: 100%;
	min-width: 0;
	min-height: 0;
	margin: 0;
	aspect-ratio: var(--aleg2-card-image-ratio, 16 / 9);
}

.aleg2-post-card--layout-application .aleg2-post-card__body {
	align-self: stretch;
	min-width: 0;
	min-height: 0;
	gap: var(--aleg2-space-3);
	overflow: hidden;
	justify-content: center;
	padding: var(--aleg2-application-card-body-padding);
}

.aleg2-post-card--layout-application .aleg2-post-card__app-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--aleg2-space-2);
	margin-top: var(--aleg2-space-3);
}

.aleg2-post-card--layout-application .aleg2-post-card__app-meta > *,
.aleg2-post-card--layout-application .aleg2-post-card__modified {
	display: inline-flex;
	gap: 0.45em;
	align-items: center;
	min-height: 28px;
	padding: 0.28em 0.75em;
	color: var(--aleg2-color-text-muted);
	font-size: var(--aleg2-font-size-xs);
	background: var(--aleg2-glass-bg);
	border: 1px solid var(--aleg2-color-border);
	border-radius: var(--aleg2-radius-button);
}

.aleg2-post-card--layout-application .aleg2-post-card__app-meta-label {
	color: var(--aleg2-color-text-faint);
	font-family: var(--aleg2-font-latin);
	font-weight: 800;
	letter-spacing: var(--aleg2-letter-spacing-wide);
	text-transform: uppercase;
}

.aleg2-post-card--layout-application .aleg2-post-card__terms {
	margin-top: var(--aleg2-space-3);
	padding-top: 0;
}

/* ------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------ */

@media (max-width: 820px) {
	.aleg2-post-card--layout-news .aleg2-post-card__link,
	.aleg2-post-card--layout-application .aleg2-post-card__link {
		grid-template-columns: 1fr;
	}

	.aleg2-post-card--layout-application .aleg2-post-card__link {
		/*
		 * 縦積み表示では、PC横並び用の中央揃えを引き継がず、
		 * 画像枠 → 本文の通常カードとして自然に積みます。
		 */
		align-items: stretch;
	}

	.aleg2-post-card--layout-news .aleg2-post-card__media,
	.aleg2-post-card--layout-application .aleg2-post-card__media {
		min-height: auto;
		aspect-ratio: var(--aleg2-card-image-ratio, 16 / 9);
	}

	.aleg2-post-card--layout-application .aleg2-post-card__media {
		align-self: stretch;
	}
}

@media (hover: none) {
	.aleg2-post-card--layout-gallery .aleg2-post-card__overlay {
		opacity: 1;
		transform: none;
	}
}


/*
 * Card layout aliases：style-name based layouts
 * ------------------------------------------------------------
 * - 新しい正式内部値は basic / visual / overlay / product / minimal です。
 * - 旧クラスも post-card.php 側で一時併記するため、既存CSS互換を維持します。
 * - ここでは新クラス主軸の安全策を追加し、BLOGでoverlayなどを選んでも破綻しにくくします。
 */
.aleg2-post-card--layout-basic,
.aleg2-post-card--layout-visual,
.aleg2-post-card--layout-overlay,
.aleg2-post-card--layout-product,
.aleg2-post-card--layout-minimal {
	min-width: 0;
	overflow: hidden;
}

.aleg2-post-card--layout-overlay .aleg2-post-card__link,
.aleg2-post-card--layout-visual.aleg2-post-card--tile-body-overlay .aleg2-post-card__link {
	position: relative;
	display: block;
	min-height: 100%;
}

.aleg2-post-card--layout-overlay .aleg2-post-card__media,
.aleg2-post-card--layout-visual.aleg2-post-card--tile-body-overlay .aleg2-post-card__media {
	margin: 0;
}

.aleg2-post-card--layout-overlay .aleg2-post-card__overlay,
.aleg2-post-card--layout-visual.aleg2-post-card--tile-body-overlay .aleg2-post-card__overlay {
	position: absolute;
	inset: auto 0 0;
	z-index: 2;
	padding: clamp(14px, 2vw, 24px);
	background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.72));
	color: #fff;
}

.aleg2-post-card--no-image.aleg2-post-card--layout-overlay .aleg2-post-card__overlay,
.aleg2-post-card--tile-body-below .aleg2-post-card__overlay {
	position: static;
	background: transparent;
	color: inherit;
}

.aleg2-post-card--tile-body-hidden .aleg2-post-card__excerpt,
.aleg2-post-card--tile-body-hidden .aleg2-post-card__terms,
.aleg2-post-card--tile-body-hidden .aleg2-post-card__date {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.aleg2-post-card--decoration-none {
	background: transparent;
	border-color: transparent;
	box-shadow: none;
}

.aleg2-post-card__title,
.aleg2-post-card__excerpt,
.aleg2-post-card__terms {
	min-width: 0;
	overflow-wrap: anywhere;
}

.aleg2-content-grid--layout-tiles .aleg2-post-card {
	height: 100%;
}

.aleg2-content-grid--layout-tiles.aleg2-content-grid--gap-none .aleg2-post-card {
	border-radius: 0;
}

.aleg2-content-grid--layout-tiles .aleg2-post-card__media {
	aspect-ratio: var(--aleg2-content-grid-card-image-ratio, var(--aleg2-card-image-ratio, 3 / 2));
}

/* ------------------------------------------------------------
 * TOP Gallery compatible visual variants
 * ------------------------------------------------------------
 * layout と variant を分離したため、overlay/minimalなどの骨格を維持したまま
 * cinematic / glass / panel / plain の質感だけを切り替えます。
 */
.aleg2-post-card--variant-cinematic.aleg2-post-card--layout-overlay .aleg2-post-card__overlay,
.aleg2-post-card--cinematic.aleg2-post-card--layout-overlay .aleg2-post-card__overlay {
	background:
		linear-gradient(180deg, transparent 0%, var(--aleg2-overlay-soft) 35%, var(--aleg2-overlay-strong) 100%);
}

.aleg2-post-card--variant-glass.aleg2-post-card--layout-overlay .aleg2-post-card__overlay,
.aleg2-post-card--glass.aleg2-post-card--layout-overlay .aleg2-post-card__overlay {
	background:
		linear-gradient(180deg, transparent 0%, var(--aleg2-glass-bg) 38%, var(--aleg2-overlay-strong) 100%);
	backdrop-filter: var(--aleg2-backdrop-glass);
}

.aleg2-post-card--variant-panel.aleg2-post-card--layout-overlay .aleg2-post-card__overlay,
.aleg2-post-card--panel.aleg2-post-card--layout-overlay .aleg2-post-card__overlay {
	background:
		linear-gradient(180deg, transparent 0%, var(--aleg2-color-surface) 42%, var(--aleg2-color-surface-strong) 100%);
	color: var(--aleg2-color-text);
}

.aleg2-post-card--variant-plain.aleg2-post-card--layout-overlay .aleg2-post-card__overlay,
.aleg2-post-card--plain.aleg2-post-card--layout-overlay .aleg2-post-card__overlay {
	background: linear-gradient(180deg, transparent, var(--aleg2-overlay-soft));
}