/**
 * [sp_hero_section] — hero ovanpå bakgrundsbild, centrerad text, subtil gradient.
 */
 .sp-hero-section {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(16rem, 52vh, 36rem);
	padding: clamp(2rem, 6vw, 4rem) clamp(1.25rem, 4vw, 2rem);
	text-align: center;
	color: #ffffff;
	font-family: Inter, "Helvetica Neue", Helvetica, system-ui, -apple-system, sans-serif;
	font-feature-settings: "kern" 1, "liga" 1;
	-webkit-font-smoothing: antialiased;
	/* Mycket lätt upptill, något mörkare nedtill — bilden syns igenom */
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.06) 0%,
		rgba(0, 0, 0, 0.28) 100%
	);
}

.sp-hero-section__inner {
	max-width: 40rem;
	width: 100%;
	margin: 0 auto;
}

/*
 * Tema (layout.css) sätter .entry-content h2/p { color: var(--text-color) !important } —
 * måste överträffas när hero ligger i sidinnehåll.
 */
.sp-hero-section,
.sp-hero-section h2,
.sp-hero-section p {
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff;
}

.sp-hero-section__title,
.sp-hero-section__subtitle,
.entry-content .sp-hero-section .sp-hero-section__title,
.entry-content .sp-hero-section h2.sp-hero-section__title,
.entry-content .sp-hero-section p.sp-hero-section__subtitle,
.site-main .entry-content .sp-hero-section h2,
.site-main .entry-content .sp-hero-section p {
	color: #ffffff !important;
	text-shadow: 0 2px 15px rgba(0, 0, 0, 0.8) !important;
	-webkit-text-fill-color: #ffffff;
}

.sp-hero-section__title {
	margin: 0;
	font-size: clamp(1.65rem, 4.2vw, 2.65rem);
	font-weight: 400;
	letter-spacing: -0.03em;
	line-height: 1.12;
}

.sp-hero-section__subtitle {
	margin: clamp(1.15rem, 3vw, 1.75rem) auto 0;
	max-width: 36em;
	font-size: clamp(0.98rem, 2.1vw, 1.2rem);
	font-weight: 400;
	line-height: 1.65;
	letter-spacing: 0.01em;
}

.sp-hero-section__cta-wrap {
	margin: clamp(1.35rem, 3.5vw, 2rem) 0 0;
	padding: 0;
}

.sp-hero-section__cta,
.entry-content .sp-hero-section .sp-hero-section__cta,
.site-main .entry-content .sp-hero-section a.sp-hero-section__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.65em 1.35em;
	border: 1px solid #d1bc9b;
	border-radius: 6px;
	background-color: #967e5b !important;
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff;
	font-size: clamp(0.88rem, 1.8vw, 1rem);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none !important;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45) !important;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.22);
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.sp-hero-section__cta:hover,
.sp-hero-section__cta:focus-visible {
	background-color: #3d342d !important;
	border-color: #3d342d;
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff;
}

@media (max-width: 480px) {
	.sp-hero-section {
		min-height: clamp(14rem, 48vh, 28rem);
		padding: 1.75rem 1.125rem 2rem;
	}

	.sp-hero-section__subtitle {
		line-height: 1.6;
	}
}