/**
 * Single — ét blogindlæg fra en legatmodtagers rejse.
 * Bredt cover (billede + rejsemål + titel) → modtager-kort ("hvem er det",
 * samme historie som forsidens hero-kort) → indlæg i en læsbar spalte.
 * Ingen skygger; dybden kommer fra det overlappende kort + 2-corner-formen.
 */

.single-recipient {
	padding-block: var(--tc-space-8) var(--tc-space-16);
}

/* ── Cover-header ─────────────────────────────────────────────────────── */
.article-hero__frame {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(340px, 54vh, 560px);
	border-radius: 0 var(--tc-radius-media) 0 var(--tc-radius-media);
	overflow: hidden;
	background: var(--tc-gray-200);
	color: var(--tc-white);
}

.article-hero__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.article-hero__overlay {
	position: absolute;
	inset: 0;
	background: var(--tc-card-overlay);
}

/* Indlæg uden cover-billede: rød baggrund og INTET mørkt overlay (rød + hvid
   tekst har kontrast nok). Sættes server-side, og via onerror hvis filen 404'er. */
.article-hero__frame--no-image {
	background: var(--tc-red);
}

.article-hero__frame--no-image .article-hero__overlay {
	display: none;
}

/* På den røde no-image-header ville den røde lokations-pille smelte ind (inset-look).
   Invertér til hvid pille med rød tekst + ikon, så den står rent på den røde flade. */
.article-hero__frame--no-image .article-hero__location {
	background: var(--tc-white);
	color: var(--tc-red);
}

.article-hero__content {
	position: relative;
	width: 100%;
	max-width: 760px;
	padding: var(--tc-space-12) clamp(1.5rem, 4vw, 3rem) var(--tc-space-16);
}

.article-hero__kicker {
	margin: 0 0 var(--tc-space-3);
	font-size: var(--tc-fs-xs);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
}

.article-hero__location {
	display: inline-flex;
	align-items: center;
	gap: var(--tc-space-1);
	margin: 0 0 var(--tc-space-4);
	padding: var(--tc-space-1) var(--tc-space-3);
	border-radius: var(--tc-radius-pill);
	background: var(--tc-red);
	color: var(--tc-white);
	font-size: var(--tc-fs-xs);
	font-weight: 700;
	white-space: nowrap;
}

.article-hero__location svg {
	width: 13px;
	height: 13px;
	flex-shrink: 0;
}

.article-hero__title {
	margin: 0 0 var(--tc-space-4);
	color: var(--tc-white);
	font-size: clamp(1.85rem, 1rem + 3vw, 3rem);
	line-height: 1.1;
}

/* Forfatter-byline i hero: avatar + navn (link til profil) + rolle · dato.
   Erstatter det separate hvide modtager-kort, så headeren er ÉT element og
   selve indlægget kigger frem lige under coveret. Virker på både foto-cover
   (mørkt overlay) og den røde no-image-header (hvid tekst). */
.article-hero__author {
	display: inline-flex;
	align-items: center;
	gap: var(--tc-space-3);
	margin-top: var(--tc-space-5);
	color: var(--tc-white);
	transition: opacity 0.18s ease;
}

/* Stadig klikbar (→ profil), men diskret: ingen pil, ingen understregning.
   En blød opacity-tone er hele affordancen. */
.article-hero__author:hover,
.article-hero__author:focus-visible {
	opacity: 0.85;
	text-decoration: none;
}

.article-hero__avatar {
	width: 52px;
	height: 52px;
	flex-shrink: 0;
	border-radius: var(--tc-radius-pill);
	object-fit: cover;
	border: 2px solid rgba(255, 255, 255, 0.9);
}

.article-hero__avatar--initial {
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.2);
	color: var(--tc-white);
	font-family: var(--tc-font-heading);
	font-weight: 700;
	font-size: 1.4rem;
	line-height: 1;
}

