/*
 * KAI-EDITORIAL-001 — long-form typography for plain WordPress Page/Post
 * content. Used by page.php (generic Pages) and by the Case narrative text
 * blocks. No cards, no boxed UI — just readable type on the existing
 * editorial measure (.kts-main's 72ch default).
 */

.kts-editorial__title {
	font-family: var(--kts-font-serif);
	font-weight: 400;
	font-size: clamp(2rem, 1.6rem + 1.6vw, 2.8rem);
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--kts-ink-black);
	margin: 0 0 var(--kts-space-32);
}

.kts-editorial__body,
.kts-case__text {
	font-size: 1rem;
	line-height: 1.75;
	color: var(--kts-text-secondary);
	/*
	 * Sprint A Gate 0: Services (page-design-print-digital.php) now gets
	 * kts-main--wide (see header.php) so its Capability grid has room —
	 * but that also uncaps this shared body-copy rule, which had no
	 * width limit of its own (it relied entirely on the ordinary .kts-main
	 * 72ch cap that Services no longer has). 68ch matches
	 * .kts-case__narrative's existing measure, so Case is unaffected
	 * (already constrained by its own wrapper) and generic Pages barely
	 * change (72ch -> 68ch, still their own .kts-main-capped context).
	 */
	max-width: 68ch;
}

.kts-editorial__body > *,
.kts-case__text > * {
	margin: 0 0 var(--kts-space-24);
}

.kts-editorial__body > :last-child,
.kts-case__text > :last-child {
	margin-bottom: 0;
}

.kts-editorial__body h2,
.kts-editorial__body h3,
.kts-editorial__body h4 {
	font-family: var(--kts-font-serif);
	font-weight: 400;
	color: var(--kts-ink-black);
	line-height: 1.3;
	margin: var(--kts-space-48) 0 var(--kts-space-16);
}

.kts-editorial__body h2 {
	font-size: 1.6rem;
}

.kts-editorial__body h3 {
	font-size: 1.3rem;
}

.kts-editorial__body ul,
.kts-editorial__body ol {
	padding-left: 1.25em;
}

.kts-editorial__body li + li {
	margin-top: var(--kts-space-8);
}

.kts-editorial__body a,
.kts-case__text a {
	color: var(--kts-deep-olive);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.kts-editorial__body img {
	width: 100%;
	height: auto;
}

/* Sprint A2 — blockquote/figure, needed for real Journal Article content
   (Gutenberg posts routinely use both). */
.kts-editorial__body blockquote {
	margin: 0;
	padding-left: var(--kts-space-24);
	border-left: 2px solid var(--kts-deep-olive);
	font-family: var(--kts-font-serif);
	font-style: italic;
	font-size: 1.1rem;
	line-height: 1.6;
	color: var(--kts-ink-black);
}

.kts-editorial__body figure {
	margin: 0;
}

.kts-editorial__body figcaption {
	margin-top: var(--kts-space-8);
	font-size: 0.8rem;
	line-height: 1.5;
	color: var(--kts-text-muted);
}

/* ---------- Journal Article (Sprint A2) ---------- */

.kts-journal-article__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kts-space-16);
	margin-top: var(--kts-space-16);
	font-size: 0.85rem;
	color: var(--kts-text-secondary);
}

.kts-journal-article__deck {
	margin: var(--kts-space-24) 0 0;
	max-width: 68ch;
	font-size: 1.1rem;
	line-height: 1.6;
	color: var(--kts-ink-black);
}

.kts-journal-article__opening {
	margin: var(--kts-space-32) 0;
}

.kts-journal-article__opening img {
	width: 100%;
	height: auto;
	display: block;
	background: var(--kts-surface-sunken);
}

.kts-journal-article__related {
	margin: var(--kts-space-32) 0;
	font-size: 0.9rem;
	color: var(--kts-text-secondary);
}

.kts-journal-article__nav {
	display: flex;
	flex-direction: column;
	gap: var(--kts-space-16);
	margin-top: var(--kts-space-64);
	padding-top: var(--kts-space-24);
	border-top: 1px solid var(--kts-border-default);
}

.kts-journal-article__nav-link {
	color: var(--kts-ink-black);
	text-decoration: none;
}

