/*
 * en2x Kanal-Erweiterung – structural, instance-independent styles.
 *
 * Coloured box: title on top, then a row of channel links side by side (icon or
 * uploaded image + optional label), wrapping when space is tight and stacking on
 * mobile. Background + text/icon colour come inline per instance (scoped to the
 * unique id); everything here is colour-agnostic (uses inherit / currentColor).
 * The side gutter is the shared token so it aligns to the hero/container edge.
 * Font inherited (Rubik).
 */

.en2x-kanal {
	/* 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: 32px;
	font-family: inherit;
}

.en2x-kanal__title {
	margin: 0 0 18px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: inherit;
}

/* Channel row: side by side, wraps when tight. */
.en2x-kanal__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.en2x-kanal__item-wrap {
	list-style: none;
}

.en2x-kanal__item-wrap::before {
	display: none;
	content: none;
}

/* One channel = icon/image + optional label, in the instance text colour. */
.en2x-kanal__item {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: inherit;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	transition: opacity 0.15s ease;
}

.en2x-kanal__item:hover,
.en2x-kanal__item:focus {
	color: inherit;
	opacity: 0.8;
}

/* Icon takes the text colour (currentColor); uploaded image stays as-is. */
.en2x-kanal__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	line-height: 1;
}

.en2x-kanal__icon i {
	color: inherit;
}

.en2x-kanal__img {
	display: block;
	width: auto;
	height: 26px;
	max-width: 130px;
	object-fit: contain;
}

.en2x-kanal__text {
	min-width: 0;
}

/* ---------------------------------------------------------------------------
 * Responsive: stack the channels on small screens.
 * ------------------------------------------------------------------------- */

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

	.en2x-kanal__list {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}
}