wedding.less

//Page identifier in config backend
@page-cms-wedding: wedding;

// Common styles for mobile and desktop
& when (@media-common = true) {
	.cms-@{page-cms-wedding} {
		.topblock__widget {
			margin-bottom: 0;
		}

		//  Hide service tab link
		.widget__listtab {
			.tab-link {
				display: none;
			}
		}

		.page-main {
			width: 100%;
		}

		.packages-wrapper {
			.flex-wrap();
			justify-content: center;

			.package-item {
				&.mid {
					.package-item__title.title {
						width: 215px;
					}
				}

				&.last {
					.package-item__title.title {
						width: 172px;
					}
				}

				p {
					width: 263px;
					font-weight: @font-weight__light;
					font-stretch: normal;
					font-style: normal;
					line-height: 1.71;
					letter-spacing: normal;
					text-align: center;
					color: #000;
					margin: 0 auto;
					display: -webkit-box;
					-webkit-line-clamp: 3;
					-webkit-box-orient: vertical;
					overflow: hidden;
				}
			}

			.package-item__inner {
				flex-direction: column;
				border-radius: 50%;
				display: block;
				text-align: center;
				max-width: 320px;
				max-height: 320px;
				margin: 0 auto;
				position: relative;
				overflow: hidden;


				.image-overlay {
					position: absolute;
					box-shadow: -2.3px -1.9px 1px 0 rgba(10, 10, 10, 0.1);
					background-image: linear-gradient(to top, rgba(95, 78, 32, 0.8), #8d7535);
					width: 100%;
					height: 100%;
					top: 0;
					left: 0;
					opacity: .5;
					z-index: 1;
				}
			}

			.package-item__title.title {
				.use_second_font();
				width: 211px;
				text-shadow: 0 0 20px rgba(10, 10, 10, 0.1);
				font-size: 1.8rem;
				font-weight: @font-weight__bold;
				font-stretch: normal;
				font-style: normal;
				line-height: 1.67;
				letter-spacing: normal;
				text-align: center;
				text-transform: uppercase;
				color: #ffffff;
				margin: 0 auto;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
			}

			.package-item__details {
				position: absolute;
				bottom: 15px;
				left: 50%;
				transform: translateX(-50%);
				max-width: 210px;
				z-index: 2;

				&:after {
					.bg-sprites;
					content: "";
					width: 52px;
					height: 26px;
					background-size: 500px 250px;
					background-position: -152px -24px;
					display: inline-block;
					vertical-align: middle;
					margin: 0 auto;

				}
			}
		}

		.faq-container {
			.faq-item {
				&:first-child {
					.faq-question.expanse {
						border-radius: 10px 10px 0 0;
					}
				}

				> .faq-question {
					position: relative;
					border-bottom: 1px solid #8d7535;
					text-align: left;
					padding: 15px 30px 15px 15px;
					color: #8d7535;
					line-height: 1.43;
					max-width: 710px;
					margin-bottom: 0;

					&:hover {
						cursor: pointer;
					}


					&.expanse {
						padding: 15px 19px 11px 21px;
						color: #fff;
						background-color: #8d7535;
						position: relative;

						&:after {
							content: '\f106';
							color: #fff;
						}

					}

					&:after {
						content: '\f107';
						position: absolute;
						font-family: FontAwesome;
						display: inline-block;
						vertical-align: middle;
						right: 19px;
						top: 7px;
						color: #8d7535;
						font-size: 2.1rem;
					}
				}

				.faq-answer {
					line-height: 1.71;
					font-weight: @font-weight__light;
					border-radius: 0 0 10px 10px;
					box-shadow: -2.3px -1.9px 20px 0 rgba(10, 10, 10, 0.1);
					background-color: #ffffff;
					padding: 19px 13px 27px 13px;
					max-width: 710px;
					font-stretch: normal;
					font-style: normal;
					letter-spacing: normal;
					text-align: left;
					color: #000000;
				}
			}
		}

		.faq-services {
			display: flex;
			flex-wrap: wrap;
			flex-direction: column;

			.faq-services__item {
				max-width: 540px;
				border-radius: 10px;
				overflow: hidden;
				position: relative;
				max-height: 349px;
				margin-bottom: 29px;
			}

			.faq-services__item-content {
				position: absolute;
				left: 37px;
				bottom: 29px;
				z-index: 10;
			}

			.faq-services__item-content__title {
				font-weight: @font-weight__bold;
				.use_second_font();
				color: #fff;
				text-transform: uppercase;
				margin-bottom: 2px;
				font-stretch: normal;
				font-style: normal;
				line-height: 0.67;
				letter-spacing: normal;
				text-align: left;
			}

			.faq-services__item-content__link {
				font-weight: @font-weight__light;
				font-stretch: normal;
				font-style: italic;
				line-height: 1.86;
				letter-spacing: normal;
				text-align: left;
				color: #ffffff;
				margin-top: 16px;

				&:after {
					content: '>';
					display: inline-block;
					vertical-align: middle;
					margin-left: 5px;
				}
			}
		}
	}
}

// Mobile < 320

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__xxs) {

}

// Mobile < 480
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__xs) {

}

& when (@media-target = 'mobile'), (@media-target = 'all') {
	@media only screen and (min-width: ~'481px') and (max-width: ~'767px') {

	}
}

// Mobile < 767
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
	.cms-@{page-cms-wedding} {

		.faq-container {
			margin-bottom: 20px;
		}

		.packages-wrapper {


			.package-item {
				&:not(:last-child) {
					margin-bottom: 20px;
				}

				p {
					padding-top: 15px;
				}
			}
		}

		.packages-wrapper {
			align-items: center;
			justify-content: center;

			.package-item {
				width: 100%;
				margin-right: 0;
			}
		}


		.faq-services {


			.faq-services__item-content__title {
				font-size: 1.8rem;
			}

		}


	}
}

// Desktop > 768
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
	.cms-@{page-cms-wedding} {
		.topblock__widget {
			margin-bottom: 0;
		}

		//  Hide service tab link
		.widget__listtab {
			padding-top: 31px;
		}

		.packages-wedding .block-introduce {
			margin-top: 12px;
		}

		.block-introduce .title {
			line-height: 0.67;
		}

		.page-main {
			max-width: 100%;
			padding: 0;

			.w-fullmain {
				max-width: @layout__max-width;
				padding: 0 @layout-indent__width;
				margin: 0 auto;
			}
		}

		.nav-main {
			margin-top: 20px;

		}

		.packages-wedding {

			.block-introduce {
				margin-bottom: 19px;
			}
		}

		.questions {
			p.title {
				margin-bottom: 40px;
			}
		}

		.packages-wrapper {
			align-items: flex-start;
			margin-bottom: 60px;

			.package-item {
				width: calc(~'32% - 2%');

				&:not(:last-child) {
					margin-right: 2%;
				}

				p {
					margin-top: 34px;
				}
			}

			.package-item__image {
				object-fit: cover;
				height: 100%;
				max-width: none;
				width: 100%;
			}
		}

		.faq-services {

			.faq-services__item-content__title {
				font-size: 3rem;
			}

		}
	}
}

// ipad
& when (@media-target = 'desktop'), (@media-target = 'all') {
	@media only screen and (min-width: @screen__m) and (max-width: ~'1200px') {

	}

}

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__xl) {
	.cms-@{page-cms-wedding} {
		.packages-wrapper {


			.package-item {
				&.mid {
					margin-top: 100px;
				}

			}

		}
	}
}