/**
 * TEAB Två spalter – sticky rubrik + brödtext.
 *
 * Sektion i två kolumner: rubrik (sticky) till vänster, brödtext till höger.
 * Porterad från undersidornas ".prose"/".prose-grid". Självförsörjande och
 * scoped under .teab-prose. INGET hårdkodat: färger/typsnitt läses från
 * CSS-variabler → temat (Astra) → brand-literal. Ljust schema som standard,
 * mörkt via .teab-prose--dark (för mörka sektioner).
 *
 * @package Teab_Moduler
 */

.teab-prose {
	/* Färger: instans → tema → brand-literal. */
	--_ink:    var(--teab-prose-ink, var(--teab-text, #14201A));
	--_muted:  var(--teab-prose-muted, var(--teab-muted, #5C6B61));
	--_accent: var(--teab-prose-accent, var(--teab-accent, #008A2B));
	--_bg:     var(--teab-prose-bg, transparent);

	/* Typsnitt: ärver temat (inherit). BB:s typsnittsväljare kan skriva över per instans. */
	--_font-ui:      var(--teab-prose-font-ui, var(--font-ui, inherit));
	--_font-display: var(--teab-prose-font-display, var(--font-display, var(--_font-ui)));

	/* Mått/layout. */
	--_ratio:      var(--teab-prose-ratio, 1fr 1.35fr);
	--_sticky-top: var(--teab-prose-sticky-top, 124px);
	--_pad-y:      var(--teab-prose-pad-y, 0);
	--_gap:        var(--teab-prose-gap, 72px);
	--_max:        var(--teab-prose-max, none);
	--_pad-x:      var(--teab-prose-pad-x, 0);

	background: var(--_bg);
	color: var(--_ink);
	font-family: var(--_font-ui);
}

.teab-prose *,
.teab-prose *::before,
.teab-prose *::after { box-sizing: border-box; }

/* Mörkt schema (för mörka sektioner). */
.teab-prose--dark {
	--teab-prose-bg: var(--teab-night, #0E140F);
	--teab-prose-ink: #EDF4EF;
	--teab-prose-muted: rgba(237, 244, 239, 0.6);
	--teab-prose-accent: var(--teab-accent-bright, #34AC5C);
}

.teab-prose__inner {
	max-width: var(--_max);
	margin: 0 auto;
	padding: var(--_pad-y) var(--_pad-x);
}

.teab-prose__grid {
	display: grid;
	grid-template-columns: var(--_ratio);
	gap: var(--_gap);
}

/* ============ VÄNSTER: rubrik (sticky) ============ */
.teab-prose__side { align-self: start; }

.teab-prose--sticky .teab-prose__side {
	position: sticky;
	top: var(--_sticky-top);
}

.teab-prose__eyebrow {
	font-family: var(--_font-ui);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--_muted);
	display: inline-flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 22px;
}
.teab-prose__eyebrow::before {
	content: '';
	display: block;
	width: 40px;
	height: 1px;
	background: var(--_accent);
}

.teab-prose__heading {
	margin: 0;
	font-family: var(--_font-display);
	font-weight: var(--teab-prose-title-weight, 700);
	font-size: clamp(28px, 3.2vw, 46px);
	line-height: 1.08;
	letter-spacing: -0.02em;
	color: inherit;
}
.teab-prose__accent { color: var(--_accent); }

/* ============ HÖGER: brödtext ============ */
.teab-prose__body { font-size: 17px; line-height: 1.75; }
.teab-prose__body > :first-child { margin-top: 0; }
.teab-prose__body > :last-child { margin-bottom: 0; }
.teab-prose__body p { margin: 0 0 22px; }
.teab-prose__body strong { font-weight: 600; }
.teab-prose__body em { font-style: italic; }
.teab-prose__body a {
	color: var(--_accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.teab-prose__body h3 {
	font-family: var(--_font-display);
	font-weight: var(--teab-prose-title-weight, 700);
	font-size: 22px;
	line-height: 1.2;
	letter-spacing: -0.01em;
	margin: 32px 0 12px;
}
.teab-prose__body ul,
.teab-prose__body ol { margin: 0 0 22px; padding-left: 1.2em; }
.teab-prose__body li { margin-bottom: 8px; }

/* Platshållare i editorn. */
.teab-prose--empty {
	max-width: var(--_max);
	margin: 0 auto;
	padding: 48px var(--_pad-x);
	border: 1px dashed var(--teab-border, #E2EBE5);
	color: var(--_muted);
	font-family: var(--_font-ui);
	text-align: center;
}

/* ============ RESPONSIVT ============ */
@media (max-width: 1024px) {
	.teab-prose__grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	/* Sticky stängs av när kolumnerna staplas. */
	.teab-prose--sticky .teab-prose__side {
		position: static;
	}
}

@media (max-width: 640px) {
	.teab-prose__body { font-size: 16px; }
}