@import '@resources/index.css';

.supt-section-text-media {
	@extend %grid;
	--supt-section-text-media-background-color: $color-interface-grey-20;
	@mixin clamp --supt-section-text-media-padding, 80, 160, $xxs-breakpoint,
		$lg-breakpoint;

	padding: var(--supt-section-text-media-padding) 0;
	background-color: $color-white;

	&__media {
		grid-column: 1 / span 12;

		@media screen and (min-width: $xs-breakpoint) {
			grid-column: 2 / span 10;
		}

		@media screen and (min-width: $sm-breakpoint) {
			grid-column: 3 / span 8;
		}

		@media screen and (min-width: $md-breakpoint) {
			grid-column: 1 / span 6;
		}

		@media screen and (min-width: $lg-breakpoint) {
			grid-column: 2 / span 5;
		}

		background-color: $color-interface-grey-20;
		border-radius: 32px;
		overflow: hidden;

		.supt-media {
			aspect-ratio: 1 / 1;
			margin-bottom: 0;
		}

		.supt-media,
		.supt-media__image {
			height: 100%;
		}

		.supt-figure__image,
		.supt-image-edit__image-preview,
		video {
			width: 100%;
			height: 100%;
			object-fit: cover;
			display: block;
		}
	}

	&__text {
		@mixin clamp --supt-section-text-media-padding-vertical, 48, 64,
			$xxs-breakpoint, $lg-breakpoint;
		@mixin clamp --supt-section-text-media-padding-horizontal, 40, 80,
			$xxs-breakpoint, $lg-breakpoint;

		grid-column: 1 / span 12;

		@media screen and (min-width: $xs-breakpoint) {
			grid-column: 2 / span 10;
		}

		@media screen and (min-width: $sm-breakpoint) {
			grid-column: 3 / span 8;
		}

		@media screen and (min-width: $md-breakpoint) {
			grid-column: 7 / span 6;
		}

		@media screen and (min-width: $lg-breakpoint) {
			grid-column: 7 / span 5;
		}

		background-color: var(--supt-section-text-media-background-color);
		border-radius: 32px;

		padding: var(--supt-section-text-media-padding-vertical)
			var(--supt-section-text-media-padding-horizontal);

		aspect-ratio: 1 / 1;

		display: flex;
		flex-direction: column;
		justify-content: space-between;
		gap: 56px;

		position: relative;

		&__group {
			display: flex;
			flex-direction: column;
			gap: 16px;

			@media screen and (min-width: $sm-breakpoint) {
				gap: 24px;
			}

			.supt-section__title {
				@extend %t-ml;
				text-wrap: balance;
				text-align: left;
				margin-bottom: unset;
			}
			&__description {
				@extend %t-sm-normal;
			}
		}

		.supt-button {
			width: max-content;
		}
	}

	&__button {
		&.supt-button-primary {
			position: static;
		}

		&::after {
			content: ' ';

			display: block;

			width: 100%;
			height: 100%;

			position: absolute;
			top: 0;
			left: 0;
		}
	}

	&.-is-highlighted {
		@mixin color-variants --supt-section-text-media-background-color;
	}

	&.-media-right {
		direction: rtl;

		* {
			direction: ltr;
		}
	}

	& + .supt-section.-normal {
		@mixin clamp --section-margin-top, 80, 160, $xxs-breakpoint,
			$lg-breakpoint;
		margin-top: calc(-1 * var(--section-margin-top));
	}
}

/* Remove margin between consecutive text media sections for a grouped appearance */

.supt-section-text-media + .supt-section-text-media {
	--supt-section-text-media-gap: $grid-gap;

	@media screen and (min-width: $sm-breakpoint) {
		--supt-section-text-media-gap: $grid-gap-max;
	}

	padding-top: 0;
	margin-top: calc(
		0px - var(--supt-section-text-media-padding) +
			var(--supt-section-text-media-gap)
	);
}