/**
 * Reusable AI detections-sektion.
 *
 * Centreret h2 + intro + flex-grid af badges (ikon + label).
 *
 * Markup:
 *   section.fx-ai-detect
 *     .fx-ai-detect__container
 *       header.fx-ai-detect__header
 *         h2.fx-ai-detect__title
 *         p.fx-ai-detect__intro
 *       ul.fx-ai-detect__grid
 *         li.fx-ai-detect__item
 *           img.fx-ai-detect__icon
 *           span.fx-ai-detect__label
 *
 * Farver kommer fra tokens: --fx-blue (#163B6B) + --fx-bg-soft (#F6F5F8).
 * Ingen hover-interaktion — det er rene visualiseringer, ikke links.
 */

/* Section --------------------------------------------------------------- */
.fx-ai-detect {
	padding: var(--fx-section-py, 96px) var(--fx-gutter, 24px);
	background: var(--fx-bg, #fff);
}

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

/* Header ---------------------------------------------------------------- */
.fx-ai-detect__header {
	max-width: 820px;
	margin: 0 auto 40px;
	text-align: center;
}

.fx-ai-detect__title {
	font-family: var(--fx-font-heading, var(--fx-font-body));
	font-size:   clamp(28px, 3.2vw, 44px);
	font-weight: 700;
	line-height: 1.2;
	color:       var(--fx-text, #2d2f31);
	margin:      0 0 16px;
}

.fx-ai-detect__intro {
	font-family: var(--fx-font-body);
	font-size:   18px;
	line-height: 1.6;
	color:       var(--fx-text-muted, rgba(45, 47, 49, 0.8));
	margin:      0;
}

/* Grid ------------------------------------------------------------------ */
.fx-ai-detect__grid {
	display:         flex;
	flex-wrap:       wrap;
	gap:             12px;
	justify-content: center;
	list-style:      none;
	padding:         0;
	margin:          0;
}

.fx-ai-detect__item {
	display:          flex;
	align-items:      center;
	background-color: var(--fx-bg, #fff);
	/* 4px "dobbelt border"-effekt fra kildedesignet — bruger --fx-bg-soft
	   tokenet (samme #F6F5F8 som i det originale markup). */
	border:           4px solid var(--fx-bg-soft, #f6f5f8);
	padding:          6px 12px;
	border-radius:    var(--fx-radius, 12px);
	color:            var(--fx-blue, #163b6b);
	font-weight:      500;
	min-width:        200px;
	box-sizing:       border-box;
}

.fx-ai-detect__icon {
	height:      48px;
	width:       auto;
	max-width:   72px;
	object-fit:  contain;
	margin-right: 8px;
	flex-shrink: 0;
	/* Undgå sub-pixel blur ved transform på parent. */
	transform:   translateZ(0);
}

.fx-ai-detect__label {
	font-family: var(--fx-font-body);
	font-size:   16px;
	line-height: 1.3;
}

/* Tablet ---------------------------------------------------------------- */
@media (max-width: 1024px) {
	.fx-ai-detect__header {
		margin-bottom: 32px;
	}

	.fx-ai-detect__intro {
		font-size: 17px;
	}
}

/* Mobile ---------------------------------------------------------------- */
@media (max-width: 700px) {
	.fx-ai-detect__grid {
		gap: 6px;
	}

	.fx-ai-detect__item {
		border:      2px solid var(--fx-bg-soft, #f6f5f8);
		font-size:   14px;
		flex:        1 1 calc(50% - 6px);
		max-width:   calc(50% - 6px);
		min-width:   0;
		padding:     6px 0;
		justify-content: flex-start;
	}

	.fx-ai-detect__icon {
		height:       40px;
		max-width:    50px;
		margin-right: 6px;
	}

	.fx-ai-detect__label {
		font-size: 14px;
	}

	/* Centrér sidste item hvis ulige antal (kun når det er barn #N:N). */
	.fx-ai-detect__item:nth-child(odd):last-child {
		margin-left:  auto;
		margin-right: auto;
	}
}