/**
 * css/pages/top.css
 * ============================================================
 * A LEGEND 2：TOP Page Base
 * ============================================================
 *
 * 役割：
 * - TOPページ全体の共通余白、背景、セクション間のつながりを定義します。
 * - 各セクション固有の装飾は top-hero.css / top-about.css などへ分離します。
 *
 * 今回の改修：
 * - 既存の .aleg2-main--top 背景、セクション間余白、各inner幅、actions余白は維持します。
 * - template-parts/top/*.php 側で追加した共通class / data属性に合わせて、
 *   TOP全体で使い回すsection / heading / grid / cardの土台を追加します。
 * - inc/top/helpers.php が出力する可能性がある共通classにも対応します。
 * - motion.enabled / motion.reduce で data-aleg2-reveal が出ない場合でも、
 *   表示が崩れないよう通常表示を基準にします。
 * - prefers-reduced-motion では、TOP共通のアニメーション・parallax前提の動きを抑制します。
 *
 * Design Token改修：
 * - 固定の水色・紫・黄色グローを
 *   --aleg2-glow-primary / --aleg2-glow-secondary / --aleg2-glow-accent へ接続します。
 * - 固定の白グリッド・白半透明背景を
 *   --aleg2-color-border / --aleg2-glass-bg / --aleg2-color-surface へ置換します。
 * - 見出し・説明文・カード文字色を
 *   --aleg2-color-heading / --aleg2-color-text / --aleg2-color-text-muted へ接続します。
 * - カード角丸・影・hover量を
 *   --aleg2-radius-card / --aleg2-shadow-card / --aleg2-card-hover-lift へ接続します。
 * - 画像hover拡大率を
 *   --aleg2-card-image-hover-zoom へ接続します。
 *
 * 注意：
 * - Hero / Gallery / Application / Blog / Contact の強い個別表現は、
 *   それぞれ top-hero.css / top-gallery.css / top-application.css /
 *   top-blog.css / top-contact.css 側で上書きします。
 * - このファイルでは「全セクション共通で破綻しない基礎」を担当します。
 */

/* ------------------------------------------------------------
 * TOPページ全体
 * ------------------------------------------------------------
 *
 * 既存の背景グラデーション構造は維持します。
 * ただし固定rgba色ではなく、Design Tokenのglowを使います。
 *
 * これにより、管理画面でデザイン色を変えた場合に、
 * TOP全体の背景の色味も連動します。
 */
.aleg2-main--top {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(circle at 14% 8%, var(--aleg2-glow-primary), transparent 34vw),
		radial-gradient(circle at 90% 28%, var(--aleg2-glow-secondary), transparent 32vw),
		radial-gradient(circle at 50% 86%, var(--aleg2-glow-accent), transparent 38vw);
}

/**
 * 背景グローOFF時。
 *
 * inc/core/utilities.php 側で design.background.glow がOFFの場合、
 * bodyに .aleg2-bg-glow が付かない設計です。
 * その場合はTOP専用の発光背景も抑制し、通常背景に寄せます。
 */
body:not(.aleg2-bg-glow) .aleg2-main--top {
	background: var(--aleg2-color-bg);
}

/* ------------------------------------------------------------
 * TOPページ背景グリッド
 * ------------------------------------------------------------
 *
 * 既存の固定グリッド背景は維持します。
 * ただし固定の rgba(255,255,255,...) ではなく、
 * border token を薄く表示する形へ変更します。
 *
 * pointer-events:none により、リンクやボタン操作を邪魔しません。
 */
.aleg2-main--top::before {
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	content: "";
	background:
		linear-gradient(var(--aleg2-color-border) 1px, transparent 1px),
		linear-gradient(90deg, var(--aleg2-color-border) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.75), transparent 82%);
	opacity: 0.22;
}

/**
 * 背景グリッドOFF時。
 *
 * design.background.grid_lines がOFFの場合、
 * bodyに .aleg2-bg-grid-lines が付かない設計です。
 * その場合はTOP専用グリッドも非表示にします。
 */
body:not(.aleg2-bg-grid-lines) .aleg2-main--top::before {
	display: none;
}

/* ------------------------------------------------------------
 * TOP共通セクション
 * ------------------------------------------------------------
 *
 * 既存の .aleg2-section isolation は維持します。
 * isolation:isolate により、各セクション内の疑似要素や装飾レイヤーが
 * 他セクションへ干渉しにくくなります。
 */
.aleg2-main--top .aleg2-section {
	position: relative;
	isolation: isolate;
}

/**
 * inc/top/helpers.php 側で共通classとして .aleg2-top-section が付く場合にも対応します。
 * 既存の .aleg2-section と同じように、セクション単位で安全にレイヤーを閉じます。
 */
