/**
 * About page — hero, Quem Somos and Quem está por trás.
 */

.about-page {
	min-width: 0;
}

.about-hero,
.about-who,
.about-who__media,
.about-author,
.about-author__media {
	min-width: 0;
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* -------------------------------------------------------------------------
 * Hero
 * ------------------------------------------------------------------------- */

.about-hero {
	padding-block: var(--space-3xl);
	text-align: center;
	background-color: var(--color-surface-muted);
}

.about-hero__inner {
	max-width: var(--container-content);
}

.about-hero__eyebrow {
	margin: 0 0 var(--space-sm);
	color: var(--color-brand-primary);
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-transform: uppercase;
}

.about-hero__title {
	margin: 0;
	color: var(--color-text);
	font-size: var(--wp--preset--font-size--4-xl, clamp(2.5rem, 2rem + 2.5vw, 4rem));
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.03em;
	overflow-wrap: break-word;
}

/* -------------------------------------------------------------------------
 * Quem Somos / brand presentation
 * ------------------------------------------------------------------------- */

.about-who {
	padding-block: var(--space-section);
	background-color: var(--color-surface);
}

.about-who__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-xl);
	align-items: center;
}

.about-who__content {
	min-width: 0;
}

.about-who__eyebrow {
	margin: 0 0 var(--space-sm);
	color: var(--color-brand-primary);
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-transform: uppercase;
}

.about-who__title {
	margin: 0 0 var(--space-md);
	color: var(--color-text);
	font-size: var(--wp--preset--font-size--3-xl, clamp(1.875rem, 1.6rem + 1.2vw, 2.5rem));
	font-weight: 600;
	line-height: 1.2;
	overflow-wrap: break-word;
}

.about-who__text {
	margin: 0 0 var(--space-md);
	max-width: 38rem;
	color: var(--color-text);
	font-size: 1rem;
	line-height: 1.6;
	overflow-wrap: break-word;
}

.about-who__text:last-child {
	margin-block-end: 0;
}

.about-who__media {
	width: 100%;
	margin: 0;
}

.about-who__image,
.about-who__placeholder {
	display: block;
	width: 100%;
	/* Prototype mobile image frame: 390px. */
	height: 24.375rem;
	object-fit: cover;
	object-position: center;
	border-radius: var(--radius-sm, 4px);
}

.about-who__placeholder {
	background-image: linear-gradient(
		160deg,
		var(--color-surface-muted) 0%,
		color-mix(in srgb, var(--color-brand-primary) 28%, var(--color-surface-muted)) 100%
	);
}

@media (min-width: 48.875rem) {
	.about-who__grid {
		grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
		gap: var(--space-3xl);
	}

	.about-who__image,
	.about-who__placeholder {
		/* Prototype desktop image frame: 560px. */
		height: 35rem;
	}
}

/* -------------------------------------------------------------------------
 * Quem está por trás
 * ------------------------------------------------------------------------- */

.about-author {
	padding-block: var(--space-section);
	background-color: var(--color-surface-muted);
	scroll-margin-top: var(--space-md);
}

.admin-bar .about-author {
	scroll-margin-top: calc(32px + var(--space-md));
}

@media screen and (max-width: 782px) {
	.admin-bar .about-author {
		scroll-margin-top: calc(46px + var(--space-md));
	}
}

.about-author__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-xl);
	align-items: center;
}

.about-author__content {
	min-width: 0;
}

.about-author__eyebrow {
	margin: 0 0 var(--space-sm);
	color: var(--color-brand-primary);
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-transform: uppercase;
}

.about-author__title {
	margin: 0 0 var(--space-md);
	color: var(--color-text);
	font-size: var(--wp--preset--font-size--3-xl, clamp(1.875rem, 1.6rem + 1.2vw, 2.5rem));
	font-weight: 600;
	line-height: 1.2;
	overflow-wrap: break-word;
}

.about-author__name {
	margin: 0 0 var(--space-md);
	color: var(--color-text);
	font-size: var(--wp--preset--font-size--lg, 1.125rem);
	font-weight: 600;
	line-height: 1.4;
}

.about-author__text {
	margin: 0 0 var(--space-md);
	max-width: 38rem;
	color: var(--color-text);
	font-size: 1rem;
	line-height: 1.6;
	overflow-wrap: break-word;
}

.about-author__text:last-child,
.about-author__quote:last-child,
.about-author__social:last-child {
	margin-block-end: 0;
}

.about-author__quote {
	margin: var(--space-lg) 0 0;
	padding-inline-start: var(--space-md);
	border-inline-start: 3px solid var(--color-brand-accent);
	color: var(--color-brand-primary);
	font-size: var(--wp--preset--font-size--lg, 1.125rem);
	font-weight: 600;
	line-height: 1.45;
}

.about-author__quote p {
	margin: 0;
	max-width: 38rem;
}

.about-author__social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm) var(--space-md);
	margin: var(--space-lg) 0 0;
	padding: 0;
	list-style: none;
}

.about-author__social a {
	display: inline-flex;
	align-items: center;
	min-height: var(--control-height);
	color: var(--color-link);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.about-author__media {
	width: 100%;
	margin: 0;
}

.about-author__image,
.about-author__placeholder {
	display: block;
	width: 100%;
	/* Prototype mobile image frame: 390px. */
	height: 24.375rem;
	object-fit: cover;
	object-position: center;
	border-radius: var(--radius-sm, 4px);
}

.about-author__placeholder {
	background-image: linear-gradient(
		200deg,
		var(--color-surface-muted) 0%,
		color-mix(in srgb, var(--color-brand-primary) 28%, var(--color-surface-muted)) 100%
	);
}

@media (min-width: 48.875rem) {
	.about-author__grid {
		grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
		gap: var(--space-3xl);
	}

	.about-author__media {
		order: -1;
	}

	.about-author__image,
	.about-author__placeholder {
		/* Prototype desktop image frame: 560px. */
		height: 35rem;
	}
}

/* -------------------------------------------------------------------------
 * Interactions
 * ------------------------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
	.about-who__content a:hover,
	.about-author__content a:hover {
		color: var(--color-brand-primary-dark);
	}
}

.about-who__content a:focus-visible,
.about-author__content a:focus-visible {
	color: var(--color-brand-primary-dark);
	outline: 2px solid var(--color-focus);
	outline-offset: 3px;
}

.about-who__content a:active,
.about-author__content a:active {
	color: var(--color-brand-primary-dark);
}

@media (prefers-reduced-motion: no-preference) {
	.about-who__content a,
	.about-author__content a {
		transition: color var(--transition-fast);
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.about-hero,
	.about-who,
	.about-who__image,
	.about-who__placeholder,
	.about-who__content a,
	.about-author,
	.about-author__image,
	.about-author__placeholder,
	.about-author__content a {
		transition: none;
		transform: none;
		animation: none;
	}
}