/*
 * CTA banner.
 *
 * 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 band's ink, and the filled button's ink, are measured in PHP against the
 * surfaces an editor picked and arrive as `--btxc-banner-*` properties. Nothing
 * here names a colour token for type; the defaults below are the paper case.
 */

@layer bertex-components {

	.btxc-banner {
		--btxc-banner-bg: transparent;
		--btxc-banner-ink: var(--btx-color-primary-1, #1a2744);
		--btxc-banner-quiet: var(--btx-color-primary-1-light-40, #2e4578);
		--btxc-banner-cta-bg: transparent;
		--btxc-banner-cta-ink: var(--btx-color-primary-1, #1a2744);

		box-sizing: border-box;
		width: 100%;

		font-family: var(--btx-font-body-family, system-ui, sans-serif);
	}

	/*
	 * Sizes itself rather than relying on a container, the same deal the hero
	 * and lead-capture make. "Wide" caps at the design system's max width and
	 * keeps the band's corners; "full" takes whatever the parent gives it —
	 * which in a page's content flow is the viewport — and drops the radius,
	 * because a rounded corner against a screen edge is a gap.
	 */
	.btxc-banner--width-wide {
		max-width: var(--btx-max-width, 1440px);
		margin-inline: auto;
	}

	.btxc-banner--width-full {
		max-width: none;
	}

	.btxc-banner__inner {
		box-sizing: border-box;
		max-width: var(--btx-max-width, 1440px);
		margin-inline: auto;
		padding: var(--btx-spacing-xl, 2.75rem) var(--btx-spacing-xl, 3rem);

		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: var(--btx-spacing-xl, 2.5rem);

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

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

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

	/*
	 * A measure, not a fraction. The copy should stop at a readable line length
	 * and let the button keep its place at the end of the row, rather than the
	 * two sharing the width and the heading rewrapping every time the button
	 * label changes.
	 */
	.btxc-banner__copy {
		display: flex;
		flex-direction: column;
		gap: var(--btx-spacing-xs, 0.625rem);

		min-width: 0;
		max-width: 44rem;
	}

	.btxc-banner__eyebrow {
		margin: 0;

		font-size: var(--btx-font-body-xs, 0.8125rem);
		font-weight: 600;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		line-height: var(--btx-line-height-body, 1.5);
		color: var(--btxc-banner-quiet);
	}

	.btxc-banner__heading {
		margin: 0;

		font-family: var(--btx-font-heading-family, system-ui, sans-serif);
		font-size: var(--btx-font-heading-m, 2rem);
		font-weight: 600;
		line-height: var(--btx-line-height-heading, 1.1);
		letter-spacing: -0.01em;
		text-wrap: pretty;
		color: var(--btxc-banner-ink);
	}

	.btxc-banner__body {
		margin: 0;

		font-size: var(--btx-font-body-m, 1.0625rem);
		line-height: var(--btx-line-height-body, 1.6);
		color: var(--btxc-banner-quiet);
	}

	/*
	 * The button and the address under it are one column, so the address hangs
	 * off the button rather than becoming a third object in the band's row.
	 * The button keeps its own `flex: none`, so it stays correct if it is ever
	 * rendered without this wrapper.
	 */
	.btxc-banner__action {
		flex: none;

		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var( --btx-spacing-xs, 0.625rem );
	}

	/*
	 * Quiet by hue, not by being hard to read: `--btxc-banner-quiet` is the
	 * measured second ink for whatever surface the band is painted in, so this
	 * stays legible on a pale background as readily as on the navy.
	 */
	.btxc-banner__note {
		margin: 0;

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

	/* ── The button ────────────────────────────────────────────────────── */

	/*
	 * `!important` on the colour, and it is not decoration — see the long note
	 * in service-menu/style.css. theme.json prints an unlayered link-colour
	 * rule that outranks every cascade layer, and this band is dark by default,
	 * so without it the button's label takes a light-mode link colour on navy.
	 */
	.btxc-banner__cta {
		flex: none;

		box-sizing: border-box;
		display: inline-flex;
		align-items: center;
		gap: var(--btx-spacing-xs, 0.625rem);

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

		border-radius: var(--btx-border-radius-m, 0.5rem);

		font-size: var(--btx-font-body-s, 1.0625rem);
		font-weight: 600;
		line-height: var(--btx-line-height-heading, 1.3);
		text-decoration: none;

		transition:
			background 0.18s ease,
			filter 0.18s ease;
	}

	/*
	 * Outlined draws itself in the band's own measured ink, which is why it is
	 * the default: whatever an editor picks for the background, this cannot
	 * come out wrong.
	 */
	.btxc-banner__cta--outline {
		border: 1.5px solid color-mix(in srgb, var(--btxc-banner-ink) 55%, transparent);
		background: transparent;
		color: var(--btxc-banner-ink) !important;
	}

	.btxc-banner__cta--outline:hover {
		background: color-mix(in srgb, var(--btxc-banner-ink) 10%, transparent);
	}

	.btxc-banner__cta--filled {
		border: 1.5px solid transparent;
		background: var(--btxc-banner-cta-bg);
		color: var(--btxc-banner-cta-ink) !important;
		font-weight: 700;
	}

	/*
	 * Brightness rather than a second colour: the fill is an editor's pick out
	 * of the whole palette and a hover colour chosen here could not know what
	 * it is darkening. The shift is small enough to leave the measured ink on
	 * its footing.
	 */
	.btxc-banner__cta--filled:hover {
		filter: brightness(0.94);
	}

	.btxc-banner__cta:focus-visible {
		outline: 2px solid var(--btxc-banner-ink);
		outline-offset: 3px;
	}

	.btxc-banner__arrow {
		transition: transform 0.18s ease;
	}

	.btxc-banner__cta:hover .btxc-banner__arrow {
		transform: translateX(0.2em);
	}

	/*
	 * Announced, never shown. `clip-path` as well as the legacy clip, and
	 * `!important` on the containment properties — the same note the
	 * visually-hidden rules in lead-trajectory and management-model carry:
	 * WordPress ships its own `.screen-reader-text` unlayered, and an unlayered
	 * rule outranks every cascade layer.
	 */
	.btxc-banner__sr-only {
		position: absolute !important;
		width: 1px !important;
		height: 1px !important;
		overflow: hidden !important;
		clip: rect(0 0 0 0) !important;
		clip-path: inset(50%) !important;
		white-space: nowrap !important;
		border: 0 !important;
		padding: 0 !important;
		margin: -1px !important;
	}

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

	@media (width < 48rem) {
		.btxc-banner__inner {
			padding: var(--btx-spacing-lg, 2rem) var(--btx-spacing-m, 1.25rem);
			gap: var(--btx-spacing-lg, 1.5rem);
		}

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

		/* The button stops being an end-of-row object and becomes the last
		 * thing you read, which is what it is on a phone. */
		.btxc-banner__action {
			width: 100%;
		}

		.btxc-banner__cta {
			width: 100%;
			justify-content: space-between;
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	@layer bertex-components {
		.btxc-banner__cta,
		.btxc-banner__arrow {
			transition: none;
		}

		.btxc-banner__cta:hover .btxc-banner__arrow {
			transform: none;
		}
	}
}