/*
 * コラム（カスタム投稿 column）専用スタイル
 * body.jicwest-column が付くページ（コラム詳細・一覧・カテゴリー・タグ）だけに読み込まれる。
 * Snow Monkey 本体のCSSは変更せず、ここで上書きする。
 */

/* --------------------------------------------------
 * 1. 画像の回り込み（float）対策
 *    見出し・表・グループ等は回り込みを解除してから始める
 * -------------------------------------------------- */
.jicwest-column .p-entry-content h2,
.jicwest-column .p-entry-content h3,
.jicwest-column .p-entry-content h4,
.jicwest-column .p-entry-content h5,
.jicwest-column .p-entry-content h6,
.jicwest-column .p-entry-content .wp-block-table,
.jicwest-column .p-entry-content .wp-block-group,
.jicwest-column .p-entry-content .wp-block-columns,
.jicwest-column .p-entry-content .wp-block-gallery,
.jicwest-column .p-entry-content .wp-block-quote,
.jicwest-column .p-entry-content .wp-block-separator,
.jicwest-column .p-entry-content .wp-block-embed,
.jicwest-column .p-entry-content .wp-block-buttons,
.jicwest-column .p-entry-content [class*="wp-block-snow-monkey-blocks"],
.jicwest-column .p-entry-content .wp-block-image:not(.alignleft):not(.alignright) {
	clear: both;
}

/* 回り込み画像とテキストの間隔を確保し、PCでも本文幅の半分までに抑える */
.jicwest-column .p-entry-content .wp-block-image.alignleft,
.jicwest-column .p-entry-content .wp-block-image.alignright {
	max-width: 50%;
	margin-bottom: 1em;
}
.jicwest-column .p-entry-content .wp-block-image.alignleft {
	margin-right: 1.5em;
}
.jicwest-column .p-entry-content .wp-block-image.alignright {
	margin-left: 1.5em;
}

/* スマホ幅では回り込みをやめて縦に並べる（1行の文字数を確保する） */
@media (max-width: 639px) {
	.jicwest-column .p-entry-content .wp-block-image.alignleft,
	.jicwest-column .p-entry-content .wp-block-image.alignright {
		float: none;
		display: block; /* Snow Monkey の display:table だと画像の元サイズに縮むため */
		width: auto !important; /* ブロックの幅指定（inline style）を打ち消す */
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
	.jicwest-column .p-entry-content .wp-block-image.alignleft img,
	.jicwest-column .p-entry-content .wp-block-image.alignright img {
		width: 100% !important; /* ブロックの幅指定（inline style）を打ち消す */
		height: auto !important;
	}
}

/* --------------------------------------------------
 * 2. コラム詳細ページの本文リンクは下線で識別できるようにする（WCAG 1.4.1 色だけに依存しない）
 *    ボタン系は除外。一覧ページの記事カードには効かせない
 * -------------------------------------------------- */
.jicwest-column.single-column .p-entry-content a:not(.smb-btn):not(.wp-block-button__link):not(.wp-block-file__button) {
	text-decoration: underline;
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
}
.jicwest-column.single-column .p-entry-content a:not(.smb-btn):not(.wp-block-button__link):not(.wp-block-file__button):hover,
.jicwest-column.single-column .p-entry-content a:not(.smb-btn):not(.wp-block-button__link):not(.wp-block-file__button):focus-visible {
	text-decoration-thickness: 2px;
}

/* --------------------------------------------------
 * 3. 表：スマホ幅では横スクロールで読めるようにする
 * -------------------------------------------------- */
@media (max-width: 639px) {
	.jicwest-column .p-entry-content .wp-block-table {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.jicwest-column .p-entry-content .wp-block-table table {
		table-layout: auto;
		width: 100%;
	}
	.jicwest-column .p-entry-content .wp-block-table th,
	.jicwest-column .p-entry-content .wp-block-table td {
		min-width: 8em;
	}
}

/* 表の見出しセルは左寄せのほうが日本語では読みやすい */
.jicwest-column .p-entry-content .wp-block-table th {
	text-align: left;
}

/* --------------------------------------------------
 * 4. 画像キャプション：本文との区別をつけつつ小さくしすぎない
 * -------------------------------------------------- */
.jicwest-column .p-entry-content figcaption {
	font-size: 0.93em;
	color: #555;
	margin-top: 0.5em;
}

/* --------------------------------------------------
 * 5. コラム用サイドバー：ウィジェット見出しの見た目を統一
 * -------------------------------------------------- */
.jicwest-column .jicwest-column-sidebar .c-widget__title {
	display: block;
	width: 100%;
}
.jicwest-column .jicwest-column-sidebar .widget_categories ul {
	list-style: none;
	padding-left: 0;
	margin: 0;
}
.jicwest-column .jicwest-column-sidebar .widget_categories li {
	padding: 0.5em 0;
	border-bottom: 1px solid #eee;
}
.jicwest-column .jicwest-column-sidebar .widget_categories li:last-child {
	border-bottom: none;
}
.jicwest-column .jicwest-column-sidebar .widget_categories .children {
	margin-top: 0.5em;
	padding-left: 1em;
}

/* --------------------------------------------------
 * 6. ギャラリー：列数指定どおりに並ぶようにする
 *    Snow Monkey はフレックス要素の gap を 1.8rem にするが、WordPress の
 *    列幅計算は --wp--style--unstable-gallery-gap（0.6rem）を使うため
 *    3列指定が 2列＋1列に崩れる。両者を同じ値にそろえて解消する。
 * -------------------------------------------------- */
.jicwest-column .p-entry-content .wp-block-gallery.has-nested-images {
	--wp--style--unstable-gallery-gap: 1rem;
	gap: 1rem;
}

/* --------------------------------------------------
 * 7. コラム一覧カードのタイトル行間
 *    Snow Monkey はカードのタイトルにも基本設定の行の高さ（1.8）を使うため、
 *    コラム関連ページの一覧カードだけ 1.5 に詰める（本文の行間は変えない）。
 *    サイドバーの「コラム最新記事」はテキスト形式で行間が気にならないため対象外。
 * -------------------------------------------------- */
.jicwest-column .p-archive .c-entries .c-entry-summary__title {
	line-height: 1.5;
}

/* --------------------------------------------------
 * 8. スマホ幅のページヘッダー（アイキャッチ）の高さ
 *    Snow Monkey はアイキャッチ付きページヘッダーを
 *    height: clamp(300px, 62.5vw, 500px) にし、サイトの追加CSSが min-height:320px を
 *    重ねているため、スマホでは画面の半分近くを画像が占める。
 *    コラム記事だけ約220pxに縮め、タイトルと本文が早く見えるようにする。
 *    （タイトル3行＋上下余白 ≒ 200px。5行以上の長いタイトルは高さが自動で伸びる）
 * -------------------------------------------------- */
@media (max-width: 639px) {
	.jicwest-column.single-column .c-page-header[data-has-image="true"] {
		min-height: 220px;
		height: auto; /* タイトルが長い場合は収まるまで伸びる */
	}
	.jicwest-column.single-column .c-page-header[data-has-image="true"] .c-page-header__title {
		line-height: 1.4;
	}
}

/* --------------------------------------------------
 * 9. 表のセルの行間
 *    セルにも本文の行間 1.8 が効き、折り返しの多いセルで広く見えるため 1.5 にする
 * -------------------------------------------------- */
.jicwest-column .p-entry-content .wp-block-table th,
.jicwest-column .p-entry-content .wp-block-table td {
	line-height: 1.5;
}