/**
 * investalk/post-cards — ブロック専用CSS
 *
 * PHPの以下2フックから読込:
 *   - wp_enqueue_scripts（フロント）
 *   - enqueue_block_editor_assets（エディタ）
 * style.css にはブロック固有スタイルを書かない。
 *
 * 色 = #363e39 本文 / #f2eee8 ベージュ下地 / カテゴリ色はインラインstyle。
 */

/* ============================================
   base
   ============================================ */
.investalk-cards {
	font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
	color: #363e39;
	box-sizing: border-box;
}

.investalk-cards *,
.investalk-cards *::before,
.investalk-cards *::after {
	box-sizing: border-box;
}

.investalk-cards__empty {
	color: #999;
	font-size: 14px;
	text-align: center;
	padding: 24px 0;
}

/* ============================================
   カード共通
   ============================================ */
.investalk-cards__card {
	position: relative;
}

.investalk-cards__link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.investalk-cards__link:hover .investalk-cards__title {
	opacity: 0.7;
}

/* サムネ — 正方形・radius12・cover */
.investalk-cards__thumb {
	margin: 0;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 12px;
	overflow: hidden;
	background: #efefef;
}

.investalk-cards__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* NO IMAGE プレースホルダ（薄グレー） */
.investalk-cards__noimg {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #eaeaea;
	color: #b5b5b5;
	font-size: 12px;
	letter-spacing: 0.08em;
}

.investalk-cards__body {
	padding-top: 12px;
}

/* 企業名（タイトル上・小さめ・濃いめグレー） */
.investalk-cards__company {
	display: block;
	margin-bottom: 4px;
	color: #555;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* タイトル（#363e39・15px/700・2-3行） */
.investalk-cards__title {
	margin: 0;
	color: #363e39;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	/* 2行分の固定高。1行でも2行でも以降の要素（フッター）の位置を揃える */
	height: calc(1.5em * 2);
}

/* フッター行（カテゴリピル左 + 日付右・両端揃え） */
.investalk-cards__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: 10px;
}

/* カテゴリピル（完全角丸・色付き・白文字） */
.investalk-cards__badge {
	display: inline-flex;
	align-items: center;
	border-radius: 128px;
	padding: 4px 12px;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
}

/* 日付（小・グレー・右寄せ） */
.investalk-cards__date {
	margin-left: auto;
	color: #999;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
}

/* SWELL見出し装飾リセット（スコープ限定） */
.investalk-cards h3 {
	background: none !important;
	border: none !important;
	border-bottom: none !important;
	border-left: none !important;
	padding: 0 !important;
}

.investalk-cards h3::before,
.investalk-cards h3::after {
	display: none !important;
	content: none !important;
}

.investalk-cards p {
	margin: 0;
}

/* ============================================
   layout='category' — 白カード
   ============================================ */
.investalk-cards--category {
	background: #fff;
	border-radius: 12px;
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	height: 100%;
}

/* ヘッダーピル見出し */
.investalk-cards__header {
	display: flex;
	justify-content: flex-start;
}

.investalk-cards__header-pill {
	display: inline-flex;
	align-items: center;
	border-radius: 128px;
	padding: 6px 14px;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
}

/* investalk.jp 準拠: featured(全幅) + 残りカードの2列グリッド（上サムネ大）。
   PC/TB/SP 共通で2列を維持し、カードは幅に応じて等幅で縮む。 */
.investalk-cards--category .investalk-cards__list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}

/* 先頭1件 = featured（大きめサムネ・2列ぶち抜きで全幅） */
.investalk-cards--category .investalk-cards__card:not(.investalk-cards__card--list) {
	grid-column: 1 / -1;
}
.investalk-cards--category .investalk-cards__card:not(.investalk-cards__card--list) .investalk-cards__title {
	font-size: 15px;
	-webkit-line-clamp: 2;
}

/* 残り = グリッド型（上サムネ大 + メタ/タイトル下の縦並び。カード共通styleに揃える）。
   旧「小サムネ左の横並びリスト」から変更。grid item の min-width:auto による不均等を防ぐため min-width:0。 */
.investalk-cards--category .investalk-cards__card--list {
	min-width: 0;
}
.investalk-cards--category .investalk-cards__card--list .investalk-cards__link {
	display: block;
}
.investalk-cards--category .investalk-cards__card--list .investalk-cards__thumb {
	width: 100%;
	min-width: 0;
	flex: none;
}
.investalk-cards--category .investalk-cards__card--list .investalk-cards__body {
	padding-top: 12px;
	flex: none;
	min-width: 0;
}
.investalk-cards--category .investalk-cards__card--list .investalk-cards__title {
	font-size: 14px;
	-webkit-line-clamp: 2;
}

