/**
 * コラム機能 追加スタイル（add-style.css）
 * 配置先: テーマ直下 /add-style.css
 * 読み込み: functions.php で wp_enqueue_style（column-cpt-registration.php 末尾を参照）し、
 *          テーマ本体の style.css / css/styles.css の "後" に読み込まれるようにする。
 *
 * 重要な前提（実際のテーマCSSを確認して判明した点）:
 *   - --primaryColor / --color-dk / --color-g / --color-lg / --color-slg は
 *     css/menu.css・css/styles.css の :root で定義済みの共通変数。ここでは再定義しない。
 *   - #articleContainer p { margin-bottom:30px; } は css/single.css 側の既存定義を流用。
 *   - #fvContainer と .blogContainer は css/single.css で定義されているが、
 *     single.css は functions.php の read_enqueue_styles() 内で
 *     is_single() || is_page() のときしか読み込まれない。
 *     コラムのアーカイブ／カテゴリー／タグ一覧は is_archive() であり single.css が読み込まれないため、
 *     同じIDをそのまま使うと一覧側でヘッダー帯（#fvContainer は本来トップページの
 *     フルスクリーン hero 用に css/styles.css 側でも同名定義があり、それが優先されてしまう）や
 *     本文幅が崩れる。そのため #fvContainer / .blogContainer の ID・クラス名は使い回さず、
 *     独自クラス（.column-fv / .column-blogContainer）として下記に完全に自己完結で定義している。
 *     見た目は css/single.css の #fvContainer（350px・singleMainBack.jpg・flex中央）と
 *     h1 のスタイル（42px/700・下線帯付き）をそのまま再現。
 */

/* ===================================================
   コラム共通ヘッダー帯（メインメニュー直下・本文の上）
   既存の #fvContainer（single.css側）と同じ見た目を、
   アーカイブ／個別/タクソノミーすべてで独立して再現する
=================================================== */
.column-fv {
	width: 100%;
	height: 350px;
	background: url('https://info.wbioplfm.net/wp/wp-content/themes/wood-bio-info/img/singleMainBack.jpg') center center / cover no-repeat;
	display: flex;
	justify-content: center;
	align-items: center;
}

.column-fv__title {
	position: relative;
	width: 90%;
	margin: 0 auto;
	font-size: 42px;
	line-height: 1.5;
	font-weight: 700;
	text-align: center;
	color: var(--color-dk);
}
.column-fv__title::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -30px;
	width: 133px;
	height: 6px;
	background: var(--primaryColor);
	transform: translateX(-50%);
}

@media (max-width: 560px) {
	.column-fv {
		height: 300px;
	}
	.column-fv__title {
		font-size: 26px;
	}
	.column-fv__title::after {
		width: 100px;
		height: 5px;
		bottom: -15px;
	}
}

/* ===================================================
   コラム共通：本文幅（既存 .blogContainer と同じ値を独自クラスで再現）
=================================================== */
.column-blogContainer {
	width: 90%;
	max-width: 1000px;
	margin: 40px auto 0;
}

@media (max-width: 560px) {
	.column-blogContainer {
		margin: 30px auto 0;
	}
}

/* ===================================================
   共通：コンテナ下部の余白
   ※ 個別記事側は #articleContainer { padding-bottom:100px; }（single.css既存）が
     別途効くため、ここでは一覧系のみ余白を追加する。
=================================================== */
.column-archive__inner {
	padding-bottom: 4rem;
}

.column-archive__empty {
	padding: 3rem 0;
	text-align: center;
	color: var(--color-g);
}

.column-archive__subtitle {
	margin: 0 0 1.5rem;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--primaryColor);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--color-dk);
}

.column-archive__back {
	margin-top: 2rem;
}
.column-archive__back a {
	color: var(--primaryColor);
}

/* ===================================================
   一覧：タイルグリッド（PC 3列 / スマホ 1列）
=================================================== */
.column-tile-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2.5rem 2rem;
}

@media (max-width: 900px) {
	.column-tile-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 2rem 1.5rem;
	}
}

