/*
 * Heidesee Text-Spalten widget — the two-column intro/detail block below the
 * Kennzahlen circles (Figma Section 3). Thin rule per column, small uppercase
 * label, then large intro copy (left) or body/bullet copy (right). Full width
 * with the same --gutter inset as hero and header. See
 * widgets/class-text-columns.php.
 */

/* Columns are capped and the whole block centers on the page (customer
   request 2026-08: content should not sit at the left page edge).
   margin-inline:auto also centers the box itself if an instance caps it
   with a max-width via Elementor custom CSS. */
.hd-cols {
	color: var(--hd-cols-color, var(--c-kalkstein));
	margin-inline: auto;
	padding-inline: var(--gutter);
	display: grid;
	grid-template-columns: repeat(var(--hd-cols-count, 2), minmax(0, 620px));
	justify-content: center;
	gap: var(--hd-col-gap);
}

.hd-cols__col--line {
	border-top: 2px solid currentColor;
	padding-top: clamp(28px, 3vw, 44px);
}

.hd-cols__label {
	margin: 0 0 clamp(24px, 3vw, 40px);
	font-size: 15px;
	font-weight: var(--fw-bold);
	letter-spacing: 1.5px;
	text-transform: uppercase;
}

/* Body: shared rich-text rules */
.hd-cols__body > :first-child {
	margin-top: 0;
}

.hd-cols__body > :last-child {
	margin-bottom: 0;
}

.hd-cols__body p {
	margin: 0 0 1em;
}

.hd-cols__body strong,
.hd-cols__body b {
	font-weight: var(--fw-bold);
}

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

.hd-cols__body a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Large intro copy (left column) */
.hd-cols__body--gross {
	font-size: clamp(24px, 2.4vw, 34px);
	line-height: 1.32;
	font-weight: var(--fw-normal);
}

/* Body / bullet copy (right column) */
.hd-cols__body--normal {
	font-size: var(--fs-body);
	line-height: 1.6;
}

.hd-cols__body ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hd-cols__body li {
	position: relative;
	padding-left: 1.3em;
	margin-bottom: 1.5em;
}

.hd-cols__body li:last-child {
	margin-bottom: 0;
}

.hd-cols__body li::before {
	content: "•";
	position: absolute;
	left: 0.15em;
}

@media (max-width: 767px) {
	.hd-cols {
		grid-template-columns: 1fr;
		gap: clamp(32px, 8vw, 48px);
	}
}