/*
 * en2x Content-Box „Das Konzept im Detail" – structural, instance-independent
 * styles.
 *
 * Box with inner padding: headline on top, intro text, then the list of entries
 * separated by dividers. Per entry: title (primary blue), text, and a single
 * clickable CTA (icon + label) in en2x style. Background + text colour come
 * inline per instance (scoped to the unique id); everything here is colour-
 * agnostic (uses inherit / the primary token / currentColor). The side gutter is
 * the shared token so it aligns to the hero/container edge like the sibling
 * article modules. Font inherited (Rubik).
 */

.en2x-konzept-box {
	/* Self-brought side gutter (same mechanism as the sibling modules) + bottom
	 * rhythm. Fluid width, so it fills a 2/3 or 1/3 column correctly. */
	margin: 0 var(--en2x-side-gutter, 20px) 32px;
	padding: 40px;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.6;
	color: inherit;
}

.en2x-konzept-box__headline {
	margin: 0 0 16px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	color: inherit;
}

/* Intro WYSIWYG. */
.en2x-konzept-box__intro {
	margin: 0 0 24px;
}

.en2x-konzept-box__intro p {
	margin: 0 0 12px;
}

.en2x-konzept-box__intro :last-child {
	margin-bottom: 0;
}

.en2x-konzept-box__intro a {
	color: var(--en2x-color-primary, #221182);
}

/* Entry list. */
.en2x-konzept-box__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.en2x-konzept-box__entry {
	padding: 20px 0;
	list-style: none;
}

/* Kill any theme-injected bullet (Salient styles content <li> with a ::before). */
.en2x-konzept-box__entry::before {
	display: none;
	content: none;
}

.en2x-konzept-box__entry:first-child {
	padding-top: 0;
}

.en2x-konzept-box__entry:last-child {
	padding-bottom: 0;
}

/* Divider between entries: derived from the instance text colour so it works on
 * any background (rgba fallback for browsers without color-mix). */
.en2x-konzept-box__entry + .en2x-konzept-box__entry {
	border-top: 1px solid rgba(37, 15, 81, 0.14);
	border-top: 1px solid color-mix(in srgb, currentColor 16%, transparent);
}

.en2x-konzept-box__entry-title {
	margin: 0 0 6px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--en2x-color-primary, #221182);
}

.en2x-konzept-box__entry-text {
	margin: 0 0 12px;
}

.en2x-konzept-box__entry-text p {
	margin: 0 0 10px;
}

.en2x-konzept-box__entry-text :last-child {
	margin-bottom: 0;
}

/* CTA: icon + label as one inline link in en2x style. */
.en2x-konzept-box__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--en2x-color-primary, #221182);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

a.en2x-konzept-box__cta:hover,
a.en2x-konzept-box__cta:focus {
	text-decoration: underline;
}

.en2x-konzept-box__cta-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	line-height: 1;
}

/* Non-link state (CTA text given but no URL): same look, no pointer affordance. */
.en2x-konzept-box__cta--plain {
	cursor: default;
}

/* ---------------------------------------------------------------------------
 * Responsive: tighten padding on small screens.
 * ------------------------------------------------------------------------- */

/* On desktop the box is the top of the right column and aligns with the left
 * column (no top gap wanted). When the Salient columns collapse, it stacks below
 * the left column's content and needs separation from it. */
@media (max-width: 999px) {
	.en2x-konzept-box {
		margin-top: 32px;
	}
}

@media (max-width: 600px) {
	.en2x-konzept-box {
		padding: 28px;
	}
}