/**
 * Rejse-tidslinje (author.php) — én modtagers indlæg som en rute, stop for stop.
 * Stiplet venstre-skinne med nummererede røde knuder; foto-kort med måned + uddrag.
 * Ingen skygger; dybden kommer fra ruten, knuderne og den grå "kort-flade".
 */

.journey-section {
	background: var(--tc-gray-100);
}

.journey__path {
	position: relative;
	max-width: 860px;
	margin: var(--tc-space-12) auto 0;
	padding: 0;
	list-style: none;
}

/* Ruten: stiplet linje gennem knuderne (venstre skinne) */
.journey__path::before {
	content: "";
	position: absolute;
	top: 16px;
	bottom: 16px;
	left: 23px; /* = midten af de 46px knuder */
	border-left: 2px dashed var(--tc-gray-300);
}

/* ── Start-/slut-markører ─────────────────────────────────────────────── */
.journey__terminus {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 48px;
	padding-left: calc(48px + var(--tc-space-6));
}

.journey__terminus--start {
	margin-bottom: var(--tc-space-8);
}

.journey__terminus--end {
	margin-top: var(--tc-space-8);
}

.journey__terminus-dot {
	position: absolute;
	left: 1px;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border-radius: var(--tc-radius-pill);
	background: var(--tc-white);
	border: 2px solid var(--tc-red);
	color: var(--tc-red);
}

.journey__terminus-dot svg {
	width: 20px;
	height: 20px;
}

.journey__terminus-label {
	font-family: var(--tc-font-heading);
	font-weight: 700;
	font-size: var(--tc-fs-sm);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--tc-red);
}

/* ── Et stop ──────────────────────────────────────────────────────────── */
.journey__stop {
	position: relative;
	padding: 0 0 var(--tc-space-12) calc(46px + var(--tc-space-8));
}

.journey__stop:last-of-type {
	padding-bottom: var(--tc-space-8);
}

/* Nummereret rød knude på ruten */
.journey__marker {
	position: absolute;
	left: 0;
	top: 6px;
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	border-radius: var(--tc-radius-pill);
	background: var(--tc-red);
	color: var(--tc-white);
	font-family: var(--tc-font-heading);
	font-weight: 700;
	font-size: var(--tc-fs-base);
	border: 4px solid var(--tc-gray-100); /* afbryder ruten pænt bag knuden */
}

/* Kortet */
.journey__card {
	display: grid;
	grid-template-columns: 190px 1fr;
	background: var(--tc-white);
	border: 1px solid var(--tc-border);
	border-radius: 0 var(--tc-radius-card) 0 var(--tc-radius-card);
	overflow: hidden;
	color: inherit;
}

.journey__card:hover,
.journey__card:focus {
	text-decoration: none;
}

.journey__media {
	position: relative;
	overflow: hidden;
	min-height: 160px;
	background: var(--tc-gray-200);
}

.journey__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.45s ease;
}

.journey__card:hover .journey__media img {
	transform: scale(1.05);
}

.journey__content {
	display: flex;
	flex-direction: column;
	padding: var(--tc-space-6);
}

.journey__when {
	margin: 0 0 var(--tc-space-1);
	color: var(--tc-red);
	font-size: var(--tc-fs-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.journey__heading {
	margin: 0 0 var(--tc-space-2);
	font-size: var(--tc-fs-lg);
	line-height: 1.2;
	color: var(--tc-ink);
}

.journey__excerpt {
	margin: 0 0 var(--tc-space-4);
	color: var(--tc-text-muted);
	font-size: var(--tc-fs-sm);
	line-height: 1.55;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.journey__more {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--tc-red);
	font-weight: 700;
	font-size: var(--tc-fs-sm);
}

.journey__more svg {
	width: 16px;
	height: 16px;
	transition: transform 0.18s ease;
}

.journey__card:hover .journey__more {
	color: var(--tc-ink);
}

.journey__card:hover .journey__more svg {
	transform: translateX(3px);
}

/* ── Mobil: foto over tekst, smallere skinne ─────────────────────────── */
@media (max-width: 560px) {
	.journey__path::before {
		left: 19px;
	}

	.journey__card {
		grid-template-columns: 1fr;
	}

	.journey__media {
		min-height: 0;
		aspect-ratio: 16 / 10;
	}

	.journey__stop {
		padding-left: calc(38px + var(--tc-space-4));
	}

	.journey__marker {
		width: 38px;
		height: 38px;
		top: 4px;
		font-size: var(--tc-fs-sm);
	}

	.journey__terminus {
		padding-left: calc(38px + var(--tc-space-4));
	}

	.journey__terminus-dot {
		width: 38px;
		height: 38px;
		left: 0;
	}
}