/*
 * Heidesee Intro-Statement widget — Figma "Section 1": a large rich-text
 * statement, two columns (bold lead + body) and the circular text badge in the
 * lower left that rotates on scroll (assets/intro.js). See widgets/class-intro.php.
 */

/* Same horizontal inset as hero caption and header (--gutter), full width —
   the section container must not add its own left/right padding. */
.hd-intro {
	color: var(--hd-intro-color, var(--c-graphit));
	padding-inline: var(--gutter);
}

/* --- Big statement (rich text) --- */
.hd-intro__statement {
	max-width: 960px;
	font-size: clamp(30px, 4vw, 50px);
	line-height: 1.14;
	font-weight: var(--fw-normal);
	margin-bottom: clamp(48px, 7vw, 96px);
}

.hd-intro__statement p {
	margin: 0;
}

/* --- Two columns --- */
.hd-intro__cols {
	display: grid;
	/* minmax(0,1fr) forces an exact 50/50 split — plain 1fr lets the wide
	   min-content of long German compounds pull the right column wider, which
	   made this block's columns unequal vs. the Kennzahlen text below it. */
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--hd-col-gap);
	align-items: start;
}

/* Left: short bold, uppercase lead */
.hd-intro__lead {
	font-size: var(--fs-body);
	line-height: 1.5;
	font-weight: var(--fw-bold);
	letter-spacing: 1px;
	text-transform: uppercase;
}

/* Right: body copy */
.hd-intro__body {
	font-size: var(--fs-body);
	line-height: 1.6;
}

.hd-intro__lead p,
.hd-intro__body p {
	margin: 0 0 1em;
}

.hd-intro__lead > :last-child,
.hd-intro__body > :last-child,
.hd-intro__statement > :last-child {
	margin-bottom: 0;
}

/* Shared inline formatting */
.hd-intro strong,
.hd-intro b {
	font-weight: var(--fw-bold);
}

.hd-intro em,
.hd-intro i {
	font-style: italic;
}

/* --- Circle badge --- */
.hd-intro__badge {
	margin-top: clamp(40px, 6vw, 96px);
}

.hd-intro__circle {
	display: block;
	width: 230px; /* fallback; the widget's Kreisgröße control overrides via post-CSS */
	height: auto;
	transform-origin: 50% 50%;
	will-change: transform;
}

@media (max-width: 767px) {
	/* Dissolve the two columns so lead, body and badge become direct siblings
	   we can reorder to the Figma-mobile order: lead → body → badge (bottom right). */
	.hd-intro__cols {
		display: flex;
		flex-direction: column;
		gap: clamp(28px, 8vw, 48px);
	}
	.hd-intro__col {
		display: contents;
	}
	.hd-intro__lead {
		order: 1;
	}
	.hd-intro__body {
		order: 2;
	}
	.hd-intro__badge {
		order: 3;
		align-self: flex-end;
		margin-top: clamp(8px, 3vw, 24px);
	}
}

/* Respect reduced-motion: JS also skips, this is the CSS safety net. */
@media (prefers-reduced-motion: reduce) {
	.hd-intro__circle {
		transform: none !important;
	}
}