/* Spalten & Abstände kommen pro Instanz aus dem Template (grid-template-columns). */

/*
 * Swiper-Kernlayout nur unterhalb .imc-card-grid-widget--mobile-slider (kein globales swiper-bundle.css,
 * damit Theme-Slider (.swiper außerhalb dieses Wrappers) unverändert bleiben).
 */
.imc-card-grid-widget--mobile-slider .imc-card-grid-widget__swiper.swiper {
	position: relative;
	overflow: visible;
	list-style: none;
	padding: 0;
	margin-left: auto;
	margin-right: auto;
	z-index: 1;
	display: block;
}

.imc-card-grid-widget--mobile-slider .imc-card-grid-widget__swiper .swiper-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	z-index: 1;
	display: flex;
	transition-property: transform;
	transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
	box-sizing: content-box;
	transform: translate3d(0, 0, 0);
}

.imc-card-grid-widget--mobile-slider .imc-card-grid-widget__swiper.swiper-horizontal {
	touch-action: pan-y;
}

.imc-card-grid-widget--mobile-slider .imc-card-grid-widget__swiper .swiper-slide {
	flex-shrink: 0;
	width: 100%;
	height: 100%;
	position: relative;
	transition-property: transform;
	display: block;
}

.imc-card-grid-widget--mobile-slider .imc-card-grid-widget__swiper.swiper-autoheight,
.imc-card-grid-widget--mobile-slider .imc-card-grid-widget__swiper.swiper-autoheight .swiper-slide {
	height: auto;
}

.imc-card-grid-widget--mobile-slider .imc-card-grid-widget__swiper.swiper-autoheight .swiper-wrapper {
	align-items: flex-start;
	transition-property: transform, height;
}

/* Mobile-Slider: Steuerung nur unter 768px (analog Theme „Update“-Widgets); Fallback falls Theme-Styles fehlen */
.imc-card-grid-widget--mobile-slider .imc-card-grid-widget__swiper-controls {
	display: none;
}

@media (max-width: 767px) {
	.imc-card-grid-widget--mobile-slider:not(.imc-card-grid-widget--slider-single) .imc-card-grid-widget__swiper-controls {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 30px;
	}

	.imc-card-grid-widget--mobile-slider .imc-card-grid-widget__swiper-controls .swiper-pagination {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		position: relative;
		top: unset;
		right: unset;
		bottom: unset;
		left: unset;
		inset: unset;
		width: auto;
		max-width: none;
		margin: 0;
		transform: none;
		gap: 8px;
	}

	.imc-card-grid-widget--mobile-slider .imc-card-grid-widget__swiper-controls .swiper-pagination .swiper-pagination-bullet {
		cursor: pointer;
		display: block;
		background-color: var(--grey_ultra_light_update, rgba(242, 242, 242, 1));
		border: 1px solid var(--grey_ultra_light_update, rgba(242, 242, 242, 1));
		border-radius: 4px;
		height: 8px;
		width: 8px;
		transition: background-color 350ms ease, border-color 350ms ease;
		opacity: 1;
	}

	.imc-card-grid-widget--mobile-slider .imc-card-grid-widget__swiper-controls .swiper-pagination .swiper-pagination-bullet:hover {
		border-color: var(--imc_orange, rgba(255, 70, 55, 1));
	}

	.imc-card-grid-widget--mobile-slider .imc-card-grid-widget__swiper-controls .swiper-pagination .swiper-pagination-bullet-active {
		background-color: var(--imc_orange, rgba(255, 70, 55, 1));
		border-color: var(--imc_orange, rgba(255, 70, 55, 1));
	}

	.imc-card-grid-widget--mobile-slider .imc-card-grid-widget__swiper-controls .swiper-navigation {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		flex: 0 0 auto;
		gap: 16px;
		margin: 0;
	}

	.imc-card-grid-widget--mobile-slider .imc-card-grid-widget__swiper-controls .swiper-navigation .swiper-button {
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: var(--grey_ultra_light_update, rgba(242, 242, 242, 1));
		border-radius: 4px;
		height: 48px;
		width: 48px;
		position: relative;
		right: unset;
		left: unset;
		top: unset;
		bottom: unset;
		transform: none;
		margin-top: 0;
		padding: 12px;
	}

	/* Swiper-Bundle setzt Nav-Pfeile per ::after (Icon-Font); hier nur die SVGs aus dem Markup nutzen */
	.imc-card-grid-widget--mobile-slider .imc-card-grid-widget__swiper-controls .swiper-navigation .swiper-button::before,
	.imc-card-grid-widget--mobile-slider .imc-card-grid-widget__swiper-controls .swiper-navigation .swiper-button::after {
		display: none !important;
		content: none !important;
	}
}

/* Layout-Option: Cards nicht auf volle Zeilenhöhe strecken (nur Inhaltshöhe). */
.imc-card-grid-widget--cards-natural-height {
	align-items: start;
}

