/* ============================================================
   PAGE — Über uns  (Figma node 0:1003, design width 1920)
   About page composed from shared `page_modules` layouts:
     page_intro  (title/intro — CSS in main.css .page-intro*)
     card_grid   (Achievements 0:1054, reused for Our Goals 0:1101)
     cta         (banner 0:1148, standalone reusable module)
   All values from docs/ueber-uns/blueprint-*.txt. Prefix: .uu-.
   The two card_grid instances differ only in vertical rhythm and the
   Achievements heading tint; both are the ONE reusable module, so the
   per-instance deltas are expressed positionally (module order under
   .site-main), not by page-specific duplicate layouts.
   ============================================================ */

/* ---------- Icon-card grid section (card_grid — Achievements + Our Goals) ---------- */
.uu-cards {
	width: 100%;
}

/* Vertical rhythm, measured section-to-section in figma-audit. Positional:
   the first card_grid follows the page_intro (Achievements); the second
   card_grid follows the first (Our Goals); the CTA follows the second grid. */
.page-intro + .uu-cards { margin-top: 100px; }   /* title-bottom → achievements-top */
.uu-cards + .uu-cards { margin-top: 177px; }     /* achievements-bottom → goals-top */

.uu-cards__inner {
	display: flex;
	flex-direction: column;
	gap: 80px;
}

.uu-cards__head {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* Section heading 48/500. Default #262626 (Our Goals 0:1103); the Achievements
   heading (0:1056) is the slightly softer #333333. */
.uu-cards__heading {
	font-family: var(--font-body);
	font-size: 48px;
	line-height: 72px;
	font-weight: 500;
	color: var(--color-heading); /* #262626 */
}

.page-intro + .uu-cards .uu-cards__heading {
	color: var(--color-text-dark); /* #333333 — Achievements */
}

.uu-cards__intro {
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 27px;
	font-weight: 400;
	color: var(--color-text-muted); /* #59595A */
}

/* 2-column card grid, 30px both axes. */
.uu-cards__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 30px;
}

/* ---------- Icon card (0:1060 etc.) — reusable, 4 in each grid ---------- */
.uu-card {
	display: flex;
	flex-direction: column;
	gap: 30px;
	padding: 50px;
	background: var(--color-white); /* #FFFFFF */
	border-radius: var(--radius-lg); /* 12 */
}

/* Icon tile 66×66 (34px icon + 16px padding). 1px INSIDE border via inset shadow
   so the icon stays exactly centred. */
.uu-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 66px;
	height: 66px;
	padding: 16px;
	border-radius: var(--radius-md); /* 8 */
	background: var(--color-primary-tint-2); /* #FFF9F0 */
	box-shadow: inset 0 0 0 1px var(--color-primary-border); /* #FFEACC */
}

.uu-card__icon img {
	width: 34px;
	height: 34px;
}

.uu-card__text {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.uu-card__heading {
	font-family: var(--font-body);
	font-size: 24px;
	line-height: 36px;
	font-weight: 500;
	color: var(--color-heading); /* #262626 */
}

.uu-card__body {
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 27px;
	font-weight: 400;
	color: var(--color-text-muted); /* #59595A */
}

/* Our-Goals bottom-row card bodies (0:1137, 0:1147) are the marginally darker
   #4C4C4D in Figma — kept exact via the body_alt flag. */
.uu-card__body--alt {
	color: var(--color-text); /* #4C4C4D */
}

/* ---------- CTA banner module (cta — 0:1148) ---------- */
/* Standalone module directly after Our Goals. 80px goals→CTA gap, 150px CTA→footer. */
.uu-cards + .uu-cta-section { margin-top: 80px; }
.uu-cta-section { margin-bottom: 150px; }

.uu-cta {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 300px;
	padding: 80px;
	background: var(--color-white); /* #FFFFFF */
	border-radius: var(--radius-lg); /* 12 */
	overflow: hidden;
}

/* Decorative double-chevron (0:1151, 362×362, #F7F7F8), clipped by the card. */
.uu-cta__deco {
	position: absolute;
	top: -15px;
	right: 230px;
	width: 362px;
	height: 362px;
	z-index: 0;
	pointer-events: none;
}

.uu-cta__deco img {
	width: 362px;
	height: 362px;
}

.uu-cta__text {
	position: relative;
	z-index: 1;
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.uu-cta__heading {
	font-family: var(--font-body);
	font-size: 48px;
	line-height: 57.6px;
	font-weight: 600;
	color: var(--color-heading); /* #262626 */
}

.uu-cta__accent {
	color: var(--color-primary); /* #FF9500 — "Together" */
}

.uu-cta__body {
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 27px;
	font-weight: 400;
	color: var(--color-text); /* #4C4C4D */
}

.uu-cta__btn {
	position: relative;
	z-index: 1;
	flex: none;
}

/* ============================================================
   RESPONSIVE — page-specific `.uu-` sections only. Shared chrome
   (header/footer) and the page_intro title scale via main.css at the
   same 1024/768/480 breakpoints. No Figma mobile frame exists for this
   page → narrow-viewport values are derived, not guessed.
   ============================================================ */

/* ---------- TABLET  max-width: 1024px ---------- */
@media (max-width: 1024px) {
	/* Both icon-card grids: 2-col → single column (first real layout shift). */
	.uu-cards__grid {
		grid-template-columns: 1fr;
	}

	/* CTA: the 300px text↔button gap + 80px padding no longer fit — stack. */
	.uu-cta {
		flex-direction: column;
		align-items: flex-start;
		gap: 40px;
		padding: 50px;
	}
}

/* ---------- MOBILE  max-width: 768px ---------- */
@media (max-width: 768px) {
	/* Tighten the section-to-section rhythm for phone height. */
	.page-intro + .uu-cards { margin-top: 60px; }
	.uu-cards + .uu-cards { margin-top: 60px; }
	.uu-cards + .uu-cta-section { margin-top: 60px; }
	.uu-cta-section { margin-bottom: 80px; }

	.uu-cards__inner { gap: 60px; }
	.uu-card {
		padding: 30px;
		gap: 24px;
	}

	.uu-cards__heading {
		font-size: 32px;
		line-height: 44px;
	}
	.uu-card__heading {
		font-size: 22px;
		line-height: 32px;
	}

	.uu-cta {
		gap: 30px;
		padding: 40px;
	}
	.uu-cta__heading {
		font-size: 32px;
		line-height: 40px;
	}
}

/* ---------- SMALL MOBILE  max-width: 480px ---------- */
@media (max-width: 480px) {
	.uu-cards__heading {
		font-size: 28px;
		line-height: 38px;
	}
	.uu-cards__intro {
		font-size: 16px;
		line-height: 24px;
	}

	.uu-card {
		padding: 24px;
		gap: 20px;
	}
	.uu-card__heading {
		font-size: 20px;
		line-height: 30px;
	}
	.uu-card__body {
		font-size: 16px;
		line-height: 24px;
	}

	.uu-cta {
		gap: 24px;
		padding: 28px;
	}
	.uu-cta__heading {
		font-size: 26px;
		line-height: 34px;
	}
	.uu-cta__body {
		font-size: 16px;
		line-height: 24px;
	}
}