/**
 * Reusable feature-grid-sektion.
 *
 * Flad, centreret liste af feature-items: farvet ikon-boks (48×48 med
 * 12px padding) oven på sektions-baggrunden, med overskrift under.
 *
 * Bruges bl.a. på gate-operations "Built for real-world vehicle inspection
 * operations" (8 items · 4 kolonner). Palette (sky/yellow/peach/lilac)
 * matcher Elementor-kittet 1:1.
 *
 * Konsumeres af: template-parts/sections/feature-grid.php.
 */

.fx-feature-grid {
	padding:    var(--fx-section-py) var(--fx-gutter);
	background: var(--fx-bg);
}

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

/* Header ------------------------------------------------------------- */
.fx-feature-grid__header {
	max-width:  var(--fx-max-narrow, 820px);
	margin:     0 auto clamp(40px, 5vw, 64px);
	text-align: center;
}

.fx-feature-grid__eyebrow {
	/* Basis pill-styles arves fra .fx-eyebrow i tokens.css. Her sætter
	   vi blot afstanden ned til H2'en. */
	margin: 0 0 20px;
}

.fx-feature-grid__title {
	margin:         0 0 16px;
	color:          var(--fx-text, #2d2f31);
	font-size:      clamp(28px, 3.4vw, 40px);
	line-height:    1.15;
	letter-spacing: -0.01em;
}

.fx-feature-grid__intro {
	margin:      16px auto 0;
	max-width:   680px;
	color:       var(--fx-text-body);
	font-size:   var(--fx-text-base);
	line-height: 1.6;
}

/* Grid --------------------------------------------------------------- */
.fx-feature-grid__list {
	list-style: none;
	margin:     0;
	padding:    0;
	display:    grid;
	gap:        clamp(28px, 3vw, 40px) clamp(20px, 2vw, 32px);
}

.fx-feature-grid--cols-2 .fx-feature-grid__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fx-feature-grid--cols-3 .fx-feature-grid__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fx-feature-grid--cols-4 .fx-feature-grid__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Item --------------------------------------------------------------- */
.fx-feature-grid__item {
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	text-align:      center;
	gap:             16px;
	padding:         0 8px;
	min-height:      100%;
}

/* Icon — 48×48 rounded square matching Elementor-kittets .elementor-icon.
   12px padding gør den reelle SVG 24×24 når den er leveret i fuld boks. */
.fx-feature-grid__icon {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	width:           48px;
	height:          48px;
	padding:         12px;
	border-radius:   10px;
	flex-shrink:     0;
	box-sizing:      border-box;
}
.fx-feature-grid__icon img {
	width:      24px;
	height:     24px;
	display:    block;
	object-fit: contain;
}

.fx-feature-grid__icon--sky    { background: var(--fx-sky,    #93e7fe); }
.fx-feature-grid__icon--yellow { background: var(--fx-yellow, #ffd978); }
.fx-feature-grid__icon--peach  { background: var(--fx-peach,  #fea25f); }
.fx-feature-grid__icon--lilac  { background: var(--fx-lilac,  #d5cdec); }
.fx-feature-grid__icon--pink   { background: var(--fx-pink,   #faa9e4); }
.fx-feature-grid__icon--green  { background: #b9e6c2; }

/* Text --------------------------------------------------------------- */
.fx-feature-grid__item-title {
	font-family: var(--fx-font-heading);
	margin:      0;
	color:       var(--fx-text, #2d2f31);
	font-size:   clamp(15px, 1.1vw, 17px);
	font-weight: 700;
	line-height: 1.35;
	max-width:   22ch;
}

.fx-feature-grid__item-body {
	margin:      0;
	color:       var(--fx-text-body);
	font-size:   15px;
	line-height: 1.6;
	max-width:   26ch;
}
.fx-feature-grid__item-body p { margin: 0 0 10px; }
.fx-feature-grid__item-body p:last-child { margin-bottom: 0; }
.fx-feature-grid__item-body ul { list-style: disc; margin: 0 auto; padding-left: 20px; text-align: left; }
.fx-feature-grid__item-body li + li { margin-top: 4px; }

/* Responsive --------------------------------------------------------- */
@media (max-width: 1024px) {
	.fx-feature-grid--cols-4 .fx-feature-grid__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.fx-feature-grid--cols-3 .fx-feature-grid__list,
	.fx-feature-grid--cols-4 .fx-feature-grid__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.fx-feature-grid--cols-2 .fx-feature-grid__list {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 420px) {
	.fx-feature-grid--cols-3 .fx-feature-grid__list,
	.fx-feature-grid--cols-4 .fx-feature-grid__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}