/**
 * OSHIDA — cowork path picker, and the route card it shares with the
 * حقیقی/حقوقی interstitial. Owner: C4.
 *
 * @figma 1589:829 heading 472 x 132 at (483.49, 1240.51), centred, one text
 *        node set at two sizes (line 2 measures ~26px, line 1 ~1.6x it)
 * @figma 1589:828 Group 393, 1200 x 637 at (112.48, 1476.03)
 * @figma 1557:870 Frame 335, 573.51 x 637 at x=112.48 (physical left)
 * @figma 1557:946 Frame 336, 571.97 x 637 at x=740.51 (physical right)
 * @figma 2082:11958 mobile: the same two cards stacked, 55px apart, in a
 *        56.24px gutter on a 686px frame
 *
 * Card, measured off tools/figma/renders/cowork-1440.webp: fill rgb(47,47,47)
 * over a rgb(40,40,40) ground = --o-veil-card; r=50 on all four corners
 * (profile checked at d=6/10/22/42); 60.53px inline padding; block rhythm
 * 96.5 / 90 icon / 30 / 132 title pair / 20 / 68 body / 30 / 74 CTA / 96.5.
 *
 * DOM order follows the layer tree and the mobile frame, so the desktop
 * columns are assigned explicitly — see path-picker.php and
 * docs/ai/responsive-decisions.md.
 */

.o-cowork-paths {
	--o-cowork-col: 1200px;
	--o-cowork-paths-lead: 153px; /* 1240.51 - 1087 */
	--o-cowork-paths-gap: 104px; /* 1476.03 - (1240.51 + 132) */
	--o-cowork-paths-gutter: 55px; /* 740.51 - (112.48 + 573.51) */

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

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

.o-cowork-paths__title {
	display: flex;
	flex-direction: column;
	margin: 0;
	font-weight: var(--o-fw-black);
	line-height: var(--o-lh-heading);
	letter-spacing: var(--o-track-snug);
	text-align: center;
	text-wrap: balance;
}

.o-cowork-paths__title-lead {
	font-size: var(--o-fs-h1);
}

.o-cowork-paths__title-rest {
	font-size: var(--o-fs-h3);
}

.o-cowork-paths__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--o-cowork-paths-gutter);
	margin-block-start: var(--o-cowork-paths-gap);
}

/* The route card. Also used by cowork-choice.css. */

.o-cowork-card {
	--o-cowork-card-pad-inline: 60px;
	--o-cowork-card-pad-block: 96px;
	/* 368.5 - 348.5 and 466.5 - 436.5 */
	--o-cowork-card-gap: var(--o-space-xs);
	--o-cowork-card-cta-gap: var(--o-space-md);

	display: flex;
	flex-direction: column;
	align-items: stretch;
	margin: 0;
	padding-inline: var(--o-cowork-card-pad-inline);
	padding-block: var(--o-cowork-card-pad-block);
	border-radius: var(--o-radius-xl);
	background-color: var(--o-veil-card);
	box-shadow: var(--o-shadow-card);
	text-align: center;
}

/* 1701:2506 / 1701:2504, 94.22 x 90 and 74.66 x 90, centred. Nothing renders
 * here yet: asset-manifest.json marks 1589:828 MISSING. */
.o-cowork-card__icon {
	display: flex;
	justify-content: center;
	margin: 0 0 var(--o-space-md);
	block-size: 90px;
}

.o-cowork-card__glyph {
	display: block;
	block-size: 100%;
	inline-size: auto;
}

.o-cowork-card__title {
	display: flex;
	flex-direction: column;
	gap: var(--o-space-3xs);
	margin: 0;
	font-weight: var(--o-fw-black);
	line-height: var(--o-lh-heading);
	letter-spacing: var(--o-track-snug);
	text-wrap: balance;
}

.o-cowork-card__title-fa {
	font-size: var(--o-fs-h1);
}

.o-cowork-card__title-en {
	font-size: var(--o-fs-lg);
	font-weight: var(--o-fw-extralight);
	letter-spacing: var(--o-track-nav);
}

.o-cowork-card__body {
	margin: var(--o-cowork-card-gap) 0 0;
	font-size: var(--o-fs-lg);
	font-weight: var(--o-fw-extralight);
	/* 68px over two lines. */
	line-height: 1.55;
	letter-spacing: var(--o-track-micro);
}

/*
 * The CTA. button.php with `arrow => false` gives the element, the escaping and
 * the theme focus ring; the design's fill is a flat rounded rectangle rather
 * than the dark pill with a gold knob, so the accent moves off the knob onto
 * the face. --o-button-accent is the variant's own property, so gold and mint
 * still come straight from button.css and no colour is restated here.
 * The selector is .o-button.<block> to outweigh
 * `.o-button:not(.o-button--knob)`, which is (0,2,0).
 */
.o-button.o-cowork-card__cta {
	min-block-size: 74px;
	margin-block-start: auto;
	padding-block: var(--o-space-2xs);
	padding-inline: var(--o-space-md);
	border-width: 0;
	border-radius: var(--o-radius-xs);
	background-image: var(--o-button-accent);
	color: var(--o-text-on-gold);
	font-size: var(--o-fs-lg);
	font-weight: var(--o-fw-regular);
	letter-spacing: var(--o-track-snug);
	gap: var(--o-space-xs);
}

/* The 6 x 14.93 chevron of 1701:2536 as geometry — see cowork-slider.css. At
 * the inline end of the label, as in the design (label x=175, chevron x=150). */
.o-button.o-cowork-card__cta::after {
	content: "";
	flex: none;
	inline-size: 9px;
	block-size: 9px;
	border-block-start: 2px solid currentColor;
	border-inline-end: 2px solid currentColor;
	rotate: -45deg;
}

.o-button.o-cowork-card__cta:hover {
	filter: brightness(1.06);
}

/* Sits over --o-button-accent, so it needs its own margin to stay visible. */
.o-button.o-cowork-card__cta:focus-visible {
	outline-offset: 3px;
}

/* `lg` and up: the design's two columns. */

@media (min-width: 900px) {
	.o-cowork-paths__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: stretch;
	}

	/* 1557:870 is first in the layer tree and first in the mobile stack, but is
	 * drawn at x=112.48 — the inline END. Column 2 puts it back without
	 * reordering the DOM. */
	.o-cowork-paths__grid > :first-child {
		grid-column: 2;
		grid-row: 1;
	}

	.o-cowork-paths__grid > :nth-child(2) {
		grid-column: 1;
		grid-row: 1;
	}
}

/* Below `lg`. 2082:11958 is the only mobile frame in the file and it covers
 * exactly this section: one column, cards in DOM order, 55px apart, 56.24px
 * gutter on 686 (8.2% a side). Its cards are the UNRESIZED desktop cards, so
 * the padding is reflowed here rather than there — 60px of inline padding
 * would leave a 210px measure at 390. docs/ai/responsive-decisions.md. */

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

@media (max-width: 599px) {
	.o-cowork-paths {
		--o-cowork-paths-lead: var(--o-space-xl);
		--o-cowork-paths-gap: var(--o-space-lg);
		--o-cowork-paths-gutter: var(--o-space-md);
	}

	.o-cowork-card {
		--o-cowork-card-pad-inline: var(--o-space-md);
		--o-cowork-card-pad-block: var(--o-space-lg);

		border-radius: var(--o-radius-lg);
	}

	.o-button.o-cowork-card__cta {
		min-block-size: 60px;
	}
}