/**
 * Article component styles (Ops 1.0.5).
 *
 * Token-with-fallback pattern (same as income-gap.css): theme.json tokens win
 * on the Sure Wealth block theme; brand hex fallbacks keep the legacy X theme
 * on-brand. No styles are written into post_content.
 *
 * Classes: sw-dek, sw-takeaways, sw-pullquote, sw-case, sw-figure/sw-diagram,
 * sw-disclosure / sw-disclosure-block, sw-image-slot, comparison table cards.
 */

:root {
	--sw-ac-ink: var(--wp--preset--color--ink, #0E2A47);
	--sw-ac-evergreen: var(--wp--preset--color--evergreen, #14352B);
	--sw-ac-charcoal: var(--wp--preset--color--charcoal, #1C2430);
	--sw-ac-slate: var(--wp--preset--color--slate, #5C7189);
	--sw-ac-brass: var(--wp--preset--color--brass, #B08D57);
	--sw-ac-ivory: var(--wp--preset--color--ivory, #F7F4EC);
	--sw-ac-white: var(--wp--preset--color--white, #FFFFFF);
	--sw-ac-border: var(--wp--preset--color--border, #E7E0D0);
	--sw-ac-radius: var(--wp--custom--radius--card, 12px);
	--sw-ac-gap: var(--wp--preset--spacing--60, 24px);
	--sw-ac-display: var(--wp--preset--font-family--display, Georgia, "Times New Roman", serif);
}

/* —— Dek —— */
.sw-dek {
	margin: 0 0 1.5rem;
	font-size: 1.2rem;
	line-height: 1.55;
	color: var(--sw-ac-slate);
	max-width: 42rem;
}

/* —— Key takeaways —— */
.sw-takeaways {
	box-sizing: border-box;
	margin: 2rem 0;
	padding: 1.25rem 1.5rem;
	background: var(--sw-ac-ivory);
	border: 1px solid var(--sw-ac-border);
	border-left: 4px solid var(--sw-ac-brass);
	border-radius: var(--sw-ac-radius);
	color: var(--sw-ac-charcoal);
}

.sw-takeaways *,
.sw-takeaways *::before,
.sw-takeaways *::after { box-sizing: inherit; }

.sw-takeaways__title {
	margin: 0 0 0.75rem;
	font-family: var(--sw-ac-display);
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--sw-ac-ink);
}

.sw-takeaways ul {
	margin: 0;
	padding-left: 1.2rem;
}

.sw-takeaways li {
	margin: 0.4rem 0;
	line-height: 1.5;
}

/* —— Pull quote —— */
.sw-pullquote,
blockquote.sw-pullquote {
	margin: 2rem 0;
	padding: 1.25rem 1.5rem 1.25rem 1.75rem;
	border-left: 4px solid var(--sw-ac-evergreen);
	background: transparent;
	font-family: var(--sw-ac-display);
	font-size: 1.35rem;
	line-height: 1.4;
	font-style: italic;
	color: var(--sw-ac-ink);
	max-width: 40rem;
}

/* —— Case card —— */
.sw-case {
	box-sizing: border-box;
	margin: 2rem 0;
	padding: 1.5rem;
	background: var(--sw-ac-white);
	border: 1px solid var(--sw-ac-border);
	border-radius: var(--sw-ac-radius);
	box-shadow: 0 1px 0 rgba(14, 42, 71, 0.04);
	color: var(--sw-ac-charcoal);
}

.sw-case *,
.sw-case *::before,
.sw-case *::after { box-sizing: inherit; }

.sw-case__label {
	margin: 0 0 0.35rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sw-ac-brass);
}

.sw-case__note {
	margin: 0 0 1rem;
	font-size: 0.9rem;
	color: var(--sw-ac-slate);
}

.sw-case h3 {
	margin: 1rem 0 0.4rem;
	font-size: 1.05rem;
	color: var(--sw-ac-ink);
}

.sw-case h3:first-of-type { margin-top: 0.5rem; }

/* —— Figure / diagram —— */
.sw-figure,
.sw-diagram,
figure.sw-figure {
	box-sizing: border-box;
	margin: 2rem 0;
	padding: 0;
	max-width: 100%;
}

.sw-figure img,
.sw-diagram img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	border-radius: var(--sw-ac-radius);
	border: 1px solid var(--sw-ac-border);
}

.sw-figure figcaption,
.sw-diagram figcaption {
	margin-top: 0.6rem;
	font-size: 0.9rem;
	line-height: 1.45;
	color: var(--sw-ac-slate);
}

/* —— Disclosure —— */
.sw-disclosure,
.sw-disclosure-block {
	box-sizing: border-box;
	margin: 2.5rem 0 1rem;
	padding: 1rem 1.25rem;
	background: var(--sw-ac-ivory);
	border: 1px solid var(--sw-ac-border);
	border-radius: var(--sw-ac-radius);
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--sw-ac-slate);
}

.sw-disclosure a,
.sw-disclosure-block a {
	color: var(--sw-ac-ink);
	text-decoration: underline;
}

/* —— Image slot (Envato preview staging) —— */
.sw-image-slot {
	box-sizing: border-box;
	margin: 1.75rem 0;
	padding: 0.75rem;
	border: 1px dashed var(--sw-ac-border);
	border-radius: var(--sw-ac-radius);
	background: var(--sw-ac-ivory);
	max-width: 100%;
}

.sw-image-slot img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	opacity: 0.92;
}

.sw-image-slot__meta {
	margin: 0.5rem 0 0;
	font-size: 0.8rem;
	color: var(--sw-ac-slate);
}

/* —— Comparison table → cards under 600px —— */
.sw-comparison,
table.sw-comparison {
	width: 100%;
	max-width: 100%;
	border-collapse: collapse;
	margin: 1.75rem 0;
	font-size: 0.95rem;
	color: var(--sw-ac-charcoal);
	table-layout: fixed;
	word-wrap: break-word;
	overflow-wrap: anywhere;
}

.sw-comparison th,
.sw-comparison td {
	border: 1px solid var(--sw-ac-border);
	padding: 0.65rem 0.75rem;
	text-align: left;
	vertical-align: top;
}

.sw-comparison thead th {
	background: var(--sw-ac-ivory);
	color: var(--sw-ac-ink);
	font-weight: 600;
}

@media (max-width: 600px) {
	.sw-comparison,
	table.sw-comparison {
		display: block;
		border: 0;
	}

	.sw-comparison thead {
		display: none;
	}

	.sw-comparison tbody,
	.sw-comparison tr,
	.sw-comparison td {
		display: block;
		width: 100%;
	}

	.sw-comparison tr {
		box-sizing: border-box;
		margin: 0 0 1rem;
		padding: 0.85rem 1rem;
		background: var(--sw-ac-white);
		border: 1px solid var(--sw-ac-border);
		border-radius: var(--sw-ac-radius);
	}

	.sw-comparison td {
		border: 0;
		padding: 0.35rem 0;
	}

	.sw-comparison td::before {
		content: attr(data-label);
		display: block;
		font-size: 0.72rem;
		font-weight: 700;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var(--sw-ac-brass);
		margin-bottom: 0.15rem;
	}
}

/* Overflow guard for article body media */
.wrap,
.sw-takeaways,
.sw-case,
.sw-figure,
.sw-diagram,
.sw-image-slot,
.sw-disclosure,
.sw-disclosure-block,
.sw-pullquote,
.sw-comparison,
.sw-dek {
	max-width: 100%;
	overflow-x: clip;
	box-sizing: border-box;
}

img {
	max-width: 100%;
	height: auto;
}