/**
 * css/components/persona-chat.css — Website 2.0 shared component library
 * (#124)
 *
 * "PersonaChat" pattern — giant condensed word (cream/ink split), a
 * full-bleed hairline, then a divided two-column split (statement+body
 * left / plain-paragraph list right, with an internal divider — NOT the
 * standard `.cg-split` 600/1fr proportions, this is an even-ish split
 * with a border-left divider on the right column). Reference:
 * tech-ai.html `.persona`/`.pcols`/`.plist`/`.pt`.
 *
 * Tokens only — no raw hex, no @layer, no !important.
 */

.cg-persona__eyebrow {
	margin: 0 0 clamp( 28px, 3vw, 44px );
}

.cg-persona__word {
	margin: 0;
	font-family: var( --font-condensed );
	font-weight: 700;
	text-transform: uppercase;
	font-size: clamp( 72px, 13vw, 240px );
	line-height: 0.86;
	letter-spacing: -2px;
	color: var( --cg-cream );
}

/* .cg-persona__word .cg-persona__ink rule removed (#306, single-solid-
   colour headlines, added by the orchestrator after the devils-advocate
   review found this identical per-run colour pattern on the Technology
   page's giant word -- cream + ink two-tone, the largest text on that
   page). Its only declaration was `color: var( --cg-ink )`. The
   `.cg-persona__ink` span still exists in the markup; it now simply
   inherits the word's own cream colour (:27), same treatment as the
   .ink/.rustword removals in hero.css. */

.cg-persona__fbline {
	height: 0;
	border-top: var( --hairline ) solid rgba( 245, 245, 245, 0.85 );
	margin-top: clamp( 40px, 5vw, 72px );
	margin-inline: calc( -1 * var( --pad-x ) );
}

.cg-persona__cols {
	display: grid;
	grid-template-columns: minmax( 0, 600px ) minmax( 0, 1fr );
	gap: 0;
	align-items: stretch;
}

.cg-persona__cols > div {
	padding-top: clamp( 40px, 4vw, 56px );
}

.cg-persona__cols > div:first-child {
	padding-right: clamp( 40px, 5vw, 88px );
}

.cg-persona__cols > div:last-child {
	border-left: var( --hairline ) solid rgba( 245, 245, 245, 0.85 );
	padding-left: clamp( 40px, 5vw, 88px );
}

.cg-persona__body {
	margin-top: 30px;
	max-width: 520px;
}

.cg-persona__list {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

/* List items reuse giant-word.css's `.cg-believe__pt` class (see the
   docblock in blocks/cg/persona-chat.php) — every property that rule
   sets is re-specified here under the more-specific `.cg-persona__list
   .cg-believe__pt` selector (0,2,0, beats the bare 0,1,0 rule regardless
   of enqueue order) so this renders per the tech-ai reference exactly,
   independent of giant-word.css's own (unrelated) "believe" spec. */
.cg-persona__list .cg-believe__pt {
	display: block;
	min-height: 0;
	margin: 0;
	padding: 28px 0;
	border-top: var( --hairline ) solid rgba( 245, 245, 245, 0.85 );
	font-family: inherit;
	font-weight: 400;
	font-size: inherit;
	color: inherit;
}

/* Drop the divider on the first row (designer, 2026-07-22, #206) — it sat
   directly above "Briefs written against…" with nothing above it to
   divide; giant-word.css's own `.cg-believe__pt:first-child` already
   zeroes this same border for the same reason, this re-specification
   just missed carrying that exception over. Scoped to this list only —
   giant-word.php's `.cg-believe__pt` usage is untouched. */
.cg-persona__list .cg-believe__pt:first-child {
	border-top: 0;
}

.cg-persona__list .cg-believe__pt p {
	margin: 0;
	font-family: var( --font-body );
	font-size: 16px;
	line-height: 1.6;
	color: var( --cg-cream );
}

@media ( max-width: 1024px ) {
	.cg-persona__cols {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.cg-persona__cols > div:first-child {
		padding-right: 0;
	}

	.cg-persona__cols > div:last-child {
		border-left: 0;
		padding-left: 0;
	}
}