/**
 * Listing card — shared by the slider and every grid.
 *
 * Loaded as a dependency by each module's stylesheet, so one card definition
 * serves all of them and they cannot drift apart. Layout containers (the
 * scroll track, the grid) live in the module stylesheets; everything from the
 * card border inwards lives here.
 *
 * Selectors are doubled (.bbis.bbis) to outrank theme global styles without
 * !important — see CLAUDE.md §2. Headings additionally carry an inline
 * style="color:… !important" from PHP, because theme global heading colours
 * beat even a namespaced !important rule.
 *
 * No colour is hardcoded. Every value resolves to a design token.
 */

.bbis.bbis .bbis-card__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bbis.bbis .bbis-card__item {
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
}

.bbis.bbis .bbis-card__item::marker { content: none; }

.bbis.bbis .bbis-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background: var(--bbis-surface);
	border: 1px solid var(--bbis-border);
	border-radius: var(--bbis-radius);
	transition: transform .18s ease, box-shadow .18s ease;
}

.bbis.bbis .bbis-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 26px rgb(0 0 0 / 12%);
}

.bbis.bbis .bbis-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
}

.bbis.bbis .bbis-card__link:focus-visible {
	outline: 3px solid var(--bbis-accent);
	outline-offset: 2px;
}

.bbis.bbis .bbis-card__media {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--bbis-border);
}

.bbis.bbis .bbis-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .35s ease;
}

.bbis.bbis .bbis-card:hover .bbis-card__img { transform: scale(1.04); }

.bbis.bbis .bbis-card__img--empty { background: var(--bbis-border); }

.bbis.bbis .bbis-card__status {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 5px 12px;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	background: var(--bbis-accent);
	color: var(--bbis-accent-fg);
	border-radius: var(--bbis-radius);
}

/* One badge treatment, not four.

   These used to be coloured by meaning — blue for coming soon, gold for active,
   secondary for under contract, grey for closed. On a results page that reads as
   four different systems rather than one, and the word already says which it is.
   The brand's dark colour on every one is quieter and looks deliberate.

   The status still reaches the markup as a modifier class, so a site that wants
   them coloured again can do it in one rule. */

.bbis.bbis .bbis-card__status,
.bbis.bbis .bbis-card__status--soon,
.bbis.bbis .bbis-card__status--active,
.bbis.bbis .bbis-card__status--contract,
.bbis.bbis .bbis-card__status--closed {
	background: var(--bbis-primary);
	color: var(--bbis-primary-fg);
}

/* Closed is history rather than an offer, so it steps back a little — but by
   being a darker solid, not by going translucent.

   It used to be `opacity: .72`, which let the photograph through the badge.
   Against a bright roofline that read as a printing error rather than a
   deliberate shade, and the text lost contrast exactly where it was hardest to
   read already. A mixed colour steps back the same amount and stays opaque.

   The plain background is declared first as the fallback: a browser without
   color-mix drops the second line and gets the same solid badge as every other
   status, which is a fine outcome. */
.bbis.bbis .bbis-card__status--closed {
	opacity: 1;
	background: var(--bbis-primary);
	background: color-mix(in srgb, var(--bbis-primary) 68%, #1c1c1c);
}

/* --------------------------------------------------------------- figures */

.bbis.bbis .bbis-card__facts li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.bbis.bbis .bbis-card__icon {
	width: 15px;
	height: 15px;
	flex: 0 0 15px;
	fill: none;
	stroke: var(--bbis-accent);
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: .9;
}

.bbis.bbis .bbis-card__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 16px 18px 18px;
}

.bbis.bbis .bbis-card__price {
	margin: 0;
	font-family: var(--bbis-font-head);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--bbis-primary);
}

.bbis.bbis .bbis-card__addr {
	margin: 0;
	font-family: var(--bbis-font-head);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
}

.bbis.bbis .bbis-card__place {
	margin: 0;
	font-size: .9rem;
	color: var(--bbis-muted);
}

.bbis.bbis .bbis-card__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	margin: 8px 0 0;
	padding: 12px 0 0;
	list-style: none;
	border-top: 1px solid var(--bbis-border);
	font-size: .88rem;
	color: var(--bbis-ink);
}

.bbis.bbis .bbis-card__facts li { margin: 0; list-style: none; }

@media (prefers-reduced-motion: reduce) {
	.bbis.bbis .bbis-card,
	.bbis.bbis .bbis-card__img { transition: none; }

	.bbis.bbis .bbis-card:hover { transform: none; }
	.bbis.bbis .bbis-card:hover .bbis-card__img { transform: none; }
}