/**
 * Compare Archive page.
 *
 * Struktur:
 *   .fx-main--compare-archive
 *     ├── .fx-breadcrumb-wrap                 (reusable)
 *     ├── section.fx-compare-hero             (H1 + intro, centreret)
 *     ├── section.fx-compare-grid-wrap        ([focalx_compare_grid])
 *     ├── section#compare-table.fx-compare-table-wrap  (switcher + tabel)
 *     └── section.fx-cta                      (reusable)
 *
 * NB: Grid-kortene selv styles af css/focalx-compare-grid.css, som enqueues
 * af shortcoden. Denne fil tilføjer kun hero-sektionen og wrapper-padding
 * omkring grid'et.
 */

.fx-main--compare-archive {
	background: var(--fx-bg, #fff);
	color: var(--fx-text, #2d2f31);
}

/* Breadcrumb-wrapper — samme mønster som VI archive + about: alignet med
   1140px-layoutet, flush i siden på desktop, 24px gutter på tablet/mobil. */
/* Vertikal sektion-padding på sektioner uden egen padding (hero + grid-wrap).
   CTA har egen padding fra cta.css og ekskluderes. */
.fx-main--compare-archive > section:not(.fx-cta) {
	padding-top:    var(--fx-section-py, 96px);
	padding-bottom: var(--fx-section-py, 96px);
}

/* Hero ------------------------------------------------------------------ */
.fx-compare-hero {
	padding-left:  var(--fx-gutter, 24px);
	padding-right: var(--fx-gutter, 24px);
	text-align: center;
}

.fx-compare-hero__container {
	max-width: 820px;
	margin: 0 auto;
}

.fx-compare-hero__title {
	font-family: var(--fx-font-heading, var(--fx-font-body));
	font-size: clamp(32px, 4vw, 56px);
	font-weight: 700;
	line-height: 1.15;
	color: var(--fx-text, #2d2f31);
	margin: 0 0 16px;
}

.fx-compare-hero__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 0 20px;
}

/* Grid wrapper ---------------------------------------------------------- */

/* Reducer afstand mellem hero og grid — sektionerne er tæt beslægtede,
   fuld --fx-section-py mellem dem giver for meget luft. Intro-teksten skal
   visuelt "introducere" grid'et, så der er næsten ingen luft imellem.

   NB: disse selectors inkluderer `section` for at matche specificiteten af
   den generiske `section:not(.fx-cta)`-regel ovenfor — ellers vinder den
   generiske regel og padding-bottom/top bliver ignoreret. */
.fx-main--compare-archive > section.fx-compare-hero {
	padding-bottom: clamp(16px, 2.5vw, 24px);
}

.fx-main--compare-archive > section.fx-compare-grid-wrap {
	padding-top: 0;
	/* Mindre bundluft før tabel-sektionen under kortene. */
	padding-bottom: clamp(20px, 3vw, 40px);
}

/* Feature-tabel + modparts-vælger (under grid — samme klasser som compare-single). */
.fx-main--compare-archive > section.fx-compare-table-wrap {
	padding-top: clamp(24px, 4vw, 48px);
	padding-bottom: clamp(24px, 4vw, 48px);
}

.fx-compare-table-wrap {
	padding-left: var(--fx-gutter, 24px);
	padding-right: 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 24px;
	text-align: center;
}

.fx-main--compare-archive .fx-compare-table-wrap .focalx-compare {
	margin-top: 0;
}

.fx-compare-grid-wrap {
	padding-left:  var(--fx-gutter, 24px);
	padding-right: var(--fx-gutter, 24px);
}

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

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

@media (max-width: 767px) {
	.fx-compare-hero__intro {
		font-size: 16px;
	}
}