/*
 * Topic pages (page-topic.php)
 *
 * Loaded only on pages using the Topic template. Everything is scoped
 * under .topic so none of it leaks into the rest of the site.
 */

.topic {
	--topic-page-bg: #f2f2f2;      /* same grey as the backgrounds of the visuals */
	--topic-hero-bg: #0e4a58;      /* dark petrol */
	--topic-hero-text: #fff;
	--topic-hero-muted: #d3e9ec;   /* intro and KPI labels */
	--topic-hero-accent: #7be2d1;  /* the "Thema" label and KPI units */

	background: var(--topic-page-bg);
}

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

.topic .topic-hero {
	background: var(--topic-hero-bg);
	color: var(--topic-hero-text);
	padding: 48px 0 56px;
}

.topic .topic-hero__content {
	max-width: 900px;
}

.topic .topic-hero__label {
	color: var(--topic-hero-accent);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.3;
	text-transform: uppercase;
	margin: 0 0 8px;
}

.topic .topic-hero__title {
	color: var(--topic-hero-text);
	font-size: 2.75rem;
	font-weight: 700;
	line-height: 1.1;
	margin: 0 0 16px;
}

.topic .topic-hero__intro {
	color: var(--topic-hero-muted);
	font-size: 1.25rem;
	line-height: 1.5;
	margin: 0;
}

/* KPIs */
.topic .topic-hero__kpis {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	list-style: none;
	margin: 40px 0 0;
	padding: 0;
}

.topic .topic-kpi {
	margin: 0;
	padding: 0;
}

.topic .topic-kpi p {
	margin: 0;
}

.topic .topic-kpi__value {
	font-size: 1.25rem;
	line-height: 1.2;
}

.topic .topic-kpi__value strong {
	font-size: 1.75rem;
	font-weight: 700;
}

.topic .topic-kpi__value span {
	color: var(--topic-hero-accent);
}

.topic .topic-kpi__label {
	color: var(--topic-hero-muted);
	font-size: 0.9375rem;
	line-height: 1.35;
	margin-top: 4px;
}

/* Story ----------------------------------------------------------------- */

.topic .topic-story {
	padding: 48px 0 64px;
}

/* Spacing between columns (the editor has no block spacing control here) */
.topic .wp-block-columns {
	gap: 48px;
}

/*
 * Row block (Group with flex layout): the theme doesn't output the CSS for
 * the Row's "no wrap" setting, so apply it here. Images in a row share the
 * width equally and shrink to fit, instead of keeping their full size.
 */
.topic .wp-block-group.is-layout-flex.is-nowrap {
	flex-wrap: nowrap;
}

/* Spacing between images in a row (the editor has no block spacing control here) */
.topic .wp-block-group.is-layout-flex:has(> .wp-block-image) {
	gap: 80px;
}

.topic .wp-block-group.is-layout-flex > .wp-block-image {
	flex: 1 1 0;
	min-width: 0;
}

.topic .wp-block-group.is-layout-flex > .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
}

/* Responsive ------------------------------------------------------------ */

@media (max-width: 1024px) {
	.topic .wp-block-columns {
		gap: 32px;
	}

	.topic .wp-block-group.is-layout-flex:has(> .wp-block-image) {
		gap: 40px;
	}

	.topic .topic-hero__kpis {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 28px;
	}
}

@media (max-width: 600px) {
	.topic .topic-hero {
		padding: 36px 0 40px;
	}

	.topic .topic-hero__title {
		font-size: 2rem;
	}

	.topic .topic-hero__intro {
		font-size: 1.0625rem;
	}

	.topic .topic-hero__kpis {
		margin-top: 32px;
		gap: 20px;
	}

	.topic .topic-kpi__value strong {
		font-size: 1.5rem;
	}

	.topic .topic-story {
		padding: 32px 0 48px;
	}

	/* A row of images: two per line on phones */
	.topic .wp-block-group.is-layout-flex.is-nowrap:has(> .wp-block-image) {
		flex-wrap: wrap;
	}

	.topic .wp-block-group.is-layout-flex:has(> .wp-block-image) {
		gap: 24px;
	}

	.topic .wp-block-group.is-layout-flex > .wp-block-image {
		flex: 1 1 calc(50% - 12px); /* two per line, minus half the gap */
	}
}