/*
 * Layer: components. Newsletter: the part (parts/newsletter.html, kit .newsletter on the deep
 * surface with the ink-paper texture) and the utils block's class hooks (L37). The block is a
 * glass panel (surfaces.css) and its submit is the light button (buttons.css). Off production the
 * block renders its fields inside a disabled fieldset plus a notice; that state keeps the kit look.
 */
@layer components {

	.nd-newsletter {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 64px;
		align-items: center;
		padding: 120px var(--wp--style--root--padding-right) 120px var(--wp--style--root--padding-left);
	}

	/* Ink-paper texture (kit .nd-surface-deep__texture): 20% in screen blend. */
	.nd-newsletter::before {
		content: "";
		position: absolute;
		inset: 0;
		background: url(../../img/ink-paper.webp) center / cover no-repeat;
		background-image: image-set(url(../../img/ink-paper.avif) type("image/avif"), url(../../img/ink-paper.webp) type("image/webp"));
		opacity: 0.2;
		mix-blend-mode: screen;
		pointer-events: none;
	}

	.nd-newsletter > * {
		position: relative;
		margin-block: 0;
	}

	.nd-newsletter__copy > * {
		margin-block: 0;
	}

	/* Kit: the section's display-m is 60px (40px on phones), not the preset's 64. */
	.nd-newsletter .nd-newsletter__title {
		margin: 16px 0 22px;
		font-size: 60px;
		line-height: var(--wp--custom--line-height--display-m);
		letter-spacing: var(--wp--custom--tracking--display-m);
		text-wrap: balance;
	}

	.nd-newsletter .nd-newsletter__text {
		max-width: 440px;
		text-wrap: pretty;
	}

	/* The block. */
	.nd-news__form,
	.nd-news__fields {
		display: grid;
		gap: 18px;
		min-width: 0;
		margin: 0;
		padding: 0;
		border: 0;
	}

	.nd-news__field {
		display: grid;
		gap: 8px;
		margin: 0;
	}

	.nd-news__label {
		color: var(--wp--preset--color--paper);
		font-family: var(--wp--preset--font-family--body);
		font-size: var(--wp--preset--font-size--meta);
		font-weight: 500;
		line-height: 1;
	}

	/* Kit .nd-input--glass. */
	.nd-news .nd-news__input {
		width: 100%;
		min-height: 52px;
		padding: 0 16px;
		border: 1px solid var(--wp--custom--glass--dark-border);
		border-radius: var(--wp--preset--border-radius--input-glass);
		background-color: var(--wp--custom--glass--dark-bg);
		color: var(--wp--preset--color--paper);
		transition:
			border-color 0.25s,
			background-color 0.25s,
			box-shadow 0.25s;
	}

	.nd-news .nd-news__input::placeholder {
		color: var(--wp--preset--color--cobalt-light);
	}

	.nd-news .nd-news__input:hover {
		background-color: color-mix(in srgb, var(--wp--preset--color--paper) 12%, transparent);
	}

	.nd-news .nd-news__input:focus {
		border-color: var(--wp--preset--color--cobalt-light);
		background-color: color-mix(in srgb, var(--wp--preset--color--paper) 16%, transparent);
		box-shadow: var(--wp--custom--focus-ring);
	}

	.nd-news .nd-news__submit {
		display: flex;
		width: 100%;
		margin-top: 8px;
	}

	/* Preview state: same panel, inert controls, and the notice explaining why. */
	.nd-news--disabled .nd-news__fields {
		cursor: not-allowed;
	}

	.nd-news--disabled .nd-news__fields > * {
		opacity: 0.75;
	}

	.nd-news .nd-news__notice {
		margin: 0;
		color: var(--wp--preset--color--cobalt-light);
		font-size: var(--wp--preset--font-size--meta);
		line-height: var(--wp--custom--line-height--small);
	}

	@media (max-width: 1100px) {

		.nd-newsletter {
			grid-template-columns: minmax(0, 1fr);
			padding: 72px 24px;
		}

		.nd-newsletter .nd-newsletter__title {
			font-size: 40px;
		}
	}
}