/* Hero block — base styles */
.le-hero-block .hero-overlay {
    background: linear-gradient(
		to right,
		var(--color-primary) 0%,
		color-mix(in srgb, var(--color-primary) 80%, transparent) 30%,
		color-mix(in srgb, var(--color-primary) 60%, transparent) 70%,
		color-mix(in srgb, var(--color-primary) 30%, transparent) 100%);
}

.le-hero-block .hero-cta-primary {
    background-color: var(--color-secondary);
    transition: background-color 200ms ease-out, transform 200ms ease-out, box-shadow 200ms ease-out;
}

.le-hero-block .hero-cta-primary:hover {
    background-color: var(--color-secondary-dark);
    transform: scale(1.05);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

/* Secondary (phone) CTA: a tiny transition into the hover, matching the v0 feel. */
.le-hero-block .hero-cta-secondary {
    transition: background-color 150ms ease, border-color 150ms ease;
}

/* Default: single-column centered (Standard & fallback) */
.le-hero-block .hero-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.le-hero-block .hero-ctas {
	justify-content: center;
}

/* Quick Links: hidden by default — le-premium/style.css reveals it */
.le-hero-block .hero-quick-links {
	display: none;
}

/* Quick Links card — hero placement only.
   The card's visual styles (.quick-links-*) are global in dist/main.css and
   shared with the standalone Quick Links block via le_render_quick_links(). */
.le-hero-block .quick-links-card {
	width: 80%;
	margin-left: auto;
}

@media (max-width: 768px) {
	.le-hero-block .quick-links-card {
		width: 100%;
	}
}