/* ============================================================
   Dot Experience — Newsletter band
   ============================================================
   Layout for the sitewide "stay connected" section injected
   immediately before the footer template part (see
   inc/newsletter-signup.php). This file owns ONLY the band and its
   editorial two-column composition — the embedded Gravity Form's
   field/label/button chrome comes entirely from
   assets/css/gravity-forms.css, which already themes GF to the
   site's tokens across all three accessibility profiles. The couple
   of rules at the bottom are newsletter-scoped form tweaks (full-
   width submit, spacing) that belong with THIS section, not in the
   form-agnostic gravity-forms.css.

   The band is a light --surface lift off the page --bg: its own
   editorial moment. A top hairline separates it from the content
   above; below, it sits flush against the full-bleed jet footer so
   the light-to-dark transition reads as one deliberate "site base"
   rather than two loosely-stacked blocks. Keeping the band light is
   also what lets the form inherit gravity-forms.css unchanged — that
   file's --bg field fill / --ink text resolve correctly on a light
   surface in the default, high-contrast, and dark variants alike.

   Uses this theme's existing primitives: .shell (1240px container),
   .section-py-lg (vertical rhythm), .eyebrow / .display-3 / .lede
   (type roles) — all applied in the section markup. Only the grid
   and the surface treatment are defined here.
   ============================================================ */

.dot-newsletter {
	background: var(--surface);
	border-top: 1px solid var(--line);
	color: var(--ink);
}

/* Sit flush against the footer below. Top-level children of
   .wp-site-blocks each get a `margin-block-start: spacing|50` from a
   zero-specificity :where() rule in the generated global styles; this
   cancels it on the footer that immediately follows the band, so the
   light surface meets the dark footer edge-to-edge. The band keeps its
   own top margin (breathing room from the page content above). */
.dot-newsletter + footer,
.dot-newsletter + .wp-block-template-part {
	margin-block-start: 0;
}

.dot-newsletter__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.25rem;
	align-items: start;
}

.dot-newsletter__lead {
	max-width: 42rem;
}

/* Control the lead stack rhythm explicitly — these are bare
   <p>/<h2> tags (not core blocks), so no block-layout margins apply. */
.dot-newsletter__lead > * {
	margin: 0;
}

.dot-newsletter__title {
	margin-top: 0.75rem;
}

.dot-newsletter__lead .lede {
	margin-top: 1rem;
}

.dot-newsletter__form {
	width: 100%;
	max-width: 30rem;
}

@media (min-width: 768px) {
	.dot-newsletter__inner {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
		column-gap: clamp(2.5rem, 6vw, 5rem);
		align-items: center;
	}

	/* Anchor the form to the band's right edge — heading leads on the
	   left, form answers on the right (asymmetric, intentional). */
	.dot-newsletter__form {
		margin-left: auto;
	}
}

/* ---- Newsletter-scoped Gravity Forms tweaks ----
   The First Name / Email fields render side-by-side via GF's own
   6/6 grid (set on the form definition); GF stacks them below its
   641px breakpoint automatically. The only additions here: a clear
   full-width primary CTA spanning the form width beneath the pair,
   and a touch of breathing room above it. Scoped to .dot-newsletter
   so no other form on the site is affected. */
.dot-newsletter .gform_footer {
	margin-top: 1.25rem;
}

/* The submit is a flex item inside GF's flex .gform_footer, and the
   Orbital framework's reset governs its sizing — so it must be sized
   via flex-basis, not width (a plain width:100% is ignored by the flex
   layout here; verified live). flex-basis:100% fills the row cleanly at
   this selector's specificity, no !important needed. */
.dot-newsletter .gform_footer input[type="submit"],
.dot-newsletter .gform_footer button {
	flex-basis: 100%;
}