/* ==========================================================================
   お知らせ — Figma 「/news - phiên bản đầy đủ - 3/11」 (list) + 「/news/article-title - 3/11」 (detail).
   + SP 「/news - bản đầy đủ」「/news/article」 (375). SP values = the variables; PC overrides from 1024.
   SP: 20px gutters everywhere (hero, list, article).
   Post body (h2, table, 目次…): assets/css/article.css (shared with the editor).
   ========================================================================== */

/* Hero 「News / お知らせ」: SP title 40 (other pages 30), 72 under it (no button) */
@media (max-width: 1023.98px) {
	.c-page-hero--band:has(+ .p-news) {
		--ph-title-size: 40px;
		--ph-pad-bottom: 72px;
	}

	.p-news__inner,
	.p-article__inner {
		padding-inline: 20px;
	}
}

/* --- Shared: date + category chip ------------------------------------------- */
.p-news-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.p-news-meta__date {
	font-family: var(--font-en);
	font-size: var(--fs-text);
	font-weight: 400;
	line-height: 1.6;
	color: var(--c-text-muted);
}

.p-news-meta__cat,
.p-news-meta__draft {
	padding: 2px 10px;
	font-size: 10px;
	font-weight: 500;
	line-height: 1.6;
	border-radius: 20px;
}

.p-news-meta__cat {
	color: var(--c-on-dark);
	background-color: var(--c-text-subtle);
}

/* Draft preview (editors only) */
.p-news-meta__draft {
	color: var(--c-text-muted);
	border: 1px dashed var(--c-text-subtle);
}

/* --- List /news/ ------------------------------------------------------------
   PC: column 900, 100 under the hero. Filter pills 33 tall (r20, 14/500, #9EA6AE; current
   #00479D), 24 above / 48 below; rule #EEEEEE; items padding 32 / 0, 10 apart
   (meta → title 15/700 → excerpt 14, 2 lines), rules between; pager 48 below.
   SP: 80 under the hero; pills wrap (rows 16 apart), 0 above / 32 below; excerpt 4 lines;
   pager 32 below, one line. */
.p-news {
	/* SP = Figma SP */
	--news-pad-top: var(--space-20);
	--news-filter-pad: 0 0 var(--space-8);
	--news-pill-row-gap: var(--space-4);
	--news-excerpt-lines: 4;
	--news-pager-gap: var(--space-8);

	padding-top: var(--news-pad-top);
}

.p-news__inner,
.p-article__inner {
	max-width: calc(var(--container-article) + var(--container-padding) * 2);
}

.p-news-filter {
	padding: var(--news-filter-pad);
}

.p-news-filter__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--news-pill-row-gap) var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.p-news-filter__item {
	display: inline-flex;
	align-items: center;
	min-height: 33px;
	padding: 4px 16px 5px;
	font-size: var(--fs-text);
	font-weight: 500;
	line-height: 1.6;
	color: var(--c-text-subtle);
	text-decoration: none;
	background-color: var(--c-bg);
	border: 1px solid var(--c-text-subtle);
	border-radius: 20px;
	transition: color var(--transition-fast), border-color var(--transition-fast);
}

.p-news-filter__item:hover,
.p-news-filter__item[aria-current="page"] {
	color: var(--c-primary);
	border-color: var(--c-primary);
}

.p-news-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.p-news-list__item:not(:last-child) {
	border-bottom: 1px solid var(--c-border-light);
}

/* Few posts (Figma 「/news」 = the start: 1 category, 1–2 posts) — follows from the content:
   no filter → no rule above, 1st post starts right at the top;
   no pager  → rule under the last post, then the CTA band. */
.p-news-filter + .p-news-list {
	border-top: 1px solid var(--c-border-light);
}

.p-news-list:first-child > .p-news-list__item:first-child > .p-news-list__link {
	padding-top: 0;
}

.p-news-list:last-child > .p-news-list__item:last-child {
	border-bottom: 1px solid var(--c-border-light);
}

.p-news-list__link {
	display: grid;
	gap: 10px;
	padding-block: var(--space-8);
	text-decoration: none;
}

.p-news-list__title {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.6;
	transition: color var(--transition-fast);
}

.p-news-list__link:hover .p-news-list__title {
	color: var(--c-primary);
}

