/**
 * Compare Single page — "FocalX vs X".
 *
 * Struktur:
 *   .fx-main--compare-single
 *     ├── .fx-breadcrumb-wrap                 (reusable)
 *     ├── section.fx-hero.fx-hero--compare    (reusable — default image)
 *     ├── section.fx-logo-carousel-wrap       (reusable)
 *     ├── section.fx-compare-table-wrap       (h2 + [focalx_compare])
 *     ├── section.fx-compare-grid-wrap        (h2 + [focalx_compare_grid])
 *     ├── section.fx-hiw                      (reusable)
 *     ├── …                                   (ai-detections, dashboards, …)
 *     ├── section.fx-integrations             (reusable)
 *     ├── section.fx-testimonials             (reusable)
 *     └── section.fx-cta                      (reusable)
 *
 * Denne fil styler kun de to compare-specifikke sektioner (table-wrap,
 * grid-wrap) + wrapper/breadcrumb-alignment. Alle andre sektioner har
 * deres egen CSS (hero.css, logo-carousel.css, how-it-works.css, osv.).
 */

/* Wrapper --------------------------------------------------------------- */
.fx-main--compare-single {
	background:   var(--fx-bg, #fff);
	color:        var(--fx-text, #2d2f31);
	/* Så hero-billeder der stikker en smule uden for grid-cellen ikke klippes
	   af main (Astra/primary har ofte overflow). */
	overflow-x: visible;
	overflow:   visible;
}

/* Hero (.fx-hero--compare) — samme promo-billede som forsiden
   (css/frontpage.css .fx-hero--frontpage: wrap + img max-width/margin/bleed). */
.fx-main--compare-single .fx-hero--compare .fx-hero__image-wrap {
	aspect-ratio:  auto;
	border-radius: 0;
	overflow:      visible;
	max-width:     none;
	margin-left:   0;
	background:    transparent;
}

.fx-main--compare-single .fx-hero--compare .fx-hero__image {
	width:           auto;
	height:          auto;
	max-width:       100%;
	object-fit:      contain;
	object-position: left bottom;
	display:         block;
}

/* Tablet + PC: ét sæt tal som frontpage (≥768px). */
@media (min-width: 768px) {
	.fx-main--compare-single .fx-hero--compare .fx-hero__container {
		align-items: stretch;
	}

	.fx-main--compare-single .fx-hero--compare .fx-hero__content {
		align-self: stretch;
	}

	.fx-main--compare-single .fx-hero--compare {
		overflow-x: clip;
	}

	.fx-main--compare-single .fx-hero--compare .fx-hero__media {
		position: relative;
		left: 0;
		z-index: 0;
		justify-self: start;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: flex-end;
		min-width: 0;
	}

	.fx-main--compare-single .fx-hero--compare .fx-hero__image-wrap {
		display: flex;
		width: 100%;
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
		justify-content: flex-start;
		align-items: flex-end;
	}

	.fx-main--compare-single .fx-hero--compare .fx-hero__image {
		width: auto;
		height: 420px;
		max-width: calc(100% + 130px);
		object-fit: contain;
		object-position: left bottom;
		margin-bottom: -64px;
		margin-left: -100px;
	}
}

/* Som hero.css: pill-rækken skal kunne scrolle horisontalt — overstyr clip ovenfor. */
.fx-main--compare-single .fx-hero--compare:has(.pill-scroll) {
	overflow-x: visible;
	overflow-y: clip;
}

@media (max-width: 767px) {
	.fx-main--compare-single .fx-hero--compare .fx-hero__image-wrap {
		aspect-ratio: auto;
	}

	.fx-main--compare-single .fx-hero--compare .fx-hero__image {
		object-position: center bottom;
		max-width: calc(100% + 88px);
		margin-left: -66px;
		margin-bottom: -42px;
	}
}

/* Breadcrumb — alignet med 1140px-layoutet. PC: flush i siden, 12px top.
   Tablet/mobil: gutter så den ikke rører viewport-kanten. Samme mønster
   som compare-archive + vehicle-inspection-archive + about. */
/* Compare table-sektion ------------------------------------------------- */

/* H2 + table — fuld-bredde centreret sektion med 1140px container. */
.fx-compare-table-wrap {
	padding: var(--fx-section-py, 96px) var(--fx-gutter, 24px);
}

.fx-compare-table-wrap__container {
	max-width: var(--fx-max-content, 1140px);
	margin:    0 auto;
}

.fx-compare-table-wrap__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 32px;
	text-align:  center;
}

/* focalx-compare.css har allerede margin: 2rem 0 på tabellen —
   nulstil topmargin så den ikke dobbelt-padder oven på h2. */
.fx-compare-table-wrap .focalx-compare {
	margin-top: 0;
}

/* Compare grid-sektion (genbrug samme markup som archive) --------------- */

.fx-main--compare-single .fx-compare-grid-wrap {
	/* Archive har --fx-section-py på wrapper via section:not(.fx-cta) —
	   her styler vi wrapperen direkte da der ikke er en sådan generisk
	   regel på singles. */
	padding: var(--fx-section-py, 96px) var(--fx-gutter, 24px);
	padding-top: 0; /* Tætt koblet til table-sektionen ovenfor. */
}

.fx-main--compare-single .fx-compare-grid-wrap__container {
	max-width: var(--fx-max-content, 1140px);
	margin:    0 auto;
}

.fx-main--compare-single .fx-compare-grid-wrap__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 32px;
	text-align:  center;
}

/* Responsive ------------------------------------------------------------ */

@media (max-width: 767px) {
	.fx-compare-table-wrap__title,
	.fx-main--compare-single .fx-compare-grid-wrap__title {
		margin-bottom: 24px;
	}
}