/* 05.04. Page Header Portfolio */
.page-header-portfolio {
	display: flex;
	flex-flow: column wrap;
	background-color: $gray-lighter;
	margin-bottom: ptr(60);

	@include media-breakpoint-up(lg) {
		justify-content: space-between;
		align-items: stretch;
		flex-flow: row nowrap;
		margin-bottom: ptr(100);
	}

	&__content {
		padding: ptr(45);
		order: 1;
		align-self: center;

		@include media-breakpoint-up(xl) {
			padding: ptr(75);
		}

		&-container {
			display: flex;
			flex-flow: column wrap;
			order: 1;
			flex: 1 1 auto;
			text-align: center;
		}
	}

	&__price {
		display: inline-block;
		font-size: ptr(60);
		font-weight: bold;
		color: $brand-secondary;
		line-height: 1;
		margin-bottom: ptr(4);

		sup {
			font-size: ptr(28);
			top: ptr(-22);
			margin-right: ptr(6);
		}

		+ .page-header-portfolio__label {
			margin-left: ptr(10);
		}
	}

	&__label {
		display: inline-block;
		font-size: ptr(12);
		font-weight: bold;
		text-transform: uppercase;
		vertical-align: top;
		background-color: $brand-primary;
		color: #ffffff;
		border-radius: 4px;
		padding: ptr(3.5) ptr(10);
		margin-top: ptr(8);
	}

	&__title {
		margin-bottom: ptr(9);
	}

	&__specification {
		font-size: ptr(12);
		font-weight: bold;
		text-transform: uppercase;
		color: $gray;
		margin-bottom: ptr(21);

		.fa {
			font-size: ptr(16);
			vertical-align: middle;
			padding-bottom: ptr(1);
			margin-right: ptr(5);
		}
	}

	&__text {
		font-size: ptr(16);

		p {
			&:last-of-type {
				margin-bottom: 0;
			}
		}
	}

	&__cta {
		&-container {
			order: 2;
			align-self: flex-end;
			background-color: #ffffff;
			width: 100%;
			padding: ptr(25) ptr(75);
			border-bottom: 1px solid #dddddd;

			+ .page-header-portfolio__content {
				align-self: flex-end;
			}
		}
	}

	&__slider-container,
	&__image-container {
		order: 2;
		width: 100%;

		@include media-breakpoint-up(lg) {
			width: calc(100% - #{ptr(400)});
			align-self: center;

			&.compat-object-fit {
				background-size: cover;
				background-position: center center;

				.page-header-portfolio__image {
					opacity: 0;
				}
			}
		}

		@include media-breakpoint-up(xl) {
			width: calc(100% - #{ptr(500)});
		}

		+ .page-header-portfolio__content-container {
			display: flex;
			flex-flow: row wrap;
			align-items: flex-end;
			flex: 0 1 auto;

			@include media-breakpoint-up(lg) {
				text-align: left;
				width: ptr(400);
			}

			@include media-breakpoint-up(xl) {
				width: ptr(500);
			}

			.page-header-portfolio__content {
				padding: ptr(45);
				width: 100%;

				@include media-breakpoint-up(xl) {
					padding: ptr(75);
				}
			}
		}
	}

	.portfolio-carousel-item img,
	&__image {
		width: 100%;
		height: auto;

		@include media-breakpoint-up(lg) {
			object-fit: cover;
			height: ptr(600);
		}
	}

	&__slider-container {
		position: relative;
		visibility: hidden; // Should be hidden by default and will be displayed after slider init (via JS).
		font-size: 0;

		// Set these widths and heights, so that the loading process of the slider looks better.
		@include media-breakpoint-up(lg) {
			height: ptr(600);
		}
	}

	&__navigation {
		@include media-breakpoint-up(lg) {
			display: flex;
			align-items: center;
			justify-content: center;
			white-space: nowrap;
			width: ptr(60);
			transform: rotate(-90deg);
		}

		&-container {
			@include media-breakpoint-up(lg) {
				position: absolute;
				display: flex;
				align-items: center;
				border-left: 1px dashed rgba(255, 255, 255, .5);
				height: 100%;
				width: ptr(60);
				top: 0;
				right: 0;
				transform: translate3d(0, 0, 0);
			}
		}

		.slick-dots {
			display: none;

			@include media-breakpoint-up(lg) {
				@include list-unstyled;
				display: flex;
				order: 1;
				margin-bottom: 0;
				margin-right: ptr(10);
			}

			li {
				@include media-breakpoint-up(lg) {
					display: inline-block;
					background-color: rgba(255, 255, 255, .5);
					border-radius: ptr(2);
					width: ptr(8);
					height: ptr(8);
					margin-right: ptr(10);
					cursor: pointer;
				}

				&:focus {
					@include media-breakpoint-up(lg) {
						background-color: rgba(255, 255, 255, .5);
					}
				}

				&:hover,
				&.slick-active {
					@include media-breakpoint-up(lg) {
						background-color: rgba(255, 255, 255, .9);
					}
				}

				button {
					@include media-breakpoint-up(lg) {
						display: none;
					}
				}
			}
		}
	}

	&__slide-number {
		display: none;

		@include media-breakpoint-up(lg) {
			display: block;
			order: 2;
			font-size: ptr(12);
			font-weight: bold;
			color: rgba(255, 255, 255, .9);
			margin-right: ptr(19);
		}
	}

	.slick-arrow {
		position: absolute;
		z-index: 10;
		font-size: ptr(30);
		background-color: transparent;
		color: rgba(255, 255, 255, .5);
		border: 0;
		border-top: 1px dashed rgba(255, 255, 255, .5);
		width: 50%;
		bottom: 0;
		padding: ptr(10) 0;

		@include media-breakpoint-up(lg) {
			position: relative;
			border-top: 0;
			width: auto;
			padding: 0;
		}

		&:focus {
			outline: 0;
			color: rgba(255, 255, 255, .5);
		}

		&:hover {
			color: rgba(255, 255, 255, .9);
		}

		&.slick-prev {
			left: 0;

			@include media-breakpoint-up(lg) {
				margin-right: ptr(10);
				order: 3;
				left: inherit;
			}
		}

		&.slick-next {
			right: 0;
			border-left: 1px dashed rgba(255, 255, 255, .5);

			@include media-breakpoint-up(lg) {
				border-left: 0;
				order: 4;
				right: inherit;
			}
		}
	}

	.slick-vertical {
		.slick-slide {
			border: 0;
		}
	}
}
