/* ── simplydwell/community-hero ─────────────────────────────────────────────── */

.sd-community-hero {
	position: relative;
	width: 100%;
	min-height: 666px;
	overflow: hidden;
	display: flex;
	align-items: center;
    
}

/* ── Media layer (background image / video / iframe) ─────────────────────── */
.sd-community-hero__media {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.sd-community-hero__video,
.sd-community-hero__iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
	pointer-events: none;
}

/* ── Dark overlay ─────────────────────────────────────────────────────────── */
.sd-community-hero__overlay {
	position: absolute;
	inset: 0;
	background: rgba( 0, 0, 0, var( --sd-hero-overlay, 0.35 ) );
	pointer-events: none;
}

/* ── Text content ─────────────────────────────────────────────────────────── */
.sd-community-hero__content {
	position: relative;
	z-index: 1;
	width: 100%;
	/* padding: clamp( 3rem, 18.8vw, 271px ) clamp( 1.25rem, 5vw, 4rem ) clamp( 2rem, 6vw, 5rem ) clamp( 1.25rem, 8.3vw, 120px ); */
	color: #fff;
	padding: clamp(48px, 9vw, 120px) clamp(24px, 6vw, 120px);
}

/* Heading group: title + gold divider */
.sd-community-hero__heading {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0 0 24px;
	max-width: 486px;
}

.sd-community-hero__title {
	margin: 0;
	font-family: var( --sd-font-display, 'Lexend', sans-serif );
	font-size: clamp( 2.5rem, 4.2vw, 3.75rem );
	font-weight: 700;
	line-height: 1;
	color: #e2bb61;
}

.sd-community-hero__divider {
	width: 78px;
	height: 0;
	border-top: 3px solid #e2bb61;
}

.sd-community-hero__subtitle {
	margin: 0;
	max-width: 486px;
	font-family: var( --sd-font-display, 'Lexend', sans-serif );
	font-size: clamp( 1rem, 1.25vw, 1.125rem );
	font-weight: 500;
	line-height: 1.556;
	color: #fff;
}

/* ── Editor placeholder ───────────────────────────────────────────────────── */
.sd-community-hero .sd-cgrid__placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 40px 24px;
	width: 100%;
	background: #f0f0f0;
	color: #50575e;
	text-align: center;
}

.sd-community-hero .sd-cgrid__placeholder .dashicons {
	font-size: 36px;
	width: 36px;
	height: 36px;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media ( max-width: 768px ) {
	.sd-community-hero {
		min-height: 360px;
	}
}

/* ── Reduced-motion: freeze video, hide iframe ───────────────────────────── */
@media ( prefers-reduced-motion: reduce ) {
	.sd-community-hero__video {
		display: none;
	}
}


.sd-community-hero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	inset: 0;
}

.sd-community-hero__badge {
    margin: 0px 0px 20px;
    font-family: var( --sd-font-display, 'Lexend', sans-serif );
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.333;
    letter-spacing: 0.17em;
    text-transform: uppercase;
    color: #fff;
}

/* ── Gravity Form column (Figma: text left, cream form card right) ──────────────
   Only the --has-form variant turns the content into two columns, so heroes
   without a form keep their existing single-column layout and styling intact. */
.sd-community-hero--has-form .sd-community-hero__content {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: clamp( 32px, 5vw, 80px );
}

.sd-community-hero--has-form .sd-community-hero__text {
	flex: 0 1 486px;
	max-width: 486px;
}

.sd-community-hero__form {
	box-sizing: border-box;
	flex: 0 1 486px;
	width: 100%;
	max-width: 486px;
	padding: 32px;
	background: #f6f4ee;
	color: #1f242e;
}

/* Form title above the form (Figma "Be The First To Know!"). Words wrapped in
   *asterisks* render with the brand gradient; the rest stays the default colour. */
.sd-community-hero__form-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 0 24px;
}

.sd-community-hero__form-title {
	margin: 0;
	font-family: var( --sd-font-display, 'Lexend', sans-serif );
	font-size: 24px;
	font-weight: 700;
	line-height: 1.333;
	text-align: center;
	color: #1f242e;
}

