/*
 * O SIMPulse page glue. design/PAGE-STRUCTURE.md §3, DESIGN-SYSTEM.md §3.3.
 *
 * Everything reusable lives in assets/css/components/ (hero, collage,
 * video-placeholder, car-card, track-pill, gallery, faq). What is left here is
 * the layout only this page has: the hero's two spacing steps, the specs band,
 * the streak pair behind "Autá a trate" and the two trailing rows.
 *
 * No @media queries: the section rhythm is clamp() and every grid is a capped
 * auto-fit, exactly as on the home page.
 */

/* ------------------------------------------------------------- 1. hero */

/*
 * components/hero.css raises the home poster's horizon (50% 42%); the About
 * photo is framed for the centre, as in the prototype.
 */
.sp-about-hero__bg {
	object-position: 50% 50%;
}

/* The About hero copy is full width -- there is no 680px column here. */
.sp-about-hero__copy {
	width: 100%;
}

.sp-about-hero .sp-hero__lead {
	margin-top: var(--sp-7);
}

.sp-about-hero .sp-hero__actions {
	margin-top: var(--sp-11);
}

/* §4.1 / §4.2 About-hero row: clamp(15px,1.4vw,20px) at 16px 32px. */
.sp-about-hero__btn {
	/* TODO token: About-hero button size (DESIGN-SYSTEM §1.2). */
	font-size: clamp(15px, 1.4vw, 20px);
	padding: var(--sp-5) 32px;
}

/* -------------------------------------------------- 2. specs + collage */

.sp-about-specs__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	/* TODO token: split-band column gap clamp(24px,4vw,64px) (§1.3). */
	gap: clamp(24px, 4vw, 64px);
	align-items: center;
}

.sp-about-specs__list {
	display: flex;
	flex-direction: column;
	gap: var(--sp-6);
}

.sp-spec {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-5);
}

/* The skewed bullet of §4.22, at list scale. */
.sp-spec__mark {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	margin-top: var(--sp-2);
	background: var(--sp-red);
	transform: var(--sp-skew);
}

.sp-spec__body {
	min-width: 0;
}

.sp-spec__title {
	margin: 0;
	/* TODO token: About spec title size (DESIGN-SYSTEM §1.2). */
	font-size: clamp(19px, 1.9vw, 28px);
	font-weight: 800;
	/* TODO token: letter-spacing .03em (§1.2). */
	letter-spacing: .03em;
	line-height: var(--sp-lh-tight);
}

.sp-spec__text {
	margin: var(--sp-1) 0 0;
	font-size: var(--sp-fs-base);
	line-height: var(--sp-lh-body);
	/* TODO token: About specs description colour, rgba(255,255,255,0.58) (§1.1). */
	color: rgba(255, 255, 255, 0.58);
}

/* ------------------------------------------------------------ 3. video */

.sp-about-video__frame {
	/* TODO token: heading -> video frame gap clamp(24px,3vw,38px). */
	margin-top: clamp(24px, 3vw, 38px);
}

/* --------------------------------------------------- 4. autá a trate */

/*
 * The streak pair of §4.21: a taller bar plus a shorter one 74px below it,
 * rotated the other way from the home band and with staggered mask stops.
 */
.sp-about-cars__streak {
	top: 18%;
	left: -8%;
	width: 116%;
	height: 52px;
	transform: rotate(6deg);
	background: repeating-linear-gradient(
		90deg,
		rgba(255, 255, 255, 0.05) 0 18px,
		rgba(255, 255, 255, 0.012) 18px 30px
	);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 25%, #000 72%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 25%, #000 72%, transparent);
}

.sp-about-cars__streak--low {
	top: calc(18% + 74px);
	height: 44px;
	background: repeating-linear-gradient(
		90deg,
		rgba(255, 255, 255, 0.04) 0 18px,
		rgba(255, 255, 255, 0.01) 18px 30px
	);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 32%, #000 78%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 32%, #000 78%, transparent);
}

.sp-about-cars__inner {
	position: relative;
}

.sp-about-cars__lead {
	margin: var(--sp-4) 0 0;
	max-width: var(--sp-container-copy);
	font-size: var(--sp-fs-md);
	line-height: var(--sp-lh-body);
	color: var(--sp-text-60);
}

.sp-about-cars .sp-car-grid {
	/* TODO token: heading -> category grid gap clamp(28px,3.5vw,46px). */
	margin-top: clamp(28px, 3.5vw, 46px);
}

/* A micro-label that is also a heading: base.css sets the display face on h3. */
.sp-about-cars__tracks-label {
	margin: var(--sp-12) 0 var(--sp-3);
	font-family: var(--sp-font-body);
	font-style: normal;
	font-weight: 400;
	line-height: var(--sp-lh-body);
}

/* ------------------------------------------------------------- 6. FAQ */

.sp-about-faq {
	/* TODO token: FAQ section bottom padding clamp(28px,3.5vw,52px) (§3.3). */
	padding-block-end: clamp(28px, 3.5vw, 52px);
}

/* --------------------------------------------------- 7. glossary CTA row */

/* The row belongs to the FAQ block above it, so it carries no top padding. */
.sp-about-links {
	/* TODO token: links row bottom padding clamp(28px,3.5vw,56px). */
	padding-block: 0 clamp(28px, 3.5vw, 56px);
}

.sp-about-links__row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
}