/**
 * Featured Properties Slider — track, navigation and snap behaviour only.
 *
 * The card itself lives in listing-card.css, which this file declares as a
 * stylesheet dependency. Both the slider and the grids render the identical
 * card via BBIS_Listing::card(), so there is exactly one place to change it.
 *
 * Layout is flex, never grid. CSS grid placement breaks inside Elementor;
 * per-item aspect-ratio on a flex column is what survives.
 */

.bbis.bbis .bbis-fs {
	--bbis-fs-gap: 20px;
	--bbis-fs-cards: var(--bbis-fs-mobile, 1);
	font-family: var(--bbis-font-body);
}

@media (min-width: 600px) {
	.bbis.bbis .bbis-fs { --bbis-fs-cards: var(--bbis-fs-tablet, 2); }
}

@media (min-width: 1024px) {
	.bbis.bbis .bbis-fs {
		--bbis-fs-gap: 24px;
		--bbis-fs-cards: var(--bbis-fs-desktop, 3);
	}
}

/* ------------------------------------------------------------------ head */

.bbis.bbis .bbis-fs__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 18px;
}

.bbis.bbis .bbis-fs__title {
	font-family: var(--bbis-font-head);
	font-size: clamp(1.35rem, 1.1rem + 1.1vw, 2rem);
	line-height: 1.15;
	margin: 0;
}

/* The stage is the arrows' positioning context, and on a wide screen it also
   reserves the gutters they sit in.

   Padding rather than negative offsets: an arrow pulled outside with a negative
   left is still overlapping whatever is there, and gets clipped the moment an
   ancestor has overflow hidden. Padding makes real room, so the cards start
   after the arrow rather than under it. */
.bbis.bbis .bbis-fs__stage {
	position: relative;
	/* Phones and tablets: the cards used to run edge to edge, which read as a
	   layout bug next to every other section's gutter. Desktop keeps the wider
	   inset because the arrows sit in it. */
	padding: 0 16px;
}

@media (min-width: 1024px) {
	.bbis.bbis .bbis-fs__stage { padding: 0 64px; }
}

.bbis.bbis .bbis-fs__nav { display: contents; }

/* An arrow either side of the cards, vertically centred on them.

   Sitting on the row rather than above it means the control is where the eye
   already is — next to the thing that moves — and the header goes back to
   being just a heading. Round, because a circle floating over photography
   reads as a control while a square reads as part of the layout.

   Centred on the row. The first version subtracted an assumed body height to
   centre on the photograph instead, which put the arrows near the top as soon
   as the real card bodies were shorter than the guess. Half the row is what
   "centred" means to anyone looking at it, and it cannot drift. */
.bbis.bbis .bbis-fs__btn {
	position: absolute;
	top: 50%;
	z-index: 4;
	width: 52px;
	height: 52px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	background: var(--bbis-primary);
	color: var(--bbis-primary-fg);
	border: 1px solid var(--bbis-primary);
	border-radius: 50%;
	box-shadow: 0 4px 16px rgb(0 0 0 / 26%);
	transform: translateY(-50%);
	transition: background-color .18s ease, opacity .18s ease, visibility .18s ease;
}

/* In the gutters the stage reserves, so they sit clear of the cards. */
.bbis.bbis .bbis-fs__btn[data-bbis-prev] { left: 0; }
.bbis.bbis .bbis-fs__btn[data-bbis-next] { right: 0; }

.bbis.bbis .bbis-fs__btn:hover:not([disabled]) {
	background: var(--bbis-primary-hi);
	border-color: var(--bbis-primary-hi);
}

/* Hidden rather than dimmed. A greyed-out arrow in a header is a hint that
   there is nothing further that way; the same arrow floating over a photograph
   just looks like something failed to load. */
.bbis.bbis .bbis-fs__btn[disabled] {
	opacity: 0;
	visibility: hidden;
	cursor: default;
}

/* Below the gutter breakpoint there is no room to sit outside the cards, so
   they overlay the edges instead — and shrink, because a 52px control over a
   phone-width card covers too much of it. */
@media (max-width: 1023px) {
	.bbis.bbis .bbis-fs__btn { width: 40px; height: 40px; font-size: 22px; }
	.bbis.bbis .bbis-fs__btn[data-bbis-prev] { left: 6px; }
	.bbis.bbis .bbis-fs__btn[data-bbis-next] { right: 6px; }
}

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

/* ----------------------------------------------------------------- track */

.bbis.bbis .bbis-fs__track {
	display: flex;
	gap: var(--bbis-fs-gap);
	padding: 0 0 4px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.bbis.bbis .bbis-fs__track::-webkit-scrollbar { display: none; }

.bbis.bbis .bbis-fs__track > .bbis-card__item {
	flex: 0 0 calc(
		(100% - (var(--bbis-fs-cards) - 1) * var(--bbis-fs-gap)) / var(--bbis-fs-cards)
	);
	scroll-snap-align: start;
}

/* Screen-reader-only announcer for button-driven paging. */
.bbis.bbis .bbis-fs__live {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.bbis.bbis .bbis-fs__track { scroll-behavior: auto; }
	.bbis.bbis .bbis-fs__btn { transition: none; }
}

/* ============================================================ MLS legal ==
   Required attribution under any block of MLS listings. Matches the search
   page treatment so the notice reads the same wherever it appears: quiet,
   but present and never hidden. The MLS logo inside it is part of what the
   licence requires, so it is sized rather than suppressed. */

.bbis.bbis .bbis-legal {
	margin-top: 28px;
	padding-top: 18px;
	border-top: 1px solid var(--bbis-border);
	color: var(--bbis-muted);
	font-size: .72rem;
	line-height: 1.55;
}

.bbis.bbis .bbis-legal img {
	max-width: 160px;
	height: auto;
	margin-bottom: 8px;
	display: block;
}

.bbis.bbis .bbis-legal p { margin: 0 0 6px; }

/* Line the notice up with the cards. The section itself is full-bleed and the
   inset lives on the stage, so without this the text ran from the screen edge
   on desktop (64px left of the first card) and touched both edges on phones. */
.bbis.bbis .bbis-fs > .bbis-legal { padding-left: 16px; padding-right: 16px; }

@media (min-width: 1024px) {
	.bbis.bbis .bbis-fs > .bbis-legal { padding-left: 64px; padding-right: 64px; }
}