@media (max-width: 600px) {
	.column-tile-grid {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
}

.column-card {
	display: block;
	background: #fff;
	border: 1px solid var(--color-slg);
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	transition: box-shadow 0.2s, transform 0.2s;
}
.column-card:hover {
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
	transform: translateY(-2px);
}

.column-card__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.column-card__thumb {
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--color-slg);
}
.column-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.column-card__thumb-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: color-mix(in srgb, var(--primaryColor) 12%, #fff);
}
.column-card__thumb-placeholder span {
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: color-mix(in srgb, var(--primaryColor) 55%, #fff);
	font-size: 0.9rem;
}

.column-card__category {
	position: absolute;
	left: 0.75rem;
	bottom: 0.75rem;
	background: var(--primaryColor);
	color: #fff;
	font-size: 0.75rem;
	line-height: 1;
	padding: 0.45em 0.75em;
	border-radius: 2px;
	font-weight: 700;
}

.column-card__body {
	padding: 1rem 1.1rem 1.25rem;
}

.column-card__title {
	margin: 0 0 0.6rem;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.5;
	color: var(--color-dk);
}

.column-card__meta {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.8rem;
	color: var(--color-g);
	margin-bottom: 0.5rem;
}

.column-card__tags {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0.75rem;
	margin: 0;
	padding: 0;
	font-size: 0.75rem;
}
.column-card__tags li {
	color: var(--primaryColor);
}

/* ===================================================
   一覧：カテゴリー／タグ別アーカイブの1行リスト表示
=================================================== */
.column-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.column-list-item {
	border-bottom: 1px solid var(--color-slg);
}
.column-list-item:first-child {
	border-top: 1px solid var(--color-slg);
}

.column-list-item__link {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem 0.25rem;
	text-decoration: none;
	color: inherit;
	transition: background 0.15s;
}
.column-list-item__link:hover {
	background: color-mix(in srgb, var(--primaryColor) 6%, #fff);
}

.column-list-item__category {
	flex-shrink: 0;
	background: var(--primaryColor);
	color: #fff;
	font-size: 0.7rem;
	font-weight: 700;
	padding: 0.3em 0.7em;
	border-radius: 2px;
}

.column-list-item__title {
	flex: 1;
	color: var(--color-dk);
	font-weight: 500;
}

.column-list-item__date {
	flex-shrink: 0;
	font-size: 0.85rem;
	color: var(--color-g);
}

@media (max-width: 600px) {
	.column-list-item__link {
		flex-wrap: wrap;
	}
	.column-list-item__title {
		flex-basis: 100%;
		order: 3;
	}
}

/* ===================================================
   個別記事：ヘッダー直下の分類＋タイトル（本文と差別化）
=================================================== */
.column-single__header {
	margin-bottom: 2rem;
}

.column-single__category {
	display: inline-block;
	background: var(--primaryColor);
	color: #fff;
	font-size: 0.8rem;
	font-weight: 700;
	padding: 0.35em 1em;
	border-radius: 2px;
	text-decoration: none;
	margin-bottom: 0.9rem;
}

/* タグ名は <h2> だが、css/single.css 側の無条件 h2{...} 定義（中央揃え/上下15pxパディング/34px等）を
   受けてしまうため、padding・letter-spacing まで含めて明示的に上書きする */
.column-single__title {
	margin: 0 0 1rem;
	padding: 0;
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: normal;
	color: var(--color-dk);
	text-align: left;
}

.column-single__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	color: var(--color-g);
	font-size: 0.9rem;
	margin-bottom: 1.5rem;
}

.column-single__tags {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
}
.column-single__tags a {
	color: var(--primaryColor);
	text-decoration: none;
}
.column-single__tags a:hover {
	text-decoration: underline;
}

.column-single__thumb img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 4px;
}

/* ===================================================
   個別記事：本文（見出し・画像・左揃え）
=================================================== */
.column-single__body {
	text-align: left;
}

