/*
 * Lead capture.
 *
 * Same rules as every component stylesheet: design-system `--btx-*` tokens
 * only, a fallback on every var(). See cta-button/style.css for the full note.
 *
 * One thing is different here, and it is the reason this file is short on
 * colour: the panel's ink is *computed* in PHP against whatever background an
 * editor picked, and arrives as four `--btxc-lead-*` custom properties on the
 * section. This file never names a colour token for type — it names those
 * properties, and the defaults below are what they fall back to when the
 * component renders with no background at all (then the surface is the page,
 * and the page is paper).
 */

@layer bertex-components {

	/* ── Outer shell ───────────────────────────────────────────────────── */

	/*
	 * Sizes itself rather than relying on a container, the same deal the hero
	 * makes: `--width-wide` caps at the design system's max width and
	 * `--width-full` takes whatever the parent gives it, which in a page's
	 * content flow is the viewport.
	 */
	.btxc-lead {
		--btxc-lead-bg: transparent;
		--btxc-lead-ink: var(--btx-color-primary-1, #1a2744);
		--btxc-lead-quiet: var(--btx-color-primary-1-light-40, #2e4578);
		--btxc-lead-card-bg: transparent;
		--btxc-lead-card-ink: var(--btx-color-primary-1, #1a2744);
		--btxc-lead-card-quiet: var(--btx-color-primary-1-light-40, #2e4578);

		/* Both default to the ink, so "Automatic" is a real answer rather than
		 * an unset property. */
		--btxc-lead-eyebrow: var(--btxc-lead-ink);
		--btxc-lead-mark: var(--btxc-lead-ink);

		position: relative;
		overflow: hidden;
		box-sizing: border-box;
		width: 100%;

		background: var(--btxc-lead-bg);
		color: var(--btxc-lead-ink);
		border-radius: var(--btx-border-radius-xl, 1.125rem);

		font-family: var(--btx-font-body-family, "Red Hat Display", sans-serif);
	}

	.btxc-lead--width-wide {
		max-width: var(--btx-max-width, 1440px);
		margin-inline: auto;
	}

	.btxc-lead--width-full {
		max-width: none;
		border-radius: 0;
	}

	/*
	 * The grid and the glow are texture, not content: both are drawn from the
	 * panel's own ink and mark colours through color-mix, so they follow a
	 * light background as readily as a dark one instead of being a dark-panel
	 * assumption baked into two literals.
	 *
	 * Graphic work, not type — judged against the 3:1 graphics floor, and these
	 * sit far below it on purpose. They are meant to be felt, not read.
	 */
	.btxc-lead::before {
		content: "";
		position: absolute;
		inset: 0;
		pointer-events: none;
		/* background-image:
			repeating-linear-gradient(
				to right,
				color-mix(in srgb, var(--btxc-lead-ink) 7%, transparent) 0 1px,
				transparent 1px 96px
			),
			repeating-linear-gradient(
				to bottom,
				color-mix(in srgb, var(--btxc-lead-ink) 7%, transparent) 0 1px,
				transparent 1px 96px
			); */
	}

	.btxc-lead::after {
		content: "";
		position: absolute;
		inset-block-start: 0;
		inset-inline-start: 0;
		width: min(60%, 34rem);
		aspect-ratio: 1;
		pointer-events: none;
		background: radial-gradient(
			circle at 0 0,
			color-mix(in srgb, var(--btxc-lead-mark) 22%, transparent),
			transparent 70%
		);
	}

	/* ── Content ───────────────────────────────────────────────────────── */

	.btxc-lead__inner {
		position: relative; /* Above the texture layers. */
		z-index: 1;
		box-sizing: border-box;
		/*
		 * A literal, deliberately. `--btx-content-width` is 760px — a reading
		 * column, right for prose and too narrow for a panel that carries a
		 * headline, a list and a form card. Layout literals are fine; the rule
		 * that admits no literals is the one about colour.
		 */
		max-width: min(100%, 64rem);
		margin-inline: auto;
		padding: var(--btx-spacing-xl, 3rem) var(--btx-spacing-lg, 2rem);

		display: flex;
		flex-direction: column;
		gap: var(--btx-text-spacing, 1rem);
	}

	.btxc-lead__eyebrow {
		margin: 0;
		color: var(--btxc-lead-eyebrow);
		font-family: var(--btx-font-heading-family, "Poppins", sans-serif);
		font-size: var(--btx-font-body-xs, 0.85rem);
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		line-height: var(--btx-line-height-body, 1.6);
	}

	.btxc-lead__heading {
		margin: 0;
		max-width: 20ch;
		color: var(--btxc-lead-ink);
		font-family: var(--btx-font-heading-family, "Poppins", sans-serif);
		font-size: var(--btx-font-heading-xxl, 3.5rem);
		font-weight: 700;
		line-height: var(--btx-line-height-heading, 1.2);
		letter-spacing: -0.02em;
		text-wrap: balance;
	}

	.btxc-lead__subtext {
		margin: 0;
		max-width: 54ch;
		color: var(--btxc-lead-quiet);
		font-size: var(--btx-font-body-m, 1.125rem);
		line-height: var(--btx-line-height-body, 1.6);
	}

	/* ── What they get ─────────────────────────────────────────────────── */

	/*
	 * A real list: the marks are decorative and hidden from assistive tech, so
	 * the `<ul>` is what says "three things" to anything not looking at it.
	 */
	.btxc-lead__list {
		margin: var(--btx-spacing-xs, 0.75rem) 0 0;
		padding: 0;
		list-style: none;

		display: flex;
		flex-direction: column;
		gap: var(--btx-spacing-xxs, 0.5rem);
	}

	.btxc-lead__item {
		display: flex;
		align-items: flex-start;
		gap: var(--btx-spacing-xxs, 0.5rem);

		color: var(--btxc-lead-ink);
		font-size: var(--btx-font-body-s, 1rem);
		font-weight: 500;
		line-height: var(--btx-line-height-body, 1.6);
	}

	/*
	 * The slot is a fixed box the mark is centred in, so a line's mark sits in
	 * the same place whichever icon it is. Nudged down by a hair because a
	 * square centred on a 1.6 line box reads high.
	 *
	 * **The icon's own size comes from the `size` argument in PHP, not from
	 * here.** Icon::render writes `width`/`height` attributes on the <svg>, and
	 * those beat a rule in this stylesheet — verified on the page, not assumed.
	 * `--btx-icon-size` is not the lever it looks like either: Icon sets it, and
	 * `info-card` and `contact-cards` set it too, but nothing in the codebase
	 * declares a `.btx-icon` rule that reads it, so those declarations do
	 * nothing. Change the mark's size in component.php.
	 */
	.btxc-lead__mark-slot {
		flex: 0 0 auto;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		inline-size: 1.5em;
		block-size: 1.5em;
		margin-block-start: 0.05em;
		color: var(--btxc-lead-mark);
	}

	.btxc-lead__mark {
		display: block;
	}

	.btxc-lead__item-text {
		min-width: 0;
	}

	/* ── Form card ─────────────────────────────────────────────────────── */

	/*
	 * Its own surface, so its own ink: `--btxc-lead-card-*` is measured against
	 * the card's background in PHP, not against the panel behind it. A white
	 * card on a navy panel is the common case and the two would disagree.
	 */
	.btxc-lead__card {
		box-sizing: border-box;
		margin-block-start: var(--btx-spacing-m, 1.75rem);
		padding: var(--btx-card-spacing, 1.75rem);

		background: var(--btxc-lead-card-bg);
		color: var(--btxc-lead-card-ink);
		border-radius: var(--btx-border-radius-lg, 0.75rem);

		display: flex;
		flex-direction: column;
		gap: var(--btx-spacing-xxs, 0.5rem);
	}

	.btxc-lead__form-title {
		margin: 0;
		color: var(--btxc-lead-card-ink);
		font-family: var(--btx-font-heading-family, "Poppins", sans-serif);
		font-size: var(--btx-font-heading-m, 1.5rem);
		font-weight: 700;
		line-height: var(--btx-line-height-heading, 1.2);
	}

	.btxc-lead__form-subtext {
		margin: 0;
		color: var(--btxc-lead-card-quiet);
		font-size: var(--btx-font-body-s, 1rem);
		line-height: var(--btx-line-height-body, 1.6);
	}

	.btxc-lead__form {
		margin-block-start: var(--btx-spacing-xs, 0.75rem);
	}

	.btxc-lead__form-note {
		margin: 0;
		color: var(--btxc-lead-card-quiet);
		font-size: var(--btx-font-body-xs, 0.85rem);
		line-height: var(--btx-line-height-body, 1.6);
		text-align: center;
	}

	/*
	 * Gravity Forms ships its own theme, and this is the seam between it and
	 * the design system. Only what the card needs to stop the form looking
	 * pasted in: the family, and a submit button that fills the card the way
	 * the design has it. Everything else — field chrome, validation states,
	 * spacing between fields — stays Gravity Forms' own, because overriding it
	 * here is how a form theme update turns into a broken card.
	 */
	.btxc-lead__form .gform_wrapper {
		font-family: var(--btx-font-body-family, "Red Hat Display", sans-serif);
	}

	.btxc-lead__form .gform_footer {
		margin-block-end: 0;
	}

	.btxc-lead__form .gform_footer input[type="submit"],
	.btxc-lead__form .gform_footer button[type="submit"] {
		inline-size: 100%;
	}

	/* ── Narrow ────────────────────────────────────────────────────────── */

	@media (max-width: 640px) {
		.btxc-lead__inner {
			padding: var(--btx-spacing-lg, 2rem) var(--btx-spacing-m, 1.25rem);
		}

		.btxc-lead__heading {
			max-width: none;
		}

		.btxc-lead::after {
			width: 100%;
		}
	}
}