/**
 * FocalX — Author archive / profile template (author.php).
 *
 * Layout:
 *   .fx-main--author
 *   └── .fx-breadcrumb-wrap
 *   └── .fx-author-hero          (2-kolonne: profile-billede + tekst)
 *   └── .fx-author-about          (H2 + bio)
 *   └── .fx-author-articles       (H2 + blogpost_carousel)
 *   └── .fx-cta                    (reusable)
 *
 * Respekterer --fx-col-gap, --fx-max-content og heading-tokens.
 */

.fx-main--author {
	background: var(--fx-bg, #ffffff);
	color: var(--fx-text-body, #2d2f31cc);
	width: 100%;
	max-width: 100%;
}

/* Safety-net: Astra's parent wraps (.site, #page, .site-content,
   .ast-container) kan i visse layouts have padding eller width-
   constraints der snævrer vores sektioner ind. Her tvinger vi
   alle parent-wraps til at give author-templatet fuld viewport-
   bredde — vores egne containers' max-width: 1140px står så for
   den faktiske bredde-styring. */
body.author #page,
body.author .site,
body.author #content,
body.author .site-content,
body.author .site-content > .ast-container {
	max-width: 100%;
	padding-left: 0;
	padding-right: 0;
}

/* Breadcrumb — alignet med 1140px-layoutet; 24px gutter tablet/mobil.
   Samme mønster som operations / gate / ai / product / compare / about
   så breadcrumb-positioneringen er konsistent på tværs af alle
   custom templates. */
/* ============================================================
 * Hero — profile image + name + role + social icons
 *
 * Layout matcher live-sitet (focalx.ai/author/<slug>/):
 *   • Kompakt 170px kvadrat-billede med blødt afrundede hjørner
 *   • Navn (stort bold) + rolle (lille bold mørk) + social icons
 *     stablet tæt sammen til højre, vertikalt centreret med billedet
 *   • Hele hero er top-justeret, ikke et stort centreret display
 * ============================================================ */
.fx-author-hero {
	padding: 16px 0 24px;
}

.fx-author-hero__container {
	max-width: var(--fx-max-content, 1140px);
	margin: 0 auto;
	padding: 0 var(--fx-gutter, 24px);
	display: grid;
	grid-template-columns: 170px 1fr;
	gap: 32px;
	align-items: center;
}

/* Cirkulær profilramme — 50% giver perfekt rund uanset størrelse,
   så samme regel virker når billedet skaleres ned på tablet/mobil. */
.fx-author-hero__figure {
	margin: 0;
	width: 170px;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	overflow: hidden;
	background: var(--fx-bg-soft, #f6f5f8);
}

.fx-author-hero__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.fx-author-hero__text {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}

.fx-author-hero__name {
	margin: 0;
	font-family: var(--fx-font-heading, "Ubuntu", sans-serif);
	font-weight: 700;
	font-size: clamp(34px, 4.6vw, 54px);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--fx-text, #2d2f31);
}

/* Rolle: bold mørk og kompakt — ikke muted grå.
   Live-sitet bruger samme tekstfarve som navnet, blot mindre. */
.fx-author-hero__role {
	margin: 0;
	font-family: var(--fx-font-body, "Ubuntu", sans-serif);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.3;
	color: var(--fx-text, #2d2f31);
}

.fx-author-hero__icons {
	margin-top: 2px;
}

/* Social-icons renderes fra [forfatter_ikoner]; overstyr lidt så de sidder
   venstrestillet under profilen (default er typisk midterjusteret). */
.fx-author-hero__icons .gr-author-icons {
	justify-content: flex-start;
	margin: 0;
}

/* ============================================================
 * About author — card-layout (matcher live-sitet)
 *
 * Bio'en sidder i et soft-bg card med store rounded hjørner og
 * generøs indvendig padding. "About author"-headingen er bevidst
 * lille (~20px bold) — det er en label til bio'en, ikke en
 * sektions-overskrift. Body'en spænder hele card-bredden.
 * ============================================================ */
.fx-author-about {
	padding: 24px 0 32px;
}

.fx-author-about__container {
	max-width: var(--fx-max-content, 1140px);
	margin: 0 auto;
	padding: 0 var(--fx-gutter, 24px);
}

.fx-author-about__inner {
	background: var(--fx-bg-soft, #f6f5f8);
	border-radius: 20px;
	padding: clamp(28px, 4vw, 44px);
}

.fx-author-about__heading {
	margin: 0 0 16px;
	font-family: var(--fx-font-heading, "Ubuntu", sans-serif);
	font-weight: 700;
	font-size: 20px;
	line-height: 1.3;
	color: var(--fx-text, #2d2f31);
}

.fx-author-about__body {
	max-width: none;
	font-family: var(--fx-font-body, "Ubuntu", sans-serif);
	font-size: var(--fx-text-base, 16px);
	line-height: 1.7;
	color: var(--fx-text-body, #2d2f31cc);
}

.fx-author-about__body p {
	margin: 0 0 1em;
}

.fx-author-about__body p:last-child {
	margin-bottom: 0;
}

.fx-author-about__body a {
	color: var(--fx-link, #163b6b);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ============================================================
 * Articles — vertical grid (overrider blogpost-carousel'ens
 * horizontal scroll-layout for forfatter-arkiver hvor der typisk
 * er 50+ artikler. Horisontal scroll bliver ulæselig efter ~10
 * kort; vertikal grid lader læseren scanne alle artikler i
 * naturlig læseretning og tillader browser-find/Ctrl+F.
 *
 * Selve cards (.info-vehicle-card) beholder deres styling fra
 * blogpost-carousel.css — vi overrider kun container-layoutet
 * og fjerner den fixed-width (360px) som flex-carousel kræver.
 * ============================================================ */
.fx-author-articles {
	padding: 48px 0 64px;
}

.fx-author-articles__container {
	max-width: var(--fx-max-content, 1140px);
	margin: 0 auto;
	padding: 0 var(--fx-gutter, 24px);
}

.fx-author-articles__header {
	margin: 0 0 32px;
}

.fx-author-articles__heading {
	margin: 0;
	font-family: var(--fx-font-heading, "Ubuntu", sans-serif);
	font-weight: 700;
	font-size: var(--fx-h2, 40px);
	line-height: 1.2;
	color: var(--fx-text, #2d2f31);
}

/* === Grid-override af blogpost-carousel === */

/* JS i js/blogpost-carousel.js sætter overflow-x: auto inline på
   scroll-container'en — derfor !important her for at vinde over
   inline-style og tvinge grid-layout igennem. */
.fx-main--author .info-vehicle-carousel-section {
	max-width: none;
	padding: 0;
	overflow: visible;
}

.fx-main--author .info-vehicle-horizontal-scroll-container {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	overflow-x: visible !important;
	overflow-y: visible;
	margin-bottom: 0;
}

/* Kortene er i flex-mode default-flex: 0 0 auto + width: 360px.
   I grid skal hver celle bare fylde sin track — fjern den faste
   bredde og lad min-height følge indholdet. */
.fx-main--author .info-vehicle-card {
	width: auto;
	min-height: 0;
}

/* Slideren styrer horizontal scroll — irrelevant når vi viser
   alt som grid. Skjul den men behold elementet i DOM så JS-
   listeners ikke fejler. */
.fx-main--author .info-vehicle-carousel-slider-container {
	display: none;
}

/* Progressive disclosure: js/author.js skjuler cards ud over
   første 6 (data-fx-author-initial) ved at sætte .is-hidden.
   Knappen "Load more articles" afslører 6 mere ad gangen.
   Cards forbliver i DOM så Ctrl+F + crawlers stadig ser dem. */
.fx-main--author .info-vehicle-card.is-hidden {
	display: none;
}

.fx-author-articles__more {
	margin-top: 32px;
	display: flex;
	justify-content: center;
}

.fx-author-articles__more[hidden] {
	display: none;
}

.fx-author-articles__more-btn {
	min-width: 220px;
}

@media (max-width: 1024px) {
	.fx-main--author .info-vehicle-horizontal-scroll-container {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
	}
}

@media (max-width: 600px) {
	.fx-main--author .info-vehicle-horizontal-scroll-container {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}

/* ============================================================
 * Empty state (usandsynlig — template_redirect 404'er allerede
 * authors uden posts, men vi vil ikke have en rå output-string)
 * ============================================================ */
.fx-author-empty {
	max-width: var(--fx-max-content, 1140px);
	margin: 0 auto;
	padding: 80px var(--fx-gutter, 24px);
	text-align: center;
	color: var(--fx-text-muted, #5f6770);
}

/* ============================================================
 * Responsive
 * ============================================================ */

/* Tablet: lidt mindre billede + reduced gap. Behold side-by-side
   layout (image + text) — det er stadig kompakt nok på 1024px. */
@media (max-width: 1024px) {
	.fx-author-hero__container {
		grid-template-columns: 150px 1fr;
		gap: 24px;
	}

	.fx-author-hero__figure {
		width: 150px;
	}
}

/* Mobil: stack billede over tekst, behold venstre-justering
   (matcher live-sitets venstreanker på mobil). */
@media (max-width: 600px) {
	.fx-author-hero__container {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.fx-author-hero__figure {
		width: 130px;
	}

	.fx-author-articles__heading {
		font-size: var(--fx-h3, 24px);
	}

	.fx-author-about {
		padding: 16px 0 24px;
	}

	.fx-author-articles {
		padding: 32px 0 24px;
	}
}