.article-hero__author-id {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.article-hero__author-name {
	font-family: var(--tc-font-heading);
	font-weight: 700;
	font-size: var(--tc-fs-lg);
	line-height: 1.15;
	color: var(--tc-white);
}

.article-hero__author-meta {
	font-size: var(--tc-fs-sm);
	color: rgba(255, 255, 255, 0.9);
}

/* ── Læse-spalte (indlæg + deling) ───────────────────────────────────── */
.article-layout {
	max-width: 768px;
	margin-top: var(--tc-space-12); /* luft fra hero til brødtekst (kortet gav den før) */
}

/* ── Modtager-kort: "hvem er det" ────────────────────────────────────── */
.recipient-byline {
	position: relative;
	z-index: 3;
	margin-top: -48px; /* tucker op over coverets bund */
	margin-bottom: var(--tc-space-12);
	padding: var(--tc-space-8) clamp(1.25rem, 4vw, 2.5rem);
	background: var(--tc-white);
	border: 1px solid var(--tc-border);
	border-radius: 0 var(--tc-radius-ui) 0 var(--tc-radius-ui);
}

.recipient-byline__head {
	display: flex;
	align-items: center;
	gap: var(--tc-space-4);
	margin-bottom: var(--tc-space-6);
}

.recipient-byline__avatar {
	width: 84px;
	height: 84px;
	flex-shrink: 0;
	border-radius: var(--tc-radius-pill);
	object-fit: cover;
	border: 2px solid var(--tc-border);
}

.recipient-byline__eyebrow {
	margin: 0 0 2px;
	font-size: var(--tc-fs-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tc-red);
}

.recipient-byline__name {
	margin: 0;
	font-size: var(--tc-fs-xl);
	line-height: 1.1;
	color: var(--tc-ink);
}

.recipient-byline__role {
	margin: 3px 0 0;
	font-size: var(--tc-fs-sm);
	color: var(--tc-text-muted);
}

.recipient-byline__where {
	display: flex;
	align-items: center;
	gap: var(--tc-space-2);
	margin: 0 0 var(--tc-space-4);
	font-size: var(--tc-fs-sm);
	color: var(--tc-gray-700);
}

.recipient-byline__where svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	color: var(--tc-red);
}

.recipient-byline__where strong {
	color: var(--tc-ink);
	font-weight: 700;
}

.recipient-byline__bio {
	margin: 0 0 var(--tc-space-6);
}

.recipient-byline__bio-text {
	margin: 0;
	font-size: var(--tc-fs-base);
	line-height: 1.6;
	color: var(--tc-gray-700);
}

/* Klampet til nogle få linjer, indtil "Læs mere" folder det ud (JS). */
.recipient-byline__bio:not(.is-expanded) .recipient-byline__bio-text {
	display: -webkit-box;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* "Læs mere"-knappen er delt — se readmore.css. */

.recipient-byline__socials {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tc-space-3);
	margin-bottom: var(--tc-space-6);
}

.recipient-byline__social {
	display: inline-flex;
	align-items: center;
	gap: var(--tc-space-2);
	padding: var(--tc-space-2) var(--tc-space-4);
	border: 1px solid var(--tc-border);
	border-radius: var(--tc-radius-pill);
	color: var(--tc-ink);
	font-size: var(--tc-fs-sm);
	font-weight: 700;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.recipient-byline__social svg {
	width: 18px;
	height: 18px;
}

.recipient-byline__social:hover {
	background: var(--tc-red);
	border-color: var(--tc-red);
	color: var(--tc-white);
	text-decoration: none;
}

.recipient-byline__cta {
	margin-bottom: 0;
}

/* Initial-emblem: når modtageren intet ægte profilbillede har (intet
   tc_profile_image / Gravatar / plugin-avatar) → rød cirkel med forbogstav i
   stedet for et indlægsfoto som "ansigt". */
.recipient-byline__avatar--initial {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--tc-red);
	border-color: var(--tc-red);
	color: var(--tc-white);
	font-family: var(--tc-font-heading);
	font-weight: 700;
	font-size: 2rem;
	line-height: 1;
}

/* ── Profil-header (author.php): split med foto-panel ─────────────────────────
   Det rene hierarki (avatar, eyebrow, navn, studie, "tog chancen til", bio) i
   venstre side; fotoet som fuldhøjt panel i højre med et rejsemål-tag som
   accent. Foto + hierarki bundet sammen i ÉT kort med 2-corner-formen, ingen
   skygge. Kompakt, så rejse-tidslinjen lige under "peeker" frem. */
