/* =========================================================
   Column（コラム＝WordPress標準投稿）
   Figma node 113:32265。背景 --bg-studio(#f5f4f1)＋筆記体「Column」＋サブ「コラム」＋3カラムカード。
   カード：アイキャッチ上（比率270:191・天地中央クリップ）→日付→タイトル→抜粋。角丸TL/BR 50pxの非対称。
   トップ（section-column）と一覧（home.php）で共通、詳細（single.php）は記事型。
   幅は .l-wide（980＝Figmaのカード群980pxに一致）。スマホは1カラム縦積み。
   ※ 見出しパターンは voice（.voice__title/.voice__sub）を踏襲。色のみ Figma 準拠（インク/サブ見出し）。
   ========================================================= */

/* =========================================================
   セクション共通（トップ section-column / 一覧 home.php）
   ========================================================= */
.column {
	width: 100%;
	background: var(--bg-studio); /* #f5f4f1 */
	padding: 64px 0 72px;
	overflow: hidden;
}

/* --- 見出し（中央：筆記体 Column ＋ サブ コラム） --- */
.column__header {
	text-align: center;
	margin-bottom: 44px;
}
.column__title {
	margin: 0;
	font-family: var(--font-script);
	font-weight: 400;
	font-size: 80px;
	line-height: 1;
	color: var(--color-script-ink); /* #231f20 */
}
.column__sub {
	margin: 8px 0 0;
	font-family: var(--font-gothic);
	font-weight: 600;
	font-size: 16px;
	line-height: 1.9;
	letter-spacing: 0.05em;
	color: var(--color-subhead); /* #a3937c */
}

/* =========================================================
   カードグリッド（3カラム→2→1 自動。枚数可変でも崩れない）
   min(100%, 280px) で「コンテナ幅を絶対に超えない」＝横はみ出し0を担保（≤400px も安全）。
   ※ auto-fill（auto-fit ではない）が重要：
   　 auto-fit は空トラックを潰して埋まったカードを引き伸ばすため、1〜2件だとカードが横に広がって大きくなる。
   　 auto-fill は空トラックを保持するので、件数が1でも2でも3でもカード幅は常に一定（3カラム時と同じ）で左詰めになる。
   　 → 1件のときはカードが「3カラム左端の位置・サイズ」にそのまま収まる（既存の並びと一致）。
   ========================================================= */
.column-cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
	gap: 32px;
	align-items: stretch; /* 各カード同じ高さ（タイトル/抜粋の行数差を吸収） */
}
.column-card {
	/* グリッドの1マス。見た目の箱は __link 側に持たせる（クリック領域＝カード全体） */
	min-width: 0; /* line-clamp を効かせる（子の overflow 省略のため） */
}

/* --- カード本体（白箱・非対称角丸・共通の写真影） --- */
.column-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--bg-white);
	border-radius: 50px 0 50px 0; /* 左上・右下のみ 50px（Figma） */
	box-shadow: var(--shadow-photo);
	overflow: hidden; /* アイキャッチ上端の角を箱の角丸に合わせてクリップ */
	text-decoration: none;
	color: inherit;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.column-card__link:hover {
	transform: translateY(-4px);
	box-shadow: 10px 9px 0 0 rgba(163, 147, 124, 0.3);
}

/* --- アイキャッチ（比率固定・天地中央でクリップ＝寸法不揃いでも崩れない） --- */
.column-card__thumb {
	margin: 0;
	width: 100%;
	aspect-ratio: 270 / 191;
	overflow: hidden;
	background: var(--bg-tan); /* 読み込み前/未設定の下地 */
}
.column-card__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center; /* 天地中央クリップ */
}
.column-card__thumb-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--bg-tan); /* アイキャッチ未設定時のダミー */
}

