/* === FRONT-END STYLES === */
.hero-section {
	position: relative;
	width: 100%;
	height: 770px;
	color: #fff;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
	border-radius: 20px;
	padding: 135px 0 0;

	@media screen and (max-width: 768px) {
		padding: 100px 0 0;
		height: calc(100vh - 100px);
		border-radius: 0;
	}

	.hero-overlay {
		position: absolute;
		inset: 0;
		background: rgba(0, 0, 0, 0.2);
		z-index: 1;

		@media screen and (max-width: 768px) {
			background: rgba(0, 0, 0, 0.4);
		}
	}

	.hero-container {
		position: relative;
		z-index: 2;
		padding: 0 0 0 52px;
		max-width: calc(100% - 185px);
		height: calc(100% - 60px);
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		max-width: 1372px;
    	margin: 0 auto;

		@media screen and (max-width: 768px) {
			padding: 0 20px;
    		height: calc(100% - 40px);
			justify-content: flex-start;
		}

		.hero-title {
			font-size: 72px;
			font-family: 'Closer Text', sans-serif;
			font-weight: 500;
			line-height: 104%;
			max-width: 1000px;
			margin: 0;

			@media screen and (max-width: 768px) {
				font-size: 46px;
				letter-spacing: -0.02em;
				padding-bottom: 20px;
			}
		}

		.hero-additional-content {
			display: flex;
			justify-content: space-between;

			@media screen and (max-width: 768px) {
				flex-direction: column;
				justify-content: space-between;
				flex: 1;
			}

			.hero-subtitle {
				font-family: 'Closer Text', sans-serif;
				font-weight: 500;
				font-style: Medium;
				font-size: 18px;
				line-height: 130%;
				letter-spacing: -0.01em;
				flex: 0 1 365px;

				@media screen and (max-width: 768px) {
					flex: unset;
					font-size: 16px;
				}
			}

			.add-content {
				flex: 0 1 295px;
				padding-right: 135px;

				@media screen and (max-width: 768px) {
					flex: unset;
				}
				.hero-subtitle--secondary {
					font-family: 'Closer Text', sans-serif;
					font-weight: 400;
					font-style: Regular;
					font-size: 16px;
					line-height: 130%;
					letter-spacing: -0.01em;
					padding-bottom: 30px;

					@media screen and (max-width: 768px) {
						flex: unset;
						font-size: 14px;
						padding-bottom: 20px;
					}
				}

				.hero-btn {
					font-family: 'Closer Text', sans-serif;
					display: inline-block;
					padding: 16px 30px;
					background: rgba(207, 226, 224, 1);
					color: rgba(0, 71, 53, 1);
					text-decoration: none;
					font-weight: 600;
					border-radius: 12px;
					font-size: 16px;
					line-height: 120%;
					letter-spacing: -0.01em;
					transition: background 0.3s ease;

					&:hover {
						background: rgba(0, 71, 53, 1);
						color: rgba(207, 226, 224, 1);
					}
				}
			}
		}
	}
}

/* Анімація появи */
/* [data-animate].visible {
	opacity: 1 !important;
	transform: translateY(0) !important;
} */

/* === EDITOR PREVIEW STYLES === */
.editor-styles-wrapper {
	.hero-preview {
		position: relative;
		padding: 120px 20px;
		text-align: center;
		color: #fff;
		border-radius: 12px;
		overflow: hidden;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;

		.hero-preview-overlay {
			position: absolute;
			inset: 0;
			background: rgba(0, 0, 0, 0.4);
			z-index: 1;
		}

		.hero-preview-content {
			position: relative;
			z-index: 2;
		}

		h1 {
			font-size: 36px;
			margin-bottom: 10px;
		}

		p {
			font-size: 18px;
			margin-bottom: 20px;
		}

		.hero-btn {
			display: inline-block;
			padding: 10px 30px;
			background: #00a878;
			color: #fff;
			text-decoration: none;
			border-radius: 6px;
			font-weight: 600;
		}
	}
}

.hero-bg-preview {
	img {
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
	}
}

.hero-bg-select {
	button {
		margin-top: 4px;
	}
}