/* ==========================================================================
   MMX-ACC-TEXT-BANNER
   Text-only banner component styled like the Accessotronik card sections.
   Renders heading, description and button/link centered within the banner.
   Content can be laid out horizontally or vertically (text_layout), always
   stacks vertically on tablet & mobile, and supports independently
   toggleable top/bottom corner radii on the container card.
   ========================================================================== */

.mmx-acc-text-banner {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--mmxatb-shadow, none);
	border-top-left-radius: var(--mmxatb-radius-top, 0px);
	border-top-right-radius: var(--mmxatb-radius-top, 0px);
	border-bottom-left-radius: var(--mmxatb-radius-bottom, 0px);
	border-bottom-right-radius: var(--mmxatb-radius-bottom, 0px);
	padding: var(--mmxatb-padding, 32px);
	background-color: var(--mmxatb-bg-color, #ffffff);
	/* --mmxatb-bg-color is also applied here so a gradient function (e.g.
	   linear-gradient(...)) typed into the Background Color field renders as
	   a background-image layer; a plain color value is invalid in this
	   position and is simply ignored, leaving background-color above in
	   effect instead. */
	background-image: var(--mmxatb-bg-image, none), var(--mmxatb-bg-color, none);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
}

.mmx-acc-text-banner *,
.mmx-acc-text-banner *::before,
.mmx-acc-text-banner *::after {
	box-sizing: border-box;
}

/* Background responsive images
   ========================================================================== */

@media screen and (max-width: 39.999em) {
	.mmx-acc-text-banner {
		background-image: var(--mmxatb-bg-image-mobile, var(--mmxatb-bg-image, none)), var(--mmxatb-bg-color, none);
	}
}

@media screen and (min-width: 40em) and (max-width: 59.999em) {
	.mmx-acc-text-banner {
		background-image: var(--mmxatb-bg-image-tablet, var(--mmxatb-bg-image, none)), var(--mmxatb-bg-color, none);
	}
}

/* Content Block
   ========================================================================== */

.mmx-acc-text-banner__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex-wrap: nowrap;
	width: 100%;
	gap: var(--mmxatb-blocks-gap-y, 16px) var(--mmxatb-blocks-gap-x, 16px);
	text-align: center;
	padding-left: 0;
	padding-right: 0;
}

.mmx-acc-text-banner[data-text-layout="horizontal-banner"] .mmx-acc-text-banner__content {
	flex-direction: row;
}

/* Heading & button keep their natural size; the description absorbs the
   remaining space and wraps its own text internally instead of forcing the
   container to wrap onto a new flex line (flex items default to
   min-width: auto, which for text content is its unwrapped width). */
.mmx-acc-text-banner[data-text-layout="horizontal-banner"] .mmx-acc-text-banner__link {
	flex: 0 0 auto;
	min-width: 0;
}

.mmx-acc-text-banner[data-text-layout="horizontal-banner"] .mmx-acc-text-banner__heading,
.mmx-acc-text-banner[data-text-layout="horizontal-banner"] .mmx-acc-text-banner__description {
	flex: 1 1 0%;
	min-width: 0;
	max-width: max-content;
}

/* Text Alignment
   ========================================================================== */

.mmx-acc-text-banner[data-content-align="left"] .mmx-acc-text-banner__content {
	text-align: left;
	align-items: flex-start;
}

.mmx-acc-text-banner[data-content-align="center"] .mmx-acc-text-banner__content {
	text-align: center;
	align-items: center;
}

.mmx-acc-text-banner[data-content-align="right"] .mmx-acc-text-banner__content {
	text-align: right;
	align-items: flex-end;
}

/* Banner Size: content block vertical padding
   ========================================================================== */

.mmx-acc-text-banner[data-banner-size="s"] .mmx-acc-text-banner__content {
	padding-top: 0;
	padding-bottom: 0;
}

.mmx-acc-text-banner[data-banner-size="m"] .mmx-acc-text-banner__content {
	padding-top: 4%;
	padding-bottom: 4%;
}

.mmx-acc-text-banner[data-banner-size="l"] .mmx-acc-text-banner__content {
	padding-top: 6%;
	padding-bottom: 6%;
}

/* Heading & Description
   ========================================================================== */

.mmx-acc-text-banner__heading {
	display: block;
	margin: 0;
	font-family: var(--mmxatb-heading-font-family, "Electrolize", sans-serif);
	font-size: var(--mmxatb-heading-font-size, 36px);
	font-weight: var(--mmxatb-heading-font-weight, 400);
	color: var(--mmxatb-heading-color, #D81313);
	line-height: 1.18;
}

.mmx-acc-text-banner__description {
	margin: 0;
	font-family: var(--mmxatb-desc-font-family, "Open Sans", sans-serif);
	font-size: var(--mmxatb-desc-font-size, 20px);
	font-weight: var(--mmxatb-desc-font-weight, 400);
	color: var(--mmxatb-desc-color, #1c1c1c);
	line-height: 1.36;
}

.mmx-acc-text-banner__description > *:first-child {
	margin-top: 0;
}

.mmx-acc-text-banner__description > *:last-child {
	margin-bottom: 0;
}

/* Link / Button
   ========================================================================== */

.mmx-acc-text-banner__link {
	cursor: pointer;
}

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

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

.mmx-acc-text-banner__link--button:hover {
	background-color: var(--mmxatb-button-hover-bg, #ffffff);
	color: var(--mmxatb-button-hover-color, #1c1c1c);
	border-color: var(--mmxatb-button-hover-color, #1c1c1c);
}

/* Stack vertically on tablet & mobile, regardless of text_layout
   ========================================================================== */

@media screen and (max-width: 960px) {
	.mmx-acc-text-banner[data-text-layout="horizontal-banner"] .mmx-acc-text-banner__content {
		flex-direction: column;
	}

	.mmx-acc-text-banner__description {
		font-size: calc(var(--mmxatb-desc-font-size, 20px) * 0.78);
	}
}

@media screen and (max-width: 640px) {
	.mmx-acc-text-banner__heading {
		font-size: calc(var(--mmxatb-heading-font-size, 36px) * 0.78);
	}

	.mmx-acc-text-banner__description {
		font-size: 16px;
	}
}

@media screen and (max-width: 500px) {
	.mmx-acc-text-banner[data-button-full-width="1"] .mmx-acc-text-banner__link--button {
		width: 100%;
		text-align: center;
	}
}

@media screen and (max-width: 450px) {
	.mmx-acc-text-banner__heading {
		font-size: 18px;
	}

	.mmx-acc-text-banner__link--button {
		font-size: 16px;
	}
}