/**
 * FocalX — Single post / blogpost template (single.php).
 *
 * Layout (best-practice docs/blog pattern — Stripe / Vercel / MDN):
 *   .fx-main--post
 *   └── .fx-post-hero-wrap            (hero fra [custom_featured_hero])
 *   └── .fx-post-byline               (full-width byline-strip)
 *       ├── .fx-post-byline__author    [forfatter_boks] (dato/read-time
 *       │   kommer fra [custom_featured_hero] og dubleres ikke her)
 *       └── .fx-post-share             share-cluster (LinkedIn/X/e-mail/copy)
 *   └── .fx-post-body                 (2-kolonne grid)
 *       ├── .fx-post-body__content     (article + entry-content) VENSTRE
 *       └── .fx-post-body__toc         (sticky ToC sidebar)      HØJRE
 *   └── .fx-post-further              (further reading + blogpost_carousel)
 *   └── .fx-cta                        (reusable CTA)
 *
 * Alle overskrifter og baggrunde respekterer design-tokens
 * (--fx-text, --fx-col-gap, --fx-max-content osv.).
 */

/* ============================================================
 * Wrapper
 * ============================================================ */
.fx-main--post {
	background: var(--fx-bg, #ffffff);
	color: var(--fx-text-body, #2d2f31cc);
}

.fx-post-hero-wrap {
	max-width: var(--fx-max-content, 1140px);
	margin: 24px auto 0;
	padding: 0 var(--fx-gutter, 24px);
}

/* ============================================================
 * Byline-strip (full-width under hero)
 *
 * Forfatter-boks (venstre) + share-cluster (højre).
 * Dato/read-time er allerede i post-hero ([custom_featured_hero])
 * — duplikering drænede læsbarhed.
 * Separeret fra ToC så troværdigheds-metadata (hvem skrev) står
 * klart før læsning — uden at konkurrere med navigation.
 * ============================================================ */
.fx-post-byline {
	padding: 28px 0 0;
}

.fx-post-byline__container {
	max-width: var(--fx-max-content, 1140px);
	margin: 0 auto;
	padding: 20px var(--fx-gutter, 24px);
	border-top: 1px solid var(--fx-border, #e5e7eb);
	border-bottom: 1px solid var(--fx-border, #e5e7eb);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 24px;
}

.fx-post-byline__author {
	min-width: 0;
}

/* Komprimer [forfatter_boks] til byline-størrelse (smaller avatar +
   name-link — style.css default er 64px + 24px name). */
.fx-post-byline__author .author-box {
	gap: 12px;
}

.fx-post-byline__author .author-avatar {
	width: 44px;
	height: 44px;
}

.fx-post-byline__author .author-box__name {
	font-size: 16px;
	line-height: 1.3;
	color: var(--fx-text, #2d2f31);
}

.fx-post-byline__author .author-box__name a {
	color: inherit;
	text-decoration: none;
}

.fx-post-byline__author .author-box__name a:hover,
.fx-post-byline__author .author-box__name a:focus-visible {
	color: var(--fx-link, #163b6b);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------- Share-cluster (højre side af byline) ---------- */
.fx-post-share {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-left: auto; /* flush right når wrap tillader det. */
}

/* "Share"-label — screen-reader-venligt på desktop, visible på mobil. */
.fx-post-share__label {
	font-family: var(--fx-font-body, "Ubuntu", sans-serif);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--fx-text-muted, #5f6770);
}

.fx-post-share__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.fx-post-share__item {
	margin: 0;
	padding: 0;
}

/* Alle fire share-knapper deler identisk styling og hover — konsistens
 * prioriteret over platform-brand-tints, så byline-strippen står roligt
 * og "on-brand" (Focalx navy, ikke LinkedIn-blå / X-sort / Gmail-rød). */
.fx-post-share__btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid var(--fx-border, #e5e7eb);
	border-radius: 10px;
	background: #ffffff;
	color: var(--fx-text-muted, #5f6770);
	text-decoration: none;
	cursor: pointer;
	transition: color .18s ease, background-color .18s ease,
		border-color .18s ease, transform .12s ease,
		box-shadow .18s ease;
	-webkit-tap-highlight-color: transparent;
}

.fx-post-share__btn:hover {
	color: #ffffff;
	background: var(--fx-brand, #004088);
	border-color: var(--fx-brand, #004088);
	box-shadow: 0 4px 12px rgba(0, 64, 136, 0.2);
	text-decoration: none;
	transform: translateY(-1px);
}

.fx-post-share__btn:focus-visible {
	color: #ffffff;
	background: var(--fx-brand, #004088);
	border-color: var(--fx-brand, #004088);
	outline: 2px solid var(--fx-brand, #004088);
	outline-offset: 2px;
	text-decoration: none;
}

.fx-post-share__btn:active {
	transform: translateY(0);
	box-shadow: 0 1px 3px rgba(0, 64, 136, 0.15);
}

/* Copy-knap: begge SVG'er stacker ovenpå hinanden — is-copied
 * swapper link-ikon ud med checkmark. Bruger samme filled-navy-state
 * som hover, så feedback-visualiseringen harmonerer med resten. */
.fx-post-share__icon--link,
.fx-post-share__icon--check {
	transition: opacity .18s ease, transform .18s ease;
}

.fx-post-share__icon--check {
	position: absolute;
	inset: 0;
	margin: auto;
	opacity: 0;
	transform: scale(0.6);
}

.fx-post-share__btn--copy.is-copied {
	color: #ffffff;
	background: var(--fx-brand, #004088);
	border-color: var(--fx-brand, #004088);
}

.fx-post-share__btn--copy.is-copied .fx-post-share__icon--link {
	opacity: 0;
	transform: scale(0.6);
}

.fx-post-share__btn--copy.is-copied .fx-post-share__icon--check {
	opacity: 1;
	transform: scale(1);
}

/* aria-live — visuelt skjult, men tilgængelig for screen readers. */
.fx-post-share__status {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.fx-post-share__btn,
	.fx-post-share__icon--link,
	.fx-post-share__icon--check {
		transition: none;
	}
}

/* ============================================================
 * Body: 2-kolonne grid
 * Article (venstre) + sticky ToC (højre, 280px).
 * Stacker til 1 kolonne på mobil.
 * ============================================================ */
.fx-post-body {
	padding: 40px 0 40px;
}

.fx-post-body__container {
	max-width: var(--fx-max-content, 1140px);
	margin: 0 auto;
	padding: 0 var(--fx-gutter, 24px);
	display: grid;
	grid-template-columns: minmax(0, 1fr) 280px;
	gap: 64px;
	align-items: start;
}

/* ============================================================
 * ToC sidebar (højre, sticky)
 *
 * CANONICAL GRID+STICKY PATTERN (Tailwind / Vercel / Stripe docs):
 *
 * Sticky-positioneringen sidder på grid-cellen SELV — ikke på et
 * nested barn. Det er essentielt for at sticky virker i CSS grid:
 *
 *   • `align-self: start` → grid-cellen strækkes IKKE til row-højden.
 *     Den beholder sin content-højde. Det lader sticky have scroll-
 *     range = forskellen mellem row-højde (= artikel-højde) og cell-
 *     højde.
 *   • `position: sticky; top: 100px` på samme element.
 *   • `max-height: calc(100vh - 120px)` → sticky-elementet er altid
 *     mindre end viewport, så den kan glide med under langt scroll.
 *   • `display: flex; flex-direction: column` → ToC (flex: 1 1 auto,
 *     overflow auto) og aside-CTA (flex-shrink: 0) stables lodret.
 *     ToC scroller internt hvis for lang; CTA sidder altid fast
 *     nederst i den sticky blok.
 *
 *   ┌─ .fx-post-body__toc (sticky @ top: 100px) ─┐
 *   │  ToC (flex: 1, overflow-y: auto)           │
 *   │   · Intro                                  │
 *   │   · Section 1 (scroll)                     │
 *   │   · Section 2 (aktiv)                      │
 *   │  ────────────────────                      │
 *   │  Aside-CTA (flex-shrink: 0)                │
 *   └────────────────────────────────────────────┘
 *
 * Forrige version havde en nested .fx-post-toc-wrap som sticky —
 * DET VIRKEDE IKKE fordi grid-cellens default align-self er stretch
 * (= row-højde) når align-items er stretch, eller start (= content-
 * højde) når align-items: start. Begge tilfælde gav sticky-barnet
 * 0px travel-range inden for forældren. Fjernet.
 * ============================================================ */
.fx-post-body__toc {
	position: sticky;
	/* Bindes til --fx-header-h så sticky-offset følger viewport-varianter
	 * automatisk (84px desktop / 90px ≤1200 / 65px ≤767). +48px giver
	 * tydelig breathing room under headeren. */
	top: calc(var(--fx-header-h, 84px) + 48px);
	align-self: start;
	min-width: 0;
	/* Bottom breathing = 32px. Total fradrag = header + top-space + 32. */
	max-height: calc(100vh - var(--fx-header-h, 84px) - 80px);
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding-right: 4px;
}

/* ToC bliver den scrollende del når sidebar-højden begrænses af
 * max-height. min-height: 0 på flex-child er nødvendigt for at
 * overflow kan træde i kraft. */
.fx-post-body__toc > .fx-post-toc {
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden auto;
	scrollbar-width: thin;
}

.fx-post-body__toc > .fx-post-toc::-webkit-scrollbar {
	width: 6px;
}
.fx-post-body__toc > .fx-post-toc::-webkit-scrollbar-thumb {
	background: var(--fx-border, #e5e7eb);
	border-radius: 999px;
}

.fx-post-body__toc > .fx-post-aside-cta {
	flex-shrink: 0;
}

/* ============================================================
 * Table of contents
 * ============================================================ */
.fx-post-toc {
	/* I højre-sidebar: ingen top-border (byline-strippen har allerede
	   en nederste separator der afgrænser). */
	padding-top: 0;
}

/* ---------- Collapsible ToC (details/summary, no JS) ---------- */
.fx-post-toc__details {
	/* Nulstiller native styling — summary overtager layout. */
	margin: 0;
	padding: 0;
}

.fx-post-toc__summary {
	/* Fjern native disclosure-trekant i alle browsere. */
	list-style: none;
	cursor: pointer;
	user-select: none;

	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;

	/* Bruges som klikzone — lidt polstring så det er let at ramme. */
	margin: 0 0 16px;
	padding: 2px 0;
	border-radius: 6px;
	outline: none;
	-webkit-tap-highlight-color: transparent;
}

.fx-post-toc__summary::-webkit-details-marker {
	display: none;
}

.fx-post-toc__summary:focus-visible {
	outline: 2px solid var(--fx-brand, #004088);
	outline-offset: 4px;
}

/* h2 bor inde i summary — nulstil default heading-margins. */
.fx-post-toc__heading {
	margin: 0;
	font-family: var(--fx-font-heading, "Ubuntu", sans-serif);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--fx-text, #2d2f31);
	letter-spacing: 0;
}

.fx-post-toc__chevron {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	display: block;
	color: var(--fx-text-muted, #5f6770);
	/* SVG peger nedad som default (closed). */
	transform: rotate(0deg);
	transform-origin: center;
	transition: transform .2s ease, color .15s ease;
}

.fx-post-toc__details[open] .fx-post-toc__chevron {
	/* Open = flip 180° så den peger opad. */
	transform: rotate(180deg);
}

.fx-post-toc__summary:hover .fx-post-toc__chevron {
	color: var(--fx-text, #2d2f31);
}

/* Når lukket: nav fylder ikke mere end summary-rækken, så sticky-
 * sidebar'en kollapser pænt og CTA'en klæber til bunden. */
.fx-post-toc__details:not([open]) .fx-post-toc__summary {
	margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
	.fx-post-toc__chevron {
		transition: none;
	}
}

.fx-post-toc__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	counter-reset: fx-toc;
}

.fx-post-toc__item {
	margin: 0;
	padding: 0;
}

.fx-post-toc__item--h3 {
	padding-left: 18px;
}

.fx-post-toc__link {
	display: block;
	padding: 6px 12px;
	border-left: 2px solid transparent;
	margin-left: -14px;
	font-family: var(--fx-font-body, "Ubuntu", sans-serif);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.45;
	color: var(--fx-text-muted, #5f6770);
	text-decoration: none;
	transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

.fx-post-toc__link:hover,
.fx-post-toc__link:focus-visible {
	color: var(--fx-text, #2d2f31);
	text-decoration: none;
}

.fx-post-toc__item.is-active > .fx-post-toc__link {
	color: var(--fx-blue, #163b6b);
	border-left-color: var(--fx-blue, #163b6b);
	font-weight: 600;
}

/* ============================================================
 * Aside-CTA (sticky, under ToC)
 *
 * Lille lead-gen card. Hentes via template-parts/sections/post-
 * aside-cta.php. Design: soft bg, primary button, ingen shadow.
 * Bevidst understated — skal føles som en del af sidebaren, ikke
 * som en annonce. Samme URL som bund-CTA'en (/get-started/).
 * ============================================================ */
.fx-post-aside-cta {
	padding: 20px 20px 22px;
	border-radius: var(--fx-radius, 12px);
	background: var(--fx-bg-soft, #f6f5f8);
	border: 1px solid var(--fx-border, #e5e7eb);
	font-family: var(--fx-font-body, "Ubuntu", sans-serif);
}

/* Understated eyebrow — bevidst IKKE pill med mint-baggrund. Aside-cta'et
 * sidder allerede i en soft-bg-boks i sidebaren, og en grøn pill ovenpå
 * konkurrerer visuelt med primary-knappen nedenunder. Plain uppercase
 * label fungerer som en rolig kategori-markering. */
.fx-post-aside-cta__eyebrow {
	margin: 0 0 10px;
	font-family: var(--fx-font-body, "Ubuntu", sans-serif);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fx-text-muted, #5f6770);
}

.fx-post-aside-cta__title {
	margin: 0 0 14px;
	font-family: var(--fx-font-heading, "Ubuntu", sans-serif);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--fx-text, #2d2f31);
}

.fx-post-aside-cta__button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border-radius: 999px;
	background: var(--fx-blue, #163b6b);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color .15s ease, transform .15s ease;
}

.fx-post-aside-cta__button:hover,
.fx-post-aside-cta__button:focus-visible {
	background: var(--fx-link-hover, #0f2d54);
	color: #fff;
	text-decoration: none;
}

.fx-post-aside-cta__button:focus-visible {
	outline: 2px solid var(--fx-blue, #163b6b);
	outline-offset: 3px;
}

.fx-post-aside-cta__arrow {
	transition: transform .15s ease;
}

.fx-post-aside-cta__button:hover .fx-post-aside-cta__arrow,
.fx-post-aside-cta__button:focus-visible .fx-post-aside-cta__arrow {
	transform: translateX(3px);
}

/* Kort-skygge på dark-mode-bg respekteres ikke — vi holder det
   lyst og neutralt så det matcher sidebaren uden at dominere. */

/* ============================================================
 * Article content (entry-content + post-content)
 *
 * Typografien følger tokens.css (Ubuntu, --fx-text).
 * Vi begrænser max-bredde for læsbarhed (~70ch) og sikrer at
 * billeder og figurer altid breder sig til fulde kolonne-bredde.
 * ============================================================ */
.fx-post-body__content {
	min-width: 0; /* tillader grid-child at krympe korrekt */
	max-width: 72ch; /* reading-width — forhindrer for brede linjer */
	font-family: var(--fx-font-body, "Ubuntu", sans-serif);
	font-size: var(--fx-text-base, 18px);
	line-height: 1.75;
	color: var(--fx-text-body, #2d2f31cc);
}

.fx-post-body__content > * {
	max-width: 100%;
}

.fx-post-body__content p,
.fx-post-body__content ul,
.fx-post-body__content ol,
.fx-post-body__content blockquote,
.fx-post-body__content pre,
.fx-post-body__content table {
	margin: 0 0 1.25em;
}

.fx-post-body__content h2,
.fx-post-body__content h3,
.fx-post-body__content h4,
.fx-post-body__content h5,
.fx-post-body__content h6 {
	color: var(--fx-text, #2d2f31);
	font-family: var(--fx-font-heading, "Ubuntu", sans-serif);
	font-weight: 700;
	line-height: 1.25;
	margin: 1.75em 0 0.6em;
	/* Match sticky-ToC offset så anchor-jump fra ToC lander under
	 * headeren — ikke skjult bag den. */
	scroll-margin-top: calc(var(--fx-header-h, 84px) + 48px);
}

.fx-post-body__content h2 {
	font-size: var(--fx-h2, 40px);
}
.fx-post-body__content h3 {
	font-size: var(--fx-h3, 32px);
}
.fx-post-body__content h4 {
	font-size: var(--fx-h4, 26px);
}

/* Første element i artiklen skal ikke have top-margin — ellers får
 * vi et visuelt gab mellem byline-strippen og artikelstart.
 *
 * Den første selector dækker det normale tilfælde. Den anden dækker
 * vores template-specifikke markup: single.php indsætter en
 * <h1 class="screen-reader-text"> FØR the_content() for SEO/a11y, og
 * den h1 tager ikke visuel plads — så elementet der følger efter
 * er det reelt første visible content. */
.fx-post-body__content > :first-child,
.fx-post-body__content > .screen-reader-text + * {
	margin-top: 0;
}

.fx-post-body__content a {
	color: var(--fx-link, #163b6b);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.fx-post-body__content a:hover,
.fx-post-body__content a:focus-visible {
	color: var(--fx-link-hover, #0f2d54);
}

.fx-post-body__content strong,
.fx-post-body__content b {
	color: var(--fx-text, #2d2f31);
	font-weight: 700;
}

.fx-post-body__content ul,
.fx-post-body__content ol {
	padding-left: 1.4em;
}

.fx-post-body__content li {
	margin: 0 0 0.5em;
}

.fx-post-body__content li::marker {
	color: var(--fx-blue, #163b6b);
}

.fx-post-body__content blockquote {
	margin: 1.75em 0;
	padding: 18px 24px;
	border-left: 4px solid var(--fx-blue, #163b6b);
	background: var(--fx-bg-soft, #f6f5f8);
	border-radius: 0 var(--fx-radius, 12px) var(--fx-radius, 12px) 0;
	font-style: italic;
	color: var(--fx-text, #2d2f31);
}

.fx-post-body__content blockquote p:last-child {
	margin-bottom: 0;
}

.fx-post-body__content img,
.fx-post-body__content .wp-block-image img,
.fx-post-body__content figure img {
	max-width: 100%;
	height: auto;
	border-radius: var(--fx-radius, 12px);
	box-shadow: none;
	-webkit-box-shadow: none;
}

.fx-post-body__content figure {
	margin: 2em 0;
	box-shadow: none;
	-webkit-box-shadow: none;
}

.fx-post-body__content figcaption {
	margin-top: 10px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--fx-text-muted, #5f6770);
	text-align: center;
}

.fx-post-body__content pre {
	padding: 18px 20px;
	border-radius: var(--fx-radius, 12px);
	background: #0f172a;
	color: #e2e8f0;
	overflow-x: auto;
	font-size: 14px;
	line-height: 1.6;
}

.fx-post-body__content code {
	background: var(--fx-bg-muted, #eeecf2);
	padding: 2px 6px;
	border-radius: 6px;
	font-size: 0.92em;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.fx-post-body__content pre code {
	background: transparent;
	padding: 0;
	font-size: inherit;
}

.fx-post-body__content hr {
	border: 0;
	height: 1px;
	background: var(--fx-border, #e5e7eb);
	margin: 2.5em 0;
}

.fx-post-body__content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

.fx-post-body__content table th,
.fx-post-body__content table td {
	padding: 12px 14px;
	border-bottom: 1px solid var(--fx-border, #e5e7eb);
	text-align: left;
	vertical-align: top;
}

.fx-post-body__content table thead th {
	background: var(--fx-bg-soft, #f6f5f8);
	color: var(--fx-text, #2d2f31);
	font-weight: 700;
}

/* Author social icons (auto-indsat via the_content filter) */
.fx-post-body__content .gr-author-icons {
	margin: 32px 0 0;
	padding-top: 24px;
	border-top: 1px solid var(--fx-border, #e5e7eb);
}

/* ============================================================
 * Further reading
 * ============================================================ */
.fx-post-further {
	padding: 72px 0 40px;
	background: var(--fx-bg, #ffffff);
}

.fx-post-further__container {
	max-width: var(--fx-max-content, 1140px);
	margin: 0 auto;
	padding: 0 var(--fx-gutter, 24px);
}

.fx-post-further__header {
	margin: 0 0 32px;
}

.fx-post-further__heading {
	margin: 0;
	font-family: var(--fx-font-heading, "Ubuntu", sans-serif);
	font-weight: 700;
	font-size: var(--fx-h2, 40px);
	line-height: 1.2;
	color: var(--fx-text, #2d2f31);
}

/* ============================================================
 * Hero tweak: full-bleed er ikke ønsket — hero sidder inde i
 * .fx-post-hero-wrap som respekterer max-content-bredden.
 * ============================================================ */
.fx-post-hero-wrap .custom-featured-hero {
	border-radius: var(--fx-radius-xl, 24px);
}

/* ============================================================
 * Responsive
 * ============================================================ */

/* Tablet: smalere højre-sidebar + gap */
@media (max-width: 1024px) {
	.fx-post-body {
		padding: 32px 0 24px;
	}

	.fx-post-body__container {
		grid-template-columns: minmax(0, 1fr) 240px;
		gap: 40px;
	}

	/* top + max-height følger --fx-header-h automatisk, så ingen
	 * override nødvendig her. */

	.fx-post-further {
		padding: 56px 0 32px;
	}
}

/* Mobil: single column — ToC bliver til collapsable panel ØVERST
 * (over artiklen), så brugeren kan hoppe til sektion uden at
 * scrolle gennem hele teksten. Byline-strippen stacker vertikalt. */
@media (max-width: 900px) {
	.fx-post-hero-wrap {
		margin-top: 16px;
		padding: 0;
	}

	.fx-post-hero-wrap .custom-featured-hero {
		border-radius: 0;
	}

	.fx-post-byline {
		padding: 20px var(--fx-gutter, 24px) 0;
	}

	.fx-post-byline__container {
		padding: 16px 0;
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	/* Mobil: share-clusteret står under forfatteren. Drop auto-margin
	 * så den flugter venstre-kant som resten af byline'n. */
	.fx-post-share {
		margin-left: 0;
	}

	.fx-post-body__container {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.fx-post-body__content {
		order: 2;
		max-width: 100%;
	}

	.fx-post-body__toc {
		order: 1;
		position: static;
		top: auto;
		max-height: none;
		display: block; /* drop flex-column på mobil */
		padding-right: 0;
	}

	.fx-post-body__toc > .fx-post-toc {
		overflow: visible;
		flex: none;
	}

	/* Aside-CTA dubler bund-CTA'en og tager plads på mobil — skjul
	 * på små viewports. [blogpost_carousel] + final CTA tager over. */
	.fx-post-body__toc > .fx-post-aside-cta {
		display: none;
	}

	.fx-post-toc {
		padding: 16px 18px;
		background: var(--fx-bg-soft, #f6f5f8);
		border-radius: var(--fx-radius, 12px);
	}

	.fx-post-toc__heading {
		font-size: 16px;
	}

	.fx-post-toc__summary {
		/* Kompakter klik-zonen så den passer ind i mobilens soft panel. */
		margin-bottom: 10px;
	}

	.fx-post-toc__details:not([open]) .fx-post-toc__summary {
		margin-bottom: 0;
	}

	.fx-post-toc__list {
		/* Collapse default på mobil — max-height + scroll så lange
		   ToC'er ikke skubber hele content ned. */
		max-height: 280px;
		overflow: hidden auto;
	}

	.fx-post-toc__link {
		font-size: 14px;
		padding: 5px 10px;
	}
}

@media (max-width: 600px) {
	.fx-post-body {
		padding: 24px 0 16px;
	}

	.fx-post-body__content {
		font-size: 16px;
		line-height: 1.7;
	}

	.fx-post-body__content blockquote {
		padding: 14px 16px;
	}

	.fx-post-byline__author .author-avatar {
		width: 40px;
		height: 40px;
	}

	.fx-post-byline__author .author-box__name {
		font-size: 15px;
	}

	.fx-post-further {
		padding: 48px 0 24px;
	}

	.fx-post-further__heading {
		font-size: var(--fx-h3, 24px);
	}
}