/* ==========================================================================
   Luniea Smart Estimate - Hero Shortcode ([luniea_estimator_hero])
   A compact, one-step teaser card meant to sit inside a homepage hero
   section — reuses the main estimator's option-card/button/icon styling
   from frontend.css (the --lse-card-*/--lse-card-icon-* vars already
   cascade in since .lse-hero-wrapper also carries the .lse-wrapper class),
   plus its own teaser-only --lse-teaser-* vars for the container/headline/
   subheadline/CTA button, all set by Design_Settings' "Teaser Form"
   section via the same Shortcode::build_design_css() every other setting
   goes through — see includes/class-design-settings.php.
   ========================================================================== */

/* Compound (not bare .lse-hero-wrapper) selectors here on purpose: frontend.css's
   full-wizard .lse-wrapper/.lse-estimator-container rules set min-height:100vh at
   the SAME specificity as a bare .lse-hero-wrapper override, so which one wins
   would depend on stylesheet load order alone — a page-builder's CSS combiner/
   minifier (Elementor, Autoptimize, etc.) can silently reorder that and make the
   teaser inherit the full-page 100vh height. Two classes on one selector always
   outrank one, regardless of load order.

   Also: .lse-wrapper is normally a flex ITEM inside whatever wraps the shortcode
   (an Elementor container, a theme section, etc. — all flex/grid by default in
   most page builders). Flex items default to align-items:stretch, so without
   flex-shrink/flex-grow/align-self reset here the teaser silently stretches to
   match its PARENT's height (e.g. an Elementor container's own "Min Height"
   layout setting) — nothing to do with our own min-height at all. height:auto +
   flex:0 0 auto + align-self:flex-start make the teaser always hug its own
   content regardless of what it's embedded inside. */
.lse-wrapper.lse-hero-wrapper,
.lse-hero-wrapper .lse-hero-container {
	min-height: var(--lse-teaser-min-height, 0) !important;
	height: var(--lse-teaser-height, auto) !important;
}

.lse-wrapper.lse-hero-wrapper {
	flex: 0 0 auto;
	align-self: flex-start;
	width: 100%;
}

.lse-hero-wrapper .lse-hero-container {
	background-color: var(--lse-teaser-bg, #ffffff);
	/* Optional image layer on top of the solid Background Color — the
	   overlay tint/opacity is applied separately via the ::before pseudo-
	   element below, so this only needs the image itself, mirroring the
	   main wizard's .lse-estimator-container background-image technique. */
	background-image: url(var(--lse-teaser-bg-image, ''));
	background-size: cover;
	background-position: center;
	padding: var(--lse-teaser-padding, 48px 32px);
	margin: var(--lse-teaser-margin, 0);
	border-radius: var(--lse-teaser-radius, 12px);
	max-width: var(--lse-teaser-max-width, 800px);
	max-height: var(--lse-teaser-max-height, none) !important;
	overflow-y: auto;
	box-shadow: var(--lse-teaser-shadow, none);
	opacity: var(--lse-teaser-opacity, 1);
	gap: var(--lse-teaser-gap, 24px);
	flex: 0 0 auto;
	position: relative;
}

/* .lse-content-area defaults to flex:1 (main wizard fills the sticky-header/
   footer layout with it) — the teaser has no header/footer to push against,
   so left at flex:1 it stretches to fill whatever height its ancestors (an
   Elementor container's Min Height, etc.) happen to give it. Reset to its
   natural content height. */
.lse-hero-wrapper .lse-content-area {
	flex: 0 1 auto;
}

.lse-hero-wrapper .lse-hero-container {
	border: var(--lse-teaser-border-width, 0) solid var(--lse-teaser-border-color, transparent);
}

.lse-hero-wrapper .lse-hero-container::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	background-color: var(--lse-teaser-overlay-color, transparent);
	opacity: var(--lse-teaser-overlay-opacity, 0);
}

.lse-hero-wrapper .lse-content-area {
	padding: var(--lse-content-padding, 32px);
	overflow: visible;
	text-align: var(--lse-teaser-align, center);
	display: flex;
	flex-direction: column;
	justify-content: var(--lse-teaser-valign, center);
}

