/*
 * DESPRE MINE — template-despre-mine.php (§4.4). Reuses the shared
 * `.site-header` (components.css §7). Mobile-first: base = mobile values,
 * `@media (min-width: 768px)` = desktop.
 */

/* Mobile side gutters (§4.4). */
.about-page {
	padding-left: var(--sp-sm);
	padding-right: var(--sp-sm);
}

@media (min-width: 768px) {
	.about-page {
		padding-left: 0;
		padding-right: 0;
		/* Desktop container (client feedback-01): page was full-width;
		   constrain + center it instead. */
		max-width: 800px; /* client-specified literal (inspector measurement) */
		margin-left: auto;
		margin-right: auto;
	}
}

/* Menu→social gap: mobile 50px, desktop 70px. */
.site-header + .about-page__social {
	margin-top: var(--sp-xl);
}

@media (min-width: 768px) {
	.site-header + .about-page__social {
		margin-top: var(--sp-3xl);
	}
}

/* Social→text gap: mobile 30px (verified fine, left as-is). Centered
   About text. */
.about-page__body {
	margin-top: var(--sp-md);
	text-align: center;
}

@media (min-width: 768px) {
	/* Desktop (client feedback-01): no visible gap between the social
	   icons and the text; client's inspector measurement calls for ~2rem
	   here specifically (not the --sp-md token, a distinct literal). */
	.about-page__body {
		margin-top: 2rem;
	}
}

/* Text→video gap, both breakpoints: 30px. Full-width video. */
.about-page__video {
	margin-top: var(--sp-md);
	width: 100%;
}

.about-page__video-player {
	width: 100%;
}