/*
 * CL AI Category Summary — スタイル（creationline7 テーマ整合・画像カード版）
 *
 * 方針:
 *  - 本番 tech-blog と同様、アイキャッチ画像付きカードのグリッドで記事を並べる。
 *  - 文字色・リンク色はテーマから継承（独自色を押し付けない）。
 *  - フォントは tech-blog と同じゴシックスタックに合わせる。
 *  - すべて cl-ai- プレフィックスに限定し、既存CSSと衝突しない。色は変数で調整可。
 */

.cl-ai-summary {
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN",
		"Yu Gothic", YuGothic, Meiryo, sans-serif;

	--cl-ai-border: #e3e6ea;
	--cl-ai-muted: #777;
	--cl-ai-card-bg: #ffffff;
	--cl-ai-recommend-bg: #f6f7f9;
	--cl-ai-heading-line: #cfd4da;
	--cl-ai-thumb-bg: #eef0f3;
	--cl-ai-radius: 6px;

	margin: 1.5rem 0;
	line-height: 1.6;
}

/* ---- 見出し ---- */
.cl-ai-heading {
	font-size: 1.1rem;
	font-weight: 700;
	margin: 0 0 0.9rem;
	padding-left: 0.55rem;
	border-left: 3px solid var(--cl-ai-heading-line);
}

/* ---- ステータス ---- */
.cl-ai-status {
	padding: 1rem;
	color: var(--cl-ai-muted);
	font-size: 0.95rem;
}

/* ---- グループ（各テーマを縦に積む） ---- */
.cl-ai-group-list {
	display: block;
}

.cl-ai-group {
	margin-bottom: 2rem;
}

/* ---- 記事カードのグリッド ---- */
.cl-ai-post-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 1.1rem;
}

/* ---- 記事カード ---- */
.cl-ai-card {
	background: var(--cl-ai-card-bg);
	border: 1px solid var(--cl-ai-border);
	border-radius: var(--cl-ai-radius);
	overflow: hidden;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.cl-ai-card:hover {
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
}

/* カード全体をリンクに（色はテーマの文字色を継承） */
.cl-ai-card-link {
	display: block;
	text-decoration: none;
	color: inherit;
}

/* サムネイル（16:9） */
.cl-ai-card-thumb {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: var(--cl-ai-thumb-bg);
	overflow: hidden;
}

.cl-ai-card-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* 画像が無いときのプレースホルダ（薄いグレー＋画像アイコン風） */
.cl-ai-card-thumb--empty {
	position: relative;
}

.cl-ai-card-thumb--empty::after {
	content: "\1F5BC"; /* 🖼 */
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.6rem;
	opacity: 0.35;
}

/* カード本文 */
.cl-ai-card-body {
	display: block;
	padding: 0.7rem 0.8rem 0.85rem;
}

.cl-ai-card-title {
	display: block;
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1.5;
	/* 2行で省略 */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.cl-ai-card-link:hover .cl-ai-card-title {
	text-decoration: underline;
}

.cl-ai-card-date {
	display: block;
	margin-top: 0.4rem;
	font-size: 0.78rem;
	color: var(--cl-ai-muted);
}

/* ---- 「あなたへのおすすめ」セクション ---- */
.cl-ai-recommend {
	margin-bottom: 2rem;
	padding: 1rem 1.15rem 1.2rem;
	background: var(--cl-ai-recommend-bg);
	border: 1px solid var(--cl-ai-border);
	border-radius: var(--cl-ai-radius);
}

.cl-ai-recommend .cl-ai-heading::before {
	content: "\2728"; /* ✨ */
	margin-right: 0.35rem;
}

/* hidden 属性は確実に隠す */
.cl-ai-summary [hidden] {
	display: none;
}

/* ---- /summary エンドポイントで描画する独立ページ ---- */
/* get_header()/get_footer() の間に出力されるため、テーマ幅に合わせて中央寄せ */
.cl-ai-summary-page {
	max-width: 1100px;     /* tech-blog の .ism-wrap と同じ幅 */
	margin: 0 auto;
	padding: 2rem 1rem;
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN",
		"Yu Gothic", YuGothic, Meiryo, sans-serif;
}

.cl-ai-page-title {
	font-size: 1.5rem;
	font-weight: 700;
	margin: 0 0 1.25rem;
}

/* ---- アーカイブ上の「AIまとめを見る」導線リンク ---- */
.cl-ai-summary-link-wrap {
	margin: 1.25rem 0;
	text-align: center; /* ボタンを中央に */
}

/* 目立つ塗りつぶしボタン。色は --cl-ai-cta-bg / --cl-ai-cta-fg で上書き可 */
.cl-ai-summary-link {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	max-width: 100%;
	padding: 0.95rem 1.9rem;
	border: 0;
	border-radius: 999px;
	background: var(--cl-ai-cta-bg, #0068b7); /* Creationline ブランド色 */
	/* テーマの a 色指定に勝つよう常に白を強制（ホバー前から白） */
	color: var(--cl-ai-cta-fg, #ffffff) !important;
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none !important;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
	transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

/* 矢印で「押せる」感を出す */
.cl-ai-summary-link::after {
	content: "\2192"; /* → */
	font-weight: 700;
}

.cl-ai-summary-link:hover,
.cl-ai-summary-link:focus {
	color: var(--cl-ai-cta-fg, #ffffff) !important;
	transform: translateY(-2px);
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2);
	opacity: 0.96;
}

/* 記事末尾に出すときは上に区切りを取る */
.cl-ai-summary-link--postend {
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--cl-ai-border, #e3e6ea);
}