@use "variables" as *;

// ===========================================================================
// Article detail  (single-news.php and other CPT singles, via
// template-parts/article-detail.php). Generic `.article` shell + `.entry-content`
// Gutenberg styling. Goal: the client composes a body with PLAIN core blocks
// (no colour/size settings) and it comes out on-brand.
//   Content column = --narrow (≈1024 design column, same as the archive).
// ===========================================================================

// --- article header ---------------------------------------------------------
.article__head {
	padding-bottom: rem(30);
	margin-bottom: rem(50);
	border-bottom: 1px dashed $color-rule; // design: dashed rule under the title
}

.article__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: rem(16);
}

.article__cat {
	display: inline-flex;
	align-items: center;
	padding: rem(4) rem(20);
	background: $color-lime;
	border-radius: $radius-pill;
	font-family: $font-sans;
	font-weight: 700;
	font-size: rem(14);
	line-height: 1.4;
	color: $color-white;
	transition: opacity 0.2s;

	&:hover {
		opacity: 0.8;
		text-decoration: none;
	}

	@include sp {
		font-size: rem(13);
	}
}

.article__date {
	font-family: $font-sans;
	font-size: rem(16);
	color: $color-text;
	line-height: 1.4;

	@include sp {
		font-size: rem(14);
	}
}

.article__title {
	margin-top: rem(20);
	font-family: $font-sans; // design: sans, not the serif heading default
	font-weight: 600;
	font-size: rem(20);
	line-height: 1.8;
	color: $color-green;

	@include sp {
		font-size: rem(18);
	}
}

// --- back button ------------------------------------------------------------
.article__foot {
	margin-top: rem(50);
	padding-top: rem(40);
	border-top: 1px dashed $color-rule;

	@include sp {
		margin-top: rem(40);
		padding-top: rem(30);
	}
}

// ===========================================================================
// .entry-content — Gutenberg core-block output. Every treatment is driven by
// the block the editor chose, NOT by colours they set:
//   heading block        -> green sans heading
//   bold (<strong>/<b>)  -> green highlight (the design's 強調 bar)
//   link                 -> green underline
// Shared by Pages (page.php) and all CPT singles.
// ===========================================================================
.entry-content {
	font-family: $font-sans;
	font-size: rem(16);
	line-height: 1.75; // 28 / 16
	color: $color-text;

	// vertical rhythm between top-level blocks
	> * + * {
		margin-top: rem(28);
	}

	// headings — sans bold green automatically (no colour set by the editor)
	h2,
	h3,
	h4 {
		font-family: $font-sans;
		font-weight: 700;
		color: $color-green;
		line-height: 1.6;
	}

	h2 {
		font-size: rem(20);
		margin-top: rem(48);
	}

	h3 {
		font-size: rem(18);
		margin-top: rem(40);
	}

	h4 {
		font-size: rem(16);
		margin-top: rem(32);
	}

	// bold => the green emphasis bar (white text on green). The client just
	// selects text and hits Bold; box-decoration-break keeps the bg + padding
	// when the highlight wraps across lines.
	:is(strong, b) {
		background: $color-green;
		color: $color-white;
		padding: rem(2) rem(8);
		font-weight: 700;
		-webkit-box-decoration-break: clone;
		box-decoration-break: clone;
	}

	a {
		color: $color-green;
		text-decoration: underline;
		text-underline-offset: 0.15em;

		&:hover {
			opacity: 0.75;
		}
	}

	// a bold link shouldn't become a green-on-green block — keep links readable
	a :is(strong, b),
	:is(strong, b) a {
		background: none;
		color: inherit;
		padding: 0;
	}

	// global base resets list-style; restore it inside article content
	ul,
	ol {
		padding-left: rem(24);
	}

	ul {
		list-style: disc;
	}

	ol {
		list-style: decimal;
	}

	li + li {
		margin-top: rem(8);
	}

	// description lists (定義リスト) — green bold term, indented detail.
	dt {
		margin-top: rem(20);
		font-weight: 700;
		color: $color-green;
	}

	dl > dt:first-child {
		margin-top: 0;
	}

	dd {
		margin-top: rem(4);
		padding-left: rem(16);
	}

	// images render as-is (grey placeholders during build); full content width
	img {
		display: block;
		width: 100%;
		height: auto;
	}

	figure {
		margin: 0;
	}

	figcaption {
		margin-top: rem(8);
		font-size: rem(12);
		color: #777;
		text-align: center;
	}

	blockquote {
		margin: 0;
		padding: rem(8) rem(20);
		border-left: 3px solid $color-green;
		color: $color-text;
	}

	// Gutenberg columns (e.g. 2 images side by side) keep a comfortable gap;
	// the block already stacks to 1 column on narrow screens.
	.wp-block-columns {
		gap: rem(20);
	}
}