/*
 * Promise 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 SURFACE IS A LIFT, NOT A COLOUR
 *
 * The panel paints itself by mixing `currentColor` — the ink it was handed —
 * down to a few percent, rather than naming a background token. That is the
 * only version that survives the hero changing its background, which a hero
 * does: a solid token picked to look right on the navy is a stripe on a
 * photograph.
 *
 * It also means the panel is always exactly as light or dark as it needs to be
 * relative to whatever is behind it, with no second control and nothing to keep
 * in step. The ink itself is measured in PHP against the scheme's surface and
 * arrives as `--btxc-promise-*`.
 */

@layer bertex-components {

	.btxc-promise {
		--btxc-promise-ink: var( --btx-color-text-bg-1, #f9fafb );
		--btxc-promise-quiet: var( --btx-color-text-bg-2, #d3e1f7 );
		--btxc-promise-marker: var( --btxc-promise-ink );
		--btxc-promise-heading: var( --btxc-promise-quiet );

		box-sizing: border-box;
		padding: var( --btx-spacing-lg, 1.875rem );

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

		color: var( --btxc-promise-ink );

		/*
		 * Seven and sixteen percent, which is what the design this came from
		 * uses. Low enough that the hero's own background still reads through
		 * it, high enough to separate the list from the headline beside it.
		 */
		background: color-mix( in srgb, currentColor 7%, transparent );
		border: 1px solid color-mix( in srgb, currentColor 16%, transparent );
		border-radius: var( --btx-border-radius-lg, 0.875rem );
	}

	/*
	 * Bare `monospace`, the same deliberate exception the other components
	 * make: the design system publishes a heading family and a body family and
	 * no third, so a mono face cannot come from a token. See the note in
	 * booking-panel/style.css.
	 *
	 * A <p> and not a heading: it labels the list rather than titling a
	 * section, and a stray h3 inside a hero breaks the page outline. The list
	 * is tied to it with aria-labelledby instead.
	 */
	.btxc-promise__heading {
		margin: 0;

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

	.btxc-promise__list {
		margin: 0;
		padding: 0;
		list-style: none;

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

	.btxc-promise__item {
		display: flex;
		align-items: flex-start;
		gap: var( --btx-spacing-xs, 0.75rem );
	}

	/*
	 * A graphic, not type: judged against the 3:1 floor, which is what lets it
	 * be a brand green. PHP checks it against the surface and falls back to the
	 * panel's own ink when it would not clear that floor.
	 */
	.btxc-promise__mark {
		flex: none;

		display: inline-flex;
		align-items: center;
		justify-content: center;

		inline-size: 1.125rem;
		block-size: 1.125rem;
		margin-block-start: 0.15rem;

		color: var( --btxc-promise-marker );
	}

	.btxc-promise__mark svg {
		inline-size: 100%;
		block-size: 100%;
		display: block;
	}

	.btxc-promise__text {
		font-size: var( --btx-font-body-s, 1rem );
		line-height: var( --btx-line-height-body, 1.55 );
		color: var( --btxc-promise-ink );
	}

	@media ( width < 48rem ) {
		.btxc-promise {
			padding: var( --btx-spacing-m, 1.375rem );
		}
	}
}