/**
 * The house card (.fmt-house-card) — shared by the archive grid and the
 * cross-sell carousels. See includes/house-card.php.
 *
 * The card describes itself only: it fills whatever width its container gives
 * it and never sets its own. Placement — grid track or carousel slide — belongs
 * to the section around it.
 */

/* The lift on hover comes from the shared .card-house. The front stays in flow
   and defines the height; the plan panel crossfades over it.

   The card states its text colour rather than inheriting it, because it is a
   light surface that can sit inside a dark section: the cross-sell band sets
   `color: #fff`. Headings are safe either way (style.css colours h1–h6), but the
   plan panel's house name is a div with no colour of its own and came out white
   on var(--bg-2) there. Setting it once on the card covers any further text
   added inside it, in either section. */
.fmt-house-card {
	position: relative;
	overflow: hidden;
	border-radius: 12px;
	background: var(--paper);
	color: var(--ink);
	box-shadow: var(--shadow-card);
}
.fmt-house-card__front {
	position: relative;
	transition: opacity .4s ease;
}
.fmt-house-card__link {
	display: block;
	color: inherit;
	text-decoration: none;
}
.fmt-house-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--bg-3);
}
.fmt-house-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The body carries the card's outline; the image sits flush above it. */
.fmt-house-card__body {
	padding: 18px 20px 20px;
	border-right: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	border-left: 1px solid var(--line);
}
.fmt-house-card__cat {
	margin-bottom: 6px;
	font-size: 10px;
}
.fmt-house-card__name {
	margin: 0 0 10px;
	font-size: 22px;
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: -0.015em;
}

/*
 * Icon sizes.
 *
 * fmt_icon( $name, $size ) puts the size on the svg as width/height attributes,
 * but global.css's `.icon{width:16px;height:16px}` is a stylesheet rule and beats
 * a presentational attribute — so every icon in the theme renders at 16px and the
 * argument is inert. In this card that is not cosmetic: two 16px icons instead of
 * 12px make the meta row 8px wider than the space it has at carousel width.
 *
 * Stated here per call site rather than fixed in fmt_icon(), because correcting
 * it there would resize icons in every section built so far.
 */
.fmt-house-card__meta .icon {
	width: 12px;
	height: 12px;
}
.fmt-house-card__price-lock .icon,
.fmt-house-card__go .icon {
	width: 13px;
	height: 13px;
}
.fmt-house-card__plan-toggle .icon {
	width: 10px;
	height: 10px;
}
.fmt-house-card__plan-close .icon {
	width: 12px;
	height: 12px;
}

/* Meta line — floors · bedrooms · living area, hairline separated. */
.fmt-house-card__meta {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 14px;
	font-size: 12px;
	color: var(--ink-soft);
}
/* Deliberately shrinkable. The design's items are plain inline spans with no
   nowrap, so when the three entries plus their separators exceed the card the
   text wraps. Pinning them with white-space: nowrap instead makes the row wider
   than its container, and the card's overflow: hidden then cuts the living area
   off — which is what happened at the carousel's 276px. */
.fmt-house-card__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}
.fmt-house-card__sep {
	align-self: stretch;
	width: 1px;
	background: var(--line);
}

.fmt-house-card__foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--line);
}
.fmt-house-card__price {
	font-size: 14px;
	font-weight: 500;
	color: var(--ink);
}
/* Signed out the price is replaced rather than blurred — the detail page's
   hero plate is the one that blurs, this card slot is a different component
   in the design (src-v2/price-lock.jsx). */
.fmt-house-card__price-lock {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--ink-soft);
}
.fmt-house-card__price-lock .icon {
	flex-shrink: 0;
	color: var(--red);
}
.fmt-house-card__go {
	flex: 0 0 auto;
}
.fmt-house-card__link:hover .fmt-house-card__go {
	color: var(--red);
}

/* =========================================================
   Chip bar — Bestseller, Exklusiv and the Grundriss trigger
   ========================================================= */

/* One row over the top of the image: badges left, the Grundriss chip right.
   Two absolute corners would have to guess how wide the chip is; a flex row
   with the chip pushed over by its own auto margin does not, and a card that
   carries both badges wraps them rather than sliding underneath the chip —
   which is what the carousel's 276px would otherwise force.

   The bar is transparent to the pointer so it cannot swallow clicks meant for
   the card link underneath it; the chip takes its own clicks back. */
.fmt-house-card__chips {
	position: absolute;
	top: 12px;
	left: 12px;
	right: 12px;
	z-index: 2;
	display: flex;
	align-items: flex-start;
	gap: 8px;
	pointer-events: none;
}

/* Wraps to a second line when both pills plus the chip exceed the card. */
.fmt-house-card__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	min-width: 0;
}
.fmt-house-card__badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 11px;
	border-radius: 999px;
	background: rgba(31, 31, 29, .92);
	backdrop-filter: blur(6px);
	color: #fff;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
}
.fmt-house-card__badge .icon {
	width: 11px;
	height: 11px;
}

/* The light pill of the design's badge row. Same shape, inverted, so a house
   that is both reads as one row of two states rather than two decorations. */
