/*
 * Newsletter page.
 *
 * Almost everything here comes from elsewhere: the tokens and section/grid/button rules
 * from cwtf-landing.css, and every field, checkbox and error rule from
 * cwtf-waitlist.css. This sheet only covers what is specific to a standalone form page.
 *
 * The form wrapper carries `cwtf-wl` so the two-class field selectors in cwtf-waitlist.css
 * match, while `.cwtf-lp` stays on an ancestor - that separation is deliberate and is what
 * stops the dialog-shell rule `.cwtf-lp.cwtf-wl` (transparent, max-width 38rem, capped
 * height) applying to a page.
 */

/*
 * Text-only, centred hero - this page only.
 *
 * Every .cwtf-hero layout in cwtf-landing.css reserves space for a background or portrait
 * and left-aligns its copy. This page has no image and one job, so the copy is centred
 * over the form beneath it. Scoped under .cwtf-lp--newsletter so no other hero moves.
 */
.cwtf-lp--newsletter .cwtf-hero--plain .cwtf-hero__inner {
	padding-block: clamp(3rem, 7vw, 5.5rem) clamp(1rem, 3vw, 2rem);
}

.cwtf-lp--newsletter .cwtf-hero--plain .cwtf-hero__copy {
	/*
	 * Grows with the viewport, up to 65% of the shell.
	 *
	 * Three terms, each doing a job:
	 *   65%   the ceiling - on a wide monitor the copy takes 65% and no more, so a
	 *         centred headline never stretches into an unreadable single line.
	 *   46rem a floor, because 65% of a phone is a 220px column. Below roughly 1130px
	 *         this term wins and the copy simply uses what it has.
	 *   100%  stops that floor overflowing the shell on the narrowest screens.
	 */
	max-width: min(100%, max(46rem, 65%));
	margin-inline: auto;
	text-align: center;
}

/* .cwtf-lede and .cwtf-hero__sub both cap their own width and centre with auto margins
 * elsewhere; make sure the sub-headline does the same here rather than hugging the left. */
.cwtf-lp--newsletter .cwtf-hero--plain .cwtf-hero__sub {
	margin-inline: auto;
}

/* Centres the card and stops it stretching to the full 3000px shell on a 4k monitor. */
.cwtf-nl {
	max-width: 38rem;
	margin-inline: auto;
}

/*
 * Reset the two properties .cwtf-wl__panel sets for life inside a <dialog>. Belt and
 * braces: `.cwtf-lp.cwtf-wl` cannot match here, but the panel rule is single-class and
 * does apply, and its shadow is tuned for a modal floating over a backdrop.
 */
.cwtf-nl__panel {
	max-height: none;
	box-shadow: 0 24px 60px -40px #000;
}

/*
 * The success view replaces the form in place. Without a floor the section height snaps
 * shorter on submit and the page jumps under the reader.
 *
 * The :not([hidden]) is load-bearing, not decorative. `display` on a bare class beats the
 * `hidden` attribute's UA `display: none`, so without it the confirmation message sits
 * permanently under the form telling everyone they are already subscribed.
 */
.cwtf-nl [data-cwtf-nl-view="done"]:not([hidden]) {
	display: grid;
	gap: 0.9rem;
	min-height: 12rem;
	align-content: center;
	text-align: center;
}

.cwtf-nl [data-cwtf-nl-view="done"] .cwtf-wl__lede {
	margin-inline: auto;
}

@media (max-width: 560px) {
	.cwtf-nl {
		max-width: none;
	}
}