/*
 * Ownership 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.
 *
 * One surface, measured for its ink in PHP and arriving as `--btxc-own-*`. The
 * tiles are promise-panel's and bring their own stylesheet through `uses`;
 * nothing here restyles them.
 */

@layer bertex-components {

	/* ── Shell ─────────────────────────────────────────────────────────── */

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

		/* Falls back to the quiet ink, so "Automatic" is a real answer rather
		 * than an unset property. */
		--btxc-own-eyebrow: var(--btxc-own-quiet);

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

		background: var(--btxc-own-bg);
		color: var(--btxc-own-ink);

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

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

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

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

		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: center;
		gap: var(--btx-spacing-xl, 3.25rem);
	}

	/*
	 * Inset: the paint moves from the section onto the inner card, and the
	 * section becomes the gutter around it. Everything inside is unchanged —
	 * the ink was measured against this same background either way.
	 */
	.btxc-own--width-inset {
		background: none;
		padding: 0 var(--btx-spacing-m, 1.25rem) var(--btx-spacing-m, 1.25rem);
	}

	.btxc-own--width-inset .btxc-own__inner {
		background: var(--btxc-own-bg);
		border-radius: var(--btx-border-radius-xl, 1rem);
		padding: var(--btx-spacing-xxl, 4rem);
	}

	/* ── The question and the answer ───────────────────────────────────── */

	.btxc-own__copy {
		display: flex;
		flex-direction: column;
		gap: var(--btx-text-spacing, 1.125rem);
		min-width: 0;
	}

	/*
	 * Bare `monospace`, the same deliberate exception the other components
	 * make. See the note in booking-panel/style.css.
	 */
	.btxc-own__eyebrow {
		margin: 0;

		font-family: monospace;
		font-size: var(--btx-font-body-s, 0.875rem);
		letter-spacing: 0.12em;
		text-transform: uppercase;
		line-height: var(--btx-line-height-body, 1.5);
		color: var(--btxc-own-eyebrow);
	}

	.btxc-own__heading {
		margin: 0;

		font-family: var(--btx-font-heading-family, system-ui, sans-serif);
		font-size: var(--btx-font-heading-xl, 2.25rem);
		font-weight: 700;
		line-height: var(--btx-line-height-heading, 1.1);
		letter-spacing: -0.02em;
		text-wrap: pretty;
		color: var(--btxc-own-ink);
	}

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

	.btxc-own__body p {
		margin: 0;

		font-size: var(--btx-font-body-lg, 1.125rem);
		line-height: var(--btx-line-height-body, 1.7);
		color: var(--btxc-own-quiet);
	}

	/* The words that carry the answer step up to the full ink. */
	.btxc-own__body strong {
		font-weight: 700;
		color: var(--btxc-own-ink);
	}

	.btxc-own__body a {
		color: var(--btxc-own-ink) !important;
	}

	.btxc-own__terms {
		min-width: 0;
	}

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

	@media (width < 56rem) {
		.btxc-own__inner {
			grid-template-columns: minmax(0, 1fr);
			gap: var(--btx-spacing-lg, 2rem);
		}
	}

	@media (width < 40rem) {
		.btxc-own__inner,
		.btxc-own--width-inset .btxc-own__inner {
			padding: var(--btx-spacing-xl, 2.5rem) var(--btx-spacing-m, 1.25rem);
		}

		.btxc-own--width-inset {
			padding: 0 var(--btx-spacing-xs, 0.625rem) var(--btx-spacing-xs, 0.625rem);
		}

		.btxc-own__heading {
			font-size: var(--btx-font-heading-lg, 1.75rem);
		}
	}
}