/* SShK Theme – startsidans hero. */

.hero {
	position: relative;
	display: flex; align-items: flex-end;
	min-height: clamp(18rem, 48vw, 34rem);
	background: var(--sshk-red);
	color: var(--sshk-white);
	overflow: hidden;
	isolation: isolate;
}

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

/* Mörk toning i nederkant så att rubriken alltid är läsbar, oavsett bild */
.hero--has-image::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(to top, rgba(33, 33, 34, 0.72) 0%, rgba(33, 33, 34, 0.35) 45%, rgba(33, 33, 34, 0) 80%);
}

.hero__inner {
	width: 100%; max-width: var(--sshk-wide); margin-inline: auto;
	padding: var(--sshk-space-2xl) var(--sshk-gutter) calc(var(--sshk-space-xl) + 2.5rem);
}

.hero__title {
	margin: 0; max-width: min(100%, 20em);
	font-size: clamp(1.625rem, 5vw, 3.5rem);
	font-weight: 800; line-height: 1.1; text-wrap: balance;
	color: var(--sshk-white);
	text-shadow: 0 2px 12px rgba(33, 33, 34, 0.45);
}

/* Subtil vågformad underkant i sidans bakgrundsfärg (#fdfbf3) */
.hero::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
	height: clamp(1.5rem, 4vw, 3.5rem);
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath fill='%23fdfbf3' d='M0 40C240 80 480 80 720 40S1200 0 1440 40V80H0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
	pointer-events: none;
}

/* Kompakt variant för undersidor */
.hero--compact { min-height: clamp(9rem, 22vw, 15rem); }
.hero--compact .hero__inner { padding-top: var(--sshk-space-xl); padding-bottom: calc(var(--sshk-space-lg) + 1.5rem); }
.hero--compact .hero__title { font-size: clamp(1.625rem, 4vw, 2.75rem); max-width: 28ch; }
.hero--compact::after { height: clamp(1rem, 2.5vw, 2.25rem); }