/**
 * fanorate/prose-section-v2 — V2 redesign generic editorial section.
 *
 * A reading-column band: red kicker over a navy headline (Anton via the
 * shared .section-title atom, or a serif variant), prose paragraphs that
 * can flow into two columns (sustainability-style), and an optional pull
 * quote in the site's approved treatment — red left rule, soft gray fill,
 * 35px indent. A --subdued modifier swaps in the gray band background.
 */

.section-prose-section-v2 {
	padding-block: clamp(40px, 6vw, 72px);
}

.section-prose-section-v2.section-prose-section-v2--subdued {
	background: var(--surface-card);
}

.section-prose-section-v2 .prose-section-v2__kicker {
	display: inline-flex;
	align-items: center;
	gap: var(--space-sm);
	font: var(--eyebrow);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--color-primary);
}

.section-prose-section-v2 .prose-section-v2__kicker::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 100px;
	background: currentColor;
	display: inline-block;
}

.section-prose-section-v2 .prose-section-v2__title {
	color: var(--color-accent);
	margin: 12px 0 32px;
}

.section-prose-section-v2 .prose-section-v2__title--serif {
	font: var(--serif-1);
	color: var(--color-accent);
	text-wrap: balance;
	margin: 12px 0 24px;
}

.section-prose-section-v2 .prose-section-v2__prose p {
	margin: 0 0 var(--space-lg);
	color: var(--text-primary);
	font: var(--body-lg);
	font-family: var(--font-ui);
}

.section-prose-section-v2 .prose-section-v2__prose p:last-child {
	margin-bottom: 0;
}

.section-prose-section-v2 .prose-section-v2__prose strong {
	font-weight: 700;
	color: var(--color-accent);
}

.section-prose-section-v2 .prose-section-v2__prose--twocol {
	columns: 2;
	column-gap: clamp(28px, 4vw, 56px);
}

.section-prose-section-v2 .prose-section-v2__prose--twocol p {
	break-inside: avoid;
	margin: 0 0 var(--space-md);
}

/* Pull quote — same treatment as opening-intro-v2__pullquote */
.section-prose-section-v2 .prose-section-v2__pullquote {
	margin: var(--space-xl) 0 0;
	padding: var(--space-lg) 0;
	border-left: 2px solid var(--color-primary);
	padding-left: 35px;
	background: #f7f7f8;
}

.section-prose-section-v2 .prose-section-v2__pullquote p {
	font: var(--body-lg);
	font-style: italic;
	color: var(--color-accent);
	margin: 0;
	line-height: 1.15;
	font-weight: 600;
	font-size: 20px;
}

/* ---------- Reveal-on-scroll (armed by view.js) ---------- */
.section-prose-section-v2 [data-reveal] {
	transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}

.section-prose-section-v2.is-reveal-armed [data-reveal]:not(.is-in) {
	opacity: 0;
	transform: translateY(18px);
}

@media (prefers-reduced-motion: reduce) {
	.section-prose-section-v2.is-reveal-armed [data-reveal]:not(.is-in) {
		opacity: 1;
		transform: none;
	}
}

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
	.section-prose-section-v2 .prose-section-v2__title {
		margin: 10px 0 24px;
	}

	.section-prose-section-v2 .prose-section-v2__prose--twocol {
		columns: 1;
	}
}

/* ---------- Highlight strip (e.g. tactical "Likely shape") ---------- */
.section-prose-section-v2 .prose-section-v2__highlight {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-md);
	margin-top: 32px;
	padding: var(--space-md) var(--space-lg);
	border: 1px dashed var(--border-default);
	border-radius: var(--radius-md);
	background: var(--surface-card);
}

.section-prose-section-v2 .prose-section-v2__highlight-lbl,
.section-prose-section-v2 .prose-section-v2__highlight-or {
	font: var(--caption);
	font-family: var(--font-ui);
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--text-tertiary);
}

.section-prose-section-v2 .prose-section-v2__highlight-val {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 26px;
	color: var(--color-primary);
}

/* ---------- Callout — approved aside treatment ---------- */
.section-prose-section-v2 .prose-section-v2__callout {
	border-left: 2px solid var(--color-primary);
	background: #f7f7f8;
	padding: var(--space-lg) var(--space-lg) var(--space-lg) 35px;
	margin-top: 32px;
}

.section-prose-section-v2 .prose-section-v2__callout--info {
	border-left-color: var(--color-info);
}

.section-prose-section-v2 .prose-section-v2__callout h4 {
	font: 700 18px/1.3 var(--font-ui);
	color: var(--color-accent);
	margin: 0 0 12px;
}

.section-prose-section-v2 .prose-section-v2__callout-body p {
	font-family: var(--font-ui);
	color: var(--text-secondary);
	margin: 0 0 var(--space-md);
}

.section-prose-section-v2 .prose-section-v2__callout-body p:last-child {
	margin-bottom: 0;
}

.section-prose-section-v2 .prose-section-v2__callout-body strong {
	color: var(--color-accent);
}

@media (max-width: 720px) {
	.section-prose-section-v2 .prose-section-v2__callout {
		padding: var(--space-md) var(--space-md) var(--space-md) 20px;
	}
}