/**
 * OSHIDA — cowork hero. Owner: C4.
 *
 * @figma 1703:2718 Group 440, 480 x 115.97 at (479.49, 273.20) — centred
 * @figma 1557:772 heading 480 x 64 · 1557:771 arch mark 45.36 x 41.56
 * @figma 1557:770 lede 478 x 29 at (481, 360.17)
 *
 * Derived responsive behaviour: docs/ai/responsive-decisions.md.
 */

.o-cowork-hero {
	/* @figma 1701:2613 x=120 in a 1440 frame: the cowork column is 1200, not
	 * the 1235 of --o-container. */
	--o-cowork-col: 1200px;
	--o-cowork-hero-lead: 130px; /* 273.20 - the header's own 143 */
	--o-cowork-hero-gap: 23px; /* 360.17 - (273.20 + 64) */

	padding-block-start: var(--o-cowork-hero-lead);
}

.o-cowork-hero__inner {
	max-inline-size: calc(var(--o-cowork-col) + var(--o-gutter) * 2);
	text-align: center;
}

.o-cowork-hero__title {
	margin: 0;
	font-size: var(--o-fs-h1);
	font-weight: var(--o-fw-black);
	line-height: var(--o-lh-heading);
	letter-spacing: var(--o-track-snug);
	text-wrap: balance;
}

/* 45.36 x 41.56, set on the heading's own baseline rather than as a block. */
.o-cowork-hero__mark {
	display: inline-block;
	vertical-align: -0.12em;
	inline-size: 45px;
	block-size: 42px;
}

.o-cowork-hero__mark-glyph {
	display: block;
	inline-size: 100%;
	block-size: 100%;
}

.o-cowork-hero__lede {
	margin-block: var(--o-cowork-hero-gap) 0;
	margin-inline: auto;
	max-inline-size: 60ch;
	font-size: var(--o-fs-sm);
	font-weight: var(--o-fw-extralight);
	line-height: var(--o-lh-heading);
	letter-spacing: var(--o-track-tight);
}

/* Below `lg`: DERIVED — 2082:11958 covers the path picker only. */

@media (max-width: 899px) {
	.o-cowork-hero {
		--o-cowork-hero-lead: var(--o-space-3xl);
	}
}

@media (max-width: 599px) {
	.o-cowork-hero {
		--o-cowork-hero-lead: var(--o-space-xl);
		--o-cowork-hero-gap: var(--o-space-2xs);
	}

	.o-cowork-hero__mark {
		inline-size: 34px;
		block-size: 32px;
	}
}