/**
 * FocalX — Operations category template (delt på tværs af 4 kategorier).
 *
 * Bruges på rail-operations, finished-vehicle-logistics, yard-operations
 * og haulaway-operations. Selectoren `.fx-main--operations-category` er
 * den FÆLLES rod — alt under den styles ens for alle 4 industrier.
 *
 * Per-kategori afvigelser kan tilføjes senere via slug-modifier:
 *   .fx-main--rail-category, .fx-main--yard-category,
 *   .fx-main--haulaway-category, .fx-main--fvl-category
 *
 * Dækker de skræddersyede sektioner i operations-templatet, bl.a.:
 *   1. Example flow — image + checklist + closing
 *   2. Height detection — haulaway-only, 3 kolonner + final clearance
 *   3. Securement matters — 5-billede grid + mock (kun rail)
 *
 * Delte sektioner (hero, image-accordion, feature-grid, how-it-works,
 * partnership, industry-crosslinks, cta) styles af deres respektive CSS.
 */

.fx-main--operations-category {
	background: #ffffff;
}

/* Breadcrumb — alignet med 1140px-layoutet; 24px gutter tablet/mobil.
   Samme mønster som gate / ai / product / compare / about. */
/* ========================================================================
   1. EXAMPLE FLOW
   Image-left (portrait) + checklist + closing paragraph på højre kolonne.
   ======================================================================== */

.fx-example-flow {
	/* Horisontal gutter ligger på section (ikke container) så
	 * container'en får fulde 1140px content-bredde — samme mønster
	 * som .fx-image-accordion. Tidligere lå padding på container
	 * hvilket med box-sizing: border-box åd 48px af indholdet og
	 * efterlod kun 1092px reelt brugbart. */
	padding: 80px var(--fx-gutter, 24px);
}

.fx-example-flow__container {
	max-width: var(--fx-max-content, 1140px);
	margin: 0 auto;
	display: grid;
	/* Lige brede kolonner (billede / tekst) med fælles minmax så de kan
	 * krympe pænt på smalle viewports; gap fra --fx-col-gap. */
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--fx-col-gap);
	align-items: center;
}

/*
 * REKKEFØLGE — DOM vs visuelt:
 * I HTML kommer .fx-example-flow__text FØR .fx-example-flow__image-wrap
 * (så mobile stacker billedet under teksten + bedre SR-rækkefølge).
 * På PC/tablet vil vi dog have billedet visuelt i venstre kolonne, så
 * vi flytter det tilbage med grid `order`. Reset på mobil (≤767px)
 * nederst i filen, så DOM-rækkefølgen igen styrer 1-kolonne stacken.
 */
.fx-example-flow__image-wrap {
	display: block;
	order: 1;
}

.fx-example-flow__text {
	order: 2;
}

.fx-example-flow__image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 24px;
}

.fx-example-flow__text {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
}

/* Pill-styles arves fra .fx-eyebrow i tokens.css. Her sætter vi kun
   layout-specifik margin. */
.fx-example-flow__eyebrow {
	margin: 0;
	align-self: flex-start;
}

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

