/**
 * Estilos da Hero Section
 * Baseado no design do Figma node-id: 19248-162
 */

.hero-natal {
	position: relative;
	min-height: 600px;
	display: flex;
	align-items: center;
	overflow: hidden;
	padding: 80px 0;
}

/* Background */
.hero-natal__background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	overflow: hidden;
}

.hero-natal__bg-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.hero-natal__stars {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.8;
	/* Animação controlada via GSAP */
}

.hero-natal__sparks {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	max-width: 800px;
	height: auto;
	opacity: 0.6;
	/* Animação controlada via GSAP */
}

/* Conteúdo */
.hero-natal__content {
	position: relative;
	z-index: 1;
}

.hero-natal__text {
	color: #ffffff;
}

.hero-natal__subtitle {
	font-family: var(--font-family-body); /* Globotipo Rounded */
	font-size: 18px;
	font-weight: var(--font-weight-normal);
	line-height: 1.5;
	margin-bottom: 12px;
	opacity: 0.9;
}

.hero-natal__title {
	font-family: var(--font-family-headings); /* Bricolage Grotesque */
	font-size: 3.5rem;
	font-weight: var(--font-weight-extrabold);
	line-height: 1.1;
	margin-bottom: 24px;
	color: #ffffff;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.hero-natal__description {
	font-family: var(--font-family-body); /* Globotipo Rounded */
	font-size: 1.25rem;
	font-weight: var(--font-weight-normal);
	line-height: 1.6;
	margin-bottom: 32px;
	color: #ffffff;
	opacity: 0.95;
	max-width: 500px;
}

.hero-natal__cta {
	margin-top: 40px;
}

/* Imagem */
.hero-natal__image-wrapper {
	position: relative;
	z-index: 1;
}

.hero-natal__image-container {
	position: relative;
	width: 100%;
	max-width: 600px;
	margin: 0 auto;
}

.hero-natal__image {
	width: 100%;
	height: auto;
	display: block;
	position: relative;
	z-index: 2;
	filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.3));
}

/* Efeitos de brilho */
.hero-natal__glow {
	position: absolute;
	z-index: 1;
	pointer-events: none;
}

.hero-natal__glow--a {
	top: -20%;
	left: -10%;
	width: 120%;
	height: auto;
	opacity: 0.4;
	/* Animação controlada via GSAP */
}

.hero-natal__glow--b {
	bottom: -20%;
	right: -10%;
	width: 100%;
	height: auto;
	opacity: 0.3;
	/* Animação controlada via GSAP */
}

/* 
 * Animações CSS removidas - todas as animações são controladas via GSAP
 * Ver template-parts/partials/hero-section.php para código de animação
 */

/* Responsividade */

/* Breakpoint para notebooks de tela pequena (1366x768) */
@media (max-width: 1366px) {
	.hero-natal {
		padding: 80px 60px;
	}

	.hero-natal__title {
		font-size: 3.5rem;
	}

	.hero-natal__description {
		font-size: 1.15rem;
	}
}

@media (max-width: 991.98px) {
	.hero-natal {
		min-height: 500px;
		padding: 60px 0;
	}

	.hero-natal__title {
		font-size: 2.5rem;
	}

	.hero-natal__description {
		font-size: 1.1rem;
	}

	.hero-natal__image-wrapper {
		margin-top: 40px;
	}
}

@media (max-width: 767.98px) {
	.hero-natal {
		min-height: auto;
		padding: 40px 0;
	}

	.hero-natal__title {
		font-size: 2rem;
		margin-bottom: 16px;
	}

	.hero-natal__subtitle {
		font-size: 16px;
		margin-bottom: 8px;
	}

	.hero-natal__description {
		font-size: 1rem;
		margin-bottom: 24px;
	}

	.hero-natal__cta {
		margin-top: 24px;
	}

	.hero-natal__image-container {
		max-width: 100%;
	}
}