.fmt-house-card__badge--bestseller {
	background: rgba(255, 255, 255, .94);
	color: var(--ink);
}

/* =========================================================
   Floor plan flip
   ========================================================= */

/* Trigger — the right-hand end of the chip bar above, like the design's chip.
   The auto margin keeps it at the right edge whether badges sit beside it or
   not, and it takes back the pointer the bar gives up. */
.fmt-house-card__plan-toggle {
	margin-left: auto;
	flex: 0 0 auto;
	pointer-events: auto;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 10px;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, .92);
	backdrop-filter: blur(6px);
	color: var(--ink-soft);
	font-family: inherit;
	font-size: 10px;
	letter-spacing: .1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: color .15s ease;
}
.fmt-house-card__plan-toggle:hover {
	color: var(--ink);
}

/* Plan panel — hidden until flipped. visibility keeps it out of the tab order
   while still allowing the crossfade. */
.fmt-house-card__back {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--bg-2);
	opacity: 0;
	visibility: hidden;
	transition: opacity .4s ease, visibility .4s ease;
}
.fmt-house-card.is-flipped .fmt-house-card__front {
	opacity: 0;
	pointer-events: none;
}
.fmt-house-card.is-flipped .fmt-house-card__back {
	opacity: 1;
	visibility: visible;
}

.fmt-house-card__back-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	padding: 16px 20px 8px;
	border-bottom: 1px solid var(--line);
}
.fmt-house-card__back-eyebrow {
	margin-bottom: 4px;
	font-size: 10px;
}
.fmt-house-card__back-name {
	font-size: 16px;
	font-weight: 500;
	letter-spacing: -0.01em;
}
.fmt-house-card__plan-close {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: 1px solid var(--line-2);
	border-radius: 50%;
	background: var(--paper);
	color: var(--ink-soft);
	cursor: pointer;
}
.fmt-house-card__plan-close:hover {
	color: var(--ink);
}

/* The drawing scales inside whatever height the front left behind. */
.fmt-house-card__plan {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
	padding: 10px 18px;
}
.fmt-house-card__plan-img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.fmt-house-card__facts {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	padding: 12px 20px 16px;
	border-top: 1px solid var(--line);
}
.fmt-house-card__fact-label {
	font-size: 9px;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--ink-mute);
}
.fmt-house-card__fact-value {
	font-size: 13px;
	font-weight: 500;
	color: var(--ink);
}

/* =========================================================
   Narrow variant
   ========================================================= */

/* The carousel shows the card at 276px, where the three meta entries no longer
   clear the design's 14px gap. The design's own data fits because it reads
   "2 Geschosse"; a half floor ("1,5 Geschosse") is about 11px wider and tips the
   row onto a second line. 8px buys enough for the widest combination the
   catalogue produces and still separates the entries clearly. Everything else —
   type scale, padding, radius — is identical in the design, so nothing else
   moves. */
/* src-v2/price-lock.jsx switches all three of these on `compact`, and the nowrap
   is what keeps the hint on one line next to "Ansehen". */
.fmt-house-card--compact .fmt-house-card__price-lock {
	font-size: 12px;
	white-space: nowrap;
}
.fmt-house-card--compact .fmt-house-card__price-lock .icon {
	width: 12px;
	height: 12px;
}

.fmt-house-card--compact .fmt-house-card__meta {
	column-gap: 8px;
	/* The fallback for the widest combinations the catalogue can produce: a whole
	   entry moves to a second line instead of a label breaking mid-word, which is
	   what an unwrapped shrink does. Nothing is ever cut off either way. */
	flex-wrap: wrap;
	row-gap: 4px;
}
/* A wrapped row must not stretch the hairlines over both lines. */
.fmt-house-card--compact .fmt-house-card__sep {
	align-self: center;
	height: 12px;
}

/* =========================================================
   Phones — the full-size card only
   ========================================================= */

/*
 * The mobile archive draws its own card (src-v2/mobile-massiv.jsx → MMassivCard)
 * rather than shrinking the desktop one: slightly tighter body, a step smaller
 * name, and a meta line with no separators at all. The carousel's compact card is
 * excluded — the phone cross-sell keeps the desktop card unchanged at 276px,
 * hairlines included.
 *
 * The long price-lock label wraps here as it does in the design, which uses the
 * full PriceLock on this card and only switches to the short form in carousels.
 */
@media (max-width: 680px) {
	.fmt-house-card:not(.fmt-house-card--compact) .fmt-house-card__body {
		padding: 16px 18px 18px;
	}
	.fmt-house-card:not(.fmt-house-card--compact) .fmt-house-card__name {
		margin-bottom: 12px;
		font-size: 21px;
	}
	.fmt-house-card:not(.fmt-house-card--compact) .fmt-house-card__meta {
		flex-wrap: wrap;
		column-gap: 10px;
		row-gap: 4px;
	}
	.fmt-house-card:not(.fmt-house-card--compact) .fmt-house-card__sep {
		display: none;
	}
	.fmt-house-card:not(.fmt-house-card--compact) .fmt-house-card__foot {
		padding-top: 14px;
	}
}