.single-recipient--profile {
	padding-bottom: var(--tc-space-8);
}

.profile-split {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 420px;
	max-width: 980px;
	margin-inline: auto;
	background: var(--tc-gray-700);
	/* Foto-flade, ikke boks — matcher artikel-heroen. `overflow: hidden`
	   klipper både fotoet og scrim-gradienten til hjørnerne her. */
	border-radius: 0 var(--tc-radius-media) 0 var(--tc-radius-media);
	overflow: hidden;
	color: var(--tc-white);
}

/* ── Foto som fuldt baggrundsbillede ── */
.profile-split__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.profile-split__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Læsbarheds-scrim: mørkest i venstre side (under teksten), toner ud mod højre,
   så billedet stadig ses til højre. */
.profile-split__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		100deg,
		rgba(15, 16, 20, 0.88) 0%,
		rgba(15, 16, 20, 0.74) 42%,
		rgba(15, 16, 20, 0.32) 72%,
		rgba(15, 16, 20, 0.10) 100%
	);
}

/* Tag-pillen er overflødig her — rejsemålet står i "Tog chancen til"-linjen. */
.profile-split__tag {
	display: none;
}

/* ── Hierarkiet lagt ovenpå, i hvid tekst ── */
.profile-split__body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-width: 60%;
	padding: clamp(1.75rem, 4vw, 3rem);
}

.profile-split__body .recipient-byline__head {
	margin-bottom: var(--tc-space-6); /* ensartet gruppe-rytme: identitet → rejsemål → bio */
}

.profile-split__body .recipient-byline__avatar {
	width: 88px;
	height: 88px;
	border-color: rgba(255, 255, 255, 0.9); /* hvid ring på billedet */
}

/* Initial-emblem skal også kunne ses på mørkt/rødt → frostet hvid (ikke rød). */
.profile-split__body .recipient-byline__avatar--initial {
	background: rgba(255, 255, 255, 0.18);
	border-color: rgba(255, 255, 255, 0.9);
	color: var(--tc-white);
	font-size: 2.1rem;
}

.profile-split__body .recipient-byline__eyebrow {
	color: var(--tc-white);
}

.profile-split__body .recipient-byline__name {
	font-size: var(--tc-fs-2xl);
	color: var(--tc-white);
}

.profile-split__body .recipient-byline__role {
	color: rgba(255, 255, 255, 0.85);
}

.profile-split__body .recipient-byline__where {
	margin-bottom: var(--tc-space-6); /* rejsemål: luft over (fra head) og under (til bio) */
	color: var(--tc-white);
}

.profile-split__body .recipient-byline__where svg,
.profile-split__body .recipient-byline__where strong {
	color: var(--tc-white);
}

.profile-split__body .recipient-byline__bio {
	margin-bottom: 0;
}

.profile-split__body .recipient-byline__bio-text {
	color: rgba(255, 255, 255, 0.92);
}

/* Bio klampet til 4 linjer i spalten — "Læs mere" folder resten ud. */
.profile-split__body .recipient-byline__bio:not(.is-expanded) .recipient-byline__bio-text {
	-webkit-line-clamp: 4;
}

/* "Læs mere"-toggle på mørk baggrund. */
.profile-split__body .tc-readmore {
	color: var(--tc-white);
}

.profile-split__body .recipient-byline__socials {
	margin-top: var(--tc-space-6);
	margin-bottom: 0;
}

/* Sociale pills: hvid kant/tekst på billedet; fyld rødt på hover. */
.profile-split__body .recipient-byline__social {
	border-color: rgba(255, 255, 255, 0.55);
	color: var(--tc-white);
}

.profile-split__body .recipient-byline__social:hover {
	background: var(--tc-red);
	border-color: var(--tc-red);
	color: var(--tc-white);
}

/* Billedløs: ingen foto → rød flade, samme hvide hierarki ovenpå. */
.profile-split--no-photo {
	background: var(--tc-red);
}

.profile-split--no-photo .profile-split__media {
	display: none;
}

.profile-split--no-photo .profile-split__body {
	max-width: none;
}

/* Mobil: teksten fylder bredden, og scrimmen gøres fladere/mørkere, så den hvide
   tekst står rent over hele billedet. */
