/* =====================================================================
   ページ: コラム一覧（Column archive）  Figma 76:20965
   MV=components/mv.css(.c-mv) / 記事カード=components/card(.c-card--bare) /
   CTA=components/cta-visit(.c-cta-visit) を共通利用。
   本ファイルは MVの左右イラスト・ピックアップ記事・カテゴリフィルタ・
   グリッド配置・もっと見るボタンの差分のみ。
   ===================================================================== */

/* base.css の section{margin-block:48} を打ち消す（余白は各セクションのpaddingで管理）。
   未リセットだとヘッダー直下・MV周りに48pxのbody背景余白が出て波がflushにならない。 */
.column section { margin-block: 0; }

/* --- セクション内 z-index 基準ユーティリティ（紙テクスチャ廃止） --------------- */
.has-texture { position: relative; }
.has-texture > * { position: relative; z-index: 1; }

/* MVの左右イラストは共通クラス（components/mv.css の .c-mv__fig）に委譲。 */

/* --- 一覧セクション ----------------------------------------------------- */
.column-list {
	/* 背景：オフホワイトのテクスチャ（Figma 76:20965。色を焼き込んだ紙テクスチャを
	   346.8×327.8px で直接フィル。multiply は使わない＝CTA波形と継ぎ目を出さない）。 */
	background-color: var(--color-bg-offwhite);
	background-image: url("../../images/common/tex-offwhite.webp");
	background-position: top left;
	background-size: 346.8px 327.8px;
	background-repeat: repeat;
	padding-block: var(--space-80) var(--space-160);
}
.column-list__inner {
	max-width: var(--layout-max);
	margin-inline: auto;
	padding-inline: var(--space-80);
}

/* セクション内の縦間隔（Figma: 記事→フィルタ80 / フィルタ→グリッド48 / グリッド→ページネーション40）。 */
.column-featured       { margin-bottom: var(--space-80); }
.column-list .c-filter { margin-bottom: var(--space-48); }
.column-grid           { margin-bottom: var(--space-40); }
.column-list__inner > :last-child { margin-bottom: 0; }

/* --- ピックアップ記事（横並び：左画像＋右本文）------------------------- */
.column-featured {
	display: flex;
	gap: var(--space-40);
	align-items: flex-start;
}
.column-featured__media {
	flex: 0 0 auto;
	width: 360px;
	aspect-ratio: var(--ratio-silver);
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--color-gray-light);
}
.column-featured__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.column-featured__body {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
}
.column-featured__date {
	margin: 0;
	font-size: var(--font-size-h6);
	font-weight: var(--font-weight-bold);
	color: var(--color-brown-text);
}
.column-featured__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-8);
}
.column-featured__title {
	margin: 0;
	font-size: var(--font-size-h3-lg);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-heading);
	color: var(--color-brown-text);
}
.column-featured__title a {
	color: inherit;
	text-decoration: none;
}
.column-featured__title a:hover { text-decoration: underline; }
.column-featured__excerpt {
	margin: 0;
	font-size: var(--font-size-h5);
	line-height: var(--line-height-body);
	color: var(--color-brown-text);
}

/* カテゴリフィルタは共通コンポーネント（components/list.css の .c-filter）に委譲。 */

/* --- 記事グリッド（列48px・行40pxの間隔。本体は .c-card--bare）-------- */
.column-grid { gap: var(--space-40) var(--space-48); }

/* ページネーションは共通コンポーネント components/list.css の .c-pagination
   （ic_pagination() が出力。お知らせ一覧と共通）。 */

.column-list__empty {
	color: var(--color-brown-text);
	font-size: var(--font-size-h4);
}

/* 詳細ページ（single-column.php）のレイアウトは共通コンポーネント
   components/single-detail.css（.c-detail / .c-related）に委譲。 */

/* --- レスポンシブ ------------------------------------------------------- */
@media (max-width: 900px) {
	.column-list__inner { padding-inline: var(--space-24); }
	.column-featured { margin-bottom: var(--space-48); }
	.column-grid { gap: var(--space-32); }
}
@media (max-width: 768px) {
	.column-featured {
		margin-bottom: var(--space-40);
	}
	.column-list { padding-block: var(--space-24) var(--space-64); }  /* 上24 / 下64 */
	.column-list__inner { padding-inline: var(--space-16); }
	.column-list .c-filter {
		margin-bottom: var(--space-24);
	}

	/* カードは1カラム。各カードを featured と同じ横並び（写真左／本文右）にする。 */
	.column-grid { grid-template-columns: 1fr; gap: var(--space-24); }
	.column-grid .c-card {
		flex-direction: row;
		gap: var(--space-16);
		align-items: flex-start;
	}
	/* 横並びの写真列は 40% 幅。.c-card の直接の flex 子は画像を包む
	   .c-card__media-link なので、幅はそちらに当てる（img へ当てても効かない）。
	   画像がリンクなしで直下に来るケースの保険で .c-card__media 直下も対象にする。 */
	.column-grid .c-card__media-link,
	.column-grid > .c-card > .c-card__media {
		flex: 0 0 120px;
		width: 120px;
	}
	.column-grid .c-card__media { border-radius: var(--radius-sm); }
	.column-grid .c-card__body { padding: 0; gap: var(--space-8); }
	.column-grid .c-card__title { font-size: var(--font-size-sm); line-height: var(--line-height-snug); }
	.column-grid .c-card__text { display: none; }

	/* featured（写真左｜本文右の横並びを維持。抜粋はSPでは非表示）。 */
	.column-featured { gap: var(--space-16); }
	.column-featured__media { width: 40%; border-radius: var(--radius-sm); }
	.column-featured__body { gap: var(--space-8); }
	.column-featured__title { font-size: var(--font-size-sm); line-height: var(--line-height-snug); }
	.column-featured__excerpt { display: none; }
}