.kts-journal-article__nav-link:hover,
.kts-journal-article__nav-link:focus-visible {
	color: var(--kts-deep-olive);
}

.kts-journal-article__nav-label {
	display: block;
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--kts-text-muted);
	margin-bottom: var(--kts-space-4);
}

.kts-journal-article__nav-title {
	font-family: var(--kts-font-serif);
	font-size: 1.2rem;
}

.kts-journal-article__back {
	display: inline-block;
	margin-top: var(--kts-space-16);
	font-size: 0.85rem;
	color: var(--kts-text-secondary);
	text-decoration: none;
	border-bottom: 1px solid var(--kts-hairline);
}

/*
 * 0.6.2 §5/§7 — "More from the Journal" / "Keep reading". Deliberately a
 * simpler component than the Journal Index tiles (.kts-journal-card in
 * home.css): no excerpt, smaller image, same --kts-surface-tint/
 * --kts-radius-sm language kept consistent across the whole system.
 * Editorial exit navigation, not e-commerce "recommended for you" UI --
 * real recent/adjacent posts only, up to 3 (kts_get_more_journal_entries()).
 */

.kts-journal-more {
	margin-top: var(--kts-space-48);
	padding-top: var(--kts-space-24);
	border-top: 1px solid var(--kts-border-default);
}

.kts-journal-more__label {
	margin: 0 0 var(--kts-space-16);
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--kts-text-muted);
}

.kts-journal-more__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--kts-space-8);
	/* 0.6.3: same fix as .kts-journal-grid (home.css) -- without this,
	   grid's default align-items:stretch forces every card in a row to
	   match the tallest, overriding height:auto. */
	align-items: start;
}

/* 0.6.3: same media-region + content-region rebuild as the Journal Index
   tiles (home.css) -- plain rounded shell, edge-to-edge image via
   aspect-ratio (not a fixed height forcing whole-card proportions), copy
   in its own padded .kts-journal-more__content wrapper. */
.kts-journal-more__card {
	display: block;
	color: inherit;
	text-decoration: none;
	background: var(--kts-surface-tint);
	border-radius: var(--kts-radius-sm);
	overflow: hidden;
	height: auto;
}

.kts-journal-more__image {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.kts-journal-more__content {
	padding: var(--kts-space-16);
}

.kts-journal-more__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kts-space-8);
	font-size: 0.65rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--kts-text-muted);
}

.kts-journal-more__title {
	display: block;
	margin: var(--kts-space-8) 0 0;
	font-family: var(--kts-font-serif);
	font-size: 1.05rem;
	line-height: 1.3;
	color: var(--kts-ink-black);
	overflow-wrap: anywhere;
}

.kts-journal-more__card:hover .kts-journal-more__title,
.kts-journal-more__card:focus-visible .kts-journal-more__title {
	color: var(--kts-deep-olive);
}

@media (min-width: 768px) {
	.kts-journal-more__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1200px) {
	.kts-journal-article__opening {
		max-width: 900px;
	}

	.kts-journal-article__nav {
		flex-direction: row;
		justify-content: space-between;
	}
}

/* Content Freeze: Fluent Forms owns the Send Materials form markup and
   appearance. Preserve it, but ensure its existing submit control reaches
   the 44px mobile touch-target minimum. */
.kts-editorial__body .frm-fluent-form .ff-btn-submit {
	min-height: 44px;
}

/*
 * Media breakout — Sprint A2 §3 ("media breakout wider than the text
 * measure where resolution supports it"). Opt-in only: real post content
 * doesn't know about Kaitago's grid, so this targets WordPress's own
 * wide/full alignment classes (added via the block editor's native
 * alignment control) rather than every image unconditionally -- an
 * inline image stays inside the reading measure by default, exactly as
 * written; only images the author explicitly marked wide break out.
 */
@media (min-width: 900px) {
	.kts-editorial__body .alignwide {
		width: 132%;
		max-width: 132%;
		margin-left: -16%;
	}

	.kts-editorial__body .alignfull {
		width: 100vw;
		max-width: 100vw;
		margin-left: calc(50% - 50vw);
	}
}