/**
*  Newsletter-Band der Magazinseite
*
*  Dunkle Fläche mit Titel, Text und Formular. Die Formularstile liegen in
*  ../signup-form/signup-form.css.
*
*  Kontraste (WCAG AA, geprüft):
*  - Titel --paper-white auf --brand-structure (--cool): 11 : 1
*  - Text  --cool9 auf --brand-structure (--cool): 10 : 1
**/

.c-newsletter {
	margin-block: var(--space-xl) 0;
	padding-block: var(--space-xl);
	background: var(--brand-structure);
	color: var(--paper-white);
}

.c-newsletter__inner {
	display: grid;
	gap: var(--space-m);
	align-items: center;
}

.c-newsletter__title {
	margin: 0;
	color: var(--paper-white);
	font-family: var(--font-editorial);
	font-size: var(--fs-h2);
	font-weight: 700;
	letter-spacing: var(--ls-h2);
	line-height: var(--lh-h2);
	text-wrap: balance;
}

.c-newsletter__text {
	margin: var(--space-2xs) 0 0;
	color: var(--cool9);
	font-family: var(--font-interface);
}

@media (min-width: 768px) {

	.c-newsletter__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--space-xl);
	}

	/* E-Mail-Feld und Button in einer Zeile, Altcha darunter */
	.c-newsletter .c-form--newsletter {
		grid-template-columns: minmax(0, 1fr) auto;

		& .form-field {
			grid-row: 1;
		}

		& .altcha-field {
			grid-row: 2;
		}

		& .buttons {
			grid-column: 2;
			grid-row: 1;
		}
	}
}