// Variables & Mixins
@import "../../../../themes/everse/assets/sass/base/_variables";
@import "../../../../themes/everse/assets/sass/base/_mixins.scss";

/*-------------------------------------------------------*/
/* Service
/*-------------------------------------------------------*/
.service {
	position: relative;
	height: 100%;
	margin-bottom: 40px;

	&__container {
		border-radius: 5px;
		overflow: hidden;
	}

	&--has-image {
		.service__title,
		.service__text,
		.service__read-more {
			color: #fff;
		}

		&:hover,
		&:focus {
			.service__thumb {
				@include transform(scale(1.2, 1.2));
			}
		}
	}

	&__wrapper {
		position: relative;
		padding: 48px 48px 40px;

		.archive & {
			padding: 48px 0 40px;
		}
	}

	&__thumb {
		display: block;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		@include background-img-cover;

		// make it more specific to fix lazyload
		.service__wrapper & {
			transition: $transition-all;
		}
	}

	&__img-holder {
		position: relative;
		overflow: hidden;
	}

	&__img {
		width: 100%;
	}

	&__title a,
	&__text {
		transition: $transition-all;
	}

	&__content {
		position: relative;
	}

	&__title {
		font-size: 1.5rem;
		margin-bottom: 4px;
	}

	&__text,
	&__text p {
		margin-bottom: 0;
	}

	&__text {
		color: $text-color;
		margin-top: 16px;
		margin-bottom: 6px;
	}

	&__read-more {
		font-size: 0.9375rem;
		transition: $transition-all;

		i {
			vertical-align: middle;
			position: relative;
			top: -1px;
		}
	}

	&__footer {
		position: relative;
		padding-top: 10px;
	}

	// Layout Image
	&-layout--image {
		.service__wrapper {
			height: 480px;
			display: flex;
			flex-direction: column;
		}

		.service__content {
			margin-top: auto;
		}
	}
}