@media (max-width: 720px) {
	.profile-split {
		min-height: 0;
	}

	.profile-split__body {
		max-width: none;
	}

	.profile-split__media::after {
		background: linear-gradient(
			180deg,
			rgba(15, 16, 20, 0.60) 0%,
			rgba(15, 16, 20, 0.72) 100%
		);
	}
}

/* ── Kompakt variant (single.php): "hvem skrev dette", link til fuld profil ── */
.recipient-byline--compact {
	padding-block: var(--tc-space-6);
}

.recipient-byline--compact .recipient-byline__head {
	margin-bottom: var(--tc-space-4);
}

.recipient-byline--compact .recipient-byline__avatar {
	width: 64px;
	height: 64px;
}

.recipient-byline--compact .recipient-byline__avatar--initial {
	font-size: 1.5rem;
}

.recipient-byline--compact .recipient-byline__where {
	margin-bottom: var(--tc-space-8); /* tydelig luft mellem rejsemål og profil-link, så linket ikke klistrer */
}

/* Tekst-link til den fulde profil (lettere end en rød knap, da indlæggets
   bund også linker videre). Rød, versal, pil der skubber på hover. */
.recipient-byline__profile-link {
	display: inline-flex;
	align-items: center;
	gap: var(--tc-space-2);
	font-size: var(--tc-fs-sm);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--tc-red);
}

.recipient-byline__profile-link svg {
	width: 18px;
	height: 18px;
	transition: transform 0.18s ease;
}

.recipient-byline__profile-link:hover {
	color: var(--tc-ink);
	text-decoration: none;
}

.recipient-byline__profile-link:hover svg {
	transform: translateX(3px);
}

/* ── Indlæggets brødtekst ────────────────────────────────────────────── */
.article-body {
	font-size: 1.125rem; /* lidt større end base — feature-læsning */
	line-height: 1.75;
	color: var(--tc-gray-900);
}

/* Migreret indhold bærer ofte inline-fonte fra Word/Pages (fx font-family: Calibri,
   font-size: medium) limet ind i et <span>/<font>. Når fonten ikke findes (Calibri
   findes ikke på Mac) falder browseren tilbage til en fremmed serif og bryder
   typografien. Tving temaets egen font/størrelse igennem — kun de elementer der
   faktisk bærer en inline-font røres (kode-blokke har ingen inline-font). */
.article-body [style*="font-family"],
.article-body [style*="font-size"],
.article-body font {
	font-family: var(--tc-font-body) !important;
	font-size: inherit !important;
}

/* Døde Flash-indlejringer (.swf via <object>/<embed>) fra ~2007-indlæg. Flash er
   udfaset siden 2020 og vises ikke i nogen moderne browser — skjul dem, så de ikke
   efterlader en tom kasse. Moderne indlejringer bruger <iframe> og berøres ikke. */
.article-body object,
.article-body embed {
	display: none;
}

.article-body p {
	margin: 0 0 var(--tc-space-6);
}

/* Lead: første afsnit, større og mørkere */
.article-body .article-lead {
	margin-bottom: var(--tc-space-8);
	font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.55rem);
	line-height: 1.5;
	color: var(--tc-ink);
}

.article-body h2 {
	margin: var(--tc-space-12) 0 var(--tc-space-4);
	font-size: var(--tc-fs-xl);
	line-height: 1.25;
	color: var(--tc-red);
}

/* Underoverskrifter: h2 er sektions-rød; h3 og nedefter er ink i et faldende
   hierarki. Uden disse arvede h3/h4 brødtekstens størrelse og lå klods op ad
   afsnittet (kun h2 var tunet). ~35 indlæg bruger h3/h4/h5. */
.article-body h3 {
	margin: var(--tc-space-8) 0 var(--tc-space-3);
	font-size: var(--tc-fs-lg);
	line-height: 1.3;
	color: var(--tc-ink);
}

.article-body h4 {
	margin: var(--tc-space-6) 0 var(--tc-space-2);
	font-size: 1.125rem;
	line-height: 1.35;
	color: var(--tc-ink);
}

.article-body h5,
.article-body h6 {
	margin: var(--tc-space-6) 0 var(--tc-space-2);
	font-size: var(--tc-fs-base);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--tc-text-muted);
}

