/* ==========================================================
   PROJEKTSIDER – samme skrifter og størrelser som forsiden
   Farverne kommer fra colors.css, skrifterne fra fonts.css
   ========================================================== */

.project-hero .project-hero-content {
	padding-top: 40px;
}

.project-hero .project-hero-title {
	margin-bottom: 12px;
	color: var(--on-image);
}

/* "2024: Webdesign, kodning ..." */
.project-hero .project-hero-subtitle {
	margin-bottom: 24px;
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0.01em;
	color: var(--on-image);
	opacity: 0.85;
}

.project-hero .project-hero-text {
	font-family: var(--font-ui);
	font-size: var(--text-lg);
	line-height: 1.6;
	color: var(--on-image);
	text-wrap: pretty;
}

/* Knappen "Gå til ..." – samme form som knappen på forsiden */
.project-hero .project-hero-link {
	margin-top: 32px;
}

.project-hero .project-hero-link a {
	display: inline-flex;
	align-items: center;
	padding: 13px 22px;
	border: 1px solid var(--on-image);
	border-radius: 999px;
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--on-image);
	background: transparent;
	text-decoration: none;
	transition: background-color 0.2s, color 0.2s;
}

.project-hero .project-hero-link a:hover,
.project-hero .project-hero-link a:focus-visible {
	background: var(--on-image);
	color: var(--ink);
}