/* 「○○について読む」ピル（透明地 / 1px枠 / リンク） */
.investalk-cards__more {
	margin-top: auto;
	display: flex;
	justify-content: center;
}

.investalk-cards__more-link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 48px; /* テキスト↔円アイコンの間隔（investalk.jp 実測≈50px） */
	width: 100%;
	max-width: 288px;
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid #cccccc;
	border-radius: 128px;
	background: transparent;
	font-size: 16px;
	text-decoration: none;
	transition: background 0.2s ease, border-color 0.2s ease;
}

/* ボタン内テキスト（○○について読む） */
.investalk-cards__more-text {
	font-size: 12px;
	font-weight: 700;
	color: #375341;
}

/* 末尾の円付き右矢印（investalk.jp 準拠: keyboard_arrow_right を 1px#ccc の円で囲む）
   ※ Google の .material-symbols-outlined(0,1,0) が後勝ちで font-size:24px / display を上書きするため、
     セレクタを (0,2,0) に上げて font-size 16px・inline-flex 中央寄せを勝たせる。 */
.investalk-cards__more-link .investalk-cards__more-icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border: 1px solid #cccccc;
	border-radius: 50%;
	color: #555555;
	font-family: 'Material Symbols Outlined';
	font-size: 16px;
	line-height: 1;
}

.investalk-cards__more-link:hover {
	background: #375341;
	border-color: #375341;
}
.investalk-cards__more-link:hover .investalk-cards__more-text {
	color: #fff;
}
.investalk-cards__more-link:hover .investalk-cards__more-icon {
	color: #fff;
	border-color: #fff;
}

/* ============================================
   layout='popular' — featured + grid 2col
   ============================================ */
.investalk-cards--popular {
	display: flex;
	gap: 32px;
	align-items: flex-start;
}

.investalk-cards--popular .investalk-cards__featured {
	flex: 1 1 48%;
	min-width: 0;
}

.investalk-cards--popular .investalk-cards__featured .investalk-cards__title {
	font-size: 20px;
	-webkit-line-clamp: 2;
}

.investalk-cards--popular .investalk-cards__grid {
	flex: 1 1 52%;
	min-width: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

.investalk-cards--popular .investalk-cards__grid .investalk-cards__title {
	font-size: 14px;
	-webkit-line-clamp: 2;
}

/* ============================================
   レスポンシブ — タブレット（959px以下）
   ============================================ */
@media (max-width: 959px) {
	.investalk-cards--category {
		padding: 24px;
	}
	/* popular: PCの横並び(featured左+grid右)をやめ、featuredを全幅で上、
	   残りカードはその下に配置する縦積みレイアウトへ。
	   投稿リスト/カスタムブロック内部のレイアウト変更なので独自ブロックCSSで対応。 */
	.investalk-cards--popular {
		flex-direction: column;
		gap: 24px;
	}
	.investalk-cards--popular .investalk-cards__featured,
	.investalk-cards--popular .investalk-cards__grid {
		flex: 1 1 100%;
		width: 100%;
	}
	/* 残りカードは investalk.jp 準拠で2列グリッド（@600/@375 とも2列）。 */
	.investalk-cards--popular .investalk-cards__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}
	/* grid item の min-width:auto による不均等列を防ぐ（2列を等幅に） */
	.investalk-cards--popular .investalk-cards__grid > * {
		min-width: 0;
	}
}

/* ============================================
   レスポンシブ — モバイル（599px以下）
   ============================================ */
@media (max-width: 599px) {
	/* SP: featured全幅で上、残りカードは investalk.jp 準拠で2列を維持（@375も2列）。
	   flex-direction:column / featured・grid 全幅は ≤959 から継承。ここでは間隔のみ詰める。 */
	.investalk-cards--popular {
		gap: 20px;
	}
	.investalk-cards--popular .investalk-cards__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}
	.investalk-cards--category {
		padding: 20px;
	}
}

/* ============================================
   layout='grid' — 横並びグリッド（外枠パネル無し）
   列数は PHP インラインstyle（grid-template-columns）で動的指定。
   ============================================ */
.investalk-cards--grid {
	display: grid;
	gap: 24px;
}

/* TB/SP（959px以下）は2列（investalk.jp /about の600px・375px 準拠） */
@media (max-width: 959px) {
	.investalk-cards--grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 16px;
	}
	/* gridアイテムの min-width:auto による不均等列を防ぐ（2列を等幅に） */
	.investalk-cards--grid > * {
		min-width: 0;
	}
}