/* Newsletter variation built from Core's existing card, tag icon, typography and form patterns. */
.section-subscription {
	width: calc(var(--container--width) + var(--layout--offset) * 2);
	max-width: calc(100vw - (var(--layout--padding) - var(--layout--offset)) * 2);
	margin-right: auto;
	margin-left: auto;
	padding: clamp(var(--spacing-8), 5vw, var(--spacing-10));
	border: 1px solid var(--color-background-200);
	border-radius: var(--radius-4);
	background: color-mix(in srgb, var(--color-background-100) 35%, var(--color-background));
	text-align: left;
}

.section-subscription-heading {
	display: flex;
	align-items: center;
	gap: var(--spacing-6);
}

.section-subscription-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--color-background-200);
	border-radius: var(--radius-3);
	background-color: var(--color-background-200);
	color: var(--ghost-accent-color);
	flex: 0 0 auto;
}

.section-subscription-icon > svg {
	width: var(--font-large);
	height: var(--font-large);
}

.section-subscription .section-subscription-eyebrow {
	width: auto;
	max-width: none;
	margin: 0;
	color: var(--color-secondary);
	font-size: var(--font-x-small);
	font-weight: var(--font-medium);
}

.section-subscription > h2 {
	display: block;
	max-width: 560px;
	margin-top: var(--layout--padding);
	margin-bottom: 0;
	color: var(--color-contrast);
	font-size: clamp(var(--font-x-large), 4vw, 1.75rem);
	font-weight: var(--font-semibold);
	line-height: 1.15;
	letter-spacing: 0;
}

.section-subscription > .form-subscribe {
	max-width: 400px;
	margin-top: var(--layout--padding);
}

.section-subscription .form-subscribe-fields > input {
	background-color: var(--color-background);
}

.section-subscription .form-subscribe-message {
	color: var(--color-secondary);
}

.light .section-subscription .section-subscription-eyebrow,
.light .section-subscription > h2 {
	color: var(--color-foreground);
}

@media (width < 480px) {
	.section-subscription {
		padding: var(--spacing-8);
	}

	.section-subscription > .form-subscribe {
		max-width: none;
	}
}