@use 'sass:map';
@use '../../../base/maps/tokens' as *;
@use '../../../base/mixins/glass' as glass;
@use '../../../base/mixins/typography' as font;
@use '../../../base/mixins/breakpoints' as break;
@use '../../../base/functions' as *;

.hero-case-study {
	position: relative;

	&-content {
		max-width: brandui-col-spacing(8);
		width: 100%;
		display: flex;
		flex-direction: column;
		gap: var(--padding-extra-large);
		justify-content: center;

		&-wrapper {
			display: flex;
			gap: var(--padding-huge);

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

		.customer-spotlight {
			display: flex;
			flex-wrap: wrap;
			gap: var(--padding-extra-large);

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

			.customer {
				max-width: brandui-col-spacing(3);
			}
		}

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

	&-card {
		max-width: brandui-col-spacing(4);
		width: 100%;
		padding: var(--padding-medium);
		display: flex;
		flex-direction: column;
		gap: var(--padding-medium);
		background-color: var(--ui-fill);

		.company-info {
			display: flex;
			flex-direction: column;
			gap: var(--padding-extra-small);

			&-wrapper {
				padding-bottom: var(--padding-medium);
				display: flex;
				flex-direction: column;
				gap: var(--padding-small);
				border-bottom-width: 0.0625rem;
				border-bottom-style: solid;
				border-color: with-opacity(var(--neutral-6), 30);
			}
		}

		.products-featured {
			a.product-link {
				width: fit-content;
				display: flex;
				gap: var(--padding-extra-small);
				align-items: center;
				text-decoration: none;
				transition: color var(--transition-fast);

				@include font.get-typography(body-bold);

				color: var(--action);

				&:hover {
					color: var(--action-tertiary);
				}
			}
		}

		.products-featured,
		.use-cases {
			display: flex;
			flex-direction: column;
			gap: var(--padding-small);
		}

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