/* Webux Page-Hero (field block) - frontend.
   Pixel-ported from the original .lv-ueber-uns-intro design. */
.webux-page-hero {
	padding-block: 96px 88px;
	border-bottom: 1px solid #ece7de;
}

.webux-page-hero.has-background {
	padding-inline: 1.5rem;
}

.webux-page-hero__inner {
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
}

.webux-page-hero__text {
	display: flex;
	flex-direction: column;
	gap: 22px;
	max-width: 620px;
}

.webux-page-hero__text > * { margin: 0; }

.webux-page-hero__eyebrow {
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 1.82px;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary, #8b8178);
}

.webux-page-hero__title {
	margin: 0;
	font-size: 48px;
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: -0.96px;
	color: #1a1a1a;
}

.webux-page-hero__lead {
	font-size: 17px;
	line-height: 1.65;
	color: #6b6661;
}

.webux-page-hero__lead p { margin: 0; }
.webux-page-hero__lead p + p { margin-top: 20px; }

/* Split layout: text + image side by side.
   minmax(0,1fr) instead of 1fr so a long word (e.g. "Immobilienmakler") cannot
   blow the text track past the viewport - a bare 1fr track never shrinks below
   its content's min-content width, which overflow-wrap:break-word does not lower. */
.webux-page-hero--split .webux-page-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 460px;
	align-items: center;
	gap: 64px;
}

.webux-page-hero--split .webux-page-hero__text {
	max-width: none;
}

.webux-page-hero--media-left .webux-page-hero__inner {
	grid-template-columns: 460px minmax(0, 1fr);
}

.webux-page-hero--media-left .webux-page-hero__media {
	order: -1;
}

.webux-page-hero__media {
	margin: 0;
}

.webux-page-hero__media img {
	display: block;
	width: 100%;
	height: 520px;
	object-fit: cover;
	border-radius: 24px;
}

@media (max-width: 900px) {
	.webux-page-hero--split .webux-page-hero__inner,
	.webux-page-hero--media-left .webux-page-hero__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}
	.webux-page-hero--media-left .webux-page-hero__media {
		order: 0;
	}
	.webux-page-hero__title {
		font-size: 40px;
		letter-spacing: -0.8px;
	}
	.webux-page-hero__media img {
		height: 360px;
	}
}

/* ---- Cover-Modus (Vollbild-Hintergrund + Overlay, zentrierter weisser Text) ---- */
.webux-page-hero--cover {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding-block: 96px 72px;
	padding-inline: 1.5rem;
	min-height: 442px;
	border-bottom: 1px solid var(--wp--preset--color--border, #ece7de);
}

.webux-page-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.webux-page-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--wp--preset--color--contrast, #15181d);
}

.webux-page-hero__inner--center {
	position: relative;
	z-index: 2;
	max-width: 980px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	text-align: center;
}

