@use 'sass:map';
@use '../../../base/maps/tokens' as *;
@use '../../../base/mixins/glass' as glass;
@use '../../../base/mixins/breakpoints' as break;
@use '../../../base/functions' as *;
@use '../../../components/molecules/cards/card' as *;

.feature-cta {
	width: 100%;
	display: flex;
	align-items: center;
	position: relative;

	&-content {
		max-width: brandui-col-spacing(8);
		height: fit-content;
		padding: var(--padding-medium);
		padding-right: 12rem; // Use to offset where Patch stands
		display: flex;
		flex-direction: column;
		gap: var(--padding-extra-small);
		justify-content: center;
		border-width: 0.1875rem;
		border-style: solid;
		border-radius: var(--radius-large) 0 0 var(--radius-large);
		box-shadow: var(--shadow-outline);

		@include glass.border-glass;

		@include break.max-tablet {
			max-width: brandui-col-spacing(12);
			padding-right: unset;
			border-radius: var(--radius-large) var(--radius-large) 0 0;
		}
	}

	&-header-group {
		display: flex;
		flex-direction: column;
		gap: var(--padding-extra-small);
	}

	&-card {
		@extend .card;

		width: 100%;
		margin-left: -0.5rem;

		@include break.max-tablet {
			max-width: brandui-col-spacing(12);
			margin-left: unset;
			margin-top: -0.5rem;
		}
	}

	.card-wrapper {
		max-width: brandui-col-spacing(4);
		width: 100%;
		position: relative;
		isolation: isolate;

		.patch-wrapper {
			max-width: brandui-col-spacing(4);
			width: 100%;
			position: absolute;
			bottom: 0;
			left: -16rem;
			z-index: -1;

			@include break.max-tablet {
				display: none;
			}
		}

		@include break.max-tablet {
			max-width: brandui-col-spacing(12);
		}
	}

	@include break.max-tablet {
		flex-direction: column;
	}
}