/**
 * Article detail page redesign (記事詳細.dc.html mockup) — page-specific
 * layout only. Fonts, shared tokens, the fixed header, the scroll-progress
 * bar, and the generic [data-reveal] entrance-animation mechanism all live
 * in assets/css/redesign-shared.css (this stylesheet declares itself
 * dependent on it — see inc/single-redesign.php) since the front page
 * redesign (Phase 10) uses them identically. Everything below is scoped
 * under `.entry--redesign` (this page's own body/article class) and
 * layers on top of the shared rules in the same `@layer overrides`.
 */

@layer overrides {
	.entry--redesign {
		background: var(--sr-bg);
	}

	.entry--redesign .entry-content h2[id],
	.entry--redesign .entry-content h3[id] {
		scroll-margin-top: calc(var(--sr-header-h) + var(--space-3));
	}

	/* ---------- Breadcrumb: kept (spec: screen breadcrumb must match the
	   BreadcrumbList JSON-LD in inc/schema.php), restyled small/muted so it
	   sits quietly above the hero instead of competing with it. ---------- */
	.entry--redesign .breadcrumbs {
		max-width: none;
		padding: calc(var(--sr-header-h) + var(--space-4)) var(--space-4) 0;
		font-family: var(--sr-font-mono);
	}

	.entry--redesign .breadcrumbs ol {
		font-size: 0.75rem;
		letter-spacing: 0.04em;
		color: rgb(22 33 28 / 45%);
	}

	.entry--redesign .breadcrumbs a {
		color: inherit;
	}

	/* ---------- Static Page header/content (Phase 13, page.php) — plain
	   title + single centered content column, not the article hero/
	   TOC-sidebar grid (a Page has no categories/reading-time/TOC). ---------- */
	.page-header {
		padding: var(--space-6) var(--space-4) 0;
	}

	.entry--redesign .breadcrumbs + .page-header {
		padding-top: var(--space-4);
	}

	.page-header__inner {
		max-width: var(--content-reading);
		margin-inline: auto;
	}

	.page-header__title.entry-title {
		margin: 0;
		font-size: clamp(2rem, 5vw, 3.25rem);
		line-height: 1.25;
		font-weight: 700;
		color: var(--sr-ink);
	}

	.entry--redesign .page-content__inner {
		max-width: var(--content-reading);
		margin-inline: auto;
		padding: var(--space-8) var(--space-4) var(--space-12);
	}

	/* ---------- Hero ---------- */
	.entry-hero {
		position: relative;
		padding: var(--space-6) var(--space-4) 0;
	}

	.entry--redesign .breadcrumbs + .entry-hero {
		padding-top: var(--space-4);
	}

	.entry-hero__inner {
		display: grid;
		gap: var(--space-8) 0;
	}

	.entry-hero__eyebrow {
		margin: 0;
		font-size: 0.75rem;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: rgb(22 33 28 / 34%);
	}

	.entry-hero__title.entry-title {
		margin: var(--space-3) 0 0;
		font-size: clamp(2rem, 6vw, 4rem);
		line-height: 1.22;
		font-weight: 700;
		color: var(--sr-ink);
	}

	.entry-hero__lede {
		margin: var(--space-4) 0 0;
		max-width: 44em;
		font-size: 1.25rem;
		line-height: 1.7;
		color: var(--sr-muted);
	}

	.entry-hero__facts {
		margin: var(--space-6) 0 0;
		display: grid;
		grid-template-columns: 1fr auto;
		font-size: 0.8125rem;
		letter-spacing: 0.04em;
	}

	.entry-hero__fact {
		display: contents;
	}

	.entry-hero__fact dt,
	.entry-hero__fact dd {
		display: flex;
		align-items: center;
		min-height: 44px;
		border-top: 1px solid var(--sr-border);
		margin: 0;
	}

	.entry-hero__fact:last-child dt,
	.entry-hero__fact:last-child dd {
		border-bottom: 1px solid var(--sr-border);
	}

	.entry-hero__fact dt {
		gap: var(--space-2);
	}

	.entry-hero__fact dt::before {
		content: "";
		width: 4px;
		height: 4px;
		border-radius: 50%;
		background: currentcolor;
		flex: none;
	}

	.entry-hero__fact dd {
		justify-content: flex-end;
		color: var(--sr-muted);
	}

	/* Learning path (01/02/03) */
	.learning-path {
		margin-top: var(--space-6);
	}

	.learning-path__eyebrow {
		margin: 0;
		font-size: 0.75rem;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: rgb(22 33 28 / 34%);
	}

	.learning-path__list {
		margin: var(--space-3) 0 0;
	}

	.learning-path__item {
		display: grid;
		grid-template-columns: 40px 1fr;
		column-gap: var(--space-3);
		align-items: center;
		min-height: 48px;
		border-top: 1px solid var(--sr-border);
	}

	.learning-path__item:last-child {
		border-bottom: 1px solid var(--sr-border);
	}

	.learning-path__link {
		display: contents;
		color: var(--sr-muted);
		text-decoration: none;
	}

	.learning-path__link:hover .learning-path__label,
	.learning-path__link:focus-visible .learning-path__label {
		text-decoration: underline;
	}

	.learning-path__no {
		font-size: 0.75rem;
		letter-spacing: 0.06em;
		color: rgb(22 33 28 / 34%);
		text-align: right;
	}

	.learning-path__label {
		font-size: 1rem;
		line-height: 1.4;
		color: var(--sr-muted);
	}

	.learning-path__item--current {
		background: rgb(22 33 28 / 5%);
	}

	.learning-path__item--current .learning-path__no {
		color: var(--sr-ink);
	}

	.learning-path__item--current .learning-path__label {
		color: var(--sr-ink);
		font-weight: 700;
	}

	@media (min-width: 1024px) {
		.entry-hero__inner {
			grid-template-columns: repeat(12, 1fr);
			column-gap: var(--space-4);
		}

		.entry-hero__lead {
			grid-column: 1 / 10;
		}

		.entry-hero__facts {
			grid-column: 1 / 5;
			align-self: start;
		}

		.learning-path {
			grid-column: 6 / 13;
			margin-top: 0;
			align-self: start;
		}
	}

	/* ---------- Hero image ---------- */
	.entry--redesign > .entry-thumbnail {
		position: relative;
		margin: var(--space-8) 0 0;
		height: 64svh;
		min-height: 320px;
		max-width: none;
		overflow: hidden;
	}

	.entry--redesign > .entry-thumbnail img {
		width: 100%;
		height: 100%;
		max-width: none;
		aspect-ratio: auto;
	}

	.entry--redesign > .entry-thumbnail figcaption {
		max-width: none;
		text-align: left;
		padding: var(--space-2) var(--space-4) 0;
		font-size: 0.75rem;
		letter-spacing: 0.04em;
		color: rgb(22 33 28 / 50%);
	}

	@media (prefers-reduced-motion: no-preference) {
		.entry--redesign > .entry-thumbnail img {
			animation: sr-zoom-in 1600ms var(--sr-ease) both;
		}
	}

	/* ---------- Body: sticky TOC sidebar + article ---------- */
	.entry--redesign .entry-content__inner {
		max-width: none;
		margin-inline: 0;
		padding: var(--space-8) var(--space-4) 0;
		display: block;
	}

	.entry-toc-sidebar {
		margin-bottom: var(--space-6);
	}

	.toc-sidebar__eyebrow {
		margin: 0;
		font-size: 0.75rem;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: rgb(22 33 28 / 34%);
	}

	.toc-sidebar__list {
		display: flex;
		flex-direction: column;
		margin: var(--space-3) 0 0;
	}

	.toc-sidebar__link {
		display: flex;
		align-items: baseline;
		min-height: 44px;
		font-size: 0.8125rem;
		line-height: 1.4;
		letter-spacing: 0.04em;
		padding-block: var(--space-2);
		border-top: 1px solid var(--sr-border);
		color: var(--sr-muted);
		text-decoration: none;
	}

	.toc-sidebar__item:last-child .toc-sidebar__link {
		border-bottom: 1px solid var(--sr-border);
	}

	.toc-sidebar__no {
		color: rgb(22 33 28 / 34%);
		margin-right: var(--space-3);
	}

	.toc-sidebar__link:hover,
	.toc-sidebar__link:focus-visible {
		color: var(--sr-ink);
	}

	.toc-sidebar__link.is-active {
		color: var(--sr-ink);
		font-weight: 700;
	}

	.entry-toc-sidebar__disclosure {
		margin: var(--space-6) 0 0;
		font-size: 0.75rem;
		line-height: 1.8;
		letter-spacing: 0.04em;
		color: rgb(22 33 28 / 50%);
	}

	.entry-toc-sidebar__report {
		display: inline-flex;
		align-items: baseline;
		gap: var(--space-2);
		margin-top: var(--space-3);
		font-size: 0.8125rem;
		letter-spacing: 0.04em;
		color: var(--sr-ink);
		text-decoration: none;
		border-bottom: 1px solid currentcolor;
		padding-bottom: 7px;
	}

	.entry--redesign .entry-content {
		margin-top: 0;
		font-size: 1rem;
		line-height: 1.9;
	}

	@media (min-width: 1024px) {
		.entry--redesign .entry-content__inner {
			display: grid;
			grid-template-columns: repeat(12, 1fr);
			column-gap: var(--space-4);
		}

		.entry-toc-sidebar {
			grid-column: 1 / 4;
			margin-bottom: 0;
			position: sticky;
			top: calc(var(--sr-header-h) + var(--space-6));
			align-self: start;
		}

		.entry--redesign .entry-content {
			grid-column: 5 / 13;
		}
	}

	/* Numbered "01".."NN" eyebrow before each top-level section heading,
	   derived automatically from however many H2s a post actually has
	   (no hardcoded "01".."04" text — some posts will have more or fewer
	   than the PFAS example). */
	.entry--redesign .entry-content {
		counter-reset: entry-section;
	}

	.entry--redesign .entry-content h2 {
		counter-increment: entry-section;
		font-size: clamp(1.5rem, 3vw, 2.25rem);
		line-height: 1.35;
		color: var(--sr-ink);
	}

	.entry--redesign .entry-content h2::before {
		content: counter(entry-section, decimal-leading-zero);
		display: block;
		margin-bottom: var(--space-2);
		font-size: 0.75rem;
		letter-spacing: 0.06em;
		color: rgb(22 33 28 / 34%);
		font-weight: 400;
	}

	.entry--redesign .entry-content h3 {
		font-size: clamp(1.125rem, 2vw, 1.5rem);
		line-height: 1.4;
		color: var(--sr-ink);
	}

	.entry--redesign .entry-content p {
		color: var(--sr-muted);
	}

	.entry--redesign .entry-content ul,
	.entry--redesign .entry-content ol {
		color: var(--sr-muted);
	}

	/* Inline body links (editor-authored, not the button-style CTA links
	   elsewhere in this stylesheet) — base.css's `--color-link` (old green)
	   would otherwise show through here. The small external-link arrow
	   icon (single.css's `.is-external`) still uses the old green in its
	   embedded SVG fill — a pre-existing asset, minor enough to leave for
	   now rather than generate a new data URI during this QA pass. */
	.entry--redesign .entry-content a {
		color: var(--sr-ink);
	}

	.entry--redesign .entry-content a:hover,
	.entry--redesign .entry-content a:focus-visible {
		color: var(--sr-ink);
		opacity: 0.62;
	}

	.entry--redesign .entry-content blockquote {
		border-inline-start: 0;
		margin: var(--space-8) 0 0;
		padding: var(--space-6) 0;
		border-top: 1px solid var(--sr-border);
		border-bottom: 1px solid var(--sr-border);
		font-style: normal;
		color: var(--sr-ink);
	}

	.entry--redesign .entry-content blockquote p {
		font-size: 1.375rem;
		line-height: 1.5;
		font-weight: 500;
		color: inherit;
	}

	.entry--redesign .entry-content blockquote cite {
		display: block;
		margin-top: var(--space-3);
		font-size: 0.75rem;
		letter-spacing: 0.06em;
		font-style: normal;
		color: rgb(22 33 28 / 50%);
	}

	/* Entrance animation for the article body's own headings/blockquotes:
	   native-support-only (no [data-reveal]/JS fallback) since this markup
	   comes from the WYSIWYG editor, not a template we control — the base
	   state is simply always visible, so browsers without
	   `animation-timeline: view()` just don't animate it, never hide it. */
	@media (prefers-reduced-motion: no-preference) {
		@supports (animation-timeline: view()) {
			.entry--redesign .entry-content > h2,
			.entry--redesign .entry-content > blockquote {
				animation: sr-flow-down 800ms var(--sr-ease) both;
				animation-timeline: view();
				animation-range: entry 4% entry 40%;
			}
		}
	}

	/* ---------- Restyle of already-functional content components (see
	   single.css:284-400 for the base rules this layers on top of — the
	   ecolog-ai-editor content pipeline already emits these classes into
	   real post_content) ---------- */
	.entry--redesign .entry-content .ecolog-box,
	.entry--redesign .entry-content .ecolog-key-points,
	.entry--redesign .entry-content .ecolog-source-box,
	.entry--redesign .entry-content .ecolog-ai-disclosure {
		background: var(--sr-bg);
		border-color: var(--sr-border);
		border-radius: 0;
	}

	.entry--redesign .entry-content .ecolog-key-points {
		border-inline-start-width: 4px;
	}

	.entry--redesign .entry-content .ecolog-faq dt {
		color: var(--sr-ink);
	}

	.entry--redesign .entry-content .ecolog-faq dd {
		color: var(--sr-muted);
	}

	.entry--redesign .entry-content .ecolog-source-box {
		margin-top: var(--space-8);
	}

	.entry--redesign .entry-content .ecolog-source-box li {
		color: var(--sr-muted);
	}

	/* ---------- Dark "次に読む記事" section (uses the shared .redesign-card
	   component, see template-parts/content/redesign-card.php) ---------- */
	.related-posts[data-theme="dark"] {
		background: var(--sr-ink);
		color: #f4f4ee;
		margin-top: var(--space-12);
		padding: var(--space-12) var(--space-4);
	}

	.related-posts[data-theme="dark"] .related-posts__inner {
		max-width: none;
		margin-inline: 0;
		padding-block: 0;
		border-top: 0;
		display: grid;
		gap: var(--space-8);
	}

	.related-posts[data-theme="dark"] #related-posts-heading {
		margin: 0;
		font-size: clamp(1.5rem, 3vw, 2.25rem);
	}

	.related-posts__lede {
		margin: var(--space-3) 0 0;
		font-size: 0.875rem;
		line-height: 1.8;
		color: #d3d3ce;
	}

	.related-posts__all-link {
		display: inline-flex;
		align-items: baseline;
		gap: var(--space-2);
		margin-top: var(--space-4);
		font-size: 0.8125rem;
		letter-spacing: 0.04em;
		color: inherit;
		text-decoration: none;
		border-bottom: 1px solid currentcolor;
		padding-bottom: 7px;
	}

	.related-posts__grid {
		display: grid;
		gap: var(--space-4);
		grid-template-columns: 1fr;
	}

	@media (min-width: 1024px) {
		.related-posts[data-theme="dark"] .related-posts__inner {
			grid-template-columns: repeat(12, 1fr);
			align-items: start;
		}

		.related-posts__intro {
			grid-column: 1 / 6;
		}

		.related-posts__grid {
			grid-column: 7 / 13;
			grid-template-columns: 1fr 1fr;
		}
	}

	.related-posts[data-theme="dark"] .redesign-card__eyebrow {
		color: rgb(244 244 238 / 45%);
	}

	.related-posts[data-theme="dark"] .redesign-card__title {
		color: #f4f4ee;
	}

	.related-posts[data-theme="dark"] .redesign-card__excerpt {
		color: #d3d3ce;
	}

	.related-posts[data-theme="dark"] .redesign-card__specs {
		color: #d3d3ce;
	}

	.related-posts[data-theme="dark"] .redesign-card__specs dt,
	.related-posts[data-theme="dark"] .redesign-card__specs dd {
		border-top-color: rgb(244 244 238 / 16%);
	}

	.related-posts[data-theme="dark"] .redesign-card__specs dt.redesign-card__specs-last,
	.related-posts[data-theme="dark"] .redesign-card__specs dd.redesign-card__specs-last {
		border-bottom-color: rgb(244 244 238 / 16%);
	}

	.related-posts[data-theme="dark"] .redesign-card__read-more {
		color: #f4f4ee;
	}

	/* ---------- Footer CTA (light) + author-bio ---------- */
	.entry-footer-cta {
		position: relative;
		margin-top: var(--space-12);
		padding: var(--space-12) var(--space-4) 0;
	}

	.entry-footer-cta__inner {
		display: grid;
		gap: var(--space-6);
	}

	.entry-footer-cta__lead h2 {
		margin: 0;
		font-size: clamp(1.75rem, 5vw, 3rem);
		line-height: 1.3;
	}

	.entry-footer-cta__home-link {
		display: inline-flex;
		align-items: baseline;
		gap: var(--space-2);
		margin-top: var(--space-4);
		font-size: 0.8125rem;
		letter-spacing: 0.04em;
		color: inherit;
		text-decoration: none;
		border-bottom: 1px solid currentcolor;
		padding-bottom: 7px;
	}

	.entry-footer-cta__nav ul {
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
	}

	.entry-footer-cta__nav a {
		font-size: 0.8125rem;
		letter-spacing: 0.04em;
		color: var(--sr-ink);
		text-decoration: none;
	}

	.entry-footer-cta__nav a:hover,
	.entry-footer-cta__nav a:focus-visible {
		opacity: 0.62;
	}

	.entry-footer-cta__email,
	.entry-footer-cta__top-link {
		font-size: 0.8125rem;
		letter-spacing: 0.04em;
	}

	.entry-footer-cta__email a {
		color: var(--sr-ink);
	}

	.entry-footer-cta__top-link {
		display: inline-block;
		color: var(--sr-ink);
		text-decoration: none;
		border-bottom: 1px solid currentcolor;
		padding-bottom: 6px;
	}

	@media (min-width: 1024px) {
		.entry-footer-cta__inner {
			grid-template-columns: repeat(12, 1fr);
			align-items: start;
		}

		.entry-footer-cta__lead {
			grid-column: 1 / 8;
			padding-right: var(--space-8);
		}

		.entry-footer-cta__nav {
			grid-column: 8 / 11;
		}

		.entry-footer-cta__email,
		.entry-footer-cta__top-link {
			grid-column: 11 / 13;
		}
	}

	.entry--redesign ~ .author-bio {
		max-width: none;
		margin: var(--space-8) var(--space-4) 0;
	}

	.entry--redesign ~ .author-bio .author-bio__inner {
		max-width: var(--content-reading);
		margin-inline: auto;
		padding-inline: 0;
		border-top: 1px solid var(--sr-border);
		padding-top: var(--space-6);
	}
}