/* --- テキスト群（日付→タイトル→抜粋） --- */
.column-card__body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	padding: 16px 20px 26px;
}
.column-card__date {
	display: block;
	margin: 0 0 12px;
	font-family: var(--font-mincho);
	font-weight: 300;
	font-size: 11px;
	line-height: 1;
	letter-spacing: 0.05em;
	color: var(--color-text); /* 背景は #f5f4f1（taupeでない）→ --color-text */
}
.column-card__title {
	margin: 0 0 10px;
	font-family: var(--font-gothic);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: 0.05em;
	color: var(--color-text);
	/* 2行で省略（長文でもカードが伸びすぎない） */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.column-card__excerpt {
	margin: 0;
	font-family: var(--font-gothic);
	font-weight: 300;
	font-size: 14px;
	line-height: 1.6;
	letter-spacing: 0.05em;
	color: var(--color-text);
	/* 2行で省略 */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* --- 「コラムをもっと見る」ボタン（voice__more と同じアウトライン調） --- */
.column__more {
	margin-top: 48px;
	text-align: center;
}
.column__more-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 240px;
	height: 50px;
	padding: 0 28px;
	background: var(--bg-white);
	border: 1px solid var(--color-btn-outline);
	color: var(--color-text);
	font-family: var(--font-gothic);
	font-weight: 300;
	font-size: 16px;
	letter-spacing: 0.32px;
	text-decoration: none;
	transition: opacity 0.2s ease;
}
.column__more-button:hover {
	opacity: 0.75;
}

/* =========================================================
   一覧ページ（home.php）固有
   ========================================================= */
.column-archive {
	display: block;
}
.column--archive {
	/* セクション共通の .column をそのまま流用。ページ単体でも上下に余白を確保 */
	padding: 80px 0 96px;
}
.column__empty {
	text-align: center;
	font-family: var(--font-gothic);
	font-weight: 300;
	font-size: 15px;
	letter-spacing: 0.04em;
	color: var(--color-text);
}
/* ページャ（the_posts_pagination） */
.column--archive .pagination {
	margin-top: 56px;
	display: flex;
	justify-content: center;
}
.column--archive .nav-links {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	justify-content: center;
}
.column--archive .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 10px;
	background: var(--bg-white);
	border: 1px solid var(--color-border-card);
	font-family: var(--font-gothic);
	font-weight: 300;
	font-size: 14px;
	color: var(--color-text);
	text-decoration: none;
	transition: opacity 0.2s ease;
}
.column--archive .page-numbers:hover {
	opacity: 0.75;
}
.column--archive .page-numbers.current {
	background: var(--color-subhead);
	border-color: var(--color-subhead);
	color: var(--bg-white);
}
.column--archive .page-numbers.dots {
	border-color: transparent;
	background: transparent;
}

/* =========================================================
   詳細ページ（single.php）＝記事型。single-voice と同じトーン。
   ========================================================= */
.column-single {
	width: 100%;
	background: var(--bg-studio); /* #f5f4f1 */
	padding: 72px 0 96px;
}

/* --- ヘッダー（左揃え：小ラベル→日付→タイトル） --- */
.column-single__head {
	margin-bottom: 32px;
	text-align: left;
}
.column-single__label {
	margin: 0 0 10px;
	font-family: var(--font-gothic);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.1em;
	color: var(--color-subhead);
}
.column-single__date {
	display: block;
	margin: 0 0 8px;
	font-family: var(--font-mincho);
	font-weight: 300;
	font-size: 13px;
	letter-spacing: 0.05em;
	color: var(--color-text);
}
.column-single__heading {
	margin: 0;
	font-family: var(--font-mincho);
	font-weight: 600;
	font-size: 32px;
	line-height: 1.5;
	letter-spacing: 0.04em;
	color: var(--color-text);
}