.article-body a {
	color: var(--tc-red);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.article-body a:hover {
	color: var(--tc-ink);
}

.article-body em {
	font-style: italic;
}

.article-body ul,
.article-body ol {
	margin: 0 0 var(--tc-space-6);
	padding-left: 1.4em;
}

.article-body li {
	margin-bottom: var(--tc-space-2);
}

/* Pull-quote (til indlæg der bruger blockquote) */
.article-body blockquote {
	margin: var(--tc-space-8) 0;
	padding: var(--tc-space-1) 0 var(--tc-space-1) var(--tc-space-6);
	border-left: 3px solid var(--tc-red);
	font-family: var(--tc-font-heading);
	font-size: var(--tc-fs-xl);
	line-height: 1.35;
	color: var(--tc-ink);
}

.article-body blockquote p {
	margin: 0;
}

/* Tabeller fra den klassiske editor (rå <table> uden .wp-block-table, så WP's
   core-blok-CSS rører dem ikke). Få indlæg, men ellers helt ustylet. */
.article-body table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 0 0 var(--tc-space-6);
	border-collapse: collapse;
	font-size: var(--tc-fs-sm);
}

.article-body th,
.article-body td {
	padding: var(--tc-space-2) var(--tc-space-3);
	border: 1px solid var(--tc-border);
	text-align: left;
	vertical-align: top;
}

.article-body th {
	background: var(--tc-gray-100);
	font-weight: 700;
}

/* Inline kode. */
.article-body code {
	padding: 0.1em 0.4em;
	background: var(--tc-gray-100);
	border-radius: 4px;
	font-size: 0.9em;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ── Billeder + billedtekster i brødteksten ──────────────────────────────
 * Dækker ENS: temaets demo-figurer (.article-figure), blok-editorens
 * billedblok (.wp-block-image) og klassisk-editorens [caption] (.wp-caption).
 * Ægte indlæg renderes råt via the_content(), så de bærer WP's egen markup.
 */
.article-body figure,
.article-body .wp-block-image,
.article-body .wp-caption {
	margin: var(--tc-space-8) auto; /* auto centrerer smallere billeder */
	max-width: 100%;
	text-align: center; /* billeder centreres altid i indlæg */
}

/* Indre <figure> i blok-wrapperen må ikke arve browserens 40px-indryk. */
.article-body .wp-block-image > figure {
	margin: 0;
}

.article-body .article-figure img {
	width: 100%;
}

.article-body .article-figure img,
.article-body .wp-block-image img,
.article-body .wp-caption img {
	display: block;
	height: auto;
	margin-inline: auto; /* centrér også billeder smallere end spalten */
	border-radius: 0 var(--tc-radius-photo) 0 var(--tc-radius-photo);
}

/* Catch-all: ETHVERT billede i brødteksten centreres — også bare <img> fra
   den klassiske editor / migrerede indlæg uden figure-wrapper. (emoji undtaget) */
.article-body img:not(.emoji) {
	display: block;
	height: auto;
	max-width: 100%;
	border-radius: 0 var(--tc-radius-photo) 0 var(--tc-radius-photo);
}

/* Centrér KUN billeder uden bevidst justering. Flydende billeder (.alignleft/
   .alignright) og fuld-bredde beholder deres EGNE margener — lå margin-inline:auto
   på alle img'er, vandt den (højere specificitet end .alignleft) og nulstillede
   float-margenen til 0, så teksten klistrede helt op ad billedet. */
.article-body img:not(.emoji):not(.alignleft):not(.alignright):not(.alignwide):not(.alignfull) {
	margin-inline: auto;
}

/* Respektér editorens bevidste justeringer, hvis de er sat. */
.article-body .aligncenter {
	margin-inline: auto;
}

.article-body .alignleft {
	float: left;
	margin: var(--tc-space-2) var(--tc-space-6) var(--tc-space-4) 0;
}

.article-body .alignright {
	float: right;
	margin: var(--tc-space-2) 0 var(--tc-space-4) var(--tc-space-6);
}

.article-body .alignwide,
.article-body .alignfull {
	width: 100%;
	margin-inline: auto;
}

/* Billedtekst: ren, mindre, dæmpet tekst, centreret under billedet. */
.article-body .article-figure figcaption,
.article-body .wp-block-image figcaption,
.article-body .wp-caption .wp-caption-text,
.article-body .article-caption {
	margin-top: var(--tc-space-4);
	font-family: var(--tc-font-body);
	font-size: var(--tc-fs-sm); /* 14px — mindre end brødteksten */
	line-height: 1.5;
	text-align: center;
	color: var(--tc-text-muted);
}

/* Standalone billedtekst uden figur (demo) */
.article-body .article-caption {
	margin: calc(-1 * var(--tc-space-2)) 0 var(--tc-space-8);
}

/* ── Bund: tilbage til oversigten ────────────────────────────────────── */
.article-foot {
	margin-top: var(--tc-space-12);
}

.article-foot .tc-container {
	max-width: 768px;
	padding-top: var(--tc-space-8);
	border-top: 1px solid var(--tc-border);
}

/* Pager: "de andre modtagere" til venstre (pil ←), "følg resten" til højre (pil →).
   Pilene peger udad. Stabler på smal skærm. */
.article-foot__nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--tc-space-4) var(--tc-space-8);
}

