/* ==========================================================================
   Vistrix Labs — strona O nas / About (page-templates/template-o-nas.php)
   Źródło: design_handoff_vistrixlabs/O nas.dc.html + About EN.dc.html (1:1).
   Mobile ≤768px: Widoki mobilne.dc.html (sekcja "05 · O nas").
   ========================================================================== */

/* --------------------------------------------------------------------------
   HEADER (O nas)
   -------------------------------------------------------------------------- */
.about-header {
	padding: 88px 56px 64px;
	position: relative;
	overflow: hidden;
}

.about-header__deco-1 {
	right: -120px;
	top: -140px;
	width: 400px;
	height: 400px;
	opacity: .3;
}

.about-header__deco-2 {
	right: 240px;
	top: 200px;
	width: 84px;
	height: 84px;
	opacity: .25;
}

.about-header__inner {
	position: relative;
}

.about-header__title {
	font-size: 76px;
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.0;
	margin: 24px 0 0;
	max-width: 980px;
}

.about-header__lead {
	font-size: 19px;
	line-height: 1.6;
	color: var(--c-body);
	max-width: 620px;
	margin-top: 22px;
}

/* --------------------------------------------------------------------------
   TEAM PHOTO
   -------------------------------------------------------------------------- */
.about-photo {
	padding: 0 56px;
}

.about-photo__frame {
	height: 460px;
	border-radius: var(--radius-card-xl);
	background:
		repeating-linear-gradient(45deg, rgba(20, 19, 16, .06) 0 14px, rgba(20, 19, 16, 0) 14px 28px),
		var(--c-placeholder);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
}

.about-photo__deco {
	left: -70px;
	bottom: -70px;
	width: 220px;
	height: 220px;
	opacity: .5;
}

.about-photo__caption {
	font-family: var(--font-mono);
	font-size: 12.5px;
	color: var(--c-meta);
}

.about-photo__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --------------------------------------------------------------------------
   STORY
   -------------------------------------------------------------------------- */
.about-story {
	padding: 96px 56px;
}

.about-story__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 72px;
}

.about-story__title {
	font-size: 46px;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.08;
	margin: 0;
}

.about-story__para {
	font-size: 17.5px;
	line-height: 1.7;
	color: var(--c-body);
	margin: 0;
}

.about-story__para + .about-story__para {
	margin-top: 18px;
}

/* --------------------------------------------------------------------------
   VALUES (Na czym stoimy / What we stand on — sekcja biała)
   -------------------------------------------------------------------------- */
.about-values {
	background: var(--c-white);
	padding: 96px 56px;
}

.about-values__title {
	font-size: 46px;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: normal;
	margin: 0;
}

.about-values__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 48px;
}

.about-values__card {
	background: var(--c-bg);
	border-radius: var(--radius-card);
	padding: 36px 32px;
}

.about-values__num {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--c-yellow);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 20px;
	flex: none;
}

.about-values__body {
	margin-top: 20px;
}

.about-values__name {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 23px;
	line-height: normal;
	margin: 0;
}

.about-values__desc {
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--c-body);
	margin-top: 10px;
}

/* --------------------------------------------------------------------------
   TEAM (Zespół)
   -------------------------------------------------------------------------- */
.about-team {
	padding: 96px 56px;
}

.about-team__title {
	font-size: 46px;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: normal;
	margin: 0;
}

.about-team__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin-top: 48px;
}

.about-team__card {
	background: var(--c-white);
	border-radius: var(--radius-card);
	overflow: hidden;
}