/* 見出し：本文と同色グレー＋左に短いテーマカラー帯。上3:下1の余白比率
   ※ css/single.css 側に h2,h3,h4{color:var(--primaryColor);...} と
     h2{text-align:center;padding:15px 0} 等の無条件指定があるため、
     ここで padding / text-align / letter-spacing まで含めて明示的に上書きしている。 */
.column-single__body h2,
.column-single__body h3,
.column-single__body h4 {
	text-align: left;
	color: var(--color-dk);
	font-weight: 700;
	font-size: 1.25rem;
	letter-spacing: normal;
	border-left: 4px solid var(--primaryColor);
	padding: 0 0 0 0.75em;
	margin: 2.25rem 0 0.75rem;
}
.column-single__body h3 {
	font-size: 1.15rem;
}
.column-single__body h4 {
	font-size: 1.05rem;
}
/* single.css 側の .blog h3::before / .blog h4::before,::after（■や【】の自動付与）は
   コラムのテンプレートに .blog クラスを付けていないため、そもそも当たらない想定。 */

/* 画像：白背景でも背景と分離する薄い罫線／上1:下3の余白比率 */
.column-single__body img {
	display: block;
	max-width: 100%;
	height: auto;
	border: 1px solid var(--color-slg);
	margin: 0.75rem 0 2.25rem;
}
.column-single__body figure {
	margin: 0.75rem 0 2.25rem;
}
.column-single__body figure img {
	margin: 0;
}
.column-single__body figcaption {
	margin-top: 0.5rem;
	font-size: 0.85rem;
	color: var(--color-g);
	text-align: left;
}

/* ===================================================
   個別記事：著者／URL ボックス
=================================================== */
.column-author-box {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	margin: 2.5rem 0;
	padding: 1rem 1.25rem;
	background: var(--baseColor-grayLight, #e3e3e1);
	border-radius: 4px;
	font-size: 0.9rem;
}
.column-author-box__label {
	flex-shrink: 0;
	font-weight: 700;
	color: var(--color-g);
}
.column-author-box__name a {
	color: var(--primaryColor);
	text-decoration: underline;
}

/* ===================================================
   個別記事：前後記事＋一覧へのナビ
=================================================== */
.column-single__adjacent-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin: 2.5rem 0;
	padding: 1.5rem 0;
	border-top: 1px solid var(--color-slg);
	border-bottom: 1px solid var(--color-slg);
}

.column-single__adjacent-nav-prev,
.column-single__adjacent-nav-next {
	flex: 1;
	min-width: 0;
}
.column-single__adjacent-nav-next {
	text-align: right;
}

.column-single__adjacent-nav a {
	text-decoration: none;
	color: var(--color-dk);
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}
.column-single__adjacent-nav-next a {
	align-items: flex-end;
}

.column-single__adjacent-nav-label {
	font-size: 0.75rem;
	color: var(--color-g);
}
.column-single__adjacent-nav-title {
	font-size: 0.9rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 100%;
}

.column-single__adjacent-nav-archive {
	flex-shrink: 0;
}
.column-single__adjacent-nav-archive a {
	display: inline-block;
	padding: 0.5rem 1.5rem;
	border: 1px solid var(--primaryColor);
	border-radius: 999px;
	color: var(--primaryColor);
	font-size: 0.85rem;
	font-weight: 700;
}
.column-single__adjacent-nav-archive a:hover {
	background: var(--primaryColor);
	color: #fff;
}

@media (max-width: 600px) {
	.column-single__adjacent-nav {
		flex-wrap: wrap;
	}
	.column-single__adjacent-nav-prev,
	.column-single__adjacent-nav-next {
		flex-basis: 100%;
		text-align: left;
	}
	.column-single__adjacent-nav-next a {
		align-items: flex-start;
	}
	.column-single__adjacent-nav-archive {
		order: -1;
		margin: 0 auto 0.5rem;
	}
}

/* ===================================================
   個別記事：同カテゴリーの関連記事一覧
=================================================== */
.column-related {
	margin-top: 2.5rem;
}
.column-related__title {
	margin: 0 0 1rem;
	padding: 0;
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: normal;
	color: var(--color-dk);
	text-align: left;
}