/* ==========================================================================
   MMX-ACC-IMAGE-ACROSS
   Universal card-row component reproducing the Accessotronik
   "Smart Savings", "Top Educational Services", "Components",
   "Instruments & Tools", "Our Services" and "Guarantee / Return Policies"
   content sections through configurable properties.
   ========================================================================== */

.mmx-acc-image-across {
	box-sizing: border-box;
	box-shadow: var(--mmxaia-section-shadow, none);
	border-radius: var(--mmxaia-section-radius, 8px);
	padding: var(--mmxaia-section-padding, 32px);
	background-color: var(--mmxaia-section-bg, transparent);
}

.mmx-acc-image-across *,
.mmx-acc-image-across *::before,
.mmx-acc-image-across *::after {
	box-sizing: border-box;
}

/* Title & Description
   ========================================================================== */

.mmx-acc-image-across__title-wrap,
.mmx-acc-image-across__description-wrap {
	display: flex;
	width: 100%;
}

.mmx-acc-image-across__title {
	display: block;
	margin: 0 0 24px 0;
}

.mmx-acc-image-across__description {
	display: block;
	margin: -12px 0 24px 0;
}

/* Cards Row
   ========================================================================== */

.mmx-acc-image-across__items {
	display: flex;
	flex-direction: row;
	justify-content: var(--mmxaia-justify, space-between);
	align-items: var(--mmxaia-align, flex-start);
	gap: var(--mmxaia-gap, 32px);
	list-style: none;
	margin: 0;
	padding: 0;
}

.mmx-acc-image-across__item {
	box-sizing: border-box;
	border: var(--mmxaia-item-border, none);
	box-shadow: var(--mmxaia-item-shadow, none);
	background-color: var(--mmxaia-item-bg, transparent);
	border-radius: var(--mmxaia-item-radius, 8px);
	padding: var(--mmxaia-item-padding, 24px);
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	flex: 1 1 260px;
	min-width: 0;
}

/* Fixed column count (1-8): overrides the flexible auto-sizing above */
.mmx-acc-image-across[data-columns]:not([data-columns="auto"]) .mmx-acc-image-across__items {
	flex-wrap: wrap;
}

.mmx-acc-image-across[data-columns]:not([data-columns="auto"]) .mmx-acc-image-across__item {
	flex: 0 0 calc((100% - (var(--mmxaia-column-count) - 1) * var(--mmxaia-gap, 32px)) / var(--mmxaia-column-count));
}

/* Image
   ========================================================================== */

.mmx-acc-image-across__item-image {
	display: block;
	overflow: hidden;
	margin-bottom: var(--mmxaia-image-margin-bottom, 24px);
}

.mmx-acc-image-across__item-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: var(--mmxaia-image-fit, cover);
}

/* Image Height (same height for every card image within a row)
   ========================================================================== */

.mmx-acc-image-across {
	--mmxaia-image-size--s: 200px;
	--mmxaia-image-size--m: 220px;
	--mmxaia-image-size--l: 320px;
}

@media screen and (min-width: 768px) {
	.mmx-acc-image-across {
		--mmxaia-image-size--s: 200px;
		--mmxaia-image-size--m: 300px;
		--mmxaia-image-size--l: 450px;
	}
}

@media screen and (min-width: 1200px) {
	.mmx-acc-image-across {
		--mmxaia-image-size--s: 200px;
		--mmxaia-image-size--m: 400px;
		--mmxaia-image-size--l: 600px;
	}
}

.mmx-acc-image-across[data-image-size="s"] .mmx-acc-image-across__item-image {
	height: var(--mmxaia-image-size--s);
}

.mmx-acc-image-across[data-image-size="m"] .mmx-acc-image-across__item-image {
	height: var(--mmxaia-image-size--m);
}

.mmx-acc-image-across[data-image-size="l"] .mmx-acc-image-across__item-image {
	height: var(--mmxaia-image-size--l);
}

.mmx-acc-image-across__item-content {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
	gap: var(--mmxaia-item-content-gap, 0px);
}

/* Heading / Subheading / Description / Link Text
   ========================================================================== */

