/* ==========================================================================
   コラム 一覧・詳細 /paint/column/（archive-column.php・single-column.php・template-parts/paint/column-*.php）
   Figma 04 PC 81:3015・81:3228・04 SP 249:8130・249:8584
   - c-column-card はコラムのページだけで使うので、ここに書く（ほかのページでも使うようになったら component へ移す）
   - セクションの下（112／SP 56）は tokens.css の --space-paint-section。ほかの余白・角丸は Figma の値（96・28・48 など）を px で書く
   ========================================================================== */

/* ==========================================================================
   コラムのカード（c-column-card）
   ========================================================================== */
.c-column-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background: var(--color-bg-muted);
	border-radius: var(--radius-paint-card);
}

.c-column-card__photo {
	position: relative;
	height: 230px;
	overflow: hidden;
	background: var(--blue-100); /* 写真がないとき・読み込み中の色（Figma blue/100） */
}

.c-column-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s;
}

.c-column-card__no-photo {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: var(--color-text-brand);
}

.c-column-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--space-paint-inner);
	padding: var(--space-lg) var(--space-paint-card) var(--space-xl); /* SP は下の @media で上書き */
}

.c-column-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	align-items: center;
}

/* 分類の札（コラム 詳細の分類にも使う） */
.c-column-card__category {
	display: inline-block;
	padding: var(--space-2xs) var(--space-sm);
	font: var(--text-paint-caption);
	letter-spacing: var(--ls-paint);
	color: var(--color-text-brand);
	text-decoration: none;
	background: var(--blue-100); /* Figma blue/100 */
	border-radius: var(--radius-full);
}

.c-column-card__date,
.p-column-single__date {
	font: var(--text-paint-caption);
	letter-spacing: var(--ls-paint);
	color: var(--color-text-secondary);
}

.c-column-card__title {
	font: var(--text-paint-h4);
	letter-spacing: var(--ls-paint);
	color: var(--color-text-primary);
}

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

/* カード全体を押せるように、題のリンクを広げる */
.c-column-card__link::after {
	position: absolute;
	inset: 0;
	content: "";
	border-radius: inherit;
}

.c-column-card__link:focus-visible {
	outline: none;
}

.c-column-card:has(.c-column-card__link:focus-visible) {
	outline: 3px solid var(--color-border-brand);
	outline-offset: 3px;
}

@media (hover: hover) {
	.c-column-card:hover .c-column-card__img {
		transform: scale(1.04);
	}

	.c-column-card:hover .c-column-card__title {
		color: var(--color-text-brand);
	}
}

/* ==========================================================================
   コラム 一覧（白の地）
   ========================================================================== */
.p-column-archive {
	padding-block: var(--space-paint-intro) var(--space-paint-section);
	background: var(--color-bg-canvas);
}

.p-column-archive__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-3xl);
	align-items: center;
}

.p-column-archive__inner > * {
	width: 100%;
}

/* 分類の絞り込み（c-chip-paint。折り返す） */
.p-column-archive__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
}

.p-column-archive__chips .c-chip-paint {
	text-decoration: none;
}

/* カード（PC 3列・1023px 以下 2列・SP 1列。高さをそろえる） */
.p-column-archive__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-2xl) var(--space-lg);
	align-items: stretch;
}

.p-column-archive__empty {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
	align-items: center;
	padding: var(--space-2xl) var(--space-xl);
	text-align: center;
	background: var(--color-bg-muted);
	border-radius: var(--radius-paint-card);
}

.p-column-archive__empty-text {
	font: var(--text-paint-body);
	letter-spacing: var(--ls-paint);
	color: var(--color-text-secondary);
}

/* ページ送り（丸いボタン 48） */
.p-column-archive__inner > .p-column-archive__pager {
	width: auto;
}

.p-column-archive__pages {
	display: flex;
	gap: var(--space-sm);
	align-items: center;
	justify-content: center;
}

.p-column-archive__page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	font: var(--text-paint-label-l);
	letter-spacing: var(--ls-paint);
	color: var(--color-text-primary);
	text-decoration: none;
	background: var(--color-bg-canvas);
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-full);
	transition: background-color 0.2s, border-color 0.2s;
}

.p-column-archive__page--prev,
.p-column-archive__page--next {
	color: var(--color-text-brand);
}

.p-column-archive__page.is-current {
	color: var(--color-text-on-brand);
	background: var(--color-bg-brand);
	border-color: var(--color-bg-brand);
}

.p-column-archive__page.is-disabled {
	opacity: 0.4;
}

@media (hover: hover) {
	a.p-column-archive__page:hover {
		background: var(--color-bg-muted);
		border-color: var(--color-border-brand);
	}
}

/* ==========================================================================
   コラム 詳細（本文 720 ＋ サイドバー 360）
   ========================================================================== */
.p-column-single {
	padding-block: var(--space-5xl) var(--space-paint-section); /* SP は下の @media で上書き */
	background: var(--color-bg-canvas);
}