.sd-community-hero__form-accent {
	background: var( --sd-gradient-brand, linear-gradient( 90deg, #d46f35 0%, #e2bb61 100% ) );
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

/* ── Gravity Forms restyle (scoped to the cream hero card). GF markup is
   version-dependent, so target common GF selectors. ─────────────────────────── */
.sd-community-hero__form .gform_wrapper,
.sd-community-hero__form .gform_wrapper form {
	margin: 0;
}

.sd-community-hero__form .gform_heading {
	margin: 0 0 24px;
	text-align: center;
}

.sd-community-hero__form .gform_title {
	margin: 0;
	font-family: var( --sd-font-display, 'Lexend', sans-serif );
	font-size: 24px;
	font-weight: 700;
	line-height: 1.333;
	color: #1f242e;
}

.sd-community-hero__form .gform_fields {
	/* display: grid;
	grid-template-columns: repeat( 2, 1fr ); */
	gap: 24px;
}

.sd-community-hero__form .gform-footer.gform_footer{
	margin-top: 0px !important;
}

.sd-community-hero__form .gfield {
	margin: 0;
}

/* Full-width rows (textarea, etc.) span both columns. */
.sd-community-hero__form .gfield.gfield--width-full,
.sd-community-hero__form .gfield--width-full,
.sd-community-hero__form .gfield textarea {
	grid-column: 1 / -1;
}

.sd-community-hero__form .gfield_label {
	margin: 0 0 8px;
	font-family: var( --sd-font-display, 'Lexend', sans-serif );
	font-size: 12px;
	font-weight: 700;
	line-height: 1.333;
	text-transform: uppercase;
	color: #737a87;
}

.sd-community-hero__form input[type="text"],
.sd-community-hero__form input[type="email"],
.sd-community-hero__form input[type="tel"],
.sd-community-hero__form input[type="number"],
.sd-community-hero__form select {
	box-sizing: border-box;
	width: 100% !important;
	padding: 8px 8px 8px 0 !important;
	background: transparent !important;
	border: 0 !important;
	border-bottom: 1px solid #c8c8c8 !important;
	border-radius: 0 !important;
	color: #1f242e !important;
	font-family: var( --sd-font-display, 'Lexend', sans-serif );
	font-size: 14px !important;
	line-height: 20px !important;
}

.sd-community-hero__form textarea {
	box-sizing: border-box;
	width: 100% !important;
	min-height: 36px;
	padding: 8px !important;
	background: transparent !important;
	border: 1px solid #c8c8c8 !important;
	border-radius: 0 !important;
	color: #1f242e !important;
	font-family: var( --sd-font-display, 'Lexend', sans-serif );
	font-size: 14px !important;
	line-height: 20px !important;
}

.sd-community-hero__form ::placeholder {
	color: #737a87 !important;
	opacity: 1 !important;
}

.sd-community-hero__form input:focus,
.sd-community-hero__form select:focus,
.sd-community-hero__form textarea:focus {
	outline: none;
	border-color: #d46f35 !important;
}

.sd-community-hero__form .gform_footer,
.sd-community-hero__form .gform-footer {
	margin: 24px 0 0;
	padding: 0;
}

.sd-community-hero__form input[type="submit"],
.sd-community-hero__form .gform_button
.sd-community-hero__form #gform_submit_button_3{
	box-sizing: border-box !important;
	width: 100% !important;
	min-height: 46px !important;
	padding: 8px 16px !important;
	background: #fff !important;
	border: 1px solid #d46f35 !important;
	border-radius: 20px !important;
	color: #d46f35 !important;
	font-family: var( --sd-font-display, 'Lexend', sans-serif );
	font-weight: 700 !important;
	font-size: 14px !important;
	line-height: 20px !important;
	cursor: pointer !important;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.sd-community-hero__form input[type="submit"]:hover,
.sd-community-hero__form input[type="submit"]:focus-visible,
.sd-community-hero__form .gform_button:hover,
.sd-community-hero__form .gform_button:focus-visible {
	background: #d46f35 !important;
	color: #fff !important;
	outline: none !important;
}

/* ── Responsive: stack the form under the text on narrow screens ─────────────── */
@media ( max-width: 900px ) {
	.sd-community-hero--has-form .sd-community-hero__content {
		flex-direction: column;
		align-items: stretch;
	}
	.sd-community-hero--has-form .sd-community-hero__text,
	.sd-community-hero__form {
		flex: 1 1 auto;
		max-width: 100%;
	}
	.sd-community-hero__form .gform_fields {
		grid-template-columns: 1fr;
	}
}