.aleg2-main--top .aleg2-top-section {
	position: relative;
	isolation: isolate;
}

/**
 * 既存のセクション間の重なり余白は維持します。
 * 少しだけ前セクションへ食い込ませることで、TOP全体の流れを滑らかにします。
 */
.aleg2-main--top .aleg2-section + .aleg2-section {
	margin-top: clamp(-20px, -2vw, -8px);
}

/**
 * .aleg2-top-section が併用される場合も、同じ余白ルールを適用します。
 */
.aleg2-main--top .aleg2-top-section + .aleg2-top-section,
.aleg2-main--top .aleg2-section + .aleg2-top-section,
.aleg2-main--top .aleg2-top-section + .aleg2-section {
	margin-top: clamp(-20px, -2vw, -8px);
}

/* ------------------------------------------------------------
 * 共通inner幅
 * ------------------------------------------------------------
 *
 * 既存の各TOPセクションinner幅指定は維持します。
 * Aboutは既存コードになかったため、今回追加した about.php の構造に合わせて加えます。
 *
 * 幅と左右余白は foundation/tokens.css 経由で
 * design.layout.max_width / page_side に追従します。
 */
.aleg2-top-about__inner,
.aleg2-top-news__inner,
.aleg2-top-gallery__inner,
.aleg2-top-application__inner,
.aleg2-top-blog__inner,
.aleg2-top-contact__inner {
	width: min(100% - (var(--aleg2-container-padding) * 2), var(--aleg2-container-lg));
	margin-inline: auto;
}

/**
 * 共通helperや将来セクションで .aleg2-top-section__inner を使う場合の保険です。
 * 個別セクションのinner指定を壊さず、汎用classにも同じ幅を与えます。
 */
.aleg2-main--top .aleg2-top-section__inner {
	width: min(100% - (var(--aleg2-container-padding) * 2), var(--aleg2-container-lg));
	margin-inline: auto;
}

/* ------------------------------------------------------------
 * Section Heading 共通
 * ------------------------------------------------------------
 *
 * template-parts/components/section-heading.php の改修版に対応します。
 * セクション固有の大きな装飾は各CSSへ任せ、ここでは最低限の余白と整列だけを定義します。
 */
.aleg2-main--top .aleg2-section-heading {
	position: relative;
	z-index: 1;
}

/**
 * TOPページ用の通常見出し補正。
 *
 * 重要：
 * - ここでは variant-default だけを対象にします。
 * - large-bg / 将来追加する minimal / split などの見出しvariantは、
 *   css/components/section-heading.css 側の責務として自立させます。
 * - TOPページCSSが共通コンポーネントvariantを無条件で上書きしないよう、
 *   max-width / margin などの見た目に直結する指定も default 限定にします。
 */
.aleg2-main--top .aleg2-section-heading--variant-default {
	max-width: min(100%, 760px);
	margin: 0 0 var(--aleg2-space-8);
}

/**
 * align指定。
 * section-heading.php では left / center / right を許可しています。
 */
.aleg2-main--top .aleg2-section-heading--left {
	margin-right: auto;
	text-align: left;
}

.aleg2-main--top .aleg2-section-heading--center {
	margin-inline: auto;
	text-align: center;
}

.aleg2-main--top .aleg2-section-heading--right {
	margin-left: auto;
	text-align: right;
}

/**
 * 小見出し。
 *
 * TOP全体で英字ラベルとして使いやすいよう、letter-spacingを少し広げます。
 * 色は accent token を使い、デザイン設定に追従します。
 */
.aleg2-main--top .aleg2-section-heading--variant-default .aleg2-section-heading__eyebrow {
	margin: 0 0 var(--aleg2-space-3);
	color: var(--aleg2-color-accent);
	font-family: var(--aleg2-font-latin);
	font-size: clamp(0.72rem, 0.68rem + 0.2vw, 0.86rem);
	font-weight: 700;
	letter-spacing: 0.16em;
	line-height: 1.4;
	text-transform: uppercase;
}

/**
 * 見出し本体。
 *
 * 改修版section-heading.phpでは改行を維持するため、line-heightを少し余裕ある値にします。
 * 色とフォントは heading token に接続します。
 */
.aleg2-main--top .aleg2-section-heading--variant-default .aleg2-section-heading__title {
	margin: 0;
	color: var(--aleg2-color-heading);
	font-family: var(--aleg2-font-heading);
	font-size: clamp(2rem, 1.45rem + 2.4vw, 4rem);
	font-weight: 900;
	line-height: 1.08;
	letter-spacing: var(--aleg2-letter-heading);
}

