/*
 * Newsletter panel.
 *
 * 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.
 *
 * The panel's ink is computed in PHP against whatever background an editor
 * picked and arrives as `--btxc-news-*`. Nothing here names a colour token for
 * type.
 *
 * GRAVITY FORMS
 *
 * The form's markup belongs to Gravity Forms, and this file reaches into it
 * only to make the field and button match the panel they are sitting in — the
 * plugin's own styles are written for a light page and go invisible on navy.
 * Those rules are kept together at the foot of the file and name `.gform_*`
 * explicitly, so it is obvious which declarations exist to override someone
 * else's stylesheet.
 */

@layer bertex-components {

	.btxc-news {
		--btxc-news-bg: var( --btx-color-primary-1, #1a2744 );
		--btxc-news-ink: var( --btx-color-text-bg-1, #f9fafb );
		--btxc-news-quiet: var( --btx-color-text-bg-2, #d3e1f7 );
		--btxc-news-eyebrow: var( --btxc-news-quiet );

		box-sizing: border-box;
		padding-inline: var( --btx-spacing-m, 1.25rem );
	}

	.btxc-news--width-full {
		padding-inline: 0;
	}

	.btxc-news__inner {
		box-sizing: border-box;
		max-width: var( --btx-max-width, 1440px );
		margin-inline: auto;

		padding: var( --btx-spacing-xl, 2.75rem );

		background: var( --btxc-news-bg );
		color: var( --btxc-news-ink );
		border-radius: var( --btx-border-radius-lg, 1rem );
	}

	/* ── Band ──────────────────────────────────────────────────────────── */

	/*
	 * Copy on the left, form on the right. The copy gets the larger share:
	 * the form is one field and a button, and at parity it floats in space.
	 */
	.btxc-news--band .btxc-news__inner {
		display: grid;
		grid-template-columns: 1.15fr 0.85fr;
		gap: var( --btx-spacing-xl, 3rem );
		align-items: center;
	}

	/* ── Card ──────────────────────────────────────────────────────────── */

	/*
	 * Stacked, and stretched to its container's height so a pair of these
	 * side by side line up at the foot whatever length their copy is.
	 */
	.btxc-news--card .btxc-news__inner {
		block-size: 100%;

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

		padding: var( --btx-spacing-lg, 2.25rem );
	}

	/* The form sinks to the bottom, so two cards agree about where it is. */
	.btxc-news--card .btxc-news__action {
		margin-block-start: auto;
	}

	/* ── Copy ──────────────────────────────────────────────────────────── */

	.btxc-news__copy {
		display: flex;
		flex-direction: column;
		gap: var( --btx-spacing-xs, 0.875rem );

		min-width: 0;
	}

	/*
	 * Bare `monospace`, the same deliberate exception the other components
	 * make: the design system publishes a heading family and a body family and
	 * no third. See the note in booking-panel/style.css.
	 */
	.btxc-news__eyebrow {
		margin: 0;

		font-family: monospace;
		font-size: var( --btx-font-body-xs, 0.75rem );
		font-weight: 500;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var( --btxc-news-eyebrow );
	}

	.btxc-news__heading {
		margin: 0;

		font-family: var( --btx-font-heading-family, inherit );
		font-size: var( --btx-font-heading-lg, 2.125rem );
		font-weight: 700;
		line-height: var( --btx-line-height-heading, 1.1 );
		letter-spacing: -0.02em;
		text-wrap: pretty;
		color: var( --btxc-news-ink );
	}

	.btxc-news--card .btxc-news__heading {
		font-size: var( --btx-font-heading-s, 1.5rem );
	}

	.btxc-news__body {
		margin: 0;

		max-width: 34rem;

		font-size: var( --btx-font-body-s, 1.0625rem );
		line-height: var( --btx-line-height-body, 1.65 );
		color: var( --btxc-news-quiet );
	}

	.btxc-news--card .btxc-news__body {
		font-size: var( --btx-font-body-xs, 0.9375rem );
	}

	/* ── Action ────────────────────────────────────────────────────────── */

	.btxc-news__action {
		display: flex;
		flex-direction: column;
		gap: var( --btx-spacing-xs, 0.75rem );

		min-width: 0;
	}

	.btxc-news__note {
		margin: 0;

		font-size: var( --btx-font-body-xs, 0.8125rem );
		line-height: var( --btx-line-height-body, 1.5 );
		color: var( --btxc-news-quiet );
	}

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

	@media ( width < 48rem ) {
		.btxc-news--band .btxc-news__inner {
			grid-template-columns: minmax( 0, 1fr );
			gap: var( --btx-spacing-lg, 1.75rem );
			padding: var( --btx-spacing-lg, 1.75rem );
		}

		.btxc-news__heading {
			font-size: var( --btx-font-heading-m, 1.625rem );
		}
	}
}

/*
 * ── Gravity Forms ──────────────────────────────────────────────────────────
 *
 * Unlayered on purpose. Gravity Forms prints its own stylesheet outside any
 * cascade layer, so a rule inside `bertex-components` loses to it regardless of
 * specificity — the same trap `theme.json`'s link colour sets, and the reason
 * cta-banner reaches for `wp-element-button`. These have to sit out here to
 * win, and they are scoped under `.btxc-news` so they touch no other form.
 */
.btxc-news__form .gform_wrapper .gform_fields {
	display: grid;
	gap: var( --btx-spacing-xs, 0.5rem );
}

.btxc-news__form .gform_wrapper .gfield_label {
	font-size: var( --btx-font-body-xs, 0.875rem );
	font-weight: 600;
	color: var( --btxc-news-quiet );
}

.btxc-news__form .gform_wrapper input[type="email"],
.btxc-news__form .gform_wrapper input[type="text"] {
	inline-size: 100%;
	box-sizing: border-box;

	padding: var( --btx-spacing-xs, 0.9375rem ) var( --btx-spacing-s, 1.125rem );

	background: var( --btx-color-text-bg-1, #f9fafb );
	color: var( --btx-color-primary-1, #1a2744 );
	border: 1px solid transparent;
	border-radius: var( --btx-border-radius-m, 0.5rem );

	font-size: var( --btx-font-body-s, 1rem );
	font-family: inherit;
}

.btxc-news__form .gform_wrapper input:focus-visible {
	outline: 2px solid var( --btxc-news-ink );
	outline-offset: 2px;
}

/*
 * The submit button. Brand green with near-black type, which is the pairing
 * the design uses and which clears the reading bar comfortably — but it is
 * stated here rather than measured, because this is someone else's element and
 * the component cannot hand it a computed property the way it does its own.
 */
.btxc-news__form .gform_wrapper .gform_footer {
	margin: var( --btx-spacing-xs, 0.625rem ) 0 0;
	padding: 0;
}

.btxc-news__form .gform_wrapper .gform_button {
	inline-size: 100%;
	box-sizing: border-box;

	padding: var( --btx-button-spacing, 1rem ) var( --btx-spacing-lg, 1.625rem );

	background: var( --btx-color-primary-2, #09e76a );
	color: var( --btx-color-primary-1, #1a2744 );
	border: 0;
	border-radius: var( --btx-border-radius-m, 0.5rem );

	font-family: inherit;
	font-size: var( --btx-font-body-s, 1.0625rem );
	font-weight: 700;
	cursor: pointer;

	transition: filter 0.18s ease;
}

.btxc-news__form .gform_wrapper .gform_button:hover {
	filter: brightness( 1.06 );
}

.btxc-news__form .gform_wrapper .gform_validation_errors,
.btxc-news__form .gform_wrapper .gfield_validation_message {
	font-size: var( --btx-font-body-xs, 0.875rem );
}

@media ( prefers-reduced-motion: reduce ) {
	.btxc-news__form .gform_wrapper .gform_button {
		transition: none;
	}
}