.about-team__media {
	height: 280px;
	background:
		repeating-linear-gradient(45deg, rgba(20, 19, 16, .06) 0 12px, rgba(20, 19, 16, 0) 12px 24px),
		var(--c-placeholder);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.about-team__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.about-team__caption {
	font-family: var(--font-mono);
	font-size: 11.5px;
	color: var(--c-meta);
}

.about-team__body {
	padding: 22px 26px 26px;
}

.about-team__name {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 20px;
	line-height: normal;
	margin: 0;
}

.about-team__role {
	font-size: 14px;
	line-height: normal;
	color: var(--c-meta);
	margin-top: 3px;
}

/* --------------------------------------------------------------------------
   CTA (wariant O nas — bez leadu i dekoracji, wg makiety)
   -------------------------------------------------------------------------- */
.page-template-template-o-nas .cta-banner {
	padding: 100px 56px;
}

.page-template-template-o-nas .cta-banner__title {
	font-size: 60px;
	max-width: 800px;
}

.page-template-template-o-nas .cta-banner__lead,
.page-template-template-o-nas .cta-banner__deco-1,
.page-template-template-o-nas .cta-banner__deco-2 {
	display: none;
}

.page-template-template-o-nas .cta-banner__btn {
	margin-top: 38px;
}

/* --------------------------------------------------------------------------
   Mobile ≤768px ("Widoki mobilne.dc.html" — 05 · O nas)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {

	/* HEADER */
	.about-header {
		padding: 44px 24px 28px;
	}

	.about-header__deco-1 {
		right: -80px;
		top: -90px;
		width: 220px;
		height: 220px;
	}

	.about-header__deco-2 {
		display: none;
	}

	.about-header__title {
		font-size: 36px;
		letter-spacing: -0.02em;
		line-height: 1.03;
		margin: 14px 0 0;
		max-width: none;
	}

	.about-header__lead {
		font-size: 15px;
		line-height: 1.55;
		margin-top: 12px;
		max-width: none;
	}

	/* TEAM PHOTO */
	.about-photo {
		padding: 0 24px;
	}

	.about-photo__frame {
		height: 200px;
		border-radius: 16px;
	}

	.about-photo__deco {
		left: -40px;
		bottom: -40px;
		width: 110px;
		height: 110px;
	}

	.about-photo__caption {
		font-size: 11px;
	}

	/* STORY */
	.about-story {
		padding: 40px 24px;
	}

	.about-story__grid {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.about-story__title {
		font-size: 26px;
		letter-spacing: -0.015em;
		line-height: 1.12;
	}

	.about-story__para {
		font-size: 15px;
		line-height: 1.65;
	}

	/* VALUES */
	.about-values {
		padding: 40px 24px;
	}

	.about-values__title {
		font-size: 26px;
		letter-spacing: -0.015em;
	}

	.about-values__grid {
		grid-template-columns: 1fr;
		gap: 12px;
		margin-top: 20px;
	}

	/* Karta pozioma: numer po lewej, treść po prawej */
	.about-values__card {
		border-radius: 16px;
		padding: 20px 22px;
		display: flex;
		gap: 14px;
		align-items: flex-start;
	}

	.about-values__num {
		width: 32px;
		height: 32px;
		font-size: 15px;
	}

	.about-values__body {
		margin-top: 0;
	}

	.about-values__name {
		font-size: 17px;
	}

	.about-values__desc {
		font-size: 13.5px;
		line-height: 1.55;
		margin-top: 5px;
	}

	/* TEAM — siatka 2×2 */
	.about-team {
		padding: 40px 24px;
	}

	.about-team__title {
		font-size: 26px;
		letter-spacing: -0.015em;
	}

	.about-team__grid {
		grid-template-columns: 1fr 1fr;
		gap: 12px;
		margin-top: 20px;
	}

	.about-team__card {
		border-radius: 16px;
	}

	.about-team__media {
		height: 140px;
	}

	.about-team__caption {
		font-size: 10px;
	}

	.about-team__body {
		padding: 12px 14px 16px;
	}

	.about-team__name {
		font-size: 14.5px;
	}

	.about-team__role {
		font-size: 11.5px;
		margin-top: 2px;
	}

	/* CTA */
	.page-template-template-o-nas .cta-banner {
		padding: 48px 24px;
	}

	.page-template-template-o-nas .cta-banner__title {
		font-size: 28px;
		letter-spacing: -0.015em;
		line-height: 1.08;
	}

	.page-template-template-o-nas .cta-banner__btn {
		margin-top: 20px;
		font-size: 15px;
		padding: 15px 0;
	}
}

/* Zespół: wariant 2 osób — wyśrodkowane karty */
.about-team__grid--n2 {
	grid-template-columns: repeat(2, minmax(0, 300px));
	justify-content: center;
}
@media (max-width: 768px) {
	.about-team__grid--n2 {
		grid-template-columns: repeat(2, 1fr);
	}
}