/* Hero Section Block */
.wp-block-brandspeak-hero-section {
	width: 100vw;
	min-height: 100vh;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	overflow: hidden;
	background-color: #423385;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hero-expand-group {
	position: relative;
	--fx-video-peek: 100px;
	min-height: 100vh;
	padding-bottom: var(--fx-video-peek);
	background-color: #faf9f6;
	transform: translate3d(0, 0, 0);
	will-change: transform;
}

.hero-expand-group .wp-block-brandspeak-hero-section {
	padding-bottom: var(--fx-video-peek);
}

.hero-expand-group--teaser .hero-expand-group__video {
	pointer-events: none;
}

.hero-expand-group--active {
	position: relative;
	z-index: 50;
	background-color: #000;
	transition: background-color 0.3s ease;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

/* Editor overrides to prevent overflow */
.editor-styles-wrapper .wp-block-brandspeak-hero-section,
.block-editor-block-list__block .wp-block-brandspeak-hero-section {
	width: 100%;
	min-height: auto;
	left: auto;
	right: auto;
	margin-left: 0;
	margin-right: 0;
}

.hero-section-editor-wrapper {
	width: 100%;
	max-width: 100%;
	display: block;
	margin: 0 auto;
}

.hero-section-background {
	position: absolute;
	top: 0;
	left: 0;
	background-color: #423385;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.hero-section-background-image {
	position: absolute;
	top: -12px;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	mix-blend-mode: multiply;
	opacity: 0.9;
	transform-origin: center;
	min-width: 110%;
	min-height: 110%;
}

.hero-section-content-wrapper {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
	padding: 4rem 1.5rem;
	color: #fff;
	filter: blur(0px);
	transition: filter 0.3s ease;
	will-change: filter;
}

.hero-section-image-wrapper {
	text-align: center;
	margin-bottom: 2rem;
}

.hero-section-content-image {
	max-width: 200px;
	height: auto;
	display: inline-block;
}

.hero-section-heading {
	display: flex !important;
	font-size: clamp(2.5rem, 4.7vw, 5rem);
	font-weight: 500;
	line-height: 1.1;
	margin: 0 0 1.5rem;
	text-align: center;
	color: #fff;
	overflow: hidden;
	justify-content: center;
}

.hero-section-heading .reveal-up__inner {
	display: inline-block;
}

.hero-section-content {
	font-size: clamp(1.125rem, 2vw, 1.275rem);
	line-height: 1.6;
	margin: 0 0 2.5rem;
	text-align: center;
	color: #fff;
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}

.hero-section-content p {
	margin: 0 0 1rem;
}

.hero-section-content p:last-child {
	margin-bottom: 0;
}

.hero-section-content strong {
	font-weight: normal;
}

.hero-section-pages {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center;
	margin: 0 0 2.5rem;
	list-style: none;
	padding: 0;
}

.hero-section-page-link {
	display: inline-block;
	padding: 0.5rem 0.5rem;
	border: 2px solid rgba(255, 255, 255, 0.9);
	border-radius: 4px;
	color: #fff;
	text-decoration: none;
	font-weight: 400;
	font-size: 0.8rem;
	transition: all 0.3s ease;
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(10px);
	position: relative;
}

.hero-section-page-link:hover,
.hero-section-page-link:focus {
	background: #9185ff;
	border-color: #9185ff;
	color: #fff;
	transform: translateY(-2px);
}

.hero-section-button-wrapper {
	text-align: center;
	margin-top: 2.5rem;
}

.hero-section-bubble-button.btn-group {
	display: inline-flex;
	gap: 0;
	font-size: clamp(0.9rem, 2vw, 1.1rem);
}

.hero-section-bubble-button .btn-bubble-arrow {
	font-size: clamp(0.9rem, 2vw, 1.05rem);
}

.hero-section-bubble-button .btn-bubble-arrow__content {
	backdrop-filter: blur(16px);
}

.hero-section-bubble-button .btn-bubble-arrow:hover .btn-bubble-arrow__arrow:not(.is--duplicate) {
	background-color: #9084fe;
	color: #ffffff;
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.wp-block-brandspeak-hero-section {
		min-height: 80vh;
	}

	.hero-section-content-wrapper {
		padding: 3rem 1.5rem;
	}

	.hero-section-pages {
		gap: 0.75rem;
	}

	.hero-section-page-link {
		padding: 0.625rem 1.5rem;
		font-size: 0.9375rem;
	}
}

@media (max-width: 480px) {
	.hero-section-content-wrapper {
		padding: 2rem 1rem;
	}

	.hero-section-page-link {
		padding: 0.5rem 1.25rem;
		font-size: 0.875rem;
	}
}

/* Google Stars Rating */
.hero-section-rating {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
}

.hero-section-stars {
	display: flex;
	gap: 0.25rem;
	color: #FFE999;
	font-size: 1.5rem;
}

.hero-section-rating-text {
	color: #fff;
	font-size: 1.25rem;
	font-weight: 600;
}

/* Expand video component */
.fx-expandVideo {
	position: relative;
	padding: 0;
	z-index: 1;
}

.fx-expandVideo.fx-expandVideo--active {
	z-index: 30;
}

.hero-expand-group__video {
	position: relative;
	z-index: 5;
	display: flex;
	justify-content: center;
	will-change: transform;
	transform: translateY(calc(var(--fx-video-peek, 100px) * -1));
	transition: transform 0.35s ease;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.hero-expand-group--active .hero-expand-group__video {
	transform: none;
}

.fx-expandVideo__pin {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	pointer-events: none;
	z-index: 1;
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.fx-expandVideo__frame {
	--fx-br: 16px;
	--fx-shadow: 0.18;
	width: clamp(320px, 60vw, 960px);
	aspect-ratio: 16 / 9;
	margin: 0 auto;
	border-radius: var(--fx-br);
	box-shadow: 0 20px 60px rgba(0, 0, 0, var(--fx-shadow));
	overflow: hidden;
	transform: translate3d(0, 0, 0);
	will-change: transform, border-radius, box-shadow;
	background: #000;
	position: relative;
	pointer-events: auto;
}

.fx-expandVideo__el {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.fx-expandVideo__a11yPlay {
	position: absolute;
	top: 1rem;
	right: 1rem;
	z-index: 3;
	padding: 0.5rem 1rem;
	border-radius: 999px;
	background: rgba(53, 199, 201, 0.9);
	color: #fff;
	border: none;
	font-weight: 600;
	cursor: pointer;
	transition: opacity 0.3s ease;
}

.fx-expandVideo__a11yPlay.is-visible {
	clip: auto;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
}

.fx-expandVideo__frame::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.85) 100%);
	pointer-events: none;
	z-index: 1;
}

.fx-expandVideo.fx-expandVideo--hidden {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.35s ease;
}

.fx-expandVideo.fx-expandVideo--hidden .fx-expandVideo__frame {
	opacity: 0;
}

.fx-expandVideo--reducedMotion .fx-expandVideo__frame {
	transition: border-radius 0.3s ease, box-shadow 0.3s ease;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Mobile adjustments for expand video */
@media (max-width: 768px) {
	.fx-expandVideo__frame {
		width: clamp(280px, 90vw, 600px) !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fx-expandVideo,
	.fx-expandVideo__frame {
		transition: none !important;
	}

	.fx-expandVideo--reducedMotion .fx-expandVideo__frame {
		transform: none !important;
		border-radius: 0;
		box-shadow: none;
	}
}
.hero-section-intro {
	position: absolute;
	left: 50%;
	bottom: clamp(1.25rem, 3vw, 3rem);
	width: min(72%, 90vw);
	max-width: 960px;
	color: #fff;
	z-index: 2;
	opacity: 0;
	transform: translate(-50%, 40px);
	transition: opacity 0.6s ease, transform 0.6s ease;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	pointer-events: none;
	padding: clamp(1rem, 3vw, 1.5rem);
	align-items: flex-start;
	text-align: left;
}

.hero-section-intro.is-visible {
	opacity: 1;
	transform: translate(-50%, 0);
	pointer-events: auto;
}

.fx-expandVideo__frame .hero-section-intro {
	transform-origin: center center;
	transform: translate(-50%, 40px);
}

.fx-expandVideo__frame .hero-section-intro.is-visible {
	transform: translate(-50%, 0);
}

.hero-section-intro--overlay {
	left: -0.5rem;
	width: 85%;
	max-width: 1400px;
	bottom: 30px;
	transform-origin: left bottom;
	padding-left: 0;
	padding-right: 0;
	transform: translateX(-10%);
}

.hero-section-intro__heading {
	margin: 0;
	font-size: clamp(2.6rem, 3.9vw, 3.64rem);
	font-weight: 600;
}

.hero-section-intro__content {
	margin: 0;
	font-size: clamp(1.3rem, 2.6vw, 1.625rem);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.9);
}

/* Fixed sizing for video overlay text */
.hero-section-intro--overlay .hero-section-intro__heading {
	font-size: 3.25rem;
}

.hero-section-intro--overlay .hero-section-intro__content {
	font-size: 1.625rem;
}

.hero-section-intro__cta {
	margin-top: 0.5rem;
}

.hero-section-intro__cta .btn-bubble-arrow {
	min-width: 0;
	max-width: none;
	width: auto;
	align-self: flex-start;
}

/* Override bubble button sizing for video overlay */
.hero-section-intro--overlay .hero-section-intro__cta.btn-group {
	font-size: 1rem;
	transform-origin: left center;
}

.hero-section-intro--overlay .btn-bubble-arrow {
	font-size: 1rem;
}

.hero-section-intro--overlay .btn-bubble-arrow__arrow {
	width: 3.75em;
	height: 3.75em;
}

.hero-section-intro--overlay .btn-bubble-arrow__content {
	height: 3.75em;
	padding-left: 2em;
	padding-right: 2em;
}

/* Counteract parent frame scaling on desktop (targetScale typically 1.5-2x) */
@media (min-width: 769px) {
	.fx-expandVideo__frame .hero-section-intro--overlay {
		transform: translateX(-10%) scale(0.6);
		bottom: -30px;
	}

	.fx-expandVideo__frame .hero-section-intro--overlay.is-visible {
		transform: translateX(-10%) scale(0.6);
		bottom: -30px;
	}
}

/* Counteract parent frame scaling on mobile (scale: 1.3) */
@media (max-width: 768px) {
	.fx-expandVideo__frame .hero-section-intro--overlay {
		transform: translateX(-10%) scale(0.77);
		bottom: -30px;
	}

	.fx-expandVideo__frame .hero-section-intro--overlay.is-visible {
		transform: translateX(-10%) scale(0.77);
		bottom: -30px;
	}

	.hero-section-intro--overlay {
		width: 90%;
		bottom: -30px;
	}
}

@media (max-width: 900px) {
	.hero-section-intro {
		display: none;
	}
}