/**
 * Vehicle Inspection Archive page.
 *
 * Struktur:
 *   .fx-main--vi-archive
 *     ├── section.fx-hero.fx-hero--vi          (reusable hero)
 *     ├── section.fx-logo-carousel-wrap        (reusable)
 *     ├── section.fx-vi-posts--top             (heading + Commercial carousel)
 *     ├── section.fx-vi-prose                  (long-form WYSIWYG)
 *     ├── section.fx-vi-posts--further         (heading + Informational carousel)
 *     ├── section.fx-vi-seo                    (ACF `text`)
 *     ├── section.fx-cta                       (reusable)
 *     ├── section.fx-hiw                       (reusable)
 *     └── section.fx-big-numbers-wrap          (reusable)
 */

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

/* Breadcrumb-wrapper — holder breadcrumb'en alignet med 1140px-layoutet.
   PC: ingen sidepadding (flush med grid), 12px top. Tablet/mobil får
   gutter så den ikke går flush med viewport-kanten. */
/* Hero-billede: naturlig proportion (base hero.css — ingen fast boks). */
.fx-hero--vi .fx-hero__image-wrap {
	aspect-ratio: auto;
}

/**
 * Top/bund i venstresøjle: se `template-parts/sections/hero.php` +
 * `css/hero.css` (.content-top / .content-bottom, space-between ved 768px+).
 *
 * Vertikal sektion-padding på de sektioner der ikke selv har padding fra
 * egen CSS-fil (post-grids + prose).
 *
 * Hero, logo-carousel, CTA, how-it-works, big-numbers og gates-video har
 * allerede deres egen `padding: var(--fx-section-py) ...` så de ekskluderes.
 *
 * Horisontal padding sættes per-sektion længere nede, så det kan styres
 * separat på hvert breakpoint.
 */
.fx-main--vi-archive > section:not(.fx-hero):not(.fx-logo-carousel-wrap):not(.fx-cta):not(.fx-hiw):not(.fx-big-numbers-wrap):not(.fx-gates-video-section) {
	padding-top:    var(--fx-section-py, 96px);
	padding-bottom: var(--fx-section-py, 96px);
}

/* Posts-sektioner ------------------------------------------------------- */

/* Desktop: post-sektioner får gutter i siderne; på tablet/mobil håndteres
   det i media queries nedenfor. */
.fx-vi-posts {
	padding-left:  var(--fx-gutter, 24px);
	padding-right: var(--fx-gutter, 24px);
}

.fx-vi-posts__container {
	max-width: var(--fx-max-content, 1140px);
	margin: 0 auto;
	padding: 0;
}

.fx-vi-posts__header {
	text-align: center;
	max-width: 760px;
	margin: 0 auto 48px;
}

.fx-vi-posts__heading {
	font-size: clamp(28px, 3vw, 40px);
	font-weight: 700;
	line-height: 1.2;
	color: var(--fx-text, #2d2f31);
	margin: 0 0 16px;
}

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

/* Prose (WYSIWYG) ------------------------------------------------------- */
.fx-vi-prose {
	background: #fff;
}

.fx-vi-prose__container {
	max-width: 820px;
	margin: 0 auto;
	padding: 0 var(--fx-gutter, 24px);
	font-family: var(--fx-font-body);
	color: var(--fx-text-body, rgba(45, 47, 49, 0.8));
	font-size: 17px;
	line-height: 1.7;
}

.fx-vi-prose__container h2 {
	font-size: clamp(24px, 2.4vw, 32px);
	font-weight: 700;
	line-height: 1.25;
	margin: 48px 0 16px;
}

.fx-vi-prose__container h2:first-child {
	margin-top: 0;
}

.fx-vi-prose__container h3 {
	font-size: clamp(20px, 2vw, 24px);
	font-weight: 700;
	line-height: 1.3;
	margin: 32px 0 12px;
}

.fx-vi-prose__container p {
	margin: 0 0 20px;
}

.fx-vi-prose__container ul,
.fx-vi-prose__container ol {
	margin: 0 0 20px;
	padding-left: 24px;
}

.fx-vi-prose__container li {
	margin-bottom: 8px;
}

.fx-vi-prose__container a {
	color: var(--fx-link, #163B6B);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.fx-vi-prose__container a:hover {
	text-decoration-thickness: 2px;
}

/* SEO text (ACF `text`) — mellem Commercial- og Informational-karusel; uden egen baggrund/ramme */
.fx-vi-seo__container {
	max-width: 820px;
	margin: 0 auto;
	padding: 0 var(--fx-gutter, 24px);
	font-family: var(--fx-font-body);
	color: var(--fx-text-muted, rgba(45, 47, 49, 0.72));
	font-size: 15px;
	line-height: 1.65;
}

.fx-vi-seo__container h2 {
	font-size: clamp(20px, 2.1vw, 26px);
	font-weight: 700;
	line-height: 1.3;
	margin: 28px 0 10px;
	color: var(--fx-text, #2d2f31);
}

.fx-vi-seo__container h2:first-child {
	margin-top: 0;
}

.fx-vi-seo__container :is(h3, h4) {
	color: var(--fx-text, #2d2f31);
}

.fx-vi-seo__container p {
	margin: 0 0 14px;
}

.fx-vi-seo__container p:last-child {
	margin-bottom: 0;
}

.fx-vi-seo__container ul,
.fx-vi-seo__container ol {
	margin: 0 0 14px;
	padding-left: 22px;
}

.fx-vi-seo__container li {
	margin-bottom: 6px;
}

.fx-vi-seo__container li:last-child {
	margin-bottom: 0;
}

.fx-vi-seo__container a {
	color: var(--fx-link, #163B6B);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.fx-vi-seo__container a:hover {
	text-decoration-thickness: 2px;
}

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

/* Tablet + mobil: Post-grids og prose-container skal ligge flush mod
   viewport-kanterne ligesom carousel'en, så sidepadding fjernes. */
@media (max-width: 1024px) {
	.fx-vi-posts {
		padding-left:  0;
		padding-right: 0;
	}

	.fx-vi-prose__container,
	.fx-vi-seo__container {
		padding-left:  0;
		padding-right: 0;
	}
}

/* Mobil: prose-container har 24px sides så lang tekst ikke går flush
   mod viewport-kanten. */
@media (max-width: 767px) {
	.fx-vi-prose__container,
	.fx-vi-seo__container {
		padding-left:  24px;
		padding-right: 24px;
	}
}

@media (max-width: 767px) {
	.fx-vi-posts__header {
		margin-bottom: 32px;
	}

	.fx-vi-posts__intro {
		font-size: 16px;
	}

	.fx-vi-prose__container,
	.fx-vi-seo__container {
		font-size: 16px;
	}

	.fx-vi-prose__container h2,
	.fx-vi-seo__container h2 {
		margin-top: 36px;
	}

	.fx-vi-seo__container h2:first-child {
		margin-top: 0;
	}
}