/* Projects ページ固有スタイル
   共有 style.css のクラス（.cards / .card / .work-card / .tech-tags など）を土台に、
   このページ独自の装飾だけをここに記述する。 */

/* ページ内目次（render_page_toc）の見た目は refine.css に集約 */

/* アンカー着地時に固定ヘッダーへ隠れないように */
#projects-title,
#tool-title,
#tech-overview-title {
	scroll-margin-top: calc(var(--header-height) + 16px);
}

/* 件数表記。見た目 (accent ピル) は style.css V17 基底 + 下の寸法差分。
   旧 font-size/color は refine.css に恒常上書きされる死宣言だったため削除。 */
.works-count {
	display: inline-block;
	margin: 0 0 0.75rem;
	padding: 3px 12px;
	font-size: 0.8rem;
}

/* イントロのリード文（Projects ページ用に少し余白を調整） */
.works-intro {
	margin-bottom: 2rem;
}

/* 技術スタック概観セクション（縦リズムは section padding + 境界ヘアラインに任せる） */

.tech-overview-lead {
	margin-bottom: 1.75rem;
}

/* スタックを並べるグリッド（既存 .cards に頼らず軽量なカード群を作る） */
.stack-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 1rem;
}

/* 1枚のスタックカード */
.stack-card {
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
	padding: 1.1rem 1.25rem;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface);
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.stack-card:hover {
	border-color: var(--accent);
	transform: translateY(var(--lift-sm)); /* V15: -2px 直書き → token */
}

/* アイコン部分。土台は style.css V17 のアイコンタイル基底。
   このページのアイコンだけは従来どおり文字色継承 (白系) — 基底の accent を打ち消す。 */
.stack-card-icon {
	flex: 0 0 auto;
	width: 2.5rem;
	height: 2.5rem;
	color: inherit;
}

.stack-card-icon .fa-icon {
	width: 1.4rem;
	height: 1.4rem;
}

/* テキスト部分 */
.stack-card-body {
	min-width: 0;
}

.stack-card-name {
	margin: 0 0 0.2rem;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
}

.stack-card-desc {
	margin: 0;
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--muted);
}

/* =====================================================================
   Tool セクション（自作ツール。作品＝アプリとは別カテゴリ）
   縦リズムは section padding + 境界ヘアラインに任せる。
   ===================================================================== */
.tool-lead {
	margin-bottom: 1.75rem;
}

