/* ==========================================================================
   O NÁS

   Užší ľavý stĺpec so značkou, širší pravý s textom. Pomer 0.85 : 1.15
   je z dizajnu — text má dostať viac miesta ako obrázok.
   ========================================================================== */

.cpx-about__inner {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: var(--cpx-space-64) calc(var(--cpx-space-64) + var(--cpx-space-8));
	align-items: center;
}

/* ---- Ľavý stĺpec -------------------------------------------------------- */

/*
 * `isolation` je tu nutná, nie kozmetická: bez nej by svetlo so
 * `z-index: -1` prepadlo z tohto stĺpca von a prekrylo by obrázok.
 */
.cpx-about__brand {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	gap: var(--cpx-space-16);
}

/* Rozptýlené modré svetlo za nadpisom — to isté, čo drží hero pokope. */
.cpx-about__brand::before {
	content: "";
	position: absolute;
	inset: 26% 8% 6%;
	z-index: -1;
	pointer-events: none;
	background: radial-gradient(closest-side, rgba(0, 174, 239, 0.30), transparent 72%);
	filter: blur(18px);
}

.cpx-about__note p {
	font-size: var(--cpx-fs-body);
	line-height: var(--cpx-lh-loose);
	color: var(--cpx-text-faint);
}

.cpx-about__note em {
	font-style: italic;
	color: var(--cpx-text-muted);
}

.cpx-about__figure {
	margin: 0;
}

.cpx-about__figure img {
	display: block;
	width: 100%;
	max-width: 360px;
	height: auto;
}

/* ---- Pravý stĺpec ------------------------------------------------------- */

.cpx-about__body {
	display: flex;
	flex-direction: column;
	gap: var(--cpx-space-26);
}

.cpx-about__lead {
	max-width: 56ch;
	font-size: var(--cpx-fs-lead);
	line-height: 1.62;
	color: var(--cpx-text);
}

.cpx-about__text p {
	max-width: 60ch;
	font-size: var(--cpx-fs-base);
	line-height: var(--cpx-lh-loose);
	color: var(--cpx-text-muted);
}

.cpx-about__text p + p {
	margin-top: var(--cpx-space-16);
}

/* ---- Čísla -------------------------------------------------------------- */

/*
 * Medzery v mriežke tvoria deliace linky (`gap: 1px` nad podfarbením),
 * takže medzi dlaždicami nie je dvojitý okraj.
 */
.cpx-about__stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow: hidden;
	border: 1px solid var(--cpx-border-subtle);
	border-radius: var(--cpx-radius-lg);
	background: var(--cpx-border-subtle);
}

.cpx-about__stat {
	display: flex;
	flex-direction: column;
	gap: var(--cpx-space-4);
	padding: var(--cpx-space-20);
	background: var(--cpx-surface-overlay);
}

.cpx-about__stat-value {
	font-family: var(--cpx-font-mono);
	font-size: var(--cpx-fs-metric);
	font-weight: var(--cpx-weight-medium);
	line-height: 1.05;
	color: var(--cpx-tone, var(--cpx-accent));
}

.cpx-about__stat-label {
	font-size: var(--cpx-fs-small);
	line-height: 1.5;
	color: var(--cpx-text-faint);
}

@media (max-width: 900px) {
	.cpx-about__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.cpx-about__brand {
		max-width: 520px;
	}
}

@media (max-width: 520px) {
	.cpx-about__stats {
		grid-template-columns: 1fr;
	}
}