/**
 * Reusable image-duo-sektion — H2 + 2 ligeværdige billeder.
 *
 * Bruges første gang til "Real examples from live inspections" på /product/.
 * På mobil stables de to billeder lodret.
 *
 * Konsumeres af: template-parts/sections/image-duo.php.
 */

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

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

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

.fx-image-duo__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap:    clamp(16px, 2vw, 32px);
	/* `stretch` + `img { height: 100% }` uden defineret figure-højde giver ofte
	   enorm billedhøjde i Safari på iOS (andre browsere/emulator er mildere). */
	align-items: start;
}

.fx-image-duo__figure {
	margin: 0;
	min-width: 0;
}

.fx-image-duo__image {
	display:       block;
	width:         100%;
	max-width:     100%;
	height:        auto;
	border-radius: var(--fx-radius-lg, 20px);
	box-shadow:    0 16px 40px rgba(22, 59, 107, 0.1);
	aspect-ratio:  16 / 10;
	object-fit:    cover;
	object-position: center center;
}

.fx-image-duo__caption {
	margin:     12px 0 0;
	color:      var(--fx-text-soft, #4a4a4a);
	font-size:  14px;
	text-align: center;
}

/* Mobil --------------------------------------------------------------- */
@media (max-width: 700px) {
	.fx-image-duo__grid {
		grid-template-columns: 1fr;
	}
	.fx-image-duo__title {
		margin-bottom: 28px;
	}
}