/**
 * FocalX — Industry cross-links section.
 *
 * 4-kort grid til at pege læseren videre til beslægtede industries.
 * Kortet er hele linket (keyboard/screen reader-venligt), og har
 * hover-lift + "learn more"-arrow-animation.
 */

.fx-industry-xlinks {
	padding: 80px 0;
}

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

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

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

.fx-industry-xlinks__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-industry-xlinks__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-industry-xlinks__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.fx-industry-xlinks__item {
	margin: 0;
	padding: 0;
	display: flex;
}

.fx-industry-xlinks__card {
	display: flex;
	flex-direction: column;
	/* Gap mellem billede og tekst-blok — bevarer luft selvom card og
	 * content nu er padding-løse. */
	gap: 16px;
	width: 100%;
	background: transparent;
	/* Ingen border, ingen card-bg, ingen overflow:hidden — kortet er
	 * nu bare en "stack" af billede + tekst. Image-wrap har sin egen
	 * border-radius (18px) der klipper billedet. */
	border: 0;
	text-decoration: none;
	color: inherit;
}

.fx-industry-xlinks__card:hover,
.fx-industry-xlinks__card:focus-visible {
	text-decoration: none;
	color: inherit;
}

/* Heading skifter til FocalX brand-navy ved hover/focus — diskret
 * affordance der signalerer linkbarhed uden at tilføje skygge eller
 * lift på kortet. */
.fx-industry-xlinks__card:hover .fx-industry-xlinks__card-title,
.fx-industry-xlinks__card:focus-visible .fx-industry-xlinks__card-title {
	color: var(--fx-blue, #163b6b);
}

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

.fx-industry-xlinks__image-wrap {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--fx-bg-soft, #f6f5f8);
	/* Billedet har 18px radius hele vejen rundt — ikke blot kortets
	 * top-corners. Det giver et "floating thumbnail"-look hvor
	 * billedet visuelt er sin egen unit ovenpå card-bunden. */
	border-radius: 18px;
}

.fx-industry-xlinks__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}

.fx-industry-xlinks__card:hover .fx-industry-xlinks__image,
.fx-industry-xlinks__card:focus-visible .fx-industry-xlinks__image {
	transform: scale(1.05);
}

.fx-industry-xlinks__content {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 0;
	flex: 1;
}

.fx-industry-xlinks__card-title {
	margin: 0;
	font-family: var(--fx-font-heading, "Ubuntu", sans-serif);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--fx-text, #2d2f31);
	transition: color .18s ease;
}

.fx-industry-xlinks__card-body {
	margin: 0;
	font-family: var(--fx-font-body, "Ubuntu", sans-serif);
	font-size: 15px;
	line-height: 1.5;
	color: var(--fx-text-muted, #5f6770);
	flex: 1;
}

.fx-industry-xlinks__learn-more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
	font-family: var(--fx-font-body, "Ubuntu", sans-serif);
	font-size: 14px;
	font-weight: 600;
	color: var(--fx-brand, #004088);
	transition: gap .18s ease;
}

.fx-industry-xlinks__card:hover .fx-industry-xlinks__learn-more,
.fx-industry-xlinks__card:focus-visible .fx-industry-xlinks__learn-more {
	gap: 10px;
}

@media (prefers-reduced-motion: reduce) {
	.fx-industry-xlinks__card,
	.fx-industry-xlinks__image,
	.fx-industry-xlinks__learn-more {
		transition: none;
	}
	.fx-industry-xlinks__card:hover .fx-industry-xlinks__image,
	.fx-industry-xlinks__card:focus-visible .fx-industry-xlinks__image {
		transform: none;
	}
}

@media (max-width: 1024px) {
	.fx-industry-xlinks__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 900px) {
	.fx-industry-xlinks {
		padding: 56px 0;
	}

	.fx-industry-xlinks__header {
		margin-bottom: 32px;
	}

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

@media (max-width: 600px) {
	.fx-industry-xlinks {
		padding: 40px 0;
	}

	/* Mobil: bevar 2-kolonne-layout (ikke stack til 1) — kortene er
	 * relativt kompakte (billede + titel + kort tekst) og fungerer
	 * fint side-om-side også på smalle viewports. Reducer gap så
	 * der stadig er plads til indhold. */
	.fx-industry-xlinks__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}

	.fx-industry-xlinks__intro {
		font-size: 16px;
	}
}