/**
 * Hero Section Styles - MINIMAL
 * Only contains: layout, positioning, pseudo-elements, responsive
 * Typography and colors are handled by inline block styles
 */

/* ==========================================================================
   Hero Container - Layout & Positioning
   ========================================================================== */

.hero.wp-block-group {
	position: relative;
	min-height: 925px;
	max-width: 1765px;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	align-items: center;
	overflow: hidden;
}

.hero__background {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.hero__background img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Gradient overlay - REQUIRES CSS (pseudo-element) */
.hero__background::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(268deg, rgba(5, 23, 9, 0) 10%, rgba(5, 23, 9, 0.8) 95%);
	z-index: 2;
}

.hero__content {
	position: relative;
	z-index: 10;
	max-width: 960px;
	padding: var(--wp--preset--spacing--large-padding) var(--wp--preset--spacing--50);
	padding-top: calc(var(--wp--preset--spacing--large-padding) + 60px);
}

/* ==========================================================================
   Hero Buttons - Layout only
   ========================================================================== */

.hero__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

.hero__buttons .wp-block-button__link {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.6px;
	padding: 19px 24px;
	border-radius: 0;
	transition: all 0.3s ease;
}

/* Button variants - color styling */
.hero__button--primary .wp-block-button__link,
.hero__button--secondary .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--coral-light);
	border: 1px solid var(--wp--preset--color--coral-light);
}

.hero__button--primary .wp-block-button__link:hover,
.hero__button--primary .wp-block-button__link:focus,
.hero__button--secondary .wp-block-button__link:hover,
.hero__button--secondary .wp-block-button__link:focus {
	background: var(--wp--preset--color--coral-light);
	color: var(--wp--preset--color--primary);
}

/* ==========================================================================
   Responsive - REQUIRES CSS (media queries)
   ========================================================================== */

@media (max-width: 1440px) {
	.hero__content {
		max-width: 850px;
		padding: var(--wp--preset--spacing--large-padding) 60px;
		padding-top: calc(var(--wp--preset--spacing--large-padding) + 60px);
	}
}

@media (max-width: 1280px) {
	.hero.wp-block-group {
		min-height: 800px;
	}

	.hero__content {
		max-width: 750px;
		padding: var(--wp--preset--spacing--medium-padding) 50px;
		padding-top: calc(var(--wp--preset--spacing--medium-padding) + 50px);
	}
}

@media (max-width: 1024px) {
	.hero.wp-block-group {
		min-height: 700px;
	}

	.hero__content {
		max-width: 650px;
		padding: var(--wp--preset--spacing--medium-padding) 40px;
		padding-top: calc(var(--wp--preset--spacing--medium-padding) + 40px);
	}

	.hero__buttons .wp-block-button__link {
		padding: 16px 20px;
		font-size: 14px;
	}
}

@media (max-width: 768px) {
	.hero.wp-block-group {
		min-height: 600px;
		margin-top: 0;
	}

	.hero__content {
		max-width: 100%;
		padding: 100px 24px 60px;
	}

	.hero__buttons {
		flex-direction: column;
		gap: 16px;
	}

	.hero__buttons .wp-block-button {
		width: 100%;
	}

	.hero__buttons .wp-block-button__link {
		width: 100%;
		text-align: center;
		padding: 16px 24px;
		font-size: 14px;
	}
}

@media (max-width: 375px) {
	.hero.wp-block-group {
		min-height: 550px;
	}

	.hero__content {
		padding: 80px 20px 48px;
	}

	.hero__buttons {
		gap: 12px;
	}

	.hero__buttons .wp-block-button__link {
		padding: 14px 20px;
		font-size: 13px;
		letter-spacing: 1.2px;
	}
}

@media (max-width: 320px) {
	.hero.wp-block-group {
		min-height: 500px;
	}

	.hero__content {
		padding: 70px 16px 40px;
	}

	.hero__buttons .wp-block-button__link {
		padding: 12px 16px;
		font-size: 12px;
		letter-spacing: 1px;
	}
}