/**
 * 説明文。
 *
 * 固定の白半透明fallbackをやめ、text-muted tokenへ接続します。
 */
.aleg2-main--top .aleg2-section-heading--variant-default .aleg2-section-heading__description {
	max-width: 62em;
	margin: var(--aleg2-space-4) 0 0;
	color: var(--aleg2-color-text-muted);
	font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.08rem);
	line-height: 1.9;
}

.aleg2-main--top .aleg2-section-heading--variant-default.aleg2-section-heading--center .aleg2-section-heading__description {
	margin-inline: auto;
}

.aleg2-main--top .aleg2-section-heading--variant-default.aleg2-section-heading--right .aleg2-section-heading__description {
	margin-left: auto;
}

/**
 * section-heading.php側のCTA。
 * 既存の各セクション下部actionsも維持しているため、
 * 見出し内CTAは控えめな上余白にします。
 */
.aleg2-main--top .aleg2-section-heading--variant-default .aleg2-section-heading__action {
	margin: var(--aleg2-space-5) 0 0;
}

.aleg2-main--top .aleg2-section-heading--variant-default.aleg2-section-heading--center .aleg2-section-heading__action {
	display: flex;
	justify-content: center;
}

.aleg2-main--top .aleg2-section-heading--variant-default.aleg2-section-heading--right .aleg2-section-heading__action {
	display: flex;
	justify-content: flex-end;
}

/* ------------------------------------------------------------
 * Content Grid 共通
 * ------------------------------------------------------------
 *
 * 既存の width:100% 指定は維持します。
 */
.aleg2-top-gallery .aleg2-content-grid,
.aleg2-top-application .aleg2-content-grid,
.aleg2-top-blog .aleg2-content-grid {
	width: 100%;
}

/**
 * 改修版 content-grid.php の共通classに対応します。
 * 個別CSSが未読込でも、最低限カードがグリッドで並ぶようにします。
 */
.aleg2-main--top .aleg2-content-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(18px, 2.2vw, 32px);
}

/**
 * columns指定。
 * content-grid.php で .aleg2-content-grid--columns-{n} が付く場合に反映します。
 */
.aleg2-main--top .aleg2-content-grid--columns-1 {
	grid-template-columns: minmax(0, 1fr);
}

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

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

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

.aleg2-main--top .aleg2-content-grid--columns-5 {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.aleg2-main--top .aleg2-content-grid--columns-6 {
	grid-template-columns: repeat(6, minmax(0, 1fr));
}

/**
 * layout別の最低限の扱い。
 * 強いデザインは top-gallery.css / top-application.css / top-blog.css 側で調整します。
 */
.aleg2-main--top .aleg2-content-grid--layout-list,
.aleg2-main--top .aleg2-content-grid--layout-compact {
	grid-template-columns: minmax(0, 1fr);
}

.aleg2-main--top .aleg2-content-grid--layout-slider {
	display: flex;
	gap: clamp(18px, 2.2vw, 32px);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
}

.aleg2-main--top .aleg2-content-grid--layout-slider > * {
	flex: 0 0 min(86vw, 360px);
	scroll-snap-align: start;
}

/**
 * 空表示。
 * show_empty が true の場合のみ出力されます。
 *
 * 固定白半透明背景をglass tokenへ置換し、
 * ライト/ダークどちらのプリセットでも自然に見えるようにします。
 */
.aleg2-main--top .aleg2-content-grid__empty {
	grid-column: 1 / -1;
	margin: 0;
	padding: var(--aleg2-space-6);
	color: var(--aleg2-color-text-muted);
	text-align: center;
	background: var(--aleg2-glass-bg);
	border: 1px dashed var(--aleg2-color-border);
	border-radius: var(--aleg2-radius-card);
}

/* ------------------------------------------------------------
 * Post Card 共通
 * ------------------------------------------------------------
 *
 * post-card.php の改修版で追加された image_ratio / context class に対応します。
 * 個別セクションCSSがなくても最低限破綻しないカード土台です。
 *
 * components/post-card.css 側の新token設計と競合しにくいよう、
 * ここでも同じ token 名を使います。
 */
.aleg2-main--top .aleg2-post-card {
	position: relative;
	height: 100%;
	overflow: hidden;
	color: var(--aleg2-color-text);
	background: var(--aleg2-color-surface);
	border: 1px solid var(--aleg2-color-border);
	border-radius: var(--aleg2-radius-card);
	box-shadow: var(--aleg2-shadow-card);
}

.aleg2-main--top .aleg2-post-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.aleg2-main--top .aleg2-post-card__link:hover {
	color: inherit;
	text-decoration: none;
}

.aleg2-main--top .aleg2-post-card__media {
	position: relative;
	overflow: hidden;
	margin: 0;
	background:
		linear-gradient(
			135deg,
			var(--aleg2-glow-primary),
			var(--aleg2-glow-secondary)
		),
		var(--aleg2-color-surface);
	/*
	 * TOP共通CSSで16:9を固定すると、TOP Galleryの image_ratio 設定が潰れます。
	 * 比率は post-card / content-grid 共通変数を正とし、セクション側から上書きできるようにします。
	 */
	aspect-ratio: var(--aleg2-card-image-ratio, 16 / 9);
}

.aleg2-main--top .aleg2-post-card__image,
.aleg2-main--top .aleg2-post-card__image-placeholder {
	display: block;
	width: 100%;
	height: 100%;
}

.aleg2-main--top .aleg2-post-card__image {
	object-fit: cover;
	transition:
		transform var(--aleg2-duration-slow) var(--aleg2-ease-emphasized),
		filter var(--aleg2-duration-slow) var(--aleg2-ease-emphasized);
}

/**
 * アイキャッチ未設定時のplaceholder。
 *
 * 固定の白半透明・水色をやめ、glow / surface tokenへ置換します。
 */
.aleg2-main--top .aleg2-post-card__image-placeholder {
	background:
		linear-gradient(135deg, var(--aleg2-glass-bg-strong), var(--aleg2-glass-bg)),
		radial-gradient(circle at 30% 20%, var(--aleg2-glow-primary), transparent 38%),
		var(--aleg2-color-surface);
}

/**
 * 背景グローOFF時。
 *
 * TOPカードのmedia / placeholderも発光を控えめにします。
 */
body:not(.aleg2-bg-glow) .aleg2-main--top .aleg2-post-card__media,
body:not(.aleg2-bg-glow) .aleg2-main--top .aleg2-post-card__image-placeholder {
	background: var(--aleg2-color-surface);
}

.aleg2-main--top .aleg2-post-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--aleg2-space-3);
	padding: clamp(16px, 1.8vw, 24px);
}

