/* variables specific to current element */

$contextual-page-block-height: 420px;
$contextual-page-block-inset-inline-end: map-deep-get($token-spacer-inset-map, "lg");

.#{$namespace}highlightedArticle {

	/* Save root element context for easy access if nesting is needed */

	$self: &;

	/* properties of current element  + media queries */
	border-radius: map-deep-get($token-radius-map, "24");
	min-height: $contextual-page-block-height;
	padding-top: $contextual-page-block-height*0.5;
	position: relative;
	z-index: z("zero");
	padding-right: $contextual-page-block-inset-inline-end;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	box-shadow: map-deep-get($token-shadow-map, "active");

	@include media-breakpoint-up("lg") {

		padding-right: map-deep-get($token-spacer-unit-map, "48")*2;

	}

	/* Pseudo Elements */

	&::before {
	}

	&::after {
	}

	/*
	Include elements that are linked to the current element but have to reside at the root level of the stylesheet
	(e.g: keyframes)
	*/
	@at-root {
	}


	/* children - write selector in full in comments in order to facilitate search */


	&__img {

		position: absolute;
		z-index: z("deepdivenegative");
		border-radius: inherit;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;

	}

	&__meta {

		@include custom-prop-fallback("color", "sys-color-text-primary-muted")

	}

	&__box {

		@include custom-prop-fallback("background-color", "comp-card-raised-background-color");
		border-top-right-radius: map-deep-get($token-radius-map, "16");
		border-bottom-left-radius: inherit;
		padding: map-deep-get($token-spacer-inset-map, "md");
		display: flex;
		flex-direction: column;
		gap: map-deep-get($token-spacer-stack-max-map, "md");

		@include media-breakpoint-up("lg"){

			flex-direction: row;
			align-items: center;

			padding: map-deep-get($token-spacer-inset-map, "lg");

		}

	}

	// contextualPageBlock__textContent
	&__text {

		flex-grow: 1;

	}

	// contextualPageBlock__title
	&__title {

		// follows same logic as parent

		&::after {

			content: "";
			@extend %logoSeparator;
			margin-top: map-deep-get($token-spacer-stack-max-map, "md");

		}

	}

	&__description {

		margin-top: map-deep-get($token-spacer-stack-max-map, "md");

	}


	/* modifiers */

	&.-shapeBridge,
	&.-shapeTower {

		// follows same logic as base element

		overflow: hidden;

		#{$self}__box {

			position: relative;
			margin-right: -($contextual-page-block-inset-inline-end);
			background-color: transparent;

			@include media-breakpoint-up("sm") {

				max-width: 450px;

			}

			@include media-breakpoint-up("lg") {

				position: static;
				margin-bottom: map-deep-get($token-sizes-unit-map, "160");
				margin-left: map-deep-get($token-sizes-unit-map, "48");

			}

			@include media-breakpoint-up("xl") {

				margin-left: map-deep-get($token-sizes-unit-map, "80");

			}

		}
		
		#{$self}__shape {

			position: absolute;
			z-index: z("negative");

			svg g path {

				@include custom-prop-fallback("fill", "comp-card-raised-background-color");

			}

			&[data-shape-bridge] {

				top: -15%;
				left: 70%;
				transform: translateX(-50%);

				@media screen and (min-width: 430px) {

					left: 50%;

				}

				@include media-breakpoint-up("lg") {

					top: 100%;
					right: 100%;
					left: auto;
					transform: translate(60%, -20%);

				}

				//@include media-breakpoint-up("xl") {
				//
				//	top: -25%;
				//
				//}

				* {

					height: auto;

				}

			}

		}

	}

	// contextualPageBlock -shapeTower
	&.-shapeTower {

		// follows same logic as base element

		#{$self}__box {

			@include media-breakpoint-up("lg") {

				margin-left: auto;

			}

		}

		[data-shape-bridge] {

			@include media-breakpoint-up("lg") {

				display: none;

			}

		}

		[data-shape-tower] {

			display: none;

			@include media-breakpoint-up("lg") {

				display: block;
				top: 100%;
				left: 100%;
				transform: translate(-68%, -32%);

			}
		}

	}

	// contextualPageBlock -shapeBridge
	&.-shapeBridge {

		// follows same logic as base element
		[data-shape-tower] {

			display: none;

		}
	}

	&.-hasGradient {

		&::before {

			content: "";
			position: absolute;
			z-index: z("negative");
			inset:0;
			border-radius: inherit;
			background-image: conic-gradient(from 180deg at 50% 51.31%, rgba(34, 170, 119, 0.15) 0deg, rgba(222, 0, 0, 0.15) 106.875deg, rgba(0, 48, 96, 0.15) 200.62500715255737deg, rgba(0, 111, 255, 0.15) 281.25deg, rgba(34, 170, 119, 0.15) 360deg);

		}

	}

	/* random parent element */
	/* 
	*
	*   Syntax : .randomParentElt & {}
	*
	*/

	/* Pseudo Classes */

	&:hover {
		@media (hover: hover) {

		}
	}

	&:focus {
	}

	&:active {
	}

	&:focus,
	&:active {
	}

}