/*
 * pm-quote — the homepage quote section (WO-31, frame 55:575), extended by
 * WO-37 with the About page's eyebrow and description slots (frame
 * 90:4006).
 *
 * Source frame: docs/design/frames/31-quote.json, node 55:575 — the company
 * mark, one large centred quotation and the attribution, on the page's own
 * background. WO-37: the eyebrow renders in the mark's slot when set; the
 * description renders below the quote when set.
 *
 * Compiled to assets/css/components/quote.css by src/build-tokens.mjs, which
 * substitutes the breakpoint markers (a comment holding `@bp <name>`) with
 * the pixel value from tokens/tokens.json. Never type a breakpoint width
 * here. Every colour, font family, weight, size, leading and tracking is a
 * --pm-* token. No hex value and no literal breakpoint width may appear in
 * this file. Values the token file does not hold (the 960px measure, the
 * mark's 80x48 box) are typed with a comment citing the extract key they
 * come from — the same technique as the section header's 702px title width.
 */

.pm-quote {
	/* The scaffold stylesheet (style.css) constrains body to a centred 72rem
	   column with --pm-space-8 padding; the section escapes that box with the
	   same full-bleed technique as the intro (intro.css), because the frame
	   is a full-width band — 1440 wide with its own 160px side padding
	   (31-quote.json#measured.padding). Revisit with the scaffold body styles
	   when the layout epic replaces them. */
	box-sizing: border-box;
	width: 100vw;
	margin-inline: calc(50% - 50vw);
	display: flex;
	flex-direction: column;
	align-items: center;
	/* 31-quote.json#measured.gap — 32px, --pm-space-8. */
	gap: var(--pm-space-8);
	/* 31-quote.json#measured.padding — 96px block (--pm-space-24), 160px
	   sides. The 160px step was added to the space scale as --pm-space-40
	   by WO-31, from this frame. */
	padding: var(--pm-space-24) var(--pm-space-40);
	/* 31-quote.json#measured.background — the frame sets none, so the
	   section inherits the page (Blush Linen). Deliberately no
	   background-color here (WO-31 AC 5). */
}

/*
 * 31-quote.json#measured.mark — 80x48, the committed company-mark.svg's own
 * box (and the box any override fills). An asset dimension, not a scale
 * step, so it is typed here citing the extract.
 */
.pm-quote__mark {
	width: 80px;
	height: 48px;
}

/*
 * 31-quote.json#measured.quote — the H2 style: Roboto ExtraLight 40px /
 * 1 / -2px, Volcanic Ink, centred, 960px wide. Size, weight, leading,
 * tracking and colour are tokens; the 960px measure is typed, citing the
 * extract. The quotation marks are content of the <blockquote>, not CSS.
 */
.pm-quote__text {
	max-width: 960px;
	margin: 0;
	font-family: var(--pm-font-family-base);
	font-size: var(--pm-font-size-h2);
	font-weight: var(--pm-font-weight-200);
	line-height: var(--pm-leading-tight);
	letter-spacing: var(--pm-tracking-h2);
	color: var(--pm-color-ink);
	text-align: center;
}

/*
 * 31-quote.json#measured.attribution — Caption Meta: Roboto Regular 12px
 * uppercase, 1.5 tracking, Terra Sienna — the section-header eyebrow's
 * treatment (section-header.css). font-style: normal resets the <cite>
 * element's UA italic; the frame shows an upright caption.
 */
.pm-quote__cite {
	font-family: var(--pm-font-family-base);
	font-size: var(--pm-font-size-caption);
	font-weight: var(--pm-font-weight-400);
	line-height: var(--pm-leading-normal);
	letter-spacing: var(--pm-tracking-caption);
	text-transform: uppercase;
	color: var(--pm-color-accent);
	font-style: normal;
}

/*
 * WO-37 — the About page's description slot (37-about.json#quote
 * .description): Body Roboto Light 16 / 1.6, body-text (Texte @64%),
 * centred, 600 wide (typed; no token holds it). It renders below the
 * quote, in the attribution's slot when the attribution is empty — the
 * section's own 32px gap separates it from the quote.
 */
.pm-quote__description {
	max-width: 600px;
	margin: 0;
	font-family: var(--pm-font-family-base);
	font-size: 1rem;
	font-weight: var(--pm-font-weight-300);
	line-height: var(--pm-leading-body);
	color: var(--pm-color-body-text);
	text-align: center;
}

/*
 * TODO(open-question): the frame records no layout below 1440 —
 * MISTAKES.md §C7. The step below is developer judgement, not design:
 * below tablet the side padding becomes 24px (--pm-space-6) and the quote
 * spans the column instead of holding the 960px measure. Owner: the
 * designer, with the missing mobile design.
 */
@media (max-width: 768px) {
	.pm-quote {
		padding: var(--pm-space-24) var(--pm-space-6);
	}

	.pm-quote__text {
		max-width: 100%;
	}

	.pm-quote__description {
		max-width: 100%;
	}
}