/*
 * Hero Readability — frosted glass card behind the hero title group.
 *
 * Applies to GreenShift hero sections tagged with `.hero-overlay`
 * (home-hero, showroom-hero, commercial-hero, about-hero), which are
 * used on: Home, Showroom, Gartenmöbel, Sonnenschirme, Kissenmanufaktur,
 * Über uns, Gewerbe.
 *
 * Excluded: `.contact-hero` (Kontakt page — per product decision the
 * Kontakt hero stays without the glass card). Sub-category archive
 * pages do not carry `.hero-overlay` at all so they are unaffected.
 *
 * Selector targets the direct-child text-block wrapper that contains
 * the heading (h1/h2), so it stays robust across pages regardless of
 * GreenShift's per-block gsbp-* ids.
 */

.hero-overlay:not(.contact-hero) > div:has(> :is(h1, h2)) {
	position: relative;
	isolation: isolate;
	max-width: min(960px, 92%);
	margin-inline: auto;
	padding: clamp(1.5rem, 3vw, 2.75rem) clamp(2rem, 5vw, 4.5rem);
	border-radius: 14px;
	background: rgba(28, 24, 20, 0.08);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	border: 1px solid rgba(255, 255, 255, 0.06);
	box-shadow: 0 4px 22px rgba(0, 0, 0, 0.10);
}

/* Fallback — Firefox older than 103 and any UA without backdrop-filter */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.hero-overlay:not(.contact-hero) > div:has(> :is(h1, h2)) {
		background: rgba(28, 24, 20, 0.3);
	}
}

@media (max-width: 767px) {
	.hero-overlay:not(.contact-hero) > div:has(> :is(h1, h2)) {
		max-width: 94%;
		padding: 1.25rem;
		backdrop-filter: blur(2px);
		-webkit-backdrop-filter: blur(2px);
	}
}