.p-column-single__inner {
	display: flex;
	gap: var(--space-6xl);
	align-items: flex-start;
}

.p-column-single__article {
	display: flex;
	flex: 0 1 720px;
	flex-direction: column;
	gap: var(--space-2xl);
	min-width: 0;
}

.p-column-single__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	align-items: center;
}

.p-column-single__photo {
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: var(--blue-100); /* 読み込み中の色（Figma blue/100） */
	border-radius: var(--radius-paint-surface);
}

.p-column-single__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* この記事でわかること（本文の h2 から） */
.p-column-single__toc {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	padding: var(--space-xl) var(--space-paint-panel); /* SP は下の @media で上書き */
	background: var(--color-bg-muted);
	border-radius: var(--radius-paint-card);
}

.p-column-single__toc-title {
	font: var(--text-paint-h4);
	letter-spacing: var(--ls-paint);
	color: var(--color-text-primary);
}

.p-column-single__toc-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.p-column-single__toc-item {
	display: flex;
	gap: var(--space-sm);
	align-items: center;
}

.p-column-single__toc-item > :first-child {
	flex-shrink: 0;
}

.p-column-single__toc-text {
	flex: 1 1 0;
	min-width: 0;
	padding-block: 7px; /* 押せる高さを 44px に（見た目の間は変えない） */
	margin-block: -7px;
	font: var(--text-paint-body);
	letter-spacing: var(--ls-paint);
	color: var(--color-text-primary);
	text-decoration: none;
}

@media (hover: hover) {
	.p-column-single__toc-text:hover {
		color: var(--color-text-brand);
		text-decoration: underline;
	}
}

/* 本文（管理画面で書いた記事。見出しの間 40・見出しと文の間 16） */
.p-column-single__content {
	font: var(--text-paint-body);
	letter-spacing: var(--ls-paint);
	color: var(--color-text-primary);
}

.p-column-single__content > * + * {
	margin-top: var(--space-md);
}

.p-column-single__content > h2 {
	font: var(--text-paint-h3);
	letter-spacing: var(--ls-paint);
	scroll-margin-top: var(--space-6xl);
}

.p-column-single__content > h3 {
	font: var(--text-paint-h4);
	letter-spacing: var(--ls-paint);
}

.p-column-single__content > h2:not(:first-child) {
	margin-top: var(--space-2xl);
}

.p-column-single__content > h3:not(:first-child) {
	margin-top: var(--space-xl);
}

.p-column-single__content ul,
.p-column-single__content ol {
	padding-left: 1.5em;
}

.p-column-single__content ul {
	list-style: disc;
}

.p-column-single__content ol {
	list-style: decimal;
}

.p-column-single__content li + li {
	margin-top: var(--space-2xs);
}