.p-news-list__excerpt {
	display: -webkit-box;
	overflow: hidden;
	font-size: var(--fs-text);
	line-height: 1.6;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--news-excerpt-lines);
	line-clamp: var(--news-excerpt-lines);
}

/* No post yet: laid out like a single post (no rule above, rule under) */
.p-news__empty {
	padding-bottom: var(--space-8);
	font-size: var(--fs-text);
	line-height: 1.6;
	color: var(--c-text-muted);
	border-bottom: 1px solid var(--c-border-light);
}

/* Pager: 40px circles 10 apart, Geologica 200 / 13; current 1px #00479D; ‹ › 8×16 */
.p-news-pager {
	margin-top: var(--news-pager-gap);
}

/* SP: one line. 7 items (Figma 「‹ 01 02 03 … 10 ›」) = 340, a little wider than the 335 column
   (Figma lets it stick out); more items (middle pages) → tighter circles. */
@media (max-width: 1023.98px) {
	.p-news-pager__list {
		flex-wrap: nowrap;
		margin-inline: -10px;
	}

	.p-news-pager__list:has(> li:nth-child(8)) {
		gap: 2px;
	}

	.p-news-pager__list:has(> li:nth-child(8)) .page-numbers {
		width: 36px;
		height: 36px;
	}
}

.p-news-pager__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.p-news-pager .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	font-family: var(--font-en);
	font-size: 13px;
	font-weight: 200;
	line-height: 1.6;
	color: var(--c-text);
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: 50%;
	transition: background-color var(--transition-fast), color var(--transition-fast);
}

.p-news-pager a.page-numbers:hover {
	background-color: var(--c-bg-alt);
}

.p-news-pager .page-numbers.current {
	color: var(--c-primary);
	border-color: var(--c-primary);
}

.p-news-pager .page-numbers.is-disabled {
	color: var(--c-border);
}

.p-news-pager__icon {
	width: 8px;
	height: 16px;
}

@media (min-width: 1024px) {
	.p-news {
		--news-pad-top: 100px;
		--news-filter-pad: var(--space-6) 0 var(--space-12);
		--news-pill-row-gap: var(--space-2);
		--news-excerpt-lines: 2;
		--news-pager-gap: var(--space-12);
	}
}

/* --- Detail ------------------------------------------------------------------
   PC: 124 under the header (frame 220 − header 96); breadcrumb 14/500 (current #9EA6AE,
   chevrons 4×8 #9EA6AE, 11 apart) → 48 → title 40/700 lh 1.4 → 24 → meta → 40 → body;
   40 under the body, then the CTA band.
   SP: 32 under the header; crumb → 32 → title 30/700; 40 under the body. */
.p-article {
	/* SP = Figma SP */
	--article-pad-top: var(--space-8);
	--article-pad-bottom: var(--space-10);
	--article-title-size: 30px;
	--article-crumb-gap: var(--space-8);

	padding-block: var(--article-pad-top) var(--article-pad-bottom);
}

.p-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 11px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--fs-text);
	font-weight: 500;
	line-height: 1.6;
}

.p-breadcrumb__list li {
	display: flex;
	align-items: center;
	gap: 11px;
	min-width: 0;
}

.p-breadcrumb__list li + li::before {
	content: "";
	flex-shrink: 0;
	width: 5px;
	height: 9px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 9'%3E%3Cpath d='M.5.5l4 4-4 4' fill='none' stroke='%239EA6AE'/%3E%3C/svg%3E") no-repeat center / contain;
}

.p-breadcrumb__list a {
	text-decoration: none;
}

.p-breadcrumb__list a:hover {
	color: var(--c-primary);
	text-decoration: underline;
}

.p-breadcrumb__list [aria-current="page"] {
	flex: 1 1 0;
	color: var(--c-text-subtle);
}

/* The post title: one line, cut with 「…」 (the full title is the h1 just below) */
.p-breadcrumb__current {
	overflow: hidden;
	min-width: 0;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.p-article__header {
	margin-top: var(--article-crumb-gap);
}

.p-article__title {
	font-size: var(--article-title-size);
	font-weight: 700;
	line-height: 1.4;
}

.p-article__header .p-news-meta {
	margin-top: var(--space-6);
}

.p-article__body {
	margin-top: var(--space-10);
}

@media (min-width: 1024px) {
	.p-article {
		--article-pad-top: 124px;
		--article-title-size: 40px;
		--article-crumb-gap: var(--space-12);
	}
}