.fx-example-flow__lead {
	margin: 0;
	font-family: var(--fx-font-body, "Ubuntu", sans-serif);
	font-size: 17px;
	line-height: 1.6;
	color: var(--fx-text-body, #2d2f31cc);
}

.fx-example-flow__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Bruger sitets standard checklist-ikon (mint cirkel + grøn check) —
   se .fx-checklist i tokens.css for den fulde konvention. */
.fx-example-flow__item {
	position: relative;
	padding-left: 32px;
	min-height: 22px;
	font-family: var(--fx-font-body, "Ubuntu", sans-serif);
	font-size: 16px;
	line-height: 1.5;
	color: var(--fx-text, #2d2f31);
}

.fx-example-flow__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.15em;
	width: 22px;
	height: 22px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'><circle cx='8' cy='8' r='8' fill='%23E0F8DE'/><path fill='%23004642' fill-rule='evenodd' d='M10.72 5.22a.75.75 0 011.06 1.06l-4.5 4.5a.75.75 0 01-1.06 0l-2-2a.75.75 0 011.06-1.06L6.75 9.19l3.97-3.97z' clip-rule='evenodd'/></svg>");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}

.fx-example-flow__closing {
	margin: 0;
	font-family: var(--fx-font-body, "Ubuntu", sans-serif);
	font-size: 16px;
	font-style: italic;
	line-height: 1.6;
	color: var(--fx-text-body, #2d2f31cc);
}

/* ACF wysiwyg-output (.fx-example-flow__richtext)
 * --------------------------------------------------------------
 * Når sektionen er ACF-drevet renderes intro + bullet-liste som
 * ren rich-HTML i én wrapper i stedet for de strukturerede
 * .__lead / .__list / .__closing-elementer. Vi spejler typo-
 * grafien fra de strukturerede klasser så det visuelle resultat
 * er identisk uanset kilde — og <ul><li> får automatisk samme
 * grønne checkmark-bullet via :is()-selectoren nedenfor.
 * -------------------------------------------------------------- */
.fx-example-flow__richtext {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.fx-example-flow__richtext p {
	margin: 0;
	font-family: var(--fx-font-body, "Ubuntu", sans-serif);
	font-size: 17px;
	line-height: 1.6;
	color: var(--fx-text-body, #2d2f31cc);
}

.fx-example-flow__richtext p em,
.fx-example-flow__richtext em {
	font-style: italic;
	color: var(--fx-text-body, #2d2f31cc);
}

.fx-example-flow__richtext ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.fx-example-flow__richtext ul li {
	position: relative;
	padding-left: 32px;
	min-height: 22px;
	font-family: var(--fx-font-body, "Ubuntu", sans-serif);
	font-size: 16px;
	line-height: 1.5;
	color: var(--fx-text, #2d2f31);
}

.fx-example-flow__richtext ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.15em;
	width: 22px;
	height: 22px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'><circle cx='8' cy='8' r='8' fill='%23E0F8DE'/><path fill='%23004642' fill-rule='evenodd' d='M10.72 5.22a.75.75 0 011.06 1.06l-4.5 4.5a.75.75 0 01-1.06 0l-2-2a.75.75 0 011.06-1.06L6.75 9.19l3.97-3.97z' clip-rule='evenodd'/></svg>");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}

/* Modifier: --collaborate
 * --------------------------------------------------------------
 * Bruges af yard-operations' "From reception to dispatch"-step-
 * by-step-sektion. Overrider kun checkmark-bullet'en til en
 * navy fyldt cirkel med hvidt flueben (vs. example-flow's
 * lysegrønne cirkel med dark-teal check) — resten af layoutet
 * er identisk med .fx-example-flow.
 * -------------------------------------------------------------- */
.fx-example-flow--collaborate .fx-example-flow__item::before {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'><circle cx='8' cy='8' r='8' fill='%23163b6b'/><path fill='%23ffffff' fill-rule='evenodd' d='M11.78 5.22a.75.75 0 010 1.06l-4.5 4.5a.75.75 0 01-1.06 0l-2-2a.75.75 0 011.06-1.06L6.75 9.19l3.97-3.97a.75.75 0 011.06 0z' clip-rule='evenodd'/></svg>");
}

/* ========================================================================
   2. SECUREMENT MATTERS
   Eyebrow + H2 + intro centreret. Under: 5-billede grid. Under:
   mock inspection detail card (handover-style).
   ======================================================================== */

/* Horisontal gutter på section (ikke container) — samme mønster som
 * .fx-example-flow: container får fuld --fx-max-content til grid/galleri
 * uden at 24px ekstra side-padding “spiser” bredden. */
.fx-securement {
	padding: 80px var(--fx-gutter, 24px);
	background: var(--fx-bg-soft, #f6f5f8);
	display: grid;
	justify-items: center;
}

.fx-securement__container {
	box-sizing: border-box;
	width: min(100%, var(--fx-max-content, 1140px));
	margin: 0;
	padding: 0;
}

.fx-securement__header {
	max-width: 720px;
	margin: 0 auto 48px;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Pill-styles arves fra .fx-eyebrow i tokens.css. */
.fx-securement__eyebrow {
	margin: 0 auto;
}

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

.fx-securement__intro {
	margin: 0;
	font-family: var(--fx-font-body, "Ubuntu", sans-serif);
	font-size: 17px;
	line-height: 1.6;
	color: var(--fx-text-body, #2d2f31cc);
}

.fx-securement__gallery {
	list-style: none;
	margin: 0 0 56px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 16px;
}

.fx-securement__gallery-item {
	margin: 0;
	padding: 0;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--fx-radius, 12px);
	background: #ffffff;
}

.fx-securement__gallery-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Mock inspection detail card */

.fx-securement__mock-label {
	margin: 0 0 16px;
	text-align: center;
	font-family: var(--fx-font-body, "Ubuntu", sans-serif);
	font-size: 15px;
	font-weight: 600;
	color: var(--fx-text, #2d2f31);
}

.fx-securement__mock {
	width: 100%;
	max-width: none;
	margin: 0 auto;
	background: #ffffff;
	border: 1px solid var(--fx-border, #e5e7eb);
	border-radius: var(--fx-radius, 12px);
	padding: 16px;
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 24px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}

.fx-securement__mock-image-wrap {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 8px;
}

.fx-securement__mock-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fx-securement__mock-details {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	min-width: 0;
	/* Tablet: 3 kolonner (2 rækker) til og med ~iPad Pro-bredde; én række × 6 først
	 * ved rigtig bred desktop (≥1200px) så indholdet ikke stikker ud. */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px 20px;
}

/* Bred tablet / lille laptop (901–1199px): samme 3×2-grid som 601–900 — undgår
 * overflow på 1024px (iPad Pro) når seks kolonner + thumb ikke kan være der. */
@media (min-width: 901px) and (max-width: 1199px) {
	.fx-securement__mock {
		grid-template-columns: 120px 1fr;
		gap: 20px 24px;
	}

	.fx-securement__mock-details {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 10px 18px;
	}
}

/* Bred desktop: 80px-thumb + seks felter på én række (flex — ikke lige brede kolonner). */
@media (min-width: 1200px) {
	.fx-securement__mock {
		grid-template-columns: 80px 1fr;
	}

	.fx-securement__mock-details {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: flex-start;
		gap: 0 12px;
	}

	.fx-securement__mock-details .fx-securement__mock-row {
		min-width: 0;
	}

	.fx-securement__mock-details .fx-securement__mock-val {
		min-width: 0;
	}

	/* VIN: indhold + lidt ekstra vækst; tilsvarende trækkes fra Inspection ID (samlet flex-grow uændret). */
	.fx-securement__mock-details > .fx-securement__mock-row:nth-child(1) {
		flex: 0.5 1 auto;
		min-width: 0;
	}

	.fx-securement__mock-details > .fx-securement__mock-row:nth-child(1) .fx-securement__mock-val {
		white-space: nowrap;
	}

	/* Inspection ID: stadig størstedelen af den fleksible bredde. */
	.fx-securement__mock-details > .fx-securement__mock-row:nth-child(2) {
		flex: 2.25 1 0;
		min-width: 0;
	}

	.fx-securement__mock-details > .fx-securement__mock-row:nth-child(2) .fx-securement__mock-val {
		overflow-wrap: anywhere;
		word-break: break-word;
	}

	/* Type + Location: fleksibel mellemkolonne. */
	.fx-securement__mock-fields-grid .fx-securement__mock-row:nth-child(1),
	.fx-securement__mock-fields-grid .fx-securement__mock-row:nth-child(2) {
		flex: 1.15 1 0;
		min-width: 0;
	}

	/* Part + Occurrence: kun den bredde der skal til label+værdi. */
	.fx-securement__mock-fields-grid .fx-securement__mock-row:nth-child(3),
	.fx-securement__mock-fields-grid .fx-securement__mock-row:nth-child(4) {
		flex: 0 1 auto;
	}

	.fx-securement__mock-row {
		gap: 0;
	}
}

.fx-securement__mock-row {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.fx-securement__mock-key {
	margin: 0;
	font-family: var(--fx-font-body, "Ubuntu", sans-serif);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--fx-text-muted, #5f6770);
}

.fx-securement__mock-val {
	margin: 0;
	font-family: var(--fx-font-body, "Ubuntu", sans-serif);
	font-size: 14px;
	font-weight: 500;
	color: var(--fx-text, #2d2f31);
	word-break: break-word;
}

/* Fire felter (Type … Occurrence): på desktop “opløses” wrapperen så de seks
 * .mock-row stadig deltager direkte i <dl>-grid'et. På mobil (≤600px) bliver
 * wrapperen et rigtigt 2×2-grid — se media query. */
.fx-securement__mock-fields-grid {
	display: contents;
}

/* ========================================================================
   Further reading wrapper (genbruges fra gate-template-mønstret)
   ======================================================================== */

.fx-rail-posts {
	padding: 80px 0;
}

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

.fx-rail-posts__header {
	text-align: center;
	margin: 0 auto 40px;
	max-width: 720px;
}

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

.fx-rail-posts__intro {
	margin: 0;
	font-family: var(--fx-font-body, "Ubuntu", sans-serif);
	font-size: 17px;
	line-height: 1.6;
	color: var(--fx-text-body, #2d2f31cc);
}

/* ========================================================================
   RESPONSIVE
   ======================================================================== */

@media (max-width: 1024px) {
	.fx-example-flow__container {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		/* Gap kommer fra --fx-col-gap (48px på tablet). */
	}

	/* Securement-galleri beholder 5 kolonner helt ned til mobil-
	 * breakpointet (767px) — billederne er små, kvadratiske thumbs
	 * der nemt kan ligge 5-i-rad selv på iPad-bredde. Først på mobil
	 * stacker vi til 2 kolonner (se 767px-blokken nederst). */

	/* Drop side-padding på tablet + mobil — postlisten skal flugte
	 * sektionens egen kant (føles for indelukket med ekstra gutter
	 * på smalle viewports). Gælder helt ned til mobile breakpoints. */
	.fx-rail-posts__container {
		padding: 0;
	}
}

@media (max-width: 900px) {
	/* NB: bevarer 24px horisontal padding på tablet/mobil — tidligere
	 * zeroede vi den horisontale padding ud (`56px 0`) hvilket fik
	 * indholdet til at ligge helt ud til viewport-kanten. Brug
	 * eksplicit `var(--fx-gutter)` så sektionen følger samme gutter-
	 * konvention som resten af sitet. */
	.fx-example-flow {
		padding: 56px var(--fx-gutter, 24px);
	}

	.fx-example-flow__title {
		font-size: var(--fx-h3, 32px);
	}

	.fx-securement {
		padding: 56px var(--fx-gutter, 24px);
	}

	.fx-securement__header {
		margin-bottom: 32px;
	}

	.fx-securement__title {
		font-size: var(--fx-h3, 32px);
	}

	.fx-securement__gallery {
		margin-bottom: 40px;
		gap: 12px;
	}

	.fx-rail-posts {
		padding: 56px 0;
	}

	.fx-rail-posts__heading {
		font-size: var(--fx-h3, 32px);
	}
}

/* Stack example-flow til 1 kolonne først ved mobil — tablet (≥768px)
   beholder 2-kolonne layoutet (image venstre + tekst højre).
   Gap kommer fra --fx-col-gap-token (24px på mobil). */
@media (max-width: 767px) {
	.fx-example-flow__container {
		grid-template-columns: 1fr;
	}

	/* Reset grid `order` så DOM-rækkefølgen styrer stacken på mobil:
	 * tekst først (top) → billede sidst (bund). Visuelt match med
	 * det desktop-design hvor brugeren læser teksten og bagefter
	 * "afslutter" med det illustrative foto. */
	.fx-example-flow__text {
		order: 0;
	}

	.fx-example-flow__image-wrap {
		order: 0;
		max-width: 100%;
		margin: 0 auto;
	}

	/* Mobil: tving billedet til kvadrat (1/1) og fyld hele bredden.
	 * På desktop/tablet bevarer billedet sin naturlige aspect-ratio
	 * (typisk portrait fra ACF/uploads), men på mobil giver et
	 * kvadrat bedre visuel rytme i stacked-layoutet. */
	.fx-example-flow__image {
		aspect-ratio:    1 / 1;
		object-fit:      cover;
		object-position: center center;
		width:           100%;
	}
}

@media (max-width: 600px) {
	.fx-example-flow,
	.fx-securement {
		padding: 40px var(--fx-gutter, 24px);
	}

	/* Rail-posts har bevidst 0 horisontal padding på alle viewports
	 * (postlisten/carousel'en flugter med viewport-kanten — føles
	 * for indelukket med ekstra gutter på smalle viewports). */
	.fx-rail-posts {
		padding: 40px 0;
	}

	.fx-example-flow__lead,
	.fx-example-flow__closing,
	.fx-securement__intro,
	.fx-rail-posts__intro {
		font-size: 16px;
	}

	.fx-securement__gallery {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Mock-kort: 2 kolonner (smallere billede | VIN+ID), derefter fuld bredde
	 * 2×2 for Type/Location/Part/Occurrence via .fx-securement__mock-fields-grid. */
	.fx-securement__mock {
		max-width: 100%;
		grid-template-columns: min(80px, 22vw) minmax(0, 1fr);
		grid-template-rows: auto auto auto;
		align-items: start;
		column-gap: 12px;
		row-gap: 10px;
		padding: 12px;
	}

	.fx-securement__mock-image-wrap {
		grid-column: 1;
		grid-row: 1 / span 2;
		max-width: none;
		width: 100%;
		align-self: start;
	}

	.fx-securement__mock-details {
		display: contents;
	}

	.fx-securement__mock-details > .fx-securement__mock-row:nth-child(1) {
		grid-column: 2;
		grid-row: 1;
		min-width: 0;
	}

	.fx-securement__mock-details > .fx-securement__mock-row:nth-child(2) {
		grid-column: 2;
		grid-row: 2;
		min-width: 0;
	}

	.fx-securement__mock-details > .fx-securement__mock-fields-grid {
		display: grid;
		grid-column: 1 / -1;
		grid-row: 3;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: 12px;
		row-gap: 10px;
		width: 100%;
		min-width: 0;
	}

	.fx-securement__mock-details > .fx-securement__mock-row:nth-child(2) .fx-securement__mock-val {
		overflow-wrap: anywhere;
		word-break: break-word;
		font-size: 12px;
		line-height: 1.35;
	}
}

/* ========================================================================
   3. HEIGHT DETECTION (haulaway-operations)
   Hvid ydre baggrund + lys grå shell; 3-kolonne række, kort, final clearance.
   ======================================================================== */

.fx-height-detection {
	--hd-text: #2d2f31;
	--hd-text-muted: #2d2f31cc;
	--hd-ok-border: #2d8a48;
	--hd-ok-bg: #eef7f0;
	--hd-ok-status: #1a7f4a;
	--hd-bad-border: #c6332a;
	--hd-bad-bg: #fdf3f3;
	--hd-bad-status: #c6332a;
	--hd-tile-shadow: 0 2px 14px rgba(45, 47, 49, 0.08);
	--hd-clearance-bg: #eff5f1;

	padding: 80px var(--fx-gutter, 24px);
	background: #ffffff;
	display: grid;
	justify-items: center;
}

.fx-height-detection__shell {
	box-sizing: border-box;
	width: min(100%, var(--fx-max-content, 1140px));
	margin: 0;
	background: #f6f5f8;
	border-radius: 20px;
	padding: 48px 40px 40px;
	box-shadow: var(--hd-tile-shadow);
}

/* Udenfor shell — samme max-bredde som kasse så tekst flugter med indhold. */
.fx-height-detection__header {
	box-sizing: border-box;
	width: min(100%, var(--fx-max-content, 1140px));
	max-width: 840px;
	margin: 0 auto 32px;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Pill-styles arves fra .fx-eyebrow i tokens.css (samme som securement m.fl.). */
.fx-height-detection__eyebrow {
	margin: 0 auto;
}

.fx-height-detection__title {
	margin: 0;
	font-family: var(--fx-font-heading, "Ubuntu", sans-serif);
	font-size: var(--fx-h2, 40px);
	font-weight: 700;
	line-height: 1.15;
	color: var(--hd-text);
}

.fx-height-detection__intro {
	margin: 0;
	font-family: var(--fx-font-body, "Ubuntu", sans-serif);
	font-size: 18px;
	line-height: 1.55;
	color: var(--hd-text-muted);
}

/* 3 equal-width columns, samme rækkehøjde (stretch) — indhold følger efter. */
.fx-height-detection__row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin-bottom: 32px;
	align-items: stretch;
}

/* Kolonne: flex så billede/kort kan fylde resthøjde og matche søskende-kolonner. */
.fx-height-detection__col {
	display: flex;
	flex-direction: column;
	min-height: 0;
}

/* Én række: step-cirkel til venstre, titel til højre (som kol. 1). */
.fx-height-detection__col-head {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	margin-bottom: 12px;
	flex-shrink: 0;
	text-align: left;
}

.fx-height-detection__col-head--finale {
	margin-bottom: 0;
}

.fx-height-detection__step {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	flex-shrink: 0;
	font-family: var(--fx-font-body, "Ubuntu", sans-serif);
	font-size: 15px;
	font-weight: 700;
	color: #ffffff;
	line-height: 1;
}

.fx-height-detection__step--1 {
	background: var(--fx-blue, #163b6b);
}

.fx-height-detection__step--2,
.fx-height-detection__step--4 {
	background: #2d8a48;
}

.fx-height-detection__step--3 {
	background: var(--hd-bad-status);
}

.fx-height-detection__col-title {
	margin: 0;
	min-width: 0;
	flex: 1 1 auto;
	font-family: var(--fx-font-body, "Ubuntu", sans-serif);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.35;
	text-align: left;
	color: var(--hd-text);
}

/* Fælles “kasse” for billede + scenario-kort (matcher Elementor-live). */
.fx-height-detection__tile {
	box-sizing: border-box;
	border-radius: 16px;
	box-shadow: var(--hd-tile-shadow);
}

.fx-height-detection__tile--media {
	border: 2px solid var(--fx-blue, #163b6b);
	background: var(--fx-bg-muted, #eeecf2);
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.fx-height-detection__figure {
	position: relative;
	margin: 0;
}

.fx-height-detection__figure-img {
	display: block;
	width: 100%;
	flex: 1 1 auto;
	min-height: 0;
	object-fit: cover;
}

.fx-height-detection__card {
	margin: 0;
	padding: 18px;
	border-radius: 16px;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-height: 0;
	gap: 12px;
}

.fx-height-detection__card--ok {
	border: 2px solid var(--hd-ok-border);
	background: var(--hd-ok-bg);
	min-height: 220px;
}

.fx-height-detection__card--bad {
	border: 2px solid var(--hd-bad-border);
	background: var(--hd-bad-bg);
	min-height: 220px;
}

.fx-height-detection__metrics {
	margin: 0;
	flex: 1 1 auto;
	min-height: 0;
}

.fx-height-detection__metric {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 12px;
}

.fx-height-detection__metric:last-of-type {
	margin-bottom: 0;
}

.fx-height-detection__metric dt,
.fx-height-detection__metric dd {
	margin: 0;
	font-family: var(--fx-font-body, "Ubuntu", sans-serif);
	font-size: 18px;
	line-height: 1.35;
}

.fx-height-detection__metric dt {
	font-weight: 400;
	color: var(--hd-text-muted);
}

.fx-height-detection__metric-val {
	font-weight: 600;
	color: var(--hd-text);
	text-align: right;
}

.fx-height-detection__metric-val--ok {
	font-size: 22px;
	font-weight: 700;
	color: var(--hd-ok-border);
}

.fx-height-detection__metric-val--bad {
	font-size: 22px;
	font-weight: 700;
	color: var(--hd-bad-border);
}

.fx-height-detection__state {
	margin: 0;
	margin-top: auto;
	text-align: center;
	font-family: var(--fx-font-body, "Ubuntu", sans-serif);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: #ffffff;
	padding: 4px 12px;
	border-radius: 4px;
	line-height: 1.35;
}

.fx-height-detection__state--ok {
	background: var(--hd-ok-status);
}

.fx-height-detection__state--bad {
	background: var(--hd-bad-status);
}

.fx-height-detection__subnote {
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	font-family: var(--fx-font-body, "Ubuntu", sans-serif);
	font-size: 18px;
	line-height: 1.35;
}

.fx-height-detection__subnote--ok {
	color: var(--hd-text-muted);
}

.fx-height-detection__subnote--bad {
	color: var(--hd-text-muted);
}

.fx-height-detection__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	flex-shrink: 0;
}

.fx-height-detection__subnote--ok .fx-height-detection__dot {
	background: var(--hd-ok-border);
}

.fx-height-detection__subnote--bad .fx-height-detection__dot {
	background: var(--hd-bad-border);
}

/* Hvid “kasse” om step 4 + mint clearance (som mock). */
.fx-height-detection__finale {
	box-sizing: border-box;
	margin: 24px 0 0;
	padding: 24px;
	background: #ffffff;
	border-radius: 16px;
	box-shadow: var(--hd-tile-shadow);
}

.fx-height-detection__finale-head {
	padding-bottom: 16px;
	margin-bottom: 16px;
	border-bottom: 1px solid #e5e7eb;
}

.fx-height-detection__finale-title {
	margin: 0;
	min-width: 0;
	flex: 1 1 auto;
	font-family: var(--fx-font-body, "Ubuntu", sans-serif);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	text-align: left;
	color: var(--hd-text);
	text-transform: none;
	letter-spacing: 0;
}

.fx-height-detection__clearance {
	background: var(--hd-clearance-bg);
	border-radius: 16px;
	padding: 18px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.fx-height-detection__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.fx-height-detection__li {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--fx-font-body, "Ubuntu", sans-serif);
	font-size: 18px;
	line-height: 1.35;
	color: var(--hd-text);
}

/* Mint cirkel + mørk grøn tick — samme mønster som .fx-hero__check (hero.css). */
.fx-height-detection__check {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
}

.fx-height-detection__check svg {
	display: block;
	width: 100%;
	height: 100%;
}

.fx-height-detection__check circle {
	fill: #1a7f4a;
}

.fx-height-detection__check path {
	fill: #eff5f1;
}

.fx-height-detection__final-badge {
	margin: 0;
	align-self: center;
	padding: 10px 28px;
	font-family: var(--fx-font-body, "Ubuntu", sans-serif);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #ffffff;
	background: var(--hd-ok-status);
	border-radius: 6px;
}

@media (max-width: 991px) {
	.fx-height-detection__row {
		grid-template-columns: 1fr 1fr;
	}

	.fx-height-detection__row .fx-height-detection__col:last-child {
		grid-column: 1 / -1;
	}
}

@media (max-width: 700px) {
	.fx-height-detection__row {
		grid-template-columns: 1fr;
	}

	.fx-height-detection__row .fx-height-detection__col:last-child {
		grid-column: auto;
	}

	.fx-height-detection__clearance {
		flex-direction: column;
		align-items: stretch;
	}

	.fx-height-detection__final-badge {
		text-align: center;
	}
}

@media (max-width: 600px) {
	.fx-height-detection {
		padding: 40px var(--fx-gutter, 24px);
	}

	.fx-height-detection__shell {
		padding: 32px 20px 24px;
	}
}