/* Samma vertikala rytm som .samuraj-section med bakgrundsfärg.
   padding-inline kommer från ACSS :where(section:not(section section)). */
.kampanj-form {
	padding-top: calc(var(--section-padding-block) * 2);
	padding-bottom: calc(var(--section-padding-block) * 2);
}

.kampanj-form__inner {
	max-width: var(--content-width);
	margin: 0 auto;
}

/* Kortet. Bakgrunden kommer från bg--light (= --primary-light).
   Innehållet placeras på grid--12: texten kolumn 2-5, formuläret 7-11.
   Därför behövs ingen padding-inline, kolumn 1 och 12 är indraget. */
.kampanj-form__kort {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-m);
	padding-block: clamp(3.2rem, 5vw, 8rem);
}

/* Dekorationen ligger bakom innehållet och sträcks fritt,
   preserveAspectRatio="none" gör att bara pilens vinkel ändras. */
.kampanj-form__dekor {
	position: absolute;
	top: 24px;
	/* Samma rutnät som kortet: en kolumn = (100% - 11 gap) / 12.
	   Börjar en kolumn in, är fem kolumner bred. */
	left: calc((100% - 11 * var(--space-xs)) / 12 + var(--space-xs));
	width: calc(5 * (100% - 11 * var(--space-xs)) / 12 + 4 * var(--space-xs));
	/* Explicit höjd, inte top + bottom: en svg är ett replaced element och
	   hade då räknat höjden ur sin viewBox-ratio och struntat i bottom. */
	height: calc(100% - 48px);
	pointer-events: none;
}

.kampanj-form__text,
.kampanj-form__formular {
	position: relative;
}

.kampanj-form__rubrik {
	margin: 0 0 var(--space-m);
	font-size: clamp(3.2rem, 4vw, 4.8rem);
	line-height: 1.1;
}

.kampanj-form__ingress {
	max-width: 45ch;
}

.kampanj-form__formular {
	padding-left: 50px;
}

/* WS Form. Fälten ska visa kortets bakgrund, inte sin egen. */
.kampanj-form .wsf-fields input {
	background: transparent !important;
}

/* Det användaren skriver ska väga tyngre än placeholdern.
   .wsf-field behövs i selektorn: WS Form skriver ut en egen <style> i sidan med
   input[type=text].wsf-field { font-weight: inherit }, samma specificitet som
   selektorn ovan men senare i dokumentet. */
.kampanj-form .wsf-fields input.wsf-field {
	font-weight: 500 !important;
}

/* 300, inte 400: temat har bara Mona Sans 300 och 500, så 400 ritas med
   500-filen och hade sett likadan ut som texten man skriver.
   opacity: 1 behövs, annars tonar Firefox ner placeholdern. */
.kampanj-form .wsf-fields input::placeholder {
	color: var(--primary-ultra-dark);
	font-weight: 500;
	opacity: 1;
}

/* Tätare fält än globalt, där .wsf-grid har gap: 10px. */
.kampanj-form .wsf-grid {
	gap: 0;
}

.kampanj-form .wsf-form .wsf-field-wrapper {
	margin-bottom: 0.8rem !important;
}

/* Valideringstexten ligger globalt på top: -20px, alltså ovanför fältet
   (form.css rad 51-58). Här krockar den med etiketten, så den flyttas ut
   till höger på samma rad. !important eftersom den globala selektorn har
   högre specificitet. */
.kampanj-form .wsf-form .wsf-invalid-feedback {
	top: 5px !important;
	right: 0 !important;
	left: auto !important;
	z-index: 1;
	max-width: 50%;
	padding-inline: 8px;
	/* Ärvd line-height gör att baslinjen hamnar på samma rad som etiketten,
	   trots att valideringstexten har mindre font-size. */
	line-height: inherit;
	/* Bakgrund så texten går att läsa när den lägger sig över etiketten. */
	background: var(--primary-light);
	text-align: right;
}

/* Checkboxen och knappen ska andas: 24px upp till fältet ovanför,
   24px vidare ner till knappen. */
.kampanj-form .wsf-form .wsf-tile[data-type="checkbox"],
.kampanj-form .wsf-form .wsf-tile[data-type="submit"] {
	margin-top: 24px !important;
}

/* grid--l-1 lägger allt i en kolumn, så indraget måste bli padding igen. */
@media screen and (max-width: 1026px) {
	.kampanj-form__kort {
		padding-inline: clamp(2.4rem, 5vw, 4.8rem);
	}

	/* I en kolumn skulle indraget bara göra formuläret ojämnt mot texten. */
	.kampanj-form__formular {
		padding-left: 0;
	}

	.kampanj-form__dekor {
		left: 0;
		width: 100%;
	}
}

/* Kortet går kant i kant med skärmen. Sektionens padding-inline kommer från
   ACSS :where(section:not(section section)) och måste nollas för att
   bakgrunden ska nå ut. Kortets egen padding-inline står kvar så texten
   fortfarande har luft. */
@media screen and (max-width: 768px) {
	/* Den vertikala rytmen flyttas från sektionen till kortet, så att den
	   ligger innanför bakgrunden i stället för som vit luft runt den. */
	.kampanj-form {
		padding-inline: 0;
		padding-block: 0;
	}

	/* Dubblad selektor: gap--xs på kortet kommer från ACSS, som laddas efter
	   block-CSS:en och vinner annars på lika specificitet. */
	.kampanj-form .kampanj-form__kort {
		border-radius: 0;
		padding-block: calc(var(--section-padding-block) * 2);
		margin-top: var(--section-padding-block);
		gap: 0;
	}

	.kampanj-form__dekor {
		display: none;
	}
}