/**
* @project: Console Art Cybernetic - https://cacybernetic.github.io
* @fileoverview: Console Art Cybernetic services stylesheet.
* @author: Obrymec - obrymecsprinces@gmail.com
* @supported: DESKTOP, MOBILE
* @file: services.scss
* @created: 2023-06-23
* @updated: 2023-09-28
* @version: 0.0.3
*/

// Custom dependencies.
@import "./_placeholders.scss";
@import "./_animations.scss";
@import "./_variables.scss";

// Services section.
section.services {
	@extend %services-inline-flexbox;
	transform: translate3d(0, 0, 0);
	background-repeat: no-repeat;
	padding: 80px 7% 75px 7%;
	justify-content: center;
	align-items: center;
	width: 100%;
	gap: 30px;
	background: (
		url($services-bg-image-path) bottom 100% right 100%/2000px,
		linear-gradient(
			180deg,
			$services-card-bg-color 0 50%,
			$services-bg-color 50% 100%
		)
	);
	// From 1196 to 1130.
	@media #{$services-1196} {
		background: $services-bg-color;
	}
	// From 1130 to 1025.
	@media #{$services-1130} {
		padding: 40px 3% 35px 3%;
	}
	// From 1025 to 0.
	@media #{$services-1025} {
		padding: 30px 5% 25px 5%;
		flex-direction: column;
		overflow-x: hidden;
	}
	// First service.
	div.service:nth-child(1) {
		// From 1025 to 0.
		@media #{$services-1025} {
			z-index: 2;
		}
	}
	// Second service.
	div.service:nth-child(2) {
		// From 1025 to 0.
		@media #{$services-1025} {
			z-index: 1;
		}
	}
	// Third service.
	div.service:nth-child(3) {
		// From 1025 to 0.
		@media #{$services-1025} {
			z-index: 0;
		}
	}
}

// Service container.
div.service {
	@extend %services-column-flexbox;
	justify-content: space-between;
	background-color: transparent;
	align-items: flex-start;
	border-radius: 4px;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	cursor: pointer;
	margin: 0 auto;
	background-image: linear-gradient(
		141.57deg,
		$services-card-bg-color .86%, 
		hsla(0, 0, 100%, 0) 99.96%
	);
	// Hover effect.
	&:hover {
		background-color: $services-card-bg-color;
		border-bottom-right-radius: 100px;
	}
	// From 1025 to 0.
	@media #{$services-1025} {
		justify-content: center;
		row-gap: 30px;
	}
	// Header.
	div {
		@extend %services-column-flexbox;
		row-gap: 16px;
	}
	// Description.
	div > p {
		line-height: 20px;
		font-weight: 400;
		font-size: 16px;
		// From 1130 to 0.
		@media #{$services-1130} {
			line-height: 18px;
			font-size: 14px;
		}
	}
	// Title.
	div > span {
		letter-spacing: -.6px;
		line-height: 32px;
		font-weight: 600;
		font-size: 24px;
		cursor: pointer;
		// From 1130 to 0.
		@media #{$services-1130} {
			line-height: 22px;
			font-size: 18px;
		}
	}
	// Button.
	button {
		// Move right arrow.
		&:hover > img {
			transform: translate(8px, 0.6px);
		}
		// Right arrow.
		img {
			transform: translate(0, 0.6px);
		}
	}
	// Button text.
	button > span {
		color: $services-btn-bg-color;
		// From 1130 to 0.
		@media #{$services-1130} {
			line-height: 18px;
			font-size: 15px;
		}
	}
}
