/**
 * OSHIDA — about / intro.
 *
 * @figma 2014:2486  «اوشیدا چیست؟» 292 x 65 at (574, 1131.10)
 * @figma 2014:2613  sub-line 751.86 x 33 at (344.07, 1215.09)
 * @figma 2014:2507  download pill 337 x 97 at (553.08, 1324.05)
 * @figma 2014:2509  download glyph 18 x 19 at parent (271, 39)
 *
 * The glyph is CSS geometry, not a drawn path — see the note in
 * template-parts/sections/about/intro.php.
 *
 * Owner: work package C2.
 */

.o-about-intro {
	padding-block-start: 8px; /* hero ends 1122.83, the heading box opens 1131.10 */
}

.o-about-intro__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--o-space-xs);
}

/* 36px is the token ceiling; this heading measures ~40px. */
.o-about-intro__heading .o-section-heading__title {
	font-size: var(--o-about-fs-lead);
}

.o-about-intro__heading .o-section-heading__lede {
	max-inline-size: 752px; /* @figma 2014:2613 */
	font-size: var(--o-fs-body);
	line-height: var(--o-lh-heading);
	text-align: center;
}

.o-about-intro__actions {
	margin: 0;
	margin-block-start: clamp(24px, 3.9vw, 56px); /* 1324.05 - 1248.09 */
}

/* --------------------------------------------------------------------------
 * The download pill
 *
 * 337 x 97 with a hairline edge, a pill radius and no knob — taller and
 * quieter than the ghost variant's 60px default.
 * -------------------------------------------------------------------------- */

.o-about-intro__download.o-button {
	gap: 12px; /* 823.86 (glyph) - 812.42 (label) */
	min-block-size: clamp(64px, 6.7vw, 97px);
	padding-inline: 48px; /* @figma 2014:2508 — 48px each side of the run */
	border-color: var(--o-line-soft);
	background-color: var(--o-veil-card);
	font-size: var(--o-fs-md);
	font-weight: var(--o-fw-black);
	letter-spacing: var(--o-track-tight);
}

.o-about-intro__download.o-button:hover {
	border-color: var(--o-gold-deep);
}

/*
 * The 18 x 19 download mark, reproduced from geometry: a 2px stem, a chevron
 * head made of two diagonal stripes, and the tray under it. Nothing here is a
 * drawn path — CLAUDE.md §3 forbids hand-authoring an SVG we never received,
 * and this is the same call B1 made for the nav burger. Replace with the real
 * export of 2014:2509 when Figma access returns.
 */
.o-about-intro__download .o-button__label::before {
	content: "";
	display: inline-block;
	inline-size: 18px;
	block-size: 19px;
	margin-inline-end: 12px;
	vertical-align: -3px;
	background-image:
		linear-gradient(to bottom, var(--o-gold) 0 100%),
		linear-gradient(45deg, transparent 40%, var(--o-gold) 40% 63%, transparent 63%),
		linear-gradient(135deg, transparent 40%, var(--o-gold) 40% 63%, transparent 63%),
		linear-gradient(to bottom, var(--o-gold) 0 100%);
	background-position: 50% 0, 8% 46%, 92% 46%, 50% 100%;
	background-repeat: no-repeat;
	background-size: 2px 10px, 8px 8px, 8px 8px, 16px 2px;
}

@media (max-width: 599px) {
	.o-about-intro__download.o-button {
		padding-inline: var(--o-space-md);
	}
}