/**
 * How it works (.fx-hiw)
 *
 * Reusable sektion brugt på tværs af landingssider.
 * Design: centreret heading → nummererede pill-tabs → dark-panel med farvet
 * icon-pill + titel + beskrivelse (venstre) · hvidt billedkort (højre).
 *
 * Bruger globale tokens fra tokens.css.
 */

/* ============================================================
 * Section frame
 * ============================================================ */
.fx-hiw {
	padding: var(--fx-section-py, clamp(56px, 7vw, 96px)) var(--fx-gutter);
	background: var(--fx-bg, #fff);
}

.fx-hiw__container {
	max-width: var(--fx-max-content, 1140px);
	margin: 0 auto;
}

.fx-hiw__header {
	text-align: center;
	max-width: var(--fx-max-narrow, 820px);
	margin: 0 auto clamp(28px, 3.5vw, 40px);
}

.fx-hiw .fx-hiw__title {
	color: var(--fx-text, #2d2f31);
	font-size: clamp(28px, 3.2vw, 40px);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin: 0;
}

.fx-hiw__subtitle {
	font-size: var(--fx-text-base, 16px);
	line-height: 1.6;
	color: var(--fx-text-body, rgba(45, 47, 49, 0.7));
	margin: 12px 0 0;
}

/* ============================================================
 * Tabs — nummererede pills
 * ============================================================ */
.fx-hiw__tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0 0 clamp(28px, 3.5vw, 40px);
}

.fx-hiw__tab {
	all: unset;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	/* Asymmetrisk padding: number-bubble fylder venstre side visuelt,
	 * så vi reducerer venstre padding og giver ekstra luft til højre
	 * for at balancere knappen optisk (label-tekst skal ikke ligge
	 * klemt op af pillen). */
	padding: 10px 20px 10px 10px;
	background: var(--fx-bg-soft, #f5f7fa);
	border: 1px solid transparent;
	border-radius: 999px;
	cursor: pointer;
	font-family: var(--fx-font-body);
	font-size: 15px;
	font-weight: 500;
	color: var(--fx-text-body, #555);
	transition: background 0.22s ease, color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
	user-select: none;
}

.fx-hiw__tab:hover {
	background: #eceff3;
	border-color: #2d2f31;
	color: #2d2f31;
}

.fx-hiw__tab:focus {
	outline: none;
}

.fx-hiw__tab:focus-visible {
	outline: 2px solid #2d2f31;
	outline-offset: 3px;
}

.fx-hiw__tab.is-active {
	background: #2d2f31;
	color: #fff;
	box-shadow: 0 6px 18px -8px rgba(45, 47, 49, 0.55);
	transform: translateY(-1px);
}

/* Number-bubble — lille cirkel */
.fx-hiw__tab-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0;
	line-height: 1;
	transition: background 0.22s ease, color 0.22s ease, transform 0.22s ease;
	flex-shrink: 0;
}

.fx-hiw__tab:not(.is-active) .fx-hiw__tab-num {
	background: #fff;
	color: var(--fx-text, #2d2f31);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.fx-hiw__tab.is-active .fx-hiw__tab-num {
	background: rgba(255, 255, 255, 0.22);
	color: #fff;
	transform: scale(1.05);
}

.fx-hiw__tab-label {
	font-size: 14px;
	line-height: 1.2;
}

/* ============================================================
 * Panels — dark card
 * ============================================================ */
.fx-hiw__panels {
	position: relative;
}

.fx-hiw__panel {
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.28s ease, transform 0.28s ease;
}

.fx-hiw__panel.is-active {
	opacity: 1;
	transform: translateY(0);
}

.fx-hiw__panel[hidden] {
	display: none;
}

.fx-hiw__panel-card {
	background: #2d2f31;
	border-radius: 24px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 24px;
	padding: 24px;
	align-items: stretch;
	height: 420px;
}

/* Text-kolonne — topaligning, egen interior padding for luftig typografi */
.fx-hiw__panel-text {
	padding: clamp(24px, 3vw, 48px);
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	min-width: 0;
}

.fx-hiw__panel-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	padding: 18px;
	border-radius: 12px;
	color: var(--fx-text, #2d2f31);
	margin: 0 0 12px;
	box-sizing: border-box;
}

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

.fx-hiw__panel-icon--yellow  { background: #ffd978; }
.fx-hiw__panel-icon--sky     { background: #8fd0ff; }
.fx-hiw__panel-icon--pink    { background: #ffb3cf; }
.fx-hiw__panel-icon--lime    { background: #c9ee6b; }
.fx-hiw__panel-icon--violet  { background: #c9bdfb; }

.fx-hiw .fx-hiw__panel-title {
	color: #fff;
	font-size: clamp(22px, 2.2vw, 28px);
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 14px;
}

.fx-hiw__panel-desc {
	color: rgba(255, 255, 255, 0.65);
	font-size: 18px;
	line-height: 1.55;
	margin: 0;
	max-width: 420px;
}

/* Media-kolonne (hvidt kort med billede — fylder fuld højde) */
.fx-hiw__panel-media {
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.45);
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 360px;
}

.fx-hiw__panel-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Matcher den øvrige sitewide image-radius-konvention på panel-
	 * billeder (12px = lidt mindre end card'ets 24px så der opstår
	 * en synlig "kant" mellem media-frame og selve billedet). */
	border-radius: 12px;
}

/* ============================================================
 * Responsive
 * ============================================================ */
/* Stack panel-card til 1 kolonne først ved mobil — tablet (≥768px)
   beholder 2-kolonne kortlayoutet (tekst venstre + billede højre). */
@media (max-width: 767px) {
	.fx-hiw__panel-card {
		grid-template-columns: 1fr;
		gap: 20px;
		align-items: start;
		height: auto;
	}
	.fx-hiw__panel-text {
		padding: clamp(20px, 4vw, 32px);
		order: 1;
	}
	.fx-hiw__panel-media {
		order: 2;
		min-height: 260px;
		max-height: 360px;
	}
	.fx-hiw__panel-desc {
		max-width: 100%;
	}
}

/* ============================================================
 * "Original"-variant (.fx-hiw--original) — bruges på industries-
 * archives via [how_it_works_original] shortcode.
 *
 * Adskiller sig fra standard how-it-works KUN ved at Tab 3 har et
 * brugerdefineret 2x2 stat-grid i panel-media i stedet for et
 * enkelt billede (4 KPI-kort med tal + label + chart).
 *
 * Tab-styling (numbered pills, dark active state) genbruges fra
 * standard-stylingen ovenfor — vi overrider intet på .fx-hiw__tab.
 * ============================================================ */

/* Tab 3 stat-grid — 2 kolonner med ASYMMETRISKE højder.
 *
 * Layout-fingerprint (matcher live-site dimensioner via Elementor):
 *   Venstre kolonne (~55% bredde): 1 kort top + 1 tall bund
 *     - Top: 68% donut "Correct adjudication" (~115px høj)
 *     - Bund: "Actual vs. planned" line-chart (~225px høj — flex-grow)
 *   Højre kolonne (~45% bredde): 1 tall top + 1 kort bund
 *     - Top: 67k+ "Damages detected" bar-chart (~180px høj — flex-grow)
 *     - Bund: 17,254 "Inspections completed" sparkline (~160px høj)
 *
 * Vi kan IKKE bruge en almindelig 2x2 CSS-grid fordi rækkerne ikke
 * deler højde på tværs af kolonnerne — derfor er hver kolonne sin
 * egen flex-container hvor "tall"-kortet får flex:1 og "short"-kortet
 * sizes to content (flex:0).
 *
 * Panel-media wrapperen "neutraliseres" (transparent bg, ingen shadow)
 * så hver hvide stat-card flyder for sig på den mørke panel-bg. */
.fx-hiw__panel-media--stats {
	background: transparent;
	box-shadow: none;
	border-radius: 0;
	padding: 0;
	overflow: visible;
	min-height: 0;
	display: block;
}

.fx-hiw__stat-grid {
	display: grid;
	/* 55/45 ratio — venstre kolonne er ~291px, højre ~243px når panel-
	 * media er 535px bred (matcher Elementor-mål fra live-site). */
	grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
	gap: 8px;
	width: 100%;
	height: 100%;
}

.fx-hiw__stat-col {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-height: 0;
}

.fx-hiw__stat-card {
	background: #fff;
	/* 12px padding matcher live-site. Større padding klemmer chart-
	 * billederne unødvendigt på mindre cards (spec. donut-kortet). */
	padding: 12px;
	border-radius: 14px;
	display: flex;
	gap: 10px;
	min-width: 0;
	box-shadow: 0 8px 24px -18px rgba(0, 0, 0, 0.25);
}

/* Size-modifiers — styrer flex-fordeling inden for kolonnen.
 *   --short : auto-højde (kun det nødvendige til indhold)
 *   --tall  : flex-grow (fylder resten af kolonnen)
 * Kombineret giver det den asymmetriske rytme fra live-site. */
.fx-hiw__stat-card--short { flex: 0 0 auto; }
.fx-hiw__stat-card--tall  { flex: 1 1 auto; }

/* Stack-layout: tal+label øverst, chart nedenunder (default for de
 * fleste KPI-kort — fx "67k+ Damages detected" + bar chart). */
.fx-hiw__stat-card--stack {
	flex-direction: column;
	justify-content: space-between;
}

/* Inline-layout: chart venstre, tal+label højre (fx "68% Correct
 * adjudication" hvor donut'en er det dominerende visuelle element). */
.fx-hiw__stat-card--inline {
	flex-direction: row;
	align-items: center;
	gap: 12px;
}

.fx-hiw__stat-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.fx-hiw__stat-num {
	font-size: clamp(24px, 2.2vw, 32px);
	font-weight: 700;
	color: var(--fx-text, #2d2f31);
	line-height: 1.1;
	letter-spacing: -0.01em;
}

/* Label-typografi matcher live-site Elementor-værdier:
 *   font: 18px Ubuntu (arvet fra body), color: rgba(45,47,49,0.8). */
.fx-hiw__stat-label {
	font-size: 18px;
	line-height: 1.3;
	color: rgba(45, 47, 49, 0.8);
	font-weight: 500;
}

.fx-hiw__stat-visual {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	flex: 1 1 auto;
	overflow: hidden;
}

/* Donut/inline-billedet er FAST størrelse (~64px) så det visuelt
 * matcher tal+label i højre side uden at skubbe layoutet. */
.fx-hiw__stat-card--inline .fx-hiw__stat-visual {
	flex: 0 0 auto;
	width: 64px;
	height: 64px;
}

.fx-hiw__stat-image {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* Stack-layout's chart-billede må fylde hele kortets bredde — det
 * giver en proper "dashboard data-viz"-fornemmelse (bar chart,
 * line chart, sparkline strækker sig fra kant til kant inden for
 * card-padding). */
.fx-hiw__stat-card--stack .fx-hiw__stat-image {
	width: 100%;
}

@media (max-width: 767px) {
	/* Tabs scrollable horisontalt på mobil — holder deres naturlige
	   størrelse og kan swipes hvis de ikke fylder én linje.
	   Lodret padding på containeren skaber plads til shadow + focus ring
	   uden at blive klippet af overflow-x. */
	.fx-hiw__tabs {
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: 8px;
		overflow-x: auto;
		overflow-y: hidden;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		/* Negativ margin + padding så tabs kan scrolle helt ud til
		   sektionens kanter uden at skære padding af i indholdet. */
		margin-left: calc(var(--fx-gutter) * -1);
		margin-right: calc(var(--fx-gutter) * -1);
		padding: 6px var(--fx-gutter) 14px;
	}
	.fx-hiw__tabs::-webkit-scrollbar {
		display: none;
	}
	.fx-hiw__tab {
		flex: 0 0 auto;
		min-height: 44px;
		padding: 10px 18px 10px 10px;
		font-size: 14px;
	}
	.fx-hiw__tab-num {
		width: 22px;
		height: 22px;
		font-size: 11px;
		flex-shrink: 0;
	}
	.fx-hiw__tab-label {
		white-space: nowrap;
	}
	.fx-hiw__panel-text {
		padding: 0;
	}
	.fx-hiw__panel-icon {
		width: 52px;
		height: 52px;
		padding: 14px;
		border-radius: 10px;
	}
	.fx-hiw__panel-desc {
		font-size: 16px;
	}

	/* Stat-grid på mobil: behold 2-kolonne layout (kortene skifter
	 * ikke til single column — det ville gøre panelet alt for langt
	 * på små skærme og dræbe data-viz-overblikket). Gap og typografi
	 * strammes en lille smule så det stadig er læseligt. */
	.fx-hiw__stat-grid {
		gap: 8px;
	}
	.fx-hiw__stat-col {
		gap: 8px;
	}
	.fx-hiw__stat-card {
		padding: 10px;
	}
	.fx-hiw__stat-num {
		font-size: 20px;
	}
	.fx-hiw__stat-label {
		font-size: 14px;
	}
	.fx-hiw__stat-card--inline {
		gap: 8px;
	}
	.fx-hiw__stat-card--inline .fx-hiw__stat-visual {
		width: 44px;
		height: 44px;
	}
}