.aleg2-main--top .aleg2-post-card__meta,
.aleg2-main--top .aleg2-post-card__terms,
.aleg2-main--top .aleg2-post-card__app-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em 0.75em;
	align-items: center;
	color: var(--aleg2-color-text-muted);
	font-family: var(--aleg2-font-latin);
	font-size: 0.78rem;
	line-height: 1.4;
}

.aleg2-main--top .aleg2-post-card__type,
.aleg2-main--top .aleg2-post-card__term,
.aleg2-main--top .aleg2-post-card__app-meta-label {
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.aleg2-main--top .aleg2-post-card__type,
.aleg2-main--top .aleg2-post-card__app-meta-label {
	color: var(--aleg2-color-primary);
}

.aleg2-main--top .aleg2-post-card__title {
	margin: 0;
	color: var(--aleg2-color-heading);
	font-family: var(--aleg2-font-heading);
	font-size: clamp(1rem, 0.95rem + 0.25vw, 1.2rem);
	line-height: 1.45;
}

.aleg2-main--top .aleg2-post-card__excerpt {
	margin: 0;
	color: var(--aleg2-color-text-muted);
	font-size: 0.92rem;
	line-height: 1.8;
}

.aleg2-main--top .aleg2-post-card__badges {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.aleg2-main--top .aleg2-post-card__badge {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	padding: 0 0.7em;
	color: var(--aleg2-color-on-primary);
	font-family: var(--aleg2-font-latin);
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	background: var(--aleg2-color-accent);
	border-radius: var(--aleg2-radius-button);
	box-shadow: var(--aleg2-shadow-soft);
}

/**
 * ホバー演出。
 * motion抑制時は後続の prefers-reduced-motion で無効化します。
 *
 * 画像拡大率は content.card.image_hover_zoom 由来のtokenへ接続します。
 */
.aleg2-main--top .aleg2-post-card__link:hover .aleg2-post-card__image,
.aleg2-main--top .aleg2-post-card__link:focus-visible .aleg2-post-card__image {
	transform: scale(var(--aleg2-card-image-hover-zoom));
	filter: saturate(1.08) contrast(1.04);
}

/**
 * カードリンクのfocus-visible。
 *
 * キーボード操作時に現在位置が分かるよう、共通focus ringを使います。
 */
.aleg2-main--top .aleg2-post-card__link:focus-visible {
	outline: none;
	box-shadow:
		inset 0 0 0 2px var(--aleg2-color-primary),
		var(--aleg2-focus-ring);
}

/* ------------------------------------------------------------
 * 下部Actions共通
 * ------------------------------------------------------------
 *
 * 既存の各actions余白は維持します。
 * NEWSの正規CTAは共通section-heading内へ集約したため、
 * 旧 .aleg2-top-news__actions は通常DOM前提の共通指定から外します。
 */
.aleg2-top-gallery__actions,
.aleg2-top-application__actions,
.aleg2-top-blog__actions,
.aleg2-top-about__actions,
.aleg2-top-contact__actions {
	margin-top: var(--aleg2-space-8);
}

/**
 * actions内のボタン位置。
 * 個別CSSで上書きしない場合でも、自然な配置になるよう最低限整えます。
 */
.aleg2-top-gallery__actions {
	display: flex;
	justify-content: center;
}

.aleg2-top-about__actions,
.aleg2-top-application__actions,
.aleg2-top-blog__actions,
.aleg2-top-contact__actions {
	display: flex;
	justify-content: flex-start;
}

/* ------------------------------------------------------------
 * Reveal / Motion 共通
 * ------------------------------------------------------------
 *
 * JSが data-aleg2-reveal を使う場合の初期状態はJS側へ委ねます。
 * CSS単体では不可視にしないことで、JS未読込時でもコンテンツを表示します。
 */
.aleg2-main--top [data-aleg2-reveal] {
	will-change: transform, opacity;
}

/**
 * motion無効class。
 * 各テンプレートで is-motion-disabled を付与しているため、
 * その配下では過剰なtransitionを抑えます。
 */
.aleg2-main--top .is-motion-disabled,
.aleg2-main--top .is-motion-disabled * {
	scroll-behavior: auto;
}

/**
 * motion無効class配下のカード画像hover。
 *
 * JS演出だけでなくCSS hoverの過剰な動きも抑えます。
 */
.aleg2-main--top .is-motion-disabled .aleg2-post-card__link:hover .aleg2-post-card__image,
.aleg2-main--top .is-motion-disabled .aleg2-post-card__link:focus-visible .aleg2-post-card__image {
	transform: none;
	filter: none;
}

/* ------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------
 *
 * 既存の 1024px / 640px ルールは維持します。
 */
@media (max-width: 1024px) {
	.aleg2-main--top .aleg2-content-grid,
	.aleg2-main--top .aleg2-content-grid--columns-4,
	.aleg2-main--top .aleg2-content-grid--columns-5,
	.aleg2-main--top .aleg2-content-grid--columns-6 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.aleg2-main--top .aleg2-section-heading--variant-default .aleg2-section-heading__title {
		letter-spacing: -0.03em;
	}
}

@media (max-width: 640px) {
	.aleg2-main--top::before {
		background-size: 42px 42px;
	}

	.aleg2-main--top .aleg2-content-grid,
	.aleg2-main--top .aleg2-content-grid--columns-2,
	.aleg2-main--top .aleg2-content-grid--columns-3,
	.aleg2-main--top .aleg2-content-grid--columns-4,
	.aleg2-main--top .aleg2-content-grid--columns-5,
	.aleg2-main--top .aleg2-content-grid--columns-6 {
		grid-template-columns: minmax(0, 1fr);
	}

	.aleg2-main--top .aleg2-section-heading--variant-default {
		margin-bottom: var(--aleg2-space-6);
	}

	.aleg2-main--top .aleg2-section-heading--variant-default.aleg2-section-heading--right {
		text-align: left;
	}

	.aleg2-main--top .aleg2-section-heading--variant-default.aleg2-section-heading--right .aleg2-section-heading__description {
		margin-left: 0;
	}

	.aleg2-main--top .aleg2-section-heading--variant-default.aleg2-section-heading--right .aleg2-section-heading__action {
		justify-content: flex-start;
	}

	.aleg2-top-gallery__actions,
	.aleg2-top-application__actions,
	.aleg2-top-blog__actions,
	.aleg2-top-about__actions,
	.aleg2-top-contact__actions {
		margin-top: var(--aleg2-space-6);
	}
}

/* ------------------------------------------------------------
 * Reduced Motion
 * ------------------------------------------------------------
 *
 * OS側で「視差効果を減らす」が有効な場合、
 * TOP共通のtransition / animationを抑制します。
 */
@media (prefers-reduced-motion: reduce) {
	.aleg2-main--top *,
	.aleg2-main--top *::before,
	.aleg2-main--top *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.001ms !important;
	}

	.aleg2-main--top .aleg2-post-card__link:hover .aleg2-post-card__image,
	.aleg2-main--top .aleg2-post-card__link:focus-visible .aleg2-post-card__image {
		transform: none;
		filter: none;
	}
}