.p-column-single__content a {
	color: var(--color-text-brand);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.p-column-single__content strong {
	font-weight: 700;
}

.p-column-single__content img {
	height: auto;
	border-radius: var(--radius-xl);
}

.p-column-single__content figcaption {
	margin-top: var(--space-xs);
	font: var(--text-paint-caption);
	letter-spacing: var(--ls-paint);
	color: var(--color-text-secondary);
}

.p-column-single__content blockquote {
	padding: var(--space-lg);
	background: var(--color-bg-muted);
	border-radius: var(--radius-xl);
}

.p-column-single__content table {
	width: 100%;
	font: var(--text-paint-body-s);
	letter-spacing: var(--ls-paint);
}

.p-column-single__content th,
.p-column-single__content td {
	padding: var(--space-sm) var(--space-md);
	text-align: left;
	border: 1px solid var(--color-border-default);
}

.p-column-single__content th {
	background: var(--color-bg-muted);
}

/* 劣化セルフ診断の案内（青い面） */
.p-column-single__cta {
	display: flex;
	gap: var(--space-lg);
	align-items: center;
	padding: var(--space-xl) var(--space-paint-panel); /* SP は下の @media で上書き */
	color: var(--color-text-on-brand);
	background: var(--color-bg-brand);
	border-radius: var(--radius-paint-panel);
}

.p-column-single__cta-icon {
	flex-shrink: 0;
	line-height: 0;
}

.p-column-single__cta-body {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.p-column-single__cta-title {
	font: var(--text-paint-h4);
	letter-spacing: var(--ls-paint);
}

.p-column-single__cta-text {
	font: var(--text-paint-body-s);
	letter-spacing: var(--ls-paint);
}

.p-column-single__cta-action {
	flex-shrink: 0;
}

/* サイドバー（新着の記事・無料で診断・見積もり） */
.p-column-single__side {
	display: flex;
	flex: 0 0 360px;
	flex-direction: column;
	gap: var(--space-lg);
}

.p-column-single__popular {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
	padding: var(--space-paint-card) var(--space-paint-card) 20px;
	background: var(--color-bg-muted);
	border-radius: var(--radius-paint-card);
}

.p-column-single__popular-title {
	font: var(--text-paint-h4);
	letter-spacing: var(--ls-paint);
	color: var(--color-text-primary);
}

.p-column-single__popular-list > li + li {
	border-top: 1px solid var(--color-border-default);
}

.p-column-single__popular-item {
	display: flex;
	gap: var(--space-xs);
	align-items: center;
	min-height: 44px;
	padding-block: var(--space-md);
	color: var(--color-text-primary);
	text-decoration: none;
}

.p-column-single__popular-text {
	flex: 1 1 0;
	min-width: 0;
	font: var(--text-paint-body-bold);
	letter-spacing: var(--ls-paint);
}

.p-column-single__popular-icon {
	flex-shrink: 0;
	color: var(--color-text-brand);
}

@media (hover: hover) {
	.p-column-single__popular-item:hover .p-column-single__popular-text {
		color: var(--color-text-brand);
		text-decoration: underline;
	}
}

/* ==========================================================================
   SP（Figma 249:8130・249:8584：チップは折り返す・カード1列・サイドバーは本文の下）
   ========================================================================== */
/* 一覧：1023px 以下は2列（3列ではカードが約210px になり、題名が6〜7行になったため。かなさのコラムの一覧と同じ。高さは行ごとにそろう） */
@media (max-width: 1023px) {
	.p-column-archive__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* 詳細：本文とサイドバーが横に入らない幅（1199px 以下）は、サイドバーを本文の下へ（SP と同じ並び） */
@media (max-width: 1199px) {
	.p-column-single__inner {
		flex-direction: column;
		gap: var(--space-4xl);
		align-items: center;
	}

	.p-column-single__article,
	.p-column-single__side {
		flex: none;
		width: 100%;
		max-width: 720px;
	}
}

@media (max-width: 767px) {
	/* カード */
	.c-column-card__photo {
		height: 200px;
	}

	.c-column-card__body {
		gap: 10px;
		padding: var(--space-lg) var(--space-xl) var(--space-xl);
	}

	/* 一覧 */
	.p-column-archive {
		padding-block: var(--space-3xl) var(--space-paint-section);
	}

	.p-column-archive__inner {
		gap: var(--space-paint-card);
	}

	.p-column-archive__chips {
		gap: var(--space-xs);
	}

	.p-column-archive__list {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-md);
	}

	/* 詳細 */
	.p-column-single {
		padding-block: var(--space-2xl) var(--space-paint-section);
	}

	.p-column-single__inner {
		flex-direction: column;
		gap: var(--space-4xl);
		align-items: stretch;
	}

	.p-column-single__article {
		flex: none;
		gap: var(--space-2xl);
	}

	.p-column-single__toc {
		gap: var(--space-sm);
		padding: var(--space-xl) var(--space-lg);
	}

	.p-column-single__toc-list {
		gap: var(--space-sm);
	}

	.p-column-single__content > * + * {
		margin-top: var(--space-sm);
	}

	.p-column-single__cta {
		flex-direction: column;
		gap: var(--space-md);
		align-items: flex-start;
		padding: var(--space-xl) var(--space-lg);
	}

	.p-column-single__cta-body {
		flex: none;
		width: 100%;
	}

	.p-column-single__cta-action {
		width: 100%;
	}

	.p-column-single__side {
		flex: none;
		gap: var(--space-md);
	}

	.p-column-single__popular {
		padding: var(--space-xl) var(--space-lg);
	}
}

/* SP の表：列を等分する固定の組み方（WordPress の has-fixed-layout）だと 320px の3列の表は1列に約4字しか入らないので、
   列の幅を中身に合わせ、1列は最低 7字ぶん。入らない表だけ、表の箱（.wp-block-table。WordPress で overflow-x: auto）の中で横にスクロールする（2026-10-06 ユーザー決定） */
@media (max-width: 767px) {
	.p-column-single__content .wp-block-table {
		overflow-x: auto;
	}

	.p-column-single__content .wp-block-table table {
		table-layout: auto;
	}

	.p-column-single__content .wp-block-table :is(th, td) {
		min-width: 7em;
		line-break: strict; /* 「ー」・小さいかなを行の頭にしない */
		text-wrap: balance; /* 行の長さをそろえ、最後の行を1字にしない */
	}

	/* Safari（文節で折れない）：語のかたまりごとに折る指定（text-wrap.js が付ける keep-all）だと、かたまりが列より長いとき字の途中で切られ、
	   「、」が行の頭に出たり1字の行ができたりした。表のセルは日本語のふつうの折り返し（行の頭の禁則あり）にして、行の長さをそろえる。
	   pretty は細い列で行を全部短く組み直すので使わない（2026-10-06） */
	@supports not (word-break: auto-phrase) {
		.p-column-single__content .wp-block-table :is(th, td) {
			word-break: normal !important;
			overflow-wrap: break-word !important;
			text-wrap: balance;
		}
	}
}