/* WPJobster Home page SASS file */

.hiw-section-buyer {
	display: flex;

	@include tablet {
		flex-wrap: wrap;
	}

	@include mobile {
		padding-top: 40px;
	}

	h2 {
		max-width: 400px;
	}

	.hiw-graphic {
		flex-basis: 40%;
		flex-shrink: 0;
		align-self: flex-end;

		img, picture, svg {
			width: 100%;
		}

		@include small-desktop {
			display: none;
		}
	}

	.hiw-content {
		flex-grow: 1;
		padding: 50px 0;

		@include medium-desktop {
			padding: 70px 0 50px;
		}

		.text-button {
			@include mobile {
				margin-top: 40px;
			}
		}
	}
}

.hiw-section-seller {
	padding: 100px 0;
	background: $grayBackground;
	position: relative;

	@include small-desktop {
		padding: 70px 0;
	}

	h2 {
		max-width: 760px;
	}

	.hiw-section-seller-cta {
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translate(-50%, 50%);
	}
}

.hiw-section {
	h6 {
		text-transform: uppercase;
	}

	h2 {
		font-size: 40px;
		font-weight: 700;
		margin: 10px 0 50px;
		line-height: 44px;

		@include mobile {
			font-size: 32px;
			line-height: 36px;
		}
	}

	.column {
		&:not(.grid) {
			margin-bottom: 30px;
		}

		.column-header {
			display: flex;
			margin-bottom: 10px;
			align-items: center;

			.number {
				color: $mainColor;
				font-size: 72px;
				font-weight: 800;
				width: 90px;
				text-align: center;
				padding: 0 15px;
				line-height: 1;

				@include medium-desktop() {
					font-size: 60px;
					width: 70px
				}


				@include mobile {
					font-size: 40px;
					width: 50px;
				}
			}

			.title {
				font-size: 26px;
				font-weight: 800;
				color: $headlinesColor;

				@include small-desktop {
					font-size: 24px
				}
			}
		}

		.column-body {
			@include base-typography();

			line-height: 28px;
			color: $mainTextColor;
		}
	}
}

.popular-services-wrapper {
	padding: 150px 0 100px;

	@include small-desktop {
		padding: 70px 0 70px;
	}

	h1 {
		margin-bottom: 40px;
		font-size: 40px;

		@include small-desktop {
			font-size: 32px;
			margin-bottom: 30px;
		}
	}

	.load-more-button {
		left: auto;
		top: auto;
		transform: none;
	}
}

.explore-categories-wrapper {
	h1 {
		margin-bottom: 40px;
		font-size: 40px;

		@include small-desktop {
			font-size: 32px;
			margin-bottom: 30px;
		}
	}
}


.icon-categories-wrapper {
	@include default-shape();

	border: 1px solid $borderColor;
	overflow: hidden;

	&.ui.grid {
		.column {
			padding: 35px 30px;
			margin-right: -1px;
			margin-bottom: -1px;

			@include mobile {
				padding: 20px 15px;
			}
		}
	}

	.column {
		border-right: 1px solid $borderColor;
		border-bottom: 1px solid $borderColor;
	}

	.category-name {
		font-size: 16px;
		font-weight: 600;
	}

	.image {
		height: 50px;
		margin-bottom: 10px;
	}
}

.photo-categories-wrapper {
	.wpj-photo-category-slide {
		@include default-shape();

		display: block;
		overflow: hidden;
		height: 340px;
		background-size: cover;
		background-position: center center;
		background-repeat: no-repeat;
		position: relative;

		.bottom-content {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			z-index: 10;
			background-image: -moz-linear-gradient( 90deg, rgb(0,0,0) 0%, rgba(0,0,0,0) 100%);
			background-image: -ms-linear-gradient( 90deg, rgb(0,0,0) 0%, rgba(0,0,0,0) 100%);
			background-image: -webkit-linear-gradient( 90deg, rgb(0,0,0) 0%, rgba(0,0,0,0) 100%);
			padding: 80px 25px 25px;
			color: $whiteColor;
			font-weight: 600;
			font-size: 24px;
			line-height: 30px;
			text-align: left;
		}
	}
}

.news-stories-section {
	padding: 65px 0;
	background: linear-gradient(to bottom, $grayBackground3 44.6%, transparent 0);
	position: relative;

	@include mobile {
		background: none;
	}

	h1 {
		font-size: 40px;
		font-weight: 700;
		margin-bottom: 65px;
	}
}

.jobs-images-carousel-wrapper {
	margin-bottom: 90px;

	h2 {
		font-size: 40px;
		line-height: 56px;
		max-width: 530px;
		margin: 0 auto 45px;
		display: block;
		text-align: center;
	}
}

.jobs-images-carousel {
	.owl-stage {
		display: flex;
		align-items: stretch;
	}

	.owl-stage-outer {
		margin: -20px -10px;
		padding: 20px 10px;

		@include mobile {
			padding: 10px 5px;
			margin: -10px -5px;
		}
	}

	.slide-item {
		@include default-shape();
		@include card-shadow();

		background: $whiteColor;
		overflow: hidden;

		.image {
			display: block;
			padding-top: 215px;
			position: relative;
			@include breakpoint-between (sm, md) {
				padding-top: 165px;
			}

			img,
			picture {
				display: block;
				width: 100%;
				height: auto;
				border-radius: inherit;
				position: absolute;
				left: 0;
				right: auto;
				top: 40%;
				transform: translateY(-50%);
			}
		}

		.bottom-content {
			padding: 10px 20px;
			display: flex;
			align-items: center;

			.user-avatar {
				//transform: translateY(-10px);
				position: relative;
				z-index: 10;
				margin-top: -25px;
				margin-right: 10px;

				img {
					width: 65px;
					height: 65px;
					border-radius: 33px;
					border: 5px solid $whiteColor;

					@include small-desktop {
						width: 55px;
						height: 55px;
						border-width: 4px;
					}
				}
			}

			.user-content {
				text-align: left;

				.user-job {
					font-size: 16px;
					font-weight: 600;
					color: $mainColor;
					line-height: normal;
					display: block;
				}

				.user-name {
					font-size: 13px;
					color: $mainTextColor;
					font-weight: 400;
				}
			}
		}
	}
}