.mmx-acc-image-across__item-heading {
	display: block;
	margin: 0 0 var(--mmxaia-heading-margin-bottom, 16px) 0;
	font-family: var(--mmxaia-heading-font-family, "Electrolize", sans-serif);
	font-size: var(--mmxaia-heading-font-size, 24px);
	font-weight: var(--mmxaia-heading-font-weight, 400);
	color: var(--mmxaia-heading-color, #1c1c1c);
	line-height: 1.18;
}

.mmx-acc-image-across__item-subheading {
	display: block;
	margin: 0 0 var(--mmxaia-subheading-margin-bottom, 16px) 0;
	max-width: var(--mmxaia-subheading-max-width, 350px);
	font-family: var(--mmxaia-subheading-font-family, "Open Sans", sans-serif);
	font-size: var(--mmxaia-subheading-font-size, 22px);
	font-weight: var(--mmxaia-subheading-font-weight, 400);
	color: var(--mmxaia-subheading-color, #1c1c1c);
	line-height: 1.24;
}

.mmx-acc-image-across__item-description {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--mmxaia-desc-line-clamp, 0);
	overflow: hidden;
	margin: 0 0 var(--mmxaia-desc-margin-bottom, 16px) 0;
	font-family: var(--mmxaia-desc-font-family, "Open Sans", sans-serif);
	font-size: var(--mmxaia-desc-font-size, 20px);
	font-weight: var(--mmxaia-desc-font-weight, 400);
	color: var(--mmxaia-desc-color, #1c1c1c);
	line-height: 1.36;
}

.mmx-acc-image-across__item-description > *:first-child {
	margin-top: 0;
}

.mmx-acc-image-across__item-description > *:last-child {
	margin-bottom: 0;
}

.mmx-acc-image-across__item-link {
	cursor: pointer;
	margin-top: auto;
	align-self: flex-start;
}

/* Text-link variant */
.mmx-acc-image-across__item-link--text-link {
	display: block;
	text-decoration: var(--mmxaia-link-decoration, underline);
	font-family: var(--mmxaia-link-font-family, "Open Sans", sans-serif);
	font-size: var(--mmxaia-link-font-size, 20px);
	font-weight: var(--mmxaia-link-font-weight, 400);
	color: var(--mmxaia-link-color, #1c1c1c);
}

/* Button variant */
.mmx-acc-image-across__item-link--button {
	display: block;
	text-align: center;
	text-decoration: none;
	font-family: var(--mmxaia-link-font-family, "Open Sans", sans-serif);
	font-size: var(--mmxaia-button-font-size, 20px);
	font-weight: var(--mmxaia-button-font-weight, 700);
	color: var(--mmxaia-button-color, #ffffff);
	background-color: var(--mmxaia-button-bg, #d81313);
	border: 1px solid var(--mmxaia-button-bg, #d81313);
	border-radius: var(--mmxaia-button-radius, 10px);
	padding: var(--mmxaia-button-padding, 8px 20px);
	width: max-content;
	max-width: 100%;
}

.mmx-acc-image-across__item-link--button:hover {
	background-color: var(--mmxaia-button-hover-bg, #ffffff);
	color: var(--mmxaia-button-hover-color, #1c1c1c);
	border-color: var(--mmxaia-button-hover-color, #1c1c1c);
}

/* Compact (image beside text) layout on tablet
   ========================================================================== */

@media screen and (max-width: 960px) {
	.mmx-acc-image-across[data-compact-tablet="1"] .mmx-acc-image-across__items {
		flex-direction: column;
	}

	.mmx-acc-image-across[data-compact-tablet="1"] .mmx-acc-image-across__item {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: 16px;
	}

	.mmx-acc-image-across[data-compact-tablet="1"] .mmx-acc-image-across__item-image {
		width: var(--mmxaia-image-width-tablet, 40%);
		order: 1;
	}

	.mmx-acc-image-across[data-compact-tablet="1"] .mmx-acc-image-across__item-heading {
		width: 100%;
		order: 3;
	}

	.mmx-acc-image-across[data-compact-tablet="1"] .mmx-acc-image-across__item-content {
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.mmx-acc-image-across[data-compact-tablet="1"] .mmx-acc-image-across__item-description {
		width: calc(100% - var(--mmxaia-image-width-tablet, 40%) - 7%);
		order: 2;
	}

	.mmx-acc-image-across[data-compact-tablet="1"] .mmx-acc-image-across__item-subheading {
		width: 100%;
		order: 4;
	}

	.mmx-acc-image-across[data-compact-tablet="1"] .mmx-acc-image-across__item-link {
		order: 5;
	}
}

/* Stack cards to a single column on mobile
   ========================================================================== */

@media screen and (max-width: 768px) {
	.mmx-acc-image-across__items {
		flex-direction: column;
	}

	.mmx-acc-image-across[data-columns]:not([data-columns="auto"]) .mmx-acc-image-across__item {
		flex-basis: 100%;
	}

	.mmx-acc-image-across[data-compact-tablet="1"] .mmx-acc-image-across__item {
		flex-direction: row;
	}
}

@media screen and (max-width: 640px) {
	.mmx-acc-image-across[data-compact-tablet="1"] .mmx-acc-image-across__item {
		flex-direction: column;
	}

	.mmx-acc-image-across[data-compact-tablet="1"] .mmx-acc-image-across__item-image,
	.mmx-acc-image-across[data-compact-tablet="1"] .mmx-acc-image-across__item-description {
		width: 100%;
	}

	.mmx-acc-image-across[data-compact-tablet="1"] .mmx-acc-image-across__item-heading {
		order: 2;
	}

	.mmx-acc-image-across[data-compact-tablet="1"] .mmx-acc-image-across__item-subheading {
		order: 3;
	}

	.mmx-acc-image-across[data-compact-tablet="1"] .mmx-acc-image-across__item-description {
		order: 4;
	}

	.mmx-acc-image-across[data-button-full-width="1"] .mmx-acc-image-across__item-link--button {
		width: 100%;
		text-align: center;
	}
}

@media screen and (max-width: 500px) {
	.mmx-acc-image-across__title {
		font-size: calc(var(--mmxaia-heading-font-size, 36px) * 0.78);
	}

	.mmx-acc-image-across__item-description {
		-webkit-line-clamp: initial;
		overflow: visible;
	}
}