/**
 * About Us page.
 *
 * Struktur:
 *   .fx-main--about
 *     ├── .fx-breadcrumb-wrap
 *     ├── section.fx-about-hero                (bespoke — eyebrow + title, founders-billede, intro + arrow-link; mobil: billede under titel)
 *     ├── section.fx-about-prose               (mission + values)
 *     ├── section.fx-vi-posts--further         (Further Reading carousel)
 *     └── section.fx-cta                       (reusable)
 *
 * Hero-layout: desktop — titel venstre, intro + CTA højre, founders-billede
 * fuld bredde på række 2. Mobil — stack: titel → billede → intro + CTA.
 */

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

/* Breadcrumb — alignet med 1140px-layoutet; gutter på tablet/mobil. */
/* Hero (bespoke) -------------------------------------------------------- */
.fx-about-hero {
	padding-top:    clamp(48px, 7vw, 80px);
	padding-bottom: clamp(56px, 6vw, 80px);
	padding-left:   var(--fx-gutter, 24px);
	padding-right:  var(--fx-gutter, 24px);
	background: var(--fx-bg, #fff);
	overflow-x: clip;
}

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

/* Grid: række 1 = titel | intro+CTA, række 2 = billede fuld bredde.
   Mobil (én kolonne): titel → billede → intro (grid-template-areas). */
.fx-about-hero__text {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	grid-template-areas:
		"head side"
		"fig fig";
	column-gap: var(--fx-col-gap);
	row-gap: clamp(28px, 4vw, 56px);
	align-items: start;
}

.fx-about-hero__text:not(:has(.fx-about-hero__figure)) {
	grid-template-areas: "head side";
}

.fx-about-hero__heading {
	grid-area: head;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
}

/* Grøn pill-badge — "About FocalX".
   Er page-H1 på about-us (semantisk + match gammelt Elementor-layout der også
   havde H1="About FocalX"). Basis-pill-styles arves fra .fx-eyebrow i
   tokens.css — her nulstilles kun h1-default margin så badgen ligger tæt
   på overskriften nedenunder. */
.fx-about-hero__eyebrow {
	margin: 0;
}

.fx-about-hero__title {
	font-family: var(--fx-font-heading);
	font-size: clamp(34px, 5vw, 56px);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--fx-text, #2d2f31);
	margin: 0;
	overflow-wrap: break-word;
	hyphens: auto;
}

.fx-about-hero__side {
	grid-area: side;
	display: flex;
	flex-direction: column;
	gap: 24px;
	/* Lidt top-afstand så intro hænger visuelt sammen med H1-linjen
	   hvor lead-teksten starter — matcher det gamle layout. */
	padding-top: clamp(8px, 1.5vw, 20px);
}

.fx-about-hero__intro {
	font-family: var(--fx-font-body);
	font-size: clamp(16px, 1.3vw, 18px);
	line-height: 1.6;
	color: var(--fx-text-body, rgba(45, 47, 49, 0.8));
	margin: 0;
	max-width: 440px;
}

/* Arrow-link (ikke pill-knap) — matcher det gamle "Join our team →" design. */
.fx-about-hero__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--fx-link, #163B6B);
	font-family: var(--fx-font-body);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	transition: gap 0.2s ease;
	align-self: flex-start;
}

.fx-about-hero__cta:hover,
.fx-about-hero__cta:focus-visible {
	gap: 12px;
	text-decoration: none;
	color: var(--fx-link, #163B6B);
}

.fx-about-hero__cta-arrow {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
}

/* Founders-billede — anden række fuld bredde; på mobil ligger det under titel. */
.fx-about-hero__figure {
	grid-area: fig;
	margin: 0;
	width: 100%;
	border-radius: var(--fx-radius-xl, 20px);
	overflow: hidden;
}

.fx-about-hero__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 7;
	object-fit: cover;
	/* Fokuser på ansigterne — crop'es mod toppen i stedet for midten. */
	object-position: center top;
}

/* Sektioner uden egen vertikal padding får standard 96px / 72px. */
.fx-main--about > section:not(.fx-about-hero):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);
}

/* Prose (mission + values) --------------------------------------------- */
.fx-about-prose {
	background: #fff;
}

.fx-about-prose__container {
	max-width: 820px;
	margin: 0 auto;
	padding: 0 var(--fx-gutter, 24px);
	font-family: var(--fx-font-body);
	color: var(--fx-text, #2d2f31);
	font-size: 17px;
	line-height: 1.7;
}

.fx-about-prose__container h2 {
	font-size: clamp(24px, 2.4vw, 32px);
	font-weight: 700;
	line-height: 1.25;
	margin: 48px 0 16px;
	color: var(--fx-text, #2d2f31);
}

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

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

.fx-about-prose__container p      { margin: 0 0 20px; }
.fx-about-prose__container p:last-child { margin-bottom: 0; }

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

.fx-about-prose__container li     { margin-bottom: 8px; }
.fx-about-prose__container strong { font-weight: 700; color: var(--fx-text, #2d2f31); }

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

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

/* Further Reading — samme post-grid layout som VI archive (duplikeret
   lokalt så vi ikke behøver loade hele vehicle-inspection-archive.css her).
   Målrettet `.fx-vi-posts` så reglerne er 1:1 med VI-archive — gør det lettere
   at ekstrahere til en delt sektions-fil senere. */
.fx-main--about .fx-vi-posts {
	padding-left:  var(--fx-gutter, 24px);
	padding-right: var(--fx-gutter, 24px);
}

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

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

.fx-main--about .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-main--about .fx-vi-posts__intro {
	font-size: 18px;
	line-height: 1.6;
	color: var(--fx-text-muted, rgba(45, 47, 49, 0.8));
	margin: 0;
}

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

/* Tablet + mobil: post-grid og prose flush mod viewport-kanterne
   (matcher VI-archive). Carousellen selv håndterer sin egen 24px
   horizontal padding internt. Gap på hero-tekst kommer fra --fx-col-gap. */
@media (max-width: 1024px) {
	.fx-main--about .fx-vi-posts,
	.fx-about-prose__container {
		padding-left:  0;
		padding-right: 0;
	}
}

/* Mobil: hero-tekst stack til 1 kolonne. Gap fra --fx-col-gap-token. */
@media (max-width: 767px) {
	.fx-about-hero__text {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"head"
			"fig"
			"side";
	}

	.fx-about-hero__text:not(:has(.fx-about-hero__figure)) {
		grid-template-areas:
			"head"
			"side";
	}

	.fx-about-hero__side { padding-top: 0; }

	.fx-about-hero__image { aspect-ratio: 4 / 3; }

	.fx-about-prose__container {
		padding-left:  24px;
		padding-right: 24px;
		font-size: 16px;
	}

	.fx-about-prose__container h2 { margin-top: 36px; }

	.fx-main--about .fx-vi-posts__header { margin-bottom: 32px; }
	.fx-main--about .fx-vi-posts__intro  { font-size: 16px; }
}