.imc-card-grid-widget__card {
	display: flex;
	flex-direction: column;
	gap: var(--imc-grid-row-gap, 24px);
	min-width: 0;
	box-sizing: border-box;
}

/* Zweispaltige Cards: äußere Card ist Block, Ausrichtung auf Spalten-Stacks */
.imc-card-grid-widget__card--two-col {
	display: block;
}

/* Gleiche Zeilenhöhe für beide Spalten, damit vertikale Ausrichtung (Mitte/Unten/…) sich auf die Spalten zueinander bezieht. */
.imc-card-grid-widget__card-cols--two {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--imc-card-two-col-gap, var(--imc-grid-row-gap, 24px));
	align-items: stretch;
	min-width: 0;
}

.imc-card-grid-widget__card-cols--two > .imc-card-grid-widget__column {
	align-self: stretch;
	min-height: 0;
}

.imc-card-grid-widget__column {
	display: flex;
	flex-direction: column;
	gap: var(--imc-grid-row-gap, 24px);
	min-width: 0;
}

@media (min-width: 768px) {
	.imc-card-grid-widget__card-cols--swapped .imc-card-grid-widget__column--0 {
		order: 2;
	}

	.imc-card-grid-widget__card-cols--swapped .imc-card-grid-widget__column--1 {
		order: 1;
	}
}

@media (max-width: 767px) {
	.imc-card-grid-widget__card-cols--two {
		grid-template-columns: 1fr;
	}

	.imc-card-grid-widget__card-cols--swapped .imc-card-grid-widget__column--0,
	.imc-card-grid-widget__card-cols--swapped .imc-card-grid-widget__column--1 {
		order: unset;
	}

	.imc-card-grid-widget__card--mobile-col1-first .imc-card-grid-widget__column--0 {
		order: 2;
	}

	.imc-card-grid-widget__card--mobile-col1-first .imc-card-grid-widget__column--1 {
		order: 1;
	}
}

.imc-card-grid-widget__card--two-col.imc-card-grid-widget__card--h-left .imc-card-grid-widget__column {
	align-items: flex-start;
}

.imc-card-grid-widget__card--two-col.imc-card-grid-widget__card--h-center .imc-card-grid-widget__column {
	align-items: center;
}

.imc-card-grid-widget__card--two-col.imc-card-grid-widget__card--h-right .imc-card-grid-widget__column {
	align-items: flex-end;
}

.imc-card-grid-widget__card--two-col.imc-card-grid-widget__card--h-stretch .imc-card-grid-widget__column {
	align-items: stretch;
}

.imc-card-grid-widget__card--two-col.imc-card-grid-widget__card--v-start .imc-card-grid-widget__column {
	justify-content: flex-start;
}

.imc-card-grid-widget__card--two-col.imc-card-grid-widget__card--v-center .imc-card-grid-widget__column {
	justify-content: center;
}

.imc-card-grid-widget__card--two-col.imc-card-grid-widget__card--v-end .imc-card-grid-widget__column {
	justify-content: flex-end;
}

.imc-card-grid-widget__card--two-col.imc-card-grid-widget__card--v-between .imc-card-grid-widget__column {
	justify-content: space-between;
}

/* Card-Einstellungen: horizontale Ausrichtung der Slots (align-items, Spalten-Flex) */
.imc-card-grid-widget__card--h-left {
	align-items: flex-start;
}

.imc-card-grid-widget__card--h-center {
	align-items: center;
}

.imc-card-grid-widget__card--h-right {
	align-items: flex-end;
}

.imc-card-grid-widget__card--h-stretch {
	align-items: stretch;
}

/* Vertikale Verteilung der Slots (justify-content) */
.imc-card-grid-widget__card--v-start {
	justify-content: flex-start;
}

.imc-card-grid-widget__card--v-center {
	justify-content: center;
}

.imc-card-grid-widget__card--v-end {
	justify-content: flex-end;
}

.imc-card-grid-widget__card--v-between {
	justify-content: space-between;
}

.imc-card-grid-widget__slot {
	min-width: 0;
}

.imc-card-grid-widget--use-subgrid .imc-card-grid-widget__slot[data-sync-group]:not([data-sync-group='none']) {
	position: relative;
}

/*
 * Höhengruppen-Trenner: kein sichtbarer Inhalt, soll aber auch keinen zusätzlichen
 * Zeilenabstand erzeugen (sonst wirkt row-gap doppelt: vor und nach dem Slot).
 * display: contents = kein Flex-Item → nur ein Abstand zwischen den Inhalts-Slots.
 */
.imc-card-grid-widget__slot--height-group-separator {
	display: contents;
	margin: 0;
	padding: 0;
	border: none;
	overflow: visible;
	pointer-events: none;
}

/* Fallback ohne display:contents: einen row-gap visuell ausgleichen */
@supports not (display: contents) {
	.imc-card-grid-widget__slot--height-group-separator {
		display: block;
		flex: 0 0 auto;
		height: 0;
		overflow: hidden;
		margin-block: calc(-0.5 * var(--imc-grid-row-gap, 24px));
	}
}