.kampanj-hero {
	/* Ett ställe att ändra marquee-avståndet på. Gäller item -> separator -> item. */
	--kampanj-hero-marquee-gap: 2.4rem;
	--kampanj-hero-marquee-duration: 30s;
	--kampanj-hero-marquee-width: 55rem;
	/* Bakgrundsbilden: bredden följer griden, toppen börjar under marqueen.
	   Bilden är 2.42:1, så vid full gridbredd blir den ~65rem hög och skulle
	   nå upp bakom marqueen om den bottenförankrades. Därför toppankring —
	   underkanten beskärs av sektionen, precis som i designen. */
	--kampanj-hero-bg-size: 100% auto;
	--kampanj-hero-bg-top: 17rem;

	position: relative;
	width: 100%;
	padding-inline: var(--section-padding-x);
	/* ACSS ger section en padding-block. Nollas helt så avståndet ner till
	   marqueen blir exakt de 9rem som sätts på __inner. */
	padding-block: 0;
	margin-bottom: var(--section-padding-block);
	text-align: center;
}

/* Bakgrunden sitter här, inte på sektionen, så kuvertet hålls inom griden. */
.kampanj-hero__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	inline-size: 100%;
	max-inline-size: var(--width-vp-max);
	margin-inline: auto;
	/* Paddingen sitter här, inte på sektionen, annars klipps bakgrunden. */
	padding-block: 9rem 6rem;
	background-repeat: no-repeat;
	background-position: center var(--kampanj-hero-bg-top);
	background-size: var(--kampanj-hero-bg-size);
}

/* autom.css ger "body main > *:first-child > *:first-child" en topmarginal på
   21rem (plats för den fixerade headern). Hero har egen padding-block. */
.kampanj-hero > div {
	margin-top: 0 !important;
}

/* ---------- Logga ---------- */

/* Bredderna matchar header .logo-link i site-specific/sondra/sondra-menus.css.
   Dubblad klass för att slå .logo-link-reglerna som laddas efter block-CSS:en. */
.kampanj-hero .kampanj-hero__logo {
	position: absolute;
	inset-block-start: 25px;
	inset-inline-start: 0;
	display: block;
	inline-size: 19.7rem;
}

/* SVG:n har id="Group" med versal G. Ordmärket ligger där, pilen utanför. */
.kampanj-hero .logo-link #Group path {
	fill: white !important;
}

.kampanj-hero__logo svg {
	display: block;
	inline-size: 100%;
	block-size: auto;
}

/* ---------- Marquee ---------- */

.kampanj-hero__marquee {
	inline-size: 100%;
	max-inline-size: var(--kampanj-hero-marquee-width);
	overflow: hidden;
	border-radius: 6px;
	background: var(--primary);
	color: #fff;
	padding-block: 0.9rem;
	user-select: none;
}

@media screen and (min-width: 1026px) {
	.kampanj-hero__marquee {
		margin-block-start: 12px;
	}
}

.kampanj-hero__marquee-track {
	display: flex;
	inline-size: fit-content;
	animation: kampanj-hero-marquee var(--kampanj-hero-marquee-duration) linear infinite;
}

.kampanj-hero__marquee-list {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	gap: var(--kampanj-hero-marquee-gap);
	margin: 0 var(--kampanj-hero-marquee-gap) 0 0;
	padding: 0;
	list-style: none;
}

.kampanj-hero__marquee-item,
.kampanj-hero__marquee-sep {
	flex-shrink: 0;
	margin: 0;
	white-space: nowrap;
	font-size: 1.6rem;
	line-height: 1;
}

.kampanj-hero__marquee-sep {
	opacity: 0.5;
}

@keyframes kampanj-hero-marquee {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-33.333%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.kampanj-hero__marquee-track {
		animation: none;
	}
}

/* ---------- Innehåll ---------- */

.kampanj-hero__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5rem;
	inline-size: 100%;
	max-inline-size: 90rem;
	margin-block-start: 8.5rem;
}

.kampanj-hero__rubrik {
	margin: 0;
	font-size: clamp(3.6rem, 5.5vw, 6.4rem);
	line-height: 1.1;
}

/* ---------- Info-rutor ---------- */

.kampanj-hero__meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.6rem;
	inline-size: 100%;
	margin: 0;
	padding: 2rem 0 0;
	list-style: none;
}

.kampanj-hero__meta-item {
	display: flex;
	align-items: center;
	gap: 1.2rem;
	flex: 1 1 24rem;
	max-inline-size: 30rem;
	margin: 0;
	padding: 1.6rem 2rem;
	border: 1px solid var(--primary-subtle);
	border-radius: 0.8rem;
}

.kampanj-hero__meta-icon {
	flex-shrink: 0;
	inline-size: 2rem;
	block-size: auto;
	object-fit: contain;
	pointer-events: none;
}

.kampanj-hero__meta-icon::selection {
	background: transparent;
}

.kampanj-hero__meta-text {
	font-size: 1.5rem;
	line-height: 1.2;
	text-align: left;
}

@media screen and (max-width: 1025px) {
	.kampanj-hero__inner {
		/* Loggan är absolutpositionerad (25px + ~28px hög), så toppaddingen
		   måste räcka för att marqueen ska hamna under den. */
		padding-block: 8rem 4rem;
	}

	.kampanj-hero .kampanj-hero__logo {
		inline-size: 14.9rem;
	}

	.kampanj-hero__marquee {
		margin-top: 24px;
		margin-bottom: 30px;
	}

	.kampanj-hero__content {
		gap: 3rem;
		margin-block-start: 4rem;
	}

	.kampanj-hero__meta-item {
		flex-basis: 100%;
		max-inline-size: 40rem;
		justify-content: center;
	}

	.kampanj-hero__content .btn--white {
		order: 10;
	}
}