/* 件数が少なくても間延びしないよう、カード幅を抑えて左寄せ・折り返し。 */
.tool-cards {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.tool-card {
	flex: 1 1 280px;
	max-width: 360px;
}

/* 土台は style.css V17 のアイコンタイル基底。色は文字色継承 (stack-card-icon と同様)。 */
.tool-card-icon {
	width: 2.5rem;
	height: 2.5rem;
	margin-bottom: 12px;
	color: inherit;
}

.tool-card-icon .fa-icon {
	width: 1.3rem;
	height: 1.3rem;
}

/* =====================================================================
   作品グリッド: 先頭の公開カードを全幅の横型ヒーローカードに昇格。
   サムネ左・本文右の見開きで「最新作が常に主役」の構造にする。
   projects.css は /projects のみ読込のためホームの .cards には波及しない。
   .cards の上書きは必ず @media 内（無条件だとモバイル1カラム化を打ち消す）。
   ===================================================================== */
@media (min-width: 769px) {
	.cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.cards > .work-card:first-child:not(.is-pending) {
	grid-column: 1 / -1;
	border-color: rgba(var(--accent-rgb), 0.28);
}

/* 静的 border-color が refine.css の .card:hover(0,2,0) に勝ってしまうため、
   ホバー時の強調は同詳細度で明示する */
.cards > .work-card:first-child:not(.is-pending):hover {
	border-color: rgba(var(--accent-rgb), 0.45);
}

@media (min-width: 769px) {
	.cards > .work-card:first-child:not(.is-pending) {
		display: grid;
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
		grid-template-rows: 1fr auto auto;
	}

	.cards > .work-card:first-child:not(.is-pending) .card-thumb {
		grid-column: 1;
		grid-row: 1 / 4;
		aspect-ratio: auto;
		height: 100%;
		min-height: 320px;
		border-bottom: 0;
		border-right: 1px solid var(--border);
	}

	/* 横型の縦長サムネは共通ビネット(refine.css: 58%→0.38)では淡く、右の本文と
	   視覚的に分離しないため、ヒーロー専用に下部を深めて沈み込みを作る。
	   > で直下のサムネに限定（カード内の .work-detail 隠しサムネはモーダル用） */
	.cards > .work-card:first-child:not(.is-pending) > .card-thumb::after {
		background: linear-gradient(180deg, rgba(var(--shade-rgb), 0) 40%, rgba(var(--shade-rgb), 0.52));
	}

	.cards > .work-card:first-child:not(.is-pending) .card-body {
		grid-column: 2;
		padding: 30px 30px 0;
	}

	.cards > .work-card:first-child:not(.is-pending) .card-title {
		font-size: 1.5rem;
	}

	.cards > .work-card:first-child:not(.is-pending) .card-text {
		font-size: 1.05rem;
	}

	.cards > .work-card:first-child:not(.is-pending) > .card-meta {
		grid-column: 2;
		margin-top: 0;
		padding: 16px 30px 0;
	}

	.cards > .work-card:first-child:not(.is-pending) .card-actions {
		grid-column: 2;
		margin-top: 0;
		padding: 18px 30px 26px;
	}
}

/* 「近日公開」プレースホルダー: 実カードより主張の弱い横長ストリップ1枚に集約。
   破線ボーダー・消灯トーンは refine.css の .work-card.is-pending を継承する。 */
.work-card.is-strip {
	grid-column: 1 / -1;
	flex-direction: row;
	align-items: center;
	gap: 16px;
	padding: 16px 20px;
}

.work-card.is-strip .card-thumb.is-placeholder {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	aspect-ratio: auto;
	border: 0;
	font-size: 1rem;
}

.work-card.is-strip .card-thumb.is-placeholder .fa-icon {
	padding: 8px;
}

.work-card.is-strip .card-body {
	padding: 0;
}

.work-card.is-strip .card-meta {
	margin: 0 0 0 auto;
	padding: 0;
}

/* =====================================================================
   スタックカードのブランド色化 — Skills のバー配色と同じパレットで
   Projects 下部と Skills が色で繋がる。:has()/color-mix() 非対応環境は
   現状の青タイルのまま（自然フォールバック）。
   ===================================================================== */
.stack-card:has(.fa-php) { --brand: var(--brand-php); }
.stack-card:has(.fa-js) { --brand: var(--brand-js); }
.stack-card:has(.fa-css3-alt) { --brand: var(--brand-css); }
.stack-card:has(.fa-python) { --brand: var(--brand-python); }
.stack-card:has(.fa-git-alt) { --brand: var(--brand-git); }
.stack-card:has(.fa-claude) { --brand: var(--brand-claude); }

.stack-card .stack-card-icon .fa-icon {
	color: var(--brand, var(--accent));
}

@supports (color: color-mix(in srgb, red, blue)) {
	/* refine.css G ブロック(0,1,0)より詳細度を上げてブランド色地に */
	.stack-card .stack-card-icon {
		background: linear-gradient(135deg, color-mix(in srgb, var(--brand, var(--accent)) 16%, transparent), rgba(255, 255, 255, 0.02));
		border-color: color-mix(in srgb, var(--brand, var(--accent)) 28%, transparent);
	}

	.stack-grid .stack-card:hover {
		border-color: color-mix(in srgb, var(--brand, var(--accent)) 40%, transparent);
		box-shadow: var(--glass-hilite), var(--shadow), 0 0 18px color-mix(in srgb, var(--brand, var(--accent)) 14%, transparent);
	}
}