.lse-hero-wrapper .lse-step {
	margin: 0;
}

.lse-hero-wrapper .lse-step-header {
	display: none; /* the DB step's own title/description is replaced by the editable headline/subheadline above it */
}

.lse-hero-wrapper .lse-options-grid {
	align-items: stretch;
	grid-template-columns: var(--lse-teaser-columns, repeat(auto-fit, minmax(140px, 1fr)));
	gap: var(--lse-teaser-gap-v, 12px) var(--lse-teaser-gap-h, 12px);
}

.lse-hero-copy {
	margin-bottom: var(--lse-teaser-subheadline-margin, 24px);
	text-align: inherit;
}

.lse-hero-headline {
	margin: 0 0 var(--lse-teaser-headline-margin, 8px) 0;
	font-size: var(--lse-teaser-headline-fs, 28px);
	font-weight: var(--lse-teaser-headline-fw, 700);
	line-height: var(--lse-teaser-headline-lh, 1.2);
	letter-spacing: var(--lse-teaser-headline-ls, normal);
	color: var(--lse-teaser-headline-color, #0f172a);
	text-align: var(--lse-teaser-headline-align, center);
	text-transform: var(--lse-teaser-headline-transform, none);
	font-family: var(--lse-font);
}

.lse-hero-subheadline {
	margin: 0;
	font-size: var(--lse-teaser-subheadline-fs, 16px);
	font-weight: var(--lse-teaser-subheadline-fw, 400);
	line-height: var(--lse-teaser-subheadline-lh, 1.5);
	letter-spacing: var(--lse-teaser-subheadline-ls, normal);
	color: var(--lse-teaser-subheadline-color, #475569);
	text-align: var(--lse-teaser-subheadline-align, center);
	text-transform: var(--lse-teaser-subheadline-transform, none);
	font-family: var(--lse-font);
}

.lse-hero-footer {
	display: flex;
	justify-content: var(--lse-teaser-btn-align, center);
	width: 100%;
	margin-top: 24px;
}

.lse-hero-wrapper .lse-hero-cta {
	/* The Hero CTA also carries .lse-btn-next for shared button behavior.
	   That navigation class pins normal Next buttons to the right with
	   !important auto margins. Clear those margins here so the Hero
	   footer's Visual Design left/center/right setting is authoritative. */
	margin-left: 0 !important;
	margin-right: 0 !important;
	width: var(--lse-teaser-btn-width, auto);
	height: var(--lse-teaser-btn-height, auto);
	padding: var(--lse-teaser-btn-padding, 12px 24px);
	border-radius: var(--lse-teaser-btn-radius, 8px);
	font-size: var(--lse-teaser-btn-fs, 16px);
	font-weight: var(--lse-teaser-btn-fw, 600);
	background-color: var(--lse-teaser-btn-bg, #0f172a);
	color: var(--lse-teaser-btn-text, #ffffff);
	border: 1px solid var(--lse-teaser-btn-border, transparent);
	box-shadow: var(--lse-teaser-btn-shadow, none);
	gap: var(--lse-teaser-btn-icon-gap, 8px);
	transition: transform var(--lse-teaser-hover-duration, .15s) ease, box-shadow var(--lse-teaser-hover-duration, .15s) ease, background-color var(--lse-teaser-hover-duration, .15s) ease;
}

.lse-hero-wrapper .lse-hero-cta:hover {
	background-color: var(--lse-teaser-btn-bg-hover, var(--lse-teaser-btn-bg, #0f172a));
	box-shadow: var(--lse-teaser-btn-shadow-hover, var(--lse-teaser-btn-shadow, none));
}

.lse-hero-wrapper .lse-option-card {
	height: 100%;
	display: flex;
	flex-direction: column;
	transition: transform var(--lse-teaser-hover-duration, .15s) ease, box-shadow var(--lse-teaser-hover-duration, .15s) ease;
}

.lse-hero-wrapper .lse-card-content {
	height: 100%;
	flex: 1 1 auto;
}

.lse-hero-wrapper .lse-option-card:hover {
	transform: translateY(calc(-1 * var(--lse-teaser-hover-lift, 0px))) scale(var(--lse-teaser-hover-scale, 1));
	box-shadow: var(--lse-teaser-hover-shadow, none);
}

/* Teaser-only card hover color overrides — fall back to the shared Answer
   Options hover vars (which themselves fall back to frontend.css's own
   defaults), so leaving these blank keeps the teaser's cards matching the
   main wizard's exactly. */
.lse-hero-wrapper .lse-option-card:hover .lse-card-content {
	background: var(--lse-teaser-card-hover-bg, var(--lse-card-hover-bg, var(--lse-card-bg)));
	border-color: var(--lse-teaser-card-hover-border, var(--lse-card-hover-border, #a5b4fc));
	box-shadow: var(--lse-teaser-card-hover-shadow, var(--lse-card-hover-shadow, 0 8px 20px rgba(99, 102, 241, 0.08)));
}

/* Teaser-only card SELECTED color overrides — same fallback-to-shared-var
   pattern as the hover trio above. */
.lse-hero-wrapper .lse-option-card input:checked + .lse-card-content {
	background: var(--lse-teaser-card-selected-bg, var(--lse-card-selected, rgba(99, 102, 241, 0.06)));
	border-color: var(--lse-teaser-card-selected-border, var(--lse-primary));
	box-shadow: 0 0 0 1px var(--lse-teaser-card-selected-border, var(--lse-primary));
}

.lse-hero-wrapper .lse-option-card input:checked + .lse-card-content .lse-card-label {
	color: var(--lse-teaser-card-selected-text, var(--lse-text));
}

.lse-hero-admin-notice {
	margin: 12px 0 0;
	padding: 10px 14px;
	border: 1px dashed var(--lse-border);
	border-radius: 8px;
	font-size: 13px;
	color: var(--lse-text-muted);
	text-align: center;
}

/* ==========================================================================
   Teaser container animations — driven by Design_Settings' "Teaser Form"
   Effects controls (teaser_animation_type/teaser_anim_speed/
   teaser_border_pulse_color); the animation-type class itself is applied
   in templates/frontend/estimator-hero.php.
   ========================================================================== */

.lse-hero-wrapper.lse-hero-animate-border-color .lse-hero-container {
  animation: lse-hero-border-pulse var(--lse-teaser-anim-speed, 3s) ease-in-out infinite;
  border: 2px solid var(--lse-teaser-anim-color, #2563eb);
}

.lse-hero-wrapper.lse-hero-animate-subtle-float .lse-hero-container {
  animation: lse-hero-float var(--lse-teaser-anim-speed, 3s) ease-in-out infinite;
}

.lse-hero-wrapper.lse-hero-animate-pulse .lse-hero-container {
  animation: lse-hero-pulse var(--lse-teaser-anim-speed, 3s) ease-in-out infinite;
}

.lse-hero-wrapper.lse-hero-animate-fade-in-up .lse-hero-container {
  animation: lse-hero-fade-in-up var(--lse-teaser-anim-speed, 3s) ease-out forwards;
}

@keyframes lse-hero-border-pulse {
  0%, 100% { border-color: var(--lse-teaser-anim-color, #2563eb); }
  50% { border-color: transparent; }
}

@keyframes lse-hero-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes lse-hero-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.015); }
}

@keyframes lse-hero-fade-in-up {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   Responsive Overrides
   ========================================================================== */

@media (max-width:1024px) {
	.lse-hero-wrapper .lse-options-grid {
		grid-template-columns: var(--lse-teaser-columns-tablet, var(--lse-teaser-columns, repeat(auto-fit, minmax(140px, 1fr)))) !important;
		gap: var(--lse-teaser-gap-v-tablet, var(--lse-teaser-gap-v, 12px)) var(--lse-teaser-gap-h-tablet, var(--lse-teaser-gap-h, 12px));
	}
	.lse-hero-wrapper .lse-hero-headline {
		font-size: var(--lse-teaser-headline-fs-tablet, var(--lse-teaser-headline-fs, 28px)) !important;
		font-weight: var(--lse-teaser-headline-fw-tablet, var(--lse-teaser-headline-fw, 700));
		line-height: var(--lse-teaser-headline-lh-tablet, var(--lse-teaser-headline-lh, 1.2));
		color: var(--lse-teaser-headline-color-tablet, var(--lse-teaser-headline-color, #0f172a));
		text-align: var(--lse-teaser-headline-align-tablet, var(--lse-teaser-headline-align, center));
		margin-bottom: var(--lse-teaser-headline-margin-tablet, var(--lse-teaser-headline-margin, 8px));
	}
	.lse-hero-wrapper .lse-hero-subheadline {
		font-size: var(--lse-teaser-subheadline-fs-tablet, var(--lse-teaser-subheadline-fs, 16px)) !important;
		font-weight: var(--lse-teaser-subheadline-fw-tablet, var(--lse-teaser-subheadline-fw, 400));
		line-height: var(--lse-teaser-subheadline-lh-tablet, var(--lse-teaser-subheadline-lh, 1.5));
		color: var(--lse-teaser-subheadline-color-tablet, var(--lse-teaser-subheadline-color, #475569));
		text-align: var(--lse-teaser-subheadline-align-tablet, var(--lse-teaser-subheadline-align, center));
	}
	.lse-hero-wrapper .lse-hero-container {
		padding: var(--lse-teaser-padding-tablet, var(--lse-teaser-padding, 48px 32px)) !important;
		border-radius: var(--lse-teaser-radius-tablet, var(--lse-teaser-radius, 12px)) !important;
		margin: var(--lse-teaser-margin-tablet, var(--lse-teaser-margin, 0));
		gap: var(--lse-teaser-gap-tablet, var(--lse-teaser-gap, 24px));
		background-color: var(--lse-teaser-bg-tablet, var(--lse-teaser-bg, #ffffff));
		background-image: url(var(--lse-teaser-bg-image-tablet, var(--lse-teaser-bg-image, '')));
		box-shadow: var(--lse-teaser-shadow-tablet, var(--lse-teaser-shadow, none));
	}
	.lse-hero-wrapper .lse-content-area {
		text-align: var(--lse-teaser-align-tablet, var(--lse-teaser-align, center));
		justify-content: var(--lse-teaser-valign-tablet, var(--lse-teaser-valign, center));
	}
	.lse-hero-wrapper .lse-hero-cta {
		width: var(--lse-teaser-btn-width-tablet, var(--lse-teaser-btn-width, auto));
		padding: var(--lse-teaser-btn-padding-tablet, var(--lse-teaser-btn-padding, 12px 24px));
		border-radius: var(--lse-teaser-btn-radius-tablet, var(--lse-teaser-btn-radius, 8px));
		font-size: var(--lse-teaser-btn-fs-tablet, var(--lse-teaser-btn-fs, 16px));
		background-color: var(--lse-teaser-btn-bg-tablet, var(--lse-teaser-btn-bg, #0f172a));
		color: var(--lse-teaser-btn-text-tablet, var(--lse-teaser-btn-text, #ffffff));
	}

	.lse-hero-footer {
		justify-content: var(--lse-teaser-btn-align-tablet, var(--lse-teaser-btn-align, center));
	}
}

@media (max-width:767px) {
	.lse-hero-wrapper .lse-options-grid {
		grid-template-columns: var(--lse-teaser-columns-mobile, var(--lse-teaser-columns-tablet, var(--lse-teaser-columns, repeat(auto-fit, minmax(140px, 1fr))))) !important;
		gap: var(--lse-teaser-gap-v-mobile, var(--lse-teaser-gap-v, 12px)) var(--lse-teaser-gap-h-mobile, var(--lse-teaser-gap-h, 12px));
	}

	/* A field-level "Full Width Cards on Mobile" choice must win over the
	   Hero Form's own responsive column variables above. The Hero rule uses
	   !important so design-panel column counts remain deterministic, which
	   previously left this field setting unable to collapse the grid. Reset
	   display as well so full-width remains authoritative if an older saved
	   field happens to contain both the carousel and full-width flags. */
	.lse-hero-wrapper .lse-options-grid.lse-mobile-full-width {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) !important;
		overflow-x: visible;
		scroll-snap-type: none;
	}

	.lse-hero-wrapper .lse-options-grid.lse-mobile-full-width > .lse-option-card {
		width: 100%;
		min-width: 0;
		max-width: none;
		flex: none;
	}

	/* Hero auto-stretch renders an incomplete final desktop row as a sibling
	   flex container. Stack that row too, otherwise two trailing cards can
	   remain side-by-side even though the main grid is one card per row. */
	.lse-hero-wrapper .lse-options-grid.lse-mobile-full-width + .lse-options-grid-stretch-row {
		flex-direction: column;
	}

	.lse-hero-wrapper .lse-options-grid.lse-mobile-full-width + .lse-options-grid-stretch-row > .lse-option-card {
		width: 100%;
		flex: 0 0 auto;
	}
	.lse-hero-wrapper .lse-hero-headline {
		font-size: var(--lse-teaser-headline-fs-mobile, var(--lse-teaser-headline-fs-tablet, var(--lse-teaser-headline-fs, 28px))) !important;
		font-weight: var(--lse-teaser-headline-fw-mobile, var(--lse-teaser-headline-fw, 700));
		line-height: var(--lse-teaser-headline-lh-mobile, var(--lse-teaser-headline-lh, 1.2));
		color: var(--lse-teaser-headline-color-mobile, var(--lse-teaser-headline-color, #0f172a));
		text-align: var(--lse-teaser-headline-align-mobile, var(--lse-teaser-headline-align, center));
		margin-bottom: var(--lse-teaser-headline-margin-mobile, var(--lse-teaser-headline-margin, 8px));
	}
	.lse-hero-wrapper .lse-hero-subheadline {
		font-size: var(--lse-teaser-subheadline-fs-mobile, var(--lse-teaser-subheadline-fs-tablet, var(--lse-teaser-subheadline-fs, 16px))) !important;
		font-weight: var(--lse-teaser-subheadline-fw-mobile, var(--lse-teaser-subheadline-fw, 400));
		line-height: var(--lse-teaser-subheadline-lh-mobile, var(--lse-teaser-subheadline-lh, 1.5));
		color: var(--lse-teaser-subheadline-color-mobile, var(--lse-teaser-subheadline-color, #475569));
		text-align: var(--lse-teaser-subheadline-align-mobile, var(--lse-teaser-subheadline-align, center));
	}
	.lse-hero-wrapper .lse-hero-container {
		/* Full-bleed on mobile — edge-to-edge, no outer whitespace, regardless
		   of whatever padding/margin is configured for Desktop/Tablet. */
		padding: 0 !important;
		margin: 0 !important;
		border-radius: var(--lse-teaser-radius-mobile, var(--lse-teaser-radius-tablet, var(--lse-teaser-radius, 12px))) !important;
		gap: var(--lse-teaser-gap-mobile, var(--lse-teaser-gap, 24px));
		background-color: var(--lse-teaser-bg-mobile, var(--lse-teaser-bg, #ffffff));
		background-image: url(var(--lse-teaser-bg-image-mobile, var(--lse-teaser-bg-image, '')));
		box-shadow: var(--lse-teaser-shadow-mobile, var(--lse-teaser-shadow, none));
	}
	.lse-hero-wrapper .lse-content-area {
		padding: 0 !important;
		text-align: var(--lse-teaser-align-mobile, var(--lse-teaser-align, center));
		justify-content: var(--lse-teaser-valign-mobile, var(--lse-teaser-valign, center));
	}
	.lse-hero-wrapper .lse-hero-cta {
		width: var(--lse-teaser-btn-width-mobile, var(--lse-teaser-btn-width, auto));
		padding: var(--lse-teaser-btn-padding-mobile, var(--lse-teaser-btn-padding, 12px 24px));
		border-radius: var(--lse-teaser-btn-radius-mobile, var(--lse-teaser-btn-radius, 8px));
		font-size: var(--lse-teaser-btn-fs-mobile, var(--lse-teaser-btn-fs, 16px));
		background-color: var(--lse-teaser-btn-bg-mobile, var(--lse-teaser-btn-bg, #0f172a));
		color: var(--lse-teaser-btn-text-mobile, var(--lse-teaser-btn-text, #ffffff));
	}

	.lse-hero-footer {
		justify-content: var(--lse-teaser-btn-align-mobile, var(--lse-teaser-btn-align, center));
	}
}