/* ==========================================================================
   SOBRE PAGE
   Estilos especificos da pagina Sobre (page-sobre.php).
   Depende de: tokens.css, base.css, components.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   ABOUT HERO
   -------------------------------------------------------------------------- */
.about-hero {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-16);
	align-items: center;
	position: relative;
	z-index: 1;
}

.about-hero__photo {
	aspect-ratio: 3/4;
	background: var(--bg-secondary);
	border: 1px solid var(--border-primary);
	border-radius: var(--radius-lg);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
}

.about-hero__photo-placeholder {
	font-family: var(--mono);
	font-size: var(--text-6xl);
	font-weight: 700;
	color: var(--border-primary);
}

.about-hero__content h1 {
	font-family: var(--sans);
	font-size: clamp(var(--text-4xl), 4.5vw, var(--text-6xl));
	font-weight: 700;
	color: var(--text-primary);
	line-height: 1.1;
	letter-spacing: -0.035em;
	margin-bottom: var(--sp-6);
}

.about-hero__content .tagline {
	font-family: var(--mono);
	font-size: var(--text-sm);
	color: var(--accent);
	margin-bottom: var(--sp-6);
	letter-spacing: 0.04em;
}

.about-hero__content p {
	font-size: var(--text-lg);
	color: var(--text-subtle);
	line-height: 1.7;
	margin-bottom: var(--sp-4);
}

/* --------------------------------------------------------------------------
   STORY
   -------------------------------------------------------------------------- */
.story {
	max-width: 760px;
	margin: 0 auto;
}

.story p {
	font-size: var(--text-lg);
	color: var(--text-muted);
	line-height: 1.8;
	margin-bottom: var(--sp-6);
}

.story p strong {
	color: var(--text-secondary);
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   VALUES
   -------------------------------------------------------------------------- */
.values-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--sp-6);
}

.value-card {
	background: var(--bg-secondary);
	border: 1px solid var(--border-primary);
	border-radius: var(--radius-lg);
	padding: var(--sp-8);
	transition: all 0.4s var(--ease-out);
}

.value-card:hover {
	border-color: var(--text-faint);
	transform: translateY(-3px);
}

.value-card__number {
	font-family: var(--mono);
	font-size: var(--text-xs);
	color: var(--accent);
	margin-bottom: var(--sp-3);
}

.value-card__title {
	font-family: var(--sans);
	font-size: var(--text-xl);
	font-weight: 700;
	color: var(--text-primary);
	margin-bottom: var(--sp-3);
	letter-spacing: -0.02em;
}

.value-card__desc {
	font-size: var(--text-sm);
	color: var(--text-subtle);
	line-height: 1.7;
}

/* --------------------------------------------------------------------------
   RESPONSIVIDADE
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.about-hero {
		grid-template-columns: 1fr;
		gap: var(--sp-10);
	}

	.about-hero__photo {
		max-width: 400px;
		margin: 0 auto;
	}

	.values-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 768px) {
	.about-hero__photo {
		max-width: 300px;
	}
}