/* Webux Cards - grid plus single card. */
.webux-cards {
	display: grid;
	grid-template-columns: repeat(var(--webux-cols, 3), minmax(0, 1fr));
	gap: 1.5rem;
}

@media (max-width: 900px) {
	.webux-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.webux-cards {
		grid-template-columns: 1fr;
	}
}

.webux-card {
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--base, #ffffff);
	border: 1px solid var(--wp--preset--color--border, #e2e4e9);
	border-radius: 0.5rem;
	overflow: hidden;
}

.webux-card__media {
	position: relative;
	margin: 0;
}

.webux-card__media img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	/* Set by the block field "Bild-Eckenradius"; 0 is the previous rendering.
	   Only matters on frameless cards - a framed card clips the image with its
	   own radius and overflow:hidden anyway. */
	border-radius: var(--webux-cards-mediar, 0);
}

.webux-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.25rem;
}

/* Optional icon at the top of the card body */
.webux-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	margin-bottom: 0.25rem;
	border-radius: 0.625rem;
	background: var(--wp--preset--color--surface, #f4f5f7);
	color: var(--wp--preset--color--primary, #2563eb);
}

.webux-card__icon svg {
	display: block;
}

.webux-card__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--large, 1.25rem);
}

.webux-card__text {
	margin: 0;
	color: var(--wp--preset--color--muted, #6b7280);
}

.webux-card__link {
	margin-top: auto;
	padding-top: 0.5rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--wp--preset--color--primary, #2563eb);
}

.webux-card__link:hover,
.webux-card__link:focus {
	text-decoration: underline;
}

/* Badge (overlaid on the image, or at the top of the body) */
.webux-card__badge {
	display: inline-block;
	align-self: flex-start;
	padding: 0.25rem 0.75rem;
	border-radius: 999px;
	background: var(--wp--preset--color--contrast, #15181d);
	color: var(--wp--preset--color--base, #ffffff);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-weight: 600;
	line-height: 1.4;
}

.webux-card__media .webux-card__badge {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 1;
}

/* Eyebrow (e.g. a location) */
.webux-card__overline {
	display: block;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary, #2563eb);
}

/* Meta line for short specs (e.g. "4.5 rooms, 145 sqm") */
.webux-card__meta {
	display: block;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	color: var(--wp--preset--color--muted, #6b7280);
}

/* ---------------------------------------------------------------------------
 * Variant "elevated" (block field cardStyle). Everything below is scoped to the
 * modifier so the base classes - which other sites restyle by their own grid
 * className - keep rendering exactly as before.
 * ------------------------------------------------------------------------ */
.webux-cards--elevated {
	/* All cards of a row share the tallest card's height, so a text-only tile
	   (e.g. an item with variant "cta") closes the row flush with its
	   neighbours instead of ending short. */
	align-items: stretch;
}

.webux-cards--elevated .webux-card {
	height: 100%;
	border: 0;
	border-radius: 20px;
	box-shadow: 0 2px 8px rgba(16, 24, 15, 0.08), 0 1px 2px rgba(16, 24, 15, 0.06);
}

.webux-cards--elevated .webux-card__body {
	padding: 26px;
}

.webux-cards--elevated .webux-card__title {
	font-size: clamp(20px, 1.4vw, 23px);
}

/* Overline reads as a signal accent here; the base rule stays untouched. */
.webux-cards--elevated .webux-card__overline {
	color: var(--wp--preset--color--signal, var(--wp--preset--color--primary, #2563eb));
}

/* ---------------------------------------------------------------------------
 * Item variant "cta": the card becomes a colour tile that closes a grid row
 * instead of a separate full-width band. Fill comes from the preset class in
 * render.php, so only the inner treatment lives here.
 * ------------------------------------------------------------------------ */
.webux-card--cta {
	justify-content: center;
	border: 0;
	padding: 32px;
}

.webux-card--cta .webux-card__body {
	flex: 0 1 auto;
	justify-content: center;
	gap: 0.75rem;
	padding: 0;
}

.webux-card--cta .webux-card__title {
	color: var(--wp--preset--color--base, #ffffff);
}

.webux-card--cta .webux-card__text {
	color: color-mix(in srgb, var(--wp--preset--color--base, #ffffff) 82%, transparent);
}

/* Inverted pill: light fill on the coloured tile. */
.webux-card--cta .webux-card__link--button {
	align-self: flex-start;
	margin-top: 0.5rem;
	padding: 14px 28px;
	border-radius: 100px;
	background: var(--wp--preset--color--base, #ffffff);
	color: var(--wp--preset--color--primary-dark, #6f665e);
	font-weight: 700;
	line-height: 1.2;
}

.webux-card--cta .webux-card__link--button:hover,
.webux-card--cta .webux-card__link--button:focus {
	text-decoration: none;
	background: color-mix(in srgb, var(--wp--preset--color--base, #ffffff) 90%, transparent);
}

/* In the stretched "elevated" grid the CTA tile is as tall as the image cards
   next to it, trägt aber kein Bild: die Höhe, die dort das Foto füllt, blieb
   hier als leere Farbfläche stehen - erst über, dann (nach margin-bottom:auto)
   unter dem Button. Titel, Text und Button bleiben als Block zusammen - der
   Aufruf gehört zu dem Satz, der ihn verlangt - und sitzen mittig, sodass sich
   der Überschuss gleichmässig auf oben und unten verteilt statt sich als Loch
   an einer Kante zu sammeln. Die Kachelhöhe ändert sich dadurch nicht, sie
   kommt weiterhin aus der Rasterzeile.
   Scoped to the variant so a standalone CTA tile keeps its centred layout. */
.webux-cards--elevated .webux-card--cta .webux-card__body {
	flex: 1 1 auto;
	justify-content: center;
	gap: 0.875rem;
}

/* Zweiter Teil derselben Rechnung: die Kachel trägt nur Schrift, also läuft die
   Schrift deutlich grösser als in den Bildkarten daneben. Der Titel wird damit
   zur Ansprache des ganzen Rasters statt zu einem weiteren Kartentitel unter
   vielen - und die Fläche, die den Nachbarn ihr Foto füllt, füllt sich hier aus
   eigener Kraft.

   Die Schriftgrösse teilt die Viewport-Breite durch die Spaltenzahl, weil nur
   --webux-cols weiss, wie breit die Kachel wirklich ist: 3 Spalten auf 1440px
   ergeben ~40px, 4 Spalten ~30px, und unter 900px hält der clamp-Boden die
   Zeile lesbar, wenn das Raster auf 2 bzw. 1 Spalte fällt (die Variable bleibt
   dabei auf dem Redaktionswert stehen). */
.webux-cards--elevated .webux-card--cta .webux-card__title {
	font-size: clamp(26px, calc(8.4vw / var(--webux-cols, 3)), 40px);
	line-height: 1.14;
	letter-spacing: -0.015em;
}

.webux-cards--elevated .webux-card--cta .webux-card__text {
	font-size: clamp(16px, calc(3.8vw / var(--webux-cols, 3)), 18px);
	line-height: 1.55;
}

.webux-cards--elevated .webux-card--cta {
	padding: 36px;
}

.webux-cards--elevated .webux-card--cta .webux-card__link--button {
	margin-top: 0.75rem;
	padding: 16px 32px;
	font-size: 17px;
}

/* No mid-word breaks in card titles - see blocks/section/style.css. Scoped to
   the elevated variant so the default card keeps its current behaviour. */
.webux-cards--elevated .webux-card__title {
	hyphens: manual;
}

/* Automatische Silbentrennung aus: die deutschen Trennmuster der Browser sind
   nicht verlaesslich ("Imm-obilie", "Finanz-ierung", "suedlic-hen"). Der Schutz
   vor Overflow kommt aus `overflow-wrap: break-word` in site.css und bleibt.
   Zwei Klassen, weil site.css `hyphens: auto` auf der blossen Element-Klasse
   setzt und spaeter geladen wird. */
.webux-cards .webux-card__title { hyphens: manual; }