/* --- アイキャッチ（横長でドンと・縦写真は中央クロップ） --- */
.column-single__eyecatch {
	margin: 0 0 48px;
	aspect-ratio: 3 / 2;
	overflow: hidden;
}
.column-single__eyecatch img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- 本文（the_content）：一般的なブログ要素の基本装飾 --- */
.column-single__body {
	font-family: var(--font-gothic);
	font-weight: 300;
	font-size: 15px;
	line-height: 1.8;
	letter-spacing: 0.4px;
	color: var(--color-text);
}
.column-single__body > :first-child { margin-top: 0; }
.column-single__body p { margin: 0 0 1.6em; }
.column-single__body h2 {
	margin: 2.2em 0 0.8em;
	padding-bottom: 0.4em;
	border-bottom: 1px solid var(--color-frame);
	font-family: var(--font-mincho);
	font-weight: 600;
	font-size: 24px;
	line-height: 1.5;
	color: var(--color-text);
}
.column-single__body h3 {
	margin: 1.8em 0 0.6em;
	font-family: var(--font-mincho);
	font-weight: 600;
	font-size: 20px;
	line-height: 1.5;
	color: var(--color-text);
}
.column-single__body h4 {
	margin: 1.6em 0 0.5em;
	font-family: var(--font-gothic);
	font-weight: 600;
	font-size: 17px;
	line-height: 1.5;
	color: var(--color-text);
}
/* 画像（単体・図） */
.column-single__body img { max-width: 100%; height: auto; }
.column-single__body figure { margin: 1.8em 0; }
.column-single__body figure img { display: block; width: 100%; height: auto; }
.column-single__body figcaption {
	margin-top: 8px;
	font-size: 13px;
	text-align: center;
	color: var(--color-subhead);
}
.column-single__body .wp-block-image { margin: 1.8em 0; }
.column-single__body .wp-block-image img { border-radius: 0; }
/* ギャラリー（wp-block-gallery＝コアのグリッド。余白だけ整える） */
.column-single__body .wp-block-gallery { margin: 1.8em 0; }
.column-single__body .wp-block-gallery figure { margin: 0; }
.column-single__body .wp-block-gallery figcaption { margin-top: 4px; }
/* リスト */
.column-single__body ul,
.column-single__body ol { margin: 0 0 1.6em; padding-left: 1.4em; }
.column-single__body li { margin: 0.3em 0; }
.column-single__body ul { list-style: disc; }
.column-single__body ol { list-style: decimal; }
/* リンク */
.column-single__body a {
	color: var(--color-btn-outline);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.column-single__body a:hover { opacity: 0.75; }
/* 引用 */
.column-single__body blockquote {
	margin: 1.8em 0;
	padding: 12px 20px;
	border-left: 3px solid var(--color-border-olive);
	color: var(--color-text);
}
.column-single__body blockquote p:last-child { margin-bottom: 0; }
/* 区切り線・表 */
.column-single__body hr {
	margin: 2.4em 0;
	border: 0;
	border-top: 1px solid var(--color-frame);
}
.column-single__body table {
	width: 100%;
	margin: 1.8em 0;
	border-collapse: collapse;
}
.column-single__body th,
.column-single__body td {
	padding: 8px 12px;
	border: 1px solid var(--color-frame);
	text-align: left;
}

/* --- 前後の記事ナビ（single-voice と同じ・ラベルのみ表示） --- */
.column-single__nav {
	margin-top: 56px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.column-single__nav-slot { min-width: 0; }
.column-single__nav-slot--prev { justify-self: start; text-align: left; }
.column-single__nav-slot--next { justify-self: end;   text-align: right; }
.column-single__nav-link {
	display: inline-flex;
	flex-direction: column;
	gap: 6px;
	max-width: 100%;
	text-decoration: none;
	color: var(--color-text);
	transition: opacity 0.2s ease;
}
.column-single__nav-link:hover { opacity: 0.7; }
.column-single__nav-dir {
	font-family: var(--font-gothic);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.06em;
	color: var(--color-subhead);
}
.column-single__nav-slot--prev .column-single__nav-dir::before {
	content: "〈";
	display: inline-block;
	vertical-align: middle;
	margin: -2px 10px 1px 0;
}
.column-single__nav-slot--next .column-single__nav-dir::after {
	content: "〉";
	display: inline-block;
	vertical-align: middle;
	margin: -2px 0 1px 10px;
}
.column-single__nav-title { display: none; } /* ラベルのみ（single-voice と統一） */

/* --- 一覧へ戻る --- */
.column-single__back {
	margin: 48px auto 0;
	text-align: center;
}
.column-single__back a {
	font-family: var(--font-gothic);
	font-weight: 300;
	font-size: 15px;
	letter-spacing: 0.3px;
	color: var(--color-text);
	text-decoration: none;
	transition: opacity 0.2s ease;
}
.column-single__back a:hover { opacity: 0.7; }

/* =========================================================
   タブレット（≤900px）：カード間隔を少し詰める
   ========================================================= */
@media (max-width: 900px) {
	.column-cards { gap: 24px; }
}

/* =========================================================
   スマホ（≤599px）：見出し縮小・1カラム縦積み・詳細余白調整
   ========================================================= */
@media (max-width: 599px) {
	.column { padding: 56px 0 64px; }
	.column--archive { padding: 64px 0 72px; }
	.column__title { font-size: 60px; }
	.column__sub { margin-top: 4px; }
	.column__header { margin-bottom: 32px; }
	/* auto-fit + min(100%,280px) で自然に1カラムになるが、狭幅でも確実に縦積み */
	.column-cards { gap: 20px; }

	.column-single { padding: 40px 0 64px; }
	.column-single__head { margin-bottom: 24px; }
	.column-single__heading { font-size: 24px; }
	.column-single__eyecatch { margin-bottom: 32px; }
	.column-single__body { font-size: 15px; }
	.column-single__body h2 { font-size: 20px; }
	.column-single__body h3 { font-size: 18px; }
	.column-single__nav { margin-top: 40px; gap: 12px; }
	.column-single__nav-dir { font-size: 12px; }
}