/**
 * investalk/company-list — ブロック専用CSS
 *
 * PHPの以下2フックから読込:
 *   - wp_enqueue_scripts（フロント）
 *   - enqueue_block_editor_assets（エディタ）
 * style.css にはブロック固有スタイルを書かない。
 *
 * 実測値（investalk.jp/corporate, 1280幅）:
 *   - 中央寄せコンテナ max-width 800px
 *   - 企業名: 24px / 700 / #333 / Zen Kaku Gothic New
 *   - ピル「記事の一覧を見る」: bg #f5f5f5 / #333 / border-radius 96px / padding 12px 20px / 14px
 *   - 区切り線: 1px solid #eee（行ごと border-bottom）
 *   - load-more: 濃色ピル / 白文字 / 中央
 */

/* ============================================
   コンテナ
   ============================================ */
.investalk-company-list {
	font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
	color: #333;
	box-sizing: border-box;
}

/* 末尾(「さらに表示」ボタン)とフッターの間隔を確保。
   固定ページは style.css の .page .l-content{margin-bottom:0}（フルブリードCTA密着用）が効き、
   さらに SWELL の `.post_content > :last-child{margin-bottom:0 !important}` が最終子の下余白を消すため、
   CTAで終わらない一覧ページではボタンがフッターに密着する。同じ「最終子」ケースを高特異度+!importantで上書き。 */
.post_content > .investalk-company-list:last-child {
	margin-bottom: 96px !important;
}

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

.investalk-company-list__inner {
	max-width: 800px;
	margin: 0 auto;
}

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

/* ============================================
   行（企業名 ＋ ピル ＋ 区切り線）
   ============================================ */
.investalk-company-list__row {
	display: flex;
	flex-direction: column;
	align-items: center;        /* 横中央（デザイン準拠） */
	justify-content: center;    /* 縦中央 */
	gap: 16px;
	min-height: 289px;          /* デザイン実測の行高（中央に余白たっぷり） */
	padding: 24px 0;            /* デザイン実測 */
	border-bottom: 1px solid #eee;
	/* カード全体がリンク（デザイン準拠）。ホバーで全体が opacity 0.7 にフェード */
	text-decoration: none;
	color: inherit;
	transition: opacity 0.3s cubic-bezier(0.4, 0.4, 0, 1);
}

.investalk-company-list__row:hover {
	opacity: 0.7;
}

.investalk-company-list__row.is-hidden {
	display: none;
}

/* 名前＋ピルの内側ラッパ（画像なし＝中央寄せ縦並び） */
.investalk-company-list__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

/* ============================================
   画像あり行（画像左 ＋ 企業名/ピル右）
   ライブ実測（investalk.jp/corporate, 1280幅）:
     - 行: flex row / align-items center / justify-content flex-start / gap 24px / 行高 289px
     - 画像: 240×240 正方 / border-radius 0 / cover
     - 右側 名前/ピル: 縦並び / 左寄せ（text-align start）
   ============================================ */
.investalk-company-list__row--has-image {
	flex-direction: row;
	align-items: center;       /* 縦中央 */
	justify-content: flex-start; /* グループ左寄せ（ライブ実測） */
	gap: 24px;
}

.investalk-company-list__row--has-image .investalk-company-list__thumb {
	flex: 0 0 auto;
	width: 240px;
	height: 240px;
	border-radius: 0;
	object-fit: cover;
	display: block;
}

.investalk-company-list__row--has-image .investalk-company-list__body {
	align-items: flex-start;   /* 左寄せ縦並び */
	text-align: left;
}

.investalk-company-list__row--has-image .investalk-company-list__name {
	text-align: left;
}

/* ============================================
   企業名
   ============================================ */
.investalk-company-list__name {
	margin: 0;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.4;
	color: #333;
	text-align: center;
}

/* ============================================
   ピル（記事の一覧を見る → /company/{slug}/）
   ============================================ */
.investalk-company-list__pill {
	display: inline-block;
	padding: 12px 20px;
	background-color: #f5f5f5;
	color: #333;
	font-size: 14px;
	font-weight: 400;
	line-height: 1;
	text-decoration: none;
	border-radius: 96px;
}
/* ピルは静的な見た目（リンクはカード全体）。ホバー効果はカード(.__row:hover)側で opacity フェード。 */

/* ============================================
   load-more ボタン（濃色ピル / 白文字 / 中央）
   ============================================ */
.investalk-company-list__more {
	margin-top: 40px;
	text-align: center;
}

.investalk-company-list__more-btn {
	display: inline-block;
	padding: 14px 40px;
	background-color: #04384c;
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	border: none;
	border-radius: 96px;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.investalk-company-list__more-btn:hover {
	opacity: 0.85;
}

/* ============================================
   SWELL スタイルリセット
   （SWELL の見出し装飾・段落余白が <p> 名に干渉するのを抑止）
   ============================================ */
.investalk-company-list__name {
	background: none;
	border: none;
}

.investalk-company-list__name::before,
.investalk-company-list__name::after {
	display: none;
}

/* ============================================
   レスポンシブ — タブレット（959px以下）
   ============================================ */
@media (max-width: 959px) {
	.investalk-company-list__inner {
		max-width: 100%;
		padding: 0 24px;
	}

	.investalk-company-list__row {
		padding: 32px 0;
	}
}

/* ============================================
   レスポンシブ — モバイル（599px以下）
   ============================================ */
@media (max-width: 599px) {
	/* SPは下余白を控えめに */
	.post_content > .investalk-company-list:last-child {
		margin-bottom: 56px !important;
	}
	.investalk-company-list__inner {
		padding: 0 16px;
	}

	/* SPは左寄せ（デザイン準拠） */
	.investalk-company-list__row {
		min-height: 180px;
		padding: 24px 0;
		gap: 12px;
		align-items: flex-start;   /* 中身（body）を左寄せ */
	}

	.investalk-company-list__body {
		align-items: flex-start;   /* 企業名・ピルを左寄せ */
		width: 100%;               /* SPは要素を横幅100%に */
	}

	.investalk-company-list__name {
		font-size: 20px;
		text-align: left;
	}

	/* SP: ピルは横幅100%のボタンに（要素すべて横幅100%） */
	.investalk-company-list__pill {
		display: block;
		width: 100%;
		text-align: center;
	}

	/* 画像あり行: モバイルは縦積み（画像上・テキスト下、いずれも左寄せ） */
	.investalk-company-list__row--has-image {
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		gap: 16px;
	}

	.investalk-company-list__row--has-image .investalk-company-list__thumb {
		width: 100%;       /* SPは画像も横幅100% */
		height: auto;
	}

	.investalk-company-list__row--has-image .investalk-company-list__body {
		align-items: flex-start;
		text-align: left;
	}

	.investalk-company-list__row--has-image .investalk-company-list__name {
		text-align: left;
	}

	.investalk-company-list__more-btn {
		padding: 13px 32px;
		font-size: 14px;
	}
}