/*
 * Case quote.
 *
 * 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.
 *
 * Two surfaces — the card and the panel inside it — and the ink for both is
 * computed in PHP against whatever an editor painted the card, arriving as
 * `--btxc-case-quote-*`. Nothing here names a colour token for type.
 *
 * The panel is a lift off the card rather than a colour of its own, the same
 * 7% / 16% treatment as spec-panel and promise-panel. That is what lets this
 * component sit on navy in one case study and pale grey in the next with
 * nothing to configure. Change the mix here and change it there.
 */

@layer bertex-components {

	.btxc-case-quote {
		--btxc-case-quote-bg: transparent;
		--btxc-case-quote-card-bg: transparent;
		--btxc-case-quote-ink: var( --btx-color-text-bg-1, #f9fafb );
		--btxc-case-quote-quiet: var( --btx-color-text-bg-2, #d3e1f7 );
		--btxc-case-quote-accent: var( --btxc-case-quote-quiet );

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

		background: var( --btxc-case-quote-bg );
	}

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

	.btxc-case-quote--width-full {
		max-width: none;
	}

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

		display: grid;
		gap: var( --btx-spacing-lg, 3rem );
		align-items: center;

		background: var( --btxc-case-quote-card-bg );
		border-radius: var( --btx-border-radius-xl, 1rem );
		color: var( --btxc-case-quote-ink );
	}

	/*
	 * One column until there is a panel to put beside it. The quotation gets
	 * the larger share: it is the thing being read, and the panel is a list of
	 * short lines that would look thin stretched to half a wide card.
	 */
	.btxc-case-quote--split .btxc-case-quote__card {
		grid-template-columns: 1.3fr 1fr;
	}

	/* ── The quotation ─────────────────────────────────────────────────── */

	.btxc-case-quote__figure {
		margin: 0;

		display: flex;
		flex-direction: column;
		gap: var( --btx-spacing-s, 1.5rem );
		min-width: 0;
	}

	.btxc-case-quote__quote {
		margin: 0;
		padding: 0;
		border: 0;
	}

	/*
	 * The quotation marks are drawn rather than typed, so a dozen case studies
	 * cannot end up with three different conventions between them — and as
	 * generated content they are not in the accessibility tree, where a screen
	 * reader announcing "quote unquote" around a <blockquote> it has already
	 * announced is noise.
	 */
	.btxc-case-quote__quote p {
		margin: 0;

		font-family: var( --btx-font-heading-family, "Outfit", sans-serif );
		font-size: var( --btx-font-heading-m, 1.875rem );
		font-weight: 500;
		line-height: 1.3;
		text-wrap: pretty;
		color: var( --btxc-case-quote-ink );
	}

	.btxc-case-quote__quote p::before {
		content: "\201C";
	}

	.btxc-case-quote__quote p::after {
		content: "\201D";
	}

	.btxc-case-quote--compact .btxc-case-quote__quote p {
		font-size: var( --btx-font-heading-s, 1.5rem );
	}

	/* ── Attribution ───────────────────────────────────────────────────── */

	.btxc-case-quote__cite {
		display: flex;
		align-items: center;
		gap: var( --btx-spacing-xs, 1rem );
	}

	.btxc-case-quote__photo {
		display: block;
		width: 3.5rem;
		height: 3.5rem;
		max-width: 100%;
		flex: none;

		object-fit: cover;
		border-radius: var( --btx-border-radius-round, 9999px );
	}

	.btxc-case-quote__who {
		display: flex;
		flex-direction: column;
		gap: 0.125rem;
		min-width: 0;
	}

	.btxc-case-quote__name {
		font-size: var( --btx-font-body-s, 1rem );
		font-weight: 600;
		line-height: var( --btx-line-height-heading, 1.3 );
		color: var( --btxc-case-quote-ink );
	}

	/*
	 * Quiet by hue, never by being hard to read: the ink here is the measured
	 * second tier for the card, which clears the reading bar by design.
	 */
	.btxc-case-quote__role {
		font-size: var( --btx-font-body-xs, 0.9375rem );
		line-height: var( --btx-line-height-body, 1.5 );
		color: var( --btxc-case-quote-quiet );
	}

	/* ── The scope panel ───────────────────────────────────────────────── */

	.btxc-case-quote__aside {
		box-sizing: border-box;
		padding: var( --btx-spacing-m, 1.625rem );

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

		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.75rem );
	}

	/*
	 * 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.
	 *
	 * A <p> and not a heading: it labels the panel rather than titling a
	 * section, and a stray h3 beside a quotation breaks the page outline. The
	 * list is tied to it with aria-labelledby instead.
	 */
	.btxc-case-quote__aside-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-case-quote-accent );
	}

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

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

	/*
	 * The em dash is drawn, not typed. Left to an editor it arrives as a
	 * hyphen on some lines and an en dash on others, and a list marker that
	 * varies line to line reads as a mistake. As generated content it also
	 * stays out of the accessibility tree, where a list already announces
	 * itself as a list.
	 */
	.btxc-case-quote__item {
		display: flex;
		gap: var( --btx-spacing-xxxs, 0.5rem );

		font-size: var( --btx-font-body-s, 1rem );
		line-height: var( --btx-line-height-body, 1.55 );
		color: var( --btxc-case-quote-ink );
	}

	.btxc-case-quote__item::before {
		content: "\2014";
		flex: none;
		color: var( --btxc-case-quote-quiet );
	}

	/*
	 * Ruled off, because it answers a different question from the lines above
	 * it: those are what was done, this is what it took. The rule is a graphic,
	 * judged against the 3:1 floor rather than a reading contrast.
	 */
	.btxc-case-quote__note {
		margin: 0;
		padding-block-start: var( --btx-spacing-xs, 0.875rem );
		border-block-start: 1px solid color-mix( in srgb, currentColor 16%, transparent );

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

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

	@media ( width < 60rem ) {
		.btxc-case-quote--split .btxc-case-quote__card {
			grid-template-columns: minmax( 0, 1fr );
		}
	}

	@media ( width < 48rem ) {
		.btxc-case-quote__card {
			padding: var( --btx-spacing-m, 1.75rem );
			gap: var( --btx-spacing-m, 1.75rem );
		}

		.btxc-case-quote__quote p {
			font-size: var( --btx-font-heading-s, 1.375rem );
		}
	}
}