/**
 * Block Hero
 */

:root {
	--knd-block-hero-background: #f7f8f8;
	--knd-block-hero-overlay-start: rgba(0, 0, 0, 0);
	--knd-block-hero-overlay-end: rgba(0, 0, 0, 0.8);
	--knd-block-hero-height: calc(100vh - var(--knd-header-height));
	--knd-button-color: #fff;
	--knd-button-color-hover: #fff;
	--knd-button-background: var(--knd-color-main);
	--knd-button-background-hover: var(--knd-color-main-active);
}
.knd-block-hero {
	background-color: var(--knd-block-hero-background);
	position: relative;

	&:before {
		content: '';
		display: block;
		z-index: 3;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: linear-gradient(to bottom, var(--knd-block-hero-overlay-start) 10%, var(--knd-block-hero-overlay-end) 100%);
		pointer-events: none;
	}

	& &__image-background {
		height: 100%;
		width: 100%;
		left: 0;
		right: 0;
		top: 0;
		margin: 0;
		max-height: none;
		max-width: none;
		object-fit: cover;
		position: absolute;
		z-index: 0;
	}

	&__inner {
		max-width: 1200px;
		margin-left: auto;
		margin-right: auto;
		padding-left: 30px;
		padding-right: 30px;
		position: relative;
		z-index: 10;
		display: flex;
		padding-top: 40px;
		padding-bottom: 40px;

		.knd-block.alignnone & {
			flex-direction: column;
		}

		.knd-block-hero:not(.alignfull) & {
			margin-bottom: 30px;
			margin-top: 30px;
		}
	}

	&__content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		color: var(--knd-block-hero-color);

		.knd-block.alignnone & {
			order: 2;
		}
	}

	& &__title {
		font-size: 36px;
		letter-spacing: .03em;
		font-weight: 700;
		margin-bottom: 26px;
		line-height: 1.2;
	}

	&__text {
		font-size: 18px;
		font-weight: 500;
		margin-bottom: 26px;

		a {
			color: inherit !important;
			border-color: currentColor !important;

			&:hover {
				border-color: transparent !important;
			}
		}
	}

	&__figure {
		display: flex;
		align-items: center;
		padding-top: 40px;
		padding-bottom: 40px;
		flex: auto;

		> img {
			display: block;
			margin: 0 auto;
			max-width: 100%;
			height: auto;
		}

		.knd-block.alignnone & {
			padding-top: 0;
		}
	}

	&__actions {
		display: flex;
		flex-wrap: wrap;

		.knd-button {
			margin-top: 15px;
			margin-right: 15px;
			text-decoration: none;
			color: var(--knd-button-color);
			background-color: var(--knd-button-background);
			border-color: var(--knd-button-background);

			&:focus {
				color: var(--knd-button-color);
			}

			&-outline {
				border-bottom-width: 2px;
				color: var(--knd-button-background);
				background-color: var(--knd-button-color);

				&:focus {
					color: var(--knd-button-background);
				}
			}

			&:hover {
				color: var(--knd-button-color-hover);
				background-color: var(--knd-button-background-hover);
				border-color: var(--knd-button-background-hover);
			}
		}
	}
}

@media (min-width: 768px){
	.knd-block-hero.alignfull .knd-block-hero__inner {
		min-height: var(--knd-block-hero-height);
		padding-top: 80px;
		padding-bottom: 80px;
	}
	.knd-block-hero:not(.alignfull) .knd-block-hero__inner {
		padding: 60px;
	}
	.knd-block-hero.alignwide .knd-block-hero__inner {
		min-height: 500px;
	}
	.knd-block-hero:not(.alignnone) .knd-block-hero__content {
		flex: 0 0 auto;
		width: 50%;
		margin-right: 30px;
	}
}
@media (max-width: 767px){
	.knd-block-hero__inner {
		flex-direction: column;
	}
	.knd-block-hero__content {
		order: 2;
	}
	.knd-block-hero__actions {
		padding-top: 0;
	}
	.knd-block-hero__figure {
		padding-top: 0;
	}
	.knd-block-hero__figure > img {
		max-width: 400px;
		max-height: 300px;
	}
}
@media (max-width: 575px){
	.knd-block-hero__title {
		font-size: 28px;
	}
	.knd-block-hero__actions .knd-button {
		font-size: 16px;
		padding: 9px 16px;
	}
}
