/* BBP Hero widget styles.
 * Also defines the shared, reusable .bbp-btn / .bbp-text-gold classes —
 * this is the first widget stylesheet loaded, so other BBP widgets assume
 * these exist. Define them ONLY here.
 */

.bbp-hero {
	position: relative;
	background-color: var(--bbp-bg-footer);
	/* No overflow:hidden here — the CTA button deliberately extends below
	   .bbp-hero-bg's own edge (which clips the video itself, separately)
	   and must not be cropped by this section's own box. */
	min-height: 720px;
}

/* Faint hexagon texture across the whole section — this is what shows
   through in the outer margin around the panel, and in the notch behind
   the CTA button. */
.bbp-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url('../../images/homepage/shared/section-hexagon-bg.png');
	background-size: cover;
	background-position: center;
	opacity: 0.15;
	mix-blend-mode: luminosity;
	pointer-events: none;
	z-index: 0;
}

/* The video/photo panel and the text content share the EXACT same box
   (both inset 24px from the section edges) so text always lines up with
   the panel's actual corners, at any viewport width. */
.bbp-hero-bg {
	position: absolute;
	inset: 24px;
	border-radius: 24px;
	background-size: cover;
	background-position: center;
	overflow: hidden;
	z-index: 1;
}

.bbp-hero-bg-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bbp-hero-bg::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(90deg, rgba(10, 10, 10, 0.88) 0%, rgba(10, 10, 10, 0.6) 40%, rgba(10, 10, 10, 0.4) 100%);
}

.bbp-hero-inner {
	position: absolute;
	inset: 24px;
	z-index: 2;
	max-width: var(--bbp-content-width);
	margin: 0 auto;
	padding: 56px 60px;
	display: flex;
	flex-direction: column;
}

.bbp-hero-content {
	max-width: 640px;
}

.bbp-hero-heading {
	font-family: var(--bbp-heading-font);
	font-weight: 400;
	font-size: 68px;
	line-height: 1.02;
	letter-spacing: 0.01em;
	color: var(--bbp-text-white);
	text-transform: uppercase;
	margin: 0 0 24px;
}

.bbp-hero-heading .bbp-text-gold {
	color: var(--bbp-gold);
}

.bbp-hero-paragraph p {
	color: rgba(255, 255, 255, 0.9);
	font-family: var(--bbp-font-family);
	font-size: 18px;
	line-height: 1.6;
	max-width: 560px;
	margin: 0 0 28px;
}

.bbp-hero-trust-pill {
	display: flex;
	align-items: center;
	gap: 14px;
}

.bbp-hero-avatars {
	display: flex;
}

.bbp-hero-avatars img {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 2px solid var(--bbp-bg-footer);
	object-fit: cover;
	margin-left: -12px;
}

.bbp-hero-avatars img:first-child {
	margin-left: 0;
}

.bbp-hero-trust-label {
	color: var(--bbp-text-white);
	font-family: var(--bbp-font-family);
	font-size: 15px;
	font-weight: 600;
}

/* Pushed to the bottom of .bbp-hero-inner's flex column, then nudged down
   further so the button visually breaks out of the panel's bottom edge
   into the outer hexagon-textured margin, matching the reference design. */
.bbp-hero-bottom-row {
	position: relative;
	z-index: 3;
	margin-top: 0;
	transform: translateY(100px);
}

.bbp-hero-cta {
	position: relative;
	grid-column: 2;
	justify-self: center;
	z-index: 3;
}

/* Sized relative to the button itself (not a fixed guess), so it always
   hugs the button's real rendered size — a thin ring of the outer section's
   own background showing around the button, creating the illusion of a
   notch cut into the panel without a fragile CSS mask. */
.bbp-hero-notch {
	position: absolute;
	inset: -10px;
	z-index: 0;
	border-radius: 999px;
	background-color: var(--bbp-bg-footer);
}

.bbp-hero-cta-btn {
	position: relative;
	z-index: 1;
	gap: 14px;
	padding: 26px 46px;
	font-size: 22px;
}

.bbp-hero-cta-btn .bbp-btn-icon {
	width: 20px;
	height: 20px;
}

.bbp-hero-google-badge {
	grid-column: 3;
	justify-self: end;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	color: var(--bbp-text-white);
	font-family: var(--bbp-font-family);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	position: absolute;
	bottom: 30px;
	right: 30px;
}

.bbp-hero-google-logo {
	height: 24px;
	width: auto;
}

.bbp-hero-google-stars {
	height: 16px;
	width: auto;
}

/* Shared, reusable button classes — defined here only. */

.bbp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 16px 32px;
	border-radius: 999px;
	font-family: var(--bbp-heading-font);
	font-weight: 400;
	font-size: 16px;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	transition: opacity 0.2s ease, background-color 0.25s ease;
	white-space: nowrap;
}

.bbp-btn:hover {
	opacity: 0.85;
}

.bbp-btn-primary {
	background-color: var(--bbp-gold);
	color: #000;
}

/* Primary (gold) buttons lighten on hover instead of dimming. */
.bbp-btn-primary:hover {
	background-color: var(--bbp-gold-light);
	opacity: 1;
}

.bbp-btn-secondary {
	background: rgba(0, 0, 0, 0.58);
	color: var(--bbp-text-white);
	border: 1px solid rgba(255, 255, 255, 0.7);
	transition: all 0.3s;
}

.bbp-btn-secondary:hover {
	background-color: var(--bbp-gold-dark);
	opacity: 1;
	border-color: var(--bbp-gold-dark);
	color: #000;
}

.bbp-btn-icon {
	width: 18px;
	height: 18px;
	display: inline-block;
}

.bbp-text-gold {
	color: var(--bbp-gold);
}

@media (max-width: 900px) {
	.bbp-hero {
		min-height: 0;
	}

	.bbp-hero-inner {
		position: relative;
		inset: auto;
		padding: 40px 24px;
		min-height: 560px;
	}

	.bbp-hero-bottom-row {
		grid-template-columns: 1fr;
		row-gap: 20px;
		justify-items: center;
		transform: none;
		margin-top: 32px;
	}

	.bbp-hero-notch {
		display: none;
	}

	.bbp-hero-cta {
		grid-column: 1;
	}

	.bbp-hero-google-badge {
		grid-column: 1;
		justify-self: center;
		flex-direction: row;
	}

	.bbp-hero-heading {
		font-size: 38px;
	}
}

@media (max-width: 480px) {
	.bbp-hero-inner {
		padding: 30px 16px 75px;
	}

	.bbp-hero-bg {
		inset: 12px;
	}

	.bbp-hero-heading {
		font-size: 30px;
		margin-top: 30px;
	}

	.bbp-hero-cta-btn {
		font-size: 17px;
		gap: 10px;
		padding: 16px 28px;
	}

	.bbp-hero-cta-btn .bbp-btn-icon {
		width: 16px;
		height: 16px;
	}
}