/**
 * Reusable Focalx Operations Hub-sektion.
 *
 * 2-kolonne layout (tekst venstre, screenshot højre). Kolonnerne byttes
 * ikke om; hvis du vil have "reverse"-layout, tilføj .fx-opshub--reverse
 * som extra_class og override .fx-opshub__container med direction:row-reverse.
 *
 * Tokens: --fx-section-py, --fx-gutter, --fx-blue, --fx-text, --fx-radius.
 *
 * Konsumeres af: template-parts/sections/operations-hub.php.
 */

.fx-opshub {
	padding: var(--fx-section-py, 96px) var(--fx-gutter, 24px);
	background-color: var(--fx-bg, #fff);
}

.fx-opshub__container {
	display:        grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap:            var(--fx-col-gap);
	align-items:    center;
	max-width:      var(--fx-max-content, 1140px);
	margin:         0 auto;
}

.fx-opshub__text {
	max-width: 560px;
}

/* Pill-styles arves fra .fx-eyebrow i tokens.css. Her sætter vi kun
   margin-bottom så eyebrow'en står i korrekt afstand til H2'en under. */
.fx-opshub__eyebrow {
	margin: 0 0 16px;
}

.fx-opshub__title {
	margin: 0 0 16px;
	color:  var(--fx-text, #2d2f31);
	font-size: clamp(28px, 3.6vw, 40px);
	font-weight: 700;
	line-height: 1.15;
}

.fx-opshub__description {
	margin: 0 0 24px;
	color:  var(--fx-text, #2d2f31);
	font-size: clamp(16px, 1.1vw, 18px);
	line-height: 1.55;
}

.fx-opshub__bullets {
	list-style: none;
	margin:     0;
	padding:    0;
	display:    grid;
	gap:        14px;
}

.fx-opshub__bullet {
	display:     flex;
	align-items: flex-start;
	gap:         12px;
	color:       var(--fx-text, #2d2f31);
	font-size:   16px;
	line-height: 1.5;
}

.fx-opshub__check {
	display:      inline-flex;
	flex-shrink:  0;
	margin-top:   2px;
}

.fx-opshub__bullet-text {
	flex: 1;
}

/* Mini feature-grid (2×2) — alternativ til bullets.
 * Bruges fx på /gate-operations/ "Review every inspection in the Focalx
 * Operations Hub" hvor tekstkolonnen viser 4 mini feature-kort i stedet
 * for en checkliste. Ikon-paletten matcher .fx-int og image-accordion.
 */
.fx-opshub__features {
	list-style: none;
	margin:     clamp(8px, 1vw, 16px) 0 0;
	padding:    0;
	display:                grid;
	grid-template-columns:  repeat(2, minmax(0, 1fr));
	gap:                    clamp(20px, 2.4vw, 32px);
}

.fx-opshub__feature {
	display:        flex;
	flex-direction: column;
	align-items:    flex-start;
	gap:            10px;
	min-width:      0;
}

.fx-opshub__feature-icon {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	width:           36px;
	height:          36px;
	border-radius:   10px;
	flex-shrink:     0;
}
.fx-opshub__feature-icon img {
	width:   20px;
	height:  20px;
	display: block;
}
.fx-opshub__feature-icon--yellow { background: var(--fx-yellow, #fce7a8); }
.fx-opshub__feature-icon--sky    { background: var(--fx-sky, #cfe8fb); }
.fx-opshub__feature-icon--pink   { background: var(--fx-pink, #f8d2d2); }
.fx-opshub__feature-icon--green  { background: var(--fx-green-soft, #dff4e3); }

.fx-opshub__feature-title {
	margin:      4px 0 2px;
	font-family: var(--fx-font-heading);
	font-size:   16px;
	font-weight: 700;
	color:       var(--fx-text, #2d2f31);
	line-height: 1.3;
}

.fx-opshub__feature-body {
	margin:      0;
	font-size:   14px;
	line-height: 1.55;
	color:       var(--fx-text-body, rgba(45, 47, 49, 0.8));
}

/* Figuren er crop-containeren — aspect-ratio + overflow + border-radius
   ligger her, så vi kan crop'e billedet rent med object-fit uden at
   højden afhænger af img-tagets intrinsic størrelse. */
.fx-opshub__figure {
	margin:        0;
	aspect-ratio:  1 / 1; /* Kvadratisk på alle viewports — matcher
	                         hero- og image-accordion-billeder. */
	border-radius: var(--fx-radius-lg, 20px);
	overflow:      hidden;
	box-shadow:    0 24px 60px rgba(22, 59, 107, 0.12);
}

/* Modifier: bytter kolonnerne så billedet vises til venstre.
   Mobil-layout (stacked) bevarer den oprindelige rækkefølge
   (tekst først) fordi billedet ikke længere har visuel prioritet
   når det alligevel stables under. */
.fx-opshub--reverse .fx-opshub__container {
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
}
.fx-opshub--reverse .fx-opshub__figure {
	order: 1;
}
.fx-opshub--reverse .fx-opshub__text {
	order: 2;
}

.fx-opshub__image {
	width:           100%;
	height:          100%;
	display:         block;
	object-fit:      cover;
	object-position: center center;
}

/* Tablet og mobil ----------------------------------------------------- */
@media (max-width: 900px) {
	.fx-opshub__container,
	.fx-opshub--reverse .fx-opshub__container {
		grid-template-columns: 1fr;
	}
	/* Teksten står altid øverst på stacked-layout — også når desktop
	   bruger --reverse — så brugeren får kontekst før billedet. */
	.fx-opshub__text,
	.fx-opshub--reverse .fx-opshub__text {
		max-width: none;
		order: 1;
	}
	.fx-opshub__figure,
	.fx-opshub--reverse .fx-opshub__figure {
		order: 2;
	}
}

/* Very small phones: stabler feature-grid'et til 1 kolonne så
   titler ikke bliver afbrudt på smalle skærme. */
@media (max-width: 420px) {
	.fx-opshub__features {
		grid-template-columns: 1fr;
	}
}