.article-foot__back {
	display: inline-flex;
	align-items: center;
	gap: var(--tc-space-2);
	font-size: var(--tc-fs-sm);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--tc-red);
}

.article-foot__back svg {
	width: 18px;
	height: 18px;
	transition: transform 0.18s ease;
}

.article-foot__back:hover {
	color: var(--tc-ink);
	text-decoration: none;
}

.article-foot__back:hover svg {
	transform: translateX(-3px);
}

/* Fremad-variant ("Følg resten af …s rejse"): pil til højre, hover skubber højre. */
.article-foot__back--next:hover svg {
	transform: translateX(3px);
}

/* Mobil: skjul fod-pageren helt — den flyder løst på smal skærm, og navigationen
   er alligevel dækket af forrige/næste-opslag (journey-nav) ovenfor og "Se alle
   der tog chancen"-CTA'en nederst. */
@media (max-width: 559px) {
	.article-foot {
		display: none;
	}
}

/* ── Forrige/næste opslag i samme rejse ─────────────────────────────────── */
.journey-nav {
	max-width: 768px;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--tc-space-4);
	margin-top: var(--tc-space-12);
}

@media (min-width: 560px) {
	.journey-nav {
		grid-template-columns: 1fr 1fr;
	}
}

.journey-nav__link {
	display: flex;
	flex-direction: column;
	gap: var(--tc-space-2);
	padding: var(--tc-space-6);
	background: var(--tc-gray-100);
	border-radius: 0 var(--tc-radius-ui) 0 var(--tc-radius-ui);
	transition: background 0.18s ease;
}

.journey-nav__link:hover {
	background: var(--tc-gray-200);
	text-decoration: none;
}

/* Tom plads holder "næste" i højre kolonne, når der ikke er et forrige opslag.
   Inert: må aldrig fange hover (ellers dukker link-hoverens grå flade op på en
   tom celle) og viser ingen markør. */
.journey-nav__link--empty {
	display: none;
	pointer-events: none;
}

@media (min-width: 560px) {
	.journey-nav__link--empty {
		display: block;
		background: transparent;
	}

	.journey-nav__link--next {
		text-align: right;
		align-items: flex-end;
	}
}

.journey-nav__dir {
	display: inline-flex;
	align-items: center;
	gap: var(--tc-space-2);
	font-size: var(--tc-fs-sm);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--tc-red);
}

.journey-nav__dir svg {
	width: 16px;
	height: 16px;
}

.journey-nav__title {
	font-family: var(--tc-font-heading);
	font-weight: 700;
	color: var(--tc-ink);
	line-height: var(--tc-lh-tight);
}

/* ── "Andre der tog chancen" — anbefalingsrække med modtager-kort ────────── */
.related-recipients__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--tc-space-6);
}

@media (min-width: 480px) {
	.related-recipients__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 768px) {
	.related-recipients__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Afslutning: rød knap centreret under rækken → den fulde liste ("Mød modtagerne"). */
.related-recipients__cta {
	margin-top: var(--tc-space-8);
	text-align: center;
}