/* components-form-hero.css
 * Structural Hero Form Component Layer (Phase B)
 * Contains form wrapper sizing, positioning, layout primitives only
 * No colors, typography overrides, borders, shadows, transitions
 * Source: AI-DEV/feedback/hero-form-styles-we-lost.txt (form structural subset)
 */

/* ========= HERO FORM STRUCTURAL RULES (EXTRACTED) ========= */
/* Source: hero-form-styles-we-lost.txt (form section only) */

.hero-inline-form {
	position: relative;
	margin: 0 auto;
	z-index: 10;
	width: 100%;
	max-width: 1200px;
	padding: 1.25rem 1.25rem 0 1.25rem;
	border-radius: 12px; /* shape considered structural container rounding */
	overflow: visible;
	box-sizing: border-box;
}

.hero-form-wrapper { width: 100%; margin: 0; padding: 0; }

.hero-form-container {
	position: absolute !important;
	bottom: 14px !important;
	left: 50% !important;
	transform: translateX(-50%) !important;
	width: 92% !important;
	max-width: 1260px !important;
	z-index: 10 !important;
	overflow: visible !important;
}

@media (min-width: 992px) {
	.hero-form-container .hero-form-wrapper { padding-bottom: 0 !important; margin-bottom: 0 !important; }
	.hero-form-container #hero-form-fields { margin-bottom: 0 !important; }
	.hero-form-container .hero-form-inputs { margin-bottom: 0 !important; }
	.hero-form-container .hero-form-subtitle { margin-bottom: 0.25rem !important; }
	#hero-form-close { display: none !important; }
	#hero-form-cta { display: none !important; }
}

/* Responsive modal layout for medium/small screens */
@media (max-width: 991px) {
	.hero-form-container {
		position: fixed !important;
		bottom: 14px !important;
		left: 50% !important;
		transform: translateX(-50%) !important;
		width: calc(100% - 32px) !important;
		max-width: 620px !important;
		max-height: 70vh !important;
		z-index: 1000 !important;
		overflow: visible !important;
		display: none !important;
	}
	.hero-inline-form {
		position: relative !important;
		width: 100% !important;
		max-width: 100% !important;
		padding: 1.25rem !important;
		border-radius: 12px 12px 0 0 !important;
		max-height: 70vh !important;
		overflow-y: auto !important;
		transform: translateY(0) !important;
		transition: transform 0.3s ease-out !important;
	}
	.hero-form-container[style*="display: none"] .hero-inline-form,
	.hero-form-container[style*="visibility: hidden"] .hero-inline-form { transform: translateY(100%) !important; }
	.hero-form-inputs { flex-direction: column !important; gap: 1rem !important; margin-bottom: 1rem !important; }
	.hero-form-inputs .form-control,
	.hero-form-inputs .btn { max-width: 100% !important; min-width: 100% !important; flex: none !important; height: var(--hero-input-height-mobile, 50px) !important; }
	#hero-form-cta { display: block !important; }
}

/* Large screens horizontal layout */
@media (min-width: 992px) {
	.hero-form-container { bottom: 54px !important; display: block !important; }
	.hero-form-inputs { flex-direction: row !important; flex-wrap: nowrap !important; justify-content: space-between !important; align-items: center !important; gap: 0.875rem !important; }
	.hero-form-inputs .form-control { flex: 1; height: var(--hero-input-height, 45px); }
	.hero-form-inputs .form-control:nth-child(3) { flex: 1.2; }
	.hero-form-inputs .btn { flex: 0 0 auto; width: auto; min-width: 140px; max-width: 180px; }
	#hero-form-cta { display: none !important; }
}

/* Call to action container (structural visibility control) */
#hero-form-cta {
	position: absolute;
	bottom: 14px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10;
	width: auto;
	text-align: center;
	display: none;
	background: transparent !important;
	padding: 0 !important;
	border: none !important;
	box-shadow: none !important;
}

/* Force CTA visibility on small/medium screens (structural overrides only) */
@media (max-width: 991px) {
	html body #hero-form-cta { display: block !important; visibility: visible !important; opacity: 1 !important; }
	html body #hero-form-cta button,
	html body #hero-form-cta .hero-form-submit { display: inline-block !important; visibility: visible !important; opacity: 1 !important; cursor: pointer !important; }
}

@media (min-width: 992px) {
	body #hero-form-cta { position: absolute !important; bottom: 27px !important; left: 50% !important; transform: translateX(-50%) !important; z-index: 10 !important; width: 100% !important; text-align: center !important; }
	body #hero-form-cta button,
	body #hero-form-cta .hero-form-submit { display: inline-block !important; visibility: visible !important; opacity: 1 !important; }
}

html body div#hero-form-cta[style*="display: none"] { display: block !important; }
html body div#hero-form-cta button[style*="display: none"],
html body div#hero-form-cta .hero-form-submit[style*="display: none"] { display: inline-block !important; }

/* Supporting layout utility */
.hero-form-inputs { margin: 0; display: flex; gap: 0.875rem; width: 100%; align-items: stretch; justify-content: space-between; flex-wrap: nowrap; max-width: 100%; }

/* Desktop grid layout (moved from inline) */
@media (min-width: 992px) {
	#hero-form-fields { display: grid !important; grid-template-columns: 1fr auto !important; grid-auto-rows: auto !important; align-items: center !important; column-gap: 0.75rem !important; }
	.hero-form-inputs { grid-column: 1 / 2 !important; grid-row: 1 !important; }
	.hero-form-button-col { grid-column: 2 / 3 !important; grid-row: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; }
	.hero-form-consent { grid-column: 1 / 3 !important; grid-row: 2 !important; }
		.hero-form-inputs .form-control { height: var(--hero-input-height); padding: 0.35rem 0.55rem !important; font-size: 0.95rem !important; line-height: 1.2 !important; }
		.hero-form-button-col .btn.hero-form-submit { min-height: var(--hero-button-height, 45px); padding: 0.65rem 1.25rem !important; line-height: 1.3 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; }
}

/* Input flex growth ratios (moved from inline) */
.hero-form-inputs .form-control[name="name"] { flex: 2 !important; min-width: 0 !important; }
.hero-form-inputs .form-control[name="phone"] { flex: 1.5 !important; min-width: 0 !important; }
.hero-form-inputs .form-control[name="address"] { flex: 2.5 !important; min-width: 0 !important; }

/* Modal centered version for small screens (retain structural aspects only) */
@media (max-width: 991px) {
	#hero-form-container { top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; }
	#hero-form-fields { display: block !important; }
	.hero-form-button-col { display: block !important; text-align: center !important; margin-top: 0.5rem !important; }
}

/* End structural hero form layer */