/**
 * AI Category Archive page (/ai/).
 *
 * Struktur:
 *   .fx-main--ai-category
 *     ├── .fx-breadcrumb-wrap                 (reusable)
 *     ├── section.fx-hero.fx-hero--ai         (reusable hero)
 *     ├── section.fx-logo-carousel-wrap       (reusable)
 *     ├── section.fx-ai-seo                   (ACF `text`)
 *     ├── section.fx-ai-posts--further        (heading + blogpost carousel)
 *     ├── section.fx-ai-prose                 (long-form WYSIWYG)
 *     └── section.fx-cta                      (reusable)
 *
 * Næsten samme mønster som css/vehicle-inspection-archive.css, men uden
 * top-grid, HIW og big-numbers (disse sektioner er ikke med på /ai/).
 */

/* Wrapper --------------------------------------------------------------- */
.fx-main--ai-category {
	background: var(--fx-bg, #fff);
	color: var(--fx-text, #2d2f31);
	/* Astra #primary / .ast-container kan være smalere end viewport — hero må fylde */
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.fx-main--ai-category .fx-hero {
	width: 100%;
	box-sizing: border-box;
}

.fx-main--ai-category .fx-hero__container {
	width: 100%;
	max-width: var(--fx-max-content, 1140px);
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}

/* Astra: smal #primary / .ast-container på visse arkiver → hero ser “klemt” til
   venstre med stor tom flade i viewport. Giv samme fuldbredde som øvrige FocalX-templates. */
body:has(#fx-main.fx-main--ai-category) #primary {
	max-width: 100%;
	width: 100%;
	box-sizing: border-box;
}

body:has(#fx-main.fx-main--ai-category) .site-content .ast-container:has(#fx-main) {
	max-width: 100%;
	width: 100%;
	box-sizing: border-box;
	padding-left: 0;
	padding-right: 0;
}

/* Breadcrumb-wrapper — alignet med 1140px-layoutet, flush desktop,
   24px gutter tablet/mobil. Samme mønster som VI + about + compare. */
/* Hero-billede: 1:1 i hero.css (.fx-hero--ai). */

/* Lange oversatte H1/intro: undgå auto-hyphenation (DE/FR). hero.css sætter
   hyphens:auto på .fx-hero__title. */
.fx-hero--ai .fx-hero__title,
.fx-hero--ai .fx-hero__intro {
	hyphens: manual;
	-webkit-hyphens: manual;
}

/* global-landing.css sætter text-wrap: pretty på #fx-main p — kan give mærkelige
   linjeskift i hero-intro på andre sprog; hero skal styre wrap selv. */
.fx-hero--ai .fx-hero__intro {
	text-wrap: wrap;
}

/* Flere linjer i oversat titel: hero.css bruger line-height 1.1 (stramt). */
.fx-hero--ai .fx-hero__title {
	line-height: 1.18;
}

/* Brug hele tekstkolonnens bredde til intro (hero.css capper 500px → for smalt
   til lange sætninger på ES/DE/FR ved 2-kolonne-layout). */
.fx-hero--ai .fx-hero__intro {
	max-width: 100%;
}

/* 2-kolonne tablet/desktop: stretch rækken; medie-kolonnen skal fylde sit 1fr-spor
   (align-self:start + margin-left:auto på image-wrap gav “alt til venstre / tom højre”
   på nogle browsere). Centrer kvadratet i højre kolonne. */
@media (min-width: 768px) {
	.fx-hero--ai .fx-hero__container {
		align-items: stretch;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.fx-hero--ai .fx-hero__media {
		align-self: stretch;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		min-width: 0;
		width: 100%;
	}

	.fx-hero--ai .fx-hero__image-wrap {
		margin-left: 0;
		margin-right: 0;
		width: 100%;
		max-width: min(100%, 560px);
	}

	.fx-hero--ai .fx-hero__content {
		display: flex;
		flex-direction: column;
		min-width: 0;
	}

	.fx-hero--ai .fx-hero__actions {
		margin-top: auto;
		margin-bottom: 0;
	}
}

/* Mobil: sikr at billedet ikke “hænger” til venstre under centreret tekst */
@media (max-width: 767px) {
	.fx-hero--ai .fx-hero__media {
		display: flex;
		justify-content: center;
		width: 100%;
	}

	.fx-hero--ai .fx-hero__image-wrap {
		margin-left: auto;
		margin-right: auto;
	}
}

/* Vertikal sektion-padding på de sektioner der ikke selv har padding
   (posts + prose). Hero, logo-carousel og CTA har egen padding og ekskluderes. */
.fx-main--ai-category > section:not(.fx-hero):not(.fx-logo-carousel-wrap):not(.fx-cta) {
	padding-top:    var(--fx-section-py, 96px);
	padding-bottom: var(--fx-section-py, 96px);
}

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

/* Desktop: gutter i siderne; tablet/mobil håndteres i media queries nedenfor. */
.fx-ai-posts {
	padding-left:  var(--fx-gutter, 24px);
	padding-right: var(--fx-gutter, 24px);
}

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

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

.fx-ai-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-ai-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-ai-prose {
	background: #fff;
}

.fx-ai-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-ai-prose__container h2 {
	font-size: clamp(24px, 2.4vw, 32px);
	font-weight: 700;
	line-height: 1.25;
	margin: 48px 0 16px;
}

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

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

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

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

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

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

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

/* SEO text (ACF `text`) — bunden før CTA; sektion uden egen baggrund/ramme */
.fx-ai-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-ai-seo__container p {
	margin: 0 0 14px;
}

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

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

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

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

/* Tablet + mobil: posts og prose flush mod viewport-kanterne ligesom
   carousel'en. SEO-brødtekst (.fx-ai-seo) beholder 24px i siderne på iPad
   (768–1024px, inkl. iPad mini) via basis-padding på .fx-ai-seo__container. */
@media (max-width: 1024px) {
	.fx-ai-posts {
		padding-left:  0;
		padding-right: 0;
	}

	.fx-ai-prose__container {
		padding-left:  0;
		padding-right: 0;
	}
}

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

	.fx-ai-posts__header {
		margin-bottom: 32px;
	}

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

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

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