.webux-page-hero--cover .webux-page-hero__eyebrow { color: #e8dec8; }
.webux-page-hero--cover .webux-page-hero__title { color: #fff; }
.webux-page-hero--cover .webux-page-hero__lead { color: #f4efe3; max-width: 620px; }

/* ---- Cover-Layout "aside": Text links + Karte rechts ----
   Pixel-ported from the original .lv-tippgeber-hero-cols two-column design.
   The card styles are duplicated from the notice card on purpose: block styles
   only load when their own block is on the page. */
.webux-page-hero__inner--aside {
	position: relative;
	z-index: 2;
	/* The cover container centers its inner as a flex item, so without an
	   explicit width the two columns would only claim their max-content width
	   and the layout would drift with the title length. The original hero
	   forces the same (site.css: .lv-tippgeber-hero ... > * { width: 100% }). */
	width: 100%;
	display: flex;
	align-items: center;
	gap: 64px;
}

.webux-page-hero__inner--aside .webux-page-hero__text {
	flex: 1 1 auto;
	max-width: none;
	align-items: flex-start;
	gap: 22px;
	text-align: left;
}

.webux-page-hero--cover .webux-page-hero__inner--aside .webux-page-hero__lead { max-width: 480px; }
.webux-page-hero--cover .webux-page-hero__inner--aside .webux-page-hero__buttons { justify-content: flex-start; }

.webux-page-hero__card {
	flex: 0 0 420px;
	background: #fff;
	border: 1px solid #ece7de;
	border-radius: 24px;
	padding: 40px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	box-shadow: 0 8px 28px rgba(26, 26, 26, 0.06), 0 1px 2px rgba(26, 26, 26, 0.04);
	text-align: left;
}

.webux-page-hero__card-icon {
	width: 64px;
	height: 64px;
	border-radius: 999px;
	background: #f4efe3;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	color: #8b8178;
}

.webux-page-hero__card-icon svg {
	width: 30px;
	height: 30px;
}

/* Colors are set explicitly so the white cover text rules never bleed into the
   light card. */
.webux-page-hero--cover .webux-page-hero__card-eyebrow {
	margin: 0;
	font-size: 13px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 1.82px;
	color: var(--wp--preset--color--primary, #8b8178);
}

.webux-page-hero--cover .webux-page-hero__card-title {
	margin: 0;
	font-size: 24px;
	font-weight: 600;
	letter-spacing: -0.24px;
	line-height: 1.2;
	color: #1a1a1a;
}

.webux-page-hero--cover .webux-page-hero__card-text {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: #6b6661;
}

@media (max-width: 900px) {
	.webux-page-hero__inner--aside {
		flex-direction: column;
		align-items: stretch;
		gap: 32px;
	}
	.webux-page-hero__card {
		flex-basis: auto;
	}
}

@media (max-width: 782px) {
	.webux-page-hero__card {
		padding: 32px;
	}
}

/* ---- Buttons ---- */
.webux-page-hero__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 4px;
}
.webux-page-hero--cover .webux-page-hero__buttons { justify-content: center; }

/* White outline buttons on the dark cover. */
.webux-page-hero--cover .is-style-outline .wp-element-button {
	border-color: #fff;
	color: #fff;
	background: transparent;
}
.webux-page-hero--cover .is-style-outline .wp-element-button:hover {
	background: rgba(255, 255, 255, 0.12);
}

@media (max-width: 782px) {
	.webux-page-hero--cover .webux-page-hero__title { font-size: 34px; letter-spacing: -0.68px; }
}

/* ---- Cover-Layout "card": Titel/Lead/Buttons in einer hellen Sand-Box unten-links ---- */
.webux-page-hero__inner--card {
	position: relative;
	z-index: 2;
	/* The cover centers its children (align-items:center), so stretch this inner
	   back to full cover height - only then does align-items:flex-end drop the box
	   to the bottom instead of the vertical middle. */
	align-self: stretch;
	width: 100%;
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
}

.webux-page-hero__box {
	background: #faf8f2;
	border-radius: 24px;
	padding: 36px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 680px;
	width: 100%;
	text-align: center;
	align-items: center;
}

/* The cover forces white text; inside the light box the text must be dark again.
   The eyebrow too - the cover tints it cream (#e8dec8), invisible on the sand box. */
.webux-page-hero--cover .webux-page-hero__inner--card .webux-page-hero__eyebrow {
	color: var(--wp--preset--color--primary, #8b8178);
}
.webux-page-hero--cover .webux-page-hero__inner--card .webux-page-hero__title {
	color: #1a1a1a;
}
.webux-page-hero--cover .webux-page-hero__inner--card .webux-page-hero__lead {
	color: #6b6661;
	max-width: none;
}

/* Buttons sit on the light box, so revert the cover's white outline-button
   override to the default (dark) treatment. Primary keeps the accent pill from
   the base wp-block-button rules. */
.webux-page-hero--cover .webux-page-hero__inner--card .is-style-outline .wp-element-button {
	border-color: #d8d2c7;
	color: #1a1a1a;
	background: transparent;
}
.webux-page-hero--cover .webux-page-hero__inner--card .is-style-outline .wp-element-button:hover {
	background: rgba(26, 26, 26, 0.04);
}

@media (max-width: 782px) {
	.webux-page-hero__box {
		max-width: none;
		padding: 28px;
	}
}

@media (max-width: 600px) {
	/* The desktop heroes carry huge vertical padding (up to 96/88px) plus a
	   442px min-height floor, so on a phone they eat most of the first screen
	   before any content shows. Trim both. */
	.webux-page-hero { padding-block: 56px 48px; }
	.webux-page-hero--cover { padding-block: 56px 48px; min-height: auto; }
	/* Paired hero CTAs stack full-width so they read as one equal-width pair
	   (e.g. verkauf "Erstgespräch vereinbaren" / "Online-Bewertung"). */
	.webux-page-hero__buttons .wp-block-button { flex: 1 1 100%; }
	.webux-page-hero__buttons .wp-block-button__link { display: block; width: 100%; text-align: center; }
}