/*
 * FlexMLS Property Manager - baseline styles.
 *
 * Deliberately unopinionated: layout and spacing only, no brand colours beyond
 * two custom properties. Override those in your sitepackage rather than
 * editing this file, so updates stay painless.
 */

/* Many site stylesheets set padding on the bare <section> element
   (this one uses `section { padding: 60px 0 }`). The plugin uses <section>
   for its own blocks, so that padding is neutralised here and spacing is
   controlled by the rules below instead. */
.bbf-archive,
.bbf-latest,
.bbf-detail__section {
    padding: 0;
}

.bbf {
    --bbf-accent: #1a56db;
    --bbf-button: #222222;
    --bbf-hover: #ff6e00;
    --bbf-ink: #1c1c1c;
    --bbf-muted: #6b7280;
    --bbf-line: #e5e7eb;
    --bbf-radius: 6px;
    color: var(--bbf-ink);
}

/* --- headings -------------------------------------------------------
   Intentionally empty. The archive and teaser views render the
   sitepackage's own ".main-title.text-center" block, so the heading
   styles live there and are not duplicated here. */

/* --- meta bar ------------------------------------------------------- */
.bbf-archive__meta {
    display: flex; flex-wrap: wrap; gap: 1rem;
    align-items: center; justify-content: space-between;
    padding: .75rem 0; border-bottom: 1px solid var(--bbf-line); margin-bottom: 1.5rem;
}
.bbf-archive__count { font-size: .9375rem; color: var(--bbf-muted); }

/* --- filters + sort -------------------------------------------------- */
.bbf-filters {
    margin: 1.5rem 0 2rem;
    padding: 1.25rem;
    background: #f7f8fa;
    border: 1px solid var(--bbf-line);
    border-radius: var(--bbf-radius);
}
.bbf-filters__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: .75rem 1rem;
    align-items: end;            /* bottom-aligns the button with the inputs */
}
.bbf-filters__field {
    display: flex; flex-direction: column; gap: .375rem;
    min-width: 0;                /* lets grid columns actually shrink */
    margin: 0;
}
.bbf-filters__field > span {
    font-size: .8125rem; font-weight: 600; color: var(--bbf-ink);
}

/* One height for every control, so the row lines up regardless of
   which fields the element is configured to show. */
.bbf-filters__field input,
.bbf-filters__field select,
.bbf-filters__submit,
.bbf-sort select {
    height: 2.75rem;
    font: inherit;
    border-radius: var(--bbf-radius);
    box-sizing: border-box;
}
.bbf-filters__field input,
.bbf-filters__field select,
.bbf-sort select {
    width: 100%;
    padding: 0 .75rem;
    border: 1px solid var(--bbf-line);
    background: #fff;
}
.bbf-filters__field input:focus,
.bbf-filters__field select:focus,
.bbf-sort select:focus {
    outline: 2px solid var(--bbf-accent); outline-offset: 1px;
}
.bbf-filters__submit {
    width: 100%;
    padding: 0 1.5rem;
    border: 0;
    background: var(--bbf-button);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease;
}
.bbf-filters__submit:hover { background: #000; }
.bbf-filters__field--action { justify-content: flex-end; }

.bbf-sort { display: flex; align-items: center; gap: .5rem; font-size: .8125rem; }
.bbf-sort label { display: flex; align-items: center; gap: .5rem; }
.bbf-sort select { width: auto; min-width: 11rem; }

/* --- grid + card ---------------------------------------------------- */
.bbf-grid {
    display: grid; gap: 1.5rem; align-items: stretch;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
}
.bbf-card {
    border: 1px solid var(--bbf-line); border-radius: var(--bbf-radius);
    overflow: hidden; background: #fff;
    display: flex; flex-direction: column;
    height: 100%;             /* equal-height cards across the row */
}
/* Fixed 4:3 window. The image is taken out of flow and pinned to all four
   edges, so a site-wide `img { height: auto }` (or any other inherited image
   rule) cannot stretch the card - every tile in a row keeps the same height. */
.bbf-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    background: #f3f4f6;
    overflow: hidden;
}
.bbf-card__link { position: absolute; inset: 0; z-index: 3; display: block; }
.bbf-card__image {
    position: absolute;
    inset: 0;                 /* top/right/bottom/left: 0 sizes it, not height */
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    max-width: none;          /* beats a global img { max-width: 100% } */
}
.bbf-card__image--empty { background: repeating-linear-gradient(45deg, #f3f4f6, #f3f4f6 10px, #e9ebee 10px, #e9ebee 20px); }
.bbf-card__badge {
    position: absolute; top: .75rem; left: .75rem; z-index: 2;
    padding: .3125rem .625rem; border-radius: 3px;
    background: var(--bbf-accent); color: #fff;
    font-size: .6875rem; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; line-height: 1;
}
.bbf-card__badge--inline { position: static; display: inline-block; }
.bbf-card__badge--openhouse { background: #e8820c; }

.bbf-card__openhouse {
    position: absolute; right: .75rem; bottom: .75rem; z-index: 2;
    padding: .4375rem .75rem; border-radius: 3px;
    background: #e8820c; color: #fff;
    font-size: .75rem; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; line-height: 1;
}
.bbf-detail__flags { display: flex; align-items: center; gap: .625rem; margin: 0 0 .5rem; }

.bbf-card__price {
    position: absolute; left: 0; bottom: 0; z-index: 2; padding: .5rem .75rem;
    color: #fff; font-size: 1.25rem; font-weight: 700;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}
.bbf-card__body { padding: .875rem 1rem 1rem; display: flex; flex-direction: column; gap: .375rem; }
.bbf-card__address { font-size: 1rem; margin: 0; }
.bbf-card__address a { color: inherit; text-decoration: none; }
.bbf-card__address a:hover,
.bbf-card__address a:focus-visible { color: var(--bbf-hover); }
.bbf-card__location { margin: 0; color: var(--bbf-muted); font-size: .875rem; }
.bbf-card__status { display: flex; flex-wrap: wrap; gap: .75rem; margin: .25rem 0 0; font-size: .8125rem; color: var(--bbf-muted); }
.bbf-card__meta { margin: .5rem 0 0; padding-top: .5rem; border-top: 1px solid var(--bbf-line); font-size: .8125rem; }
.bbf-card__meta div { display: flex; gap: .375rem; }
.bbf-card__meta dt { font-weight: 600; margin: 0; }
.bbf-card__meta dd { margin: 0; color: var(--bbf-muted); }
.bbf-card__office { margin: .5rem 0 0; font-size: .8125rem; color: var(--bbf-muted); }

.bbf-badge { font-weight: 600; }
.bbf-badge--active { color: #15803d; }
.bbf-badge--pending { color: #b45309; }
.bbf-badge--closed,
.bbf-badge--sold { color: #b91c1c; }

/* --- pagination ------------------------------------------------------ */
.bbf-pagination {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: .625rem; margin-top: 2.5rem;
}
.bbf-pagination__pages {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
    list-style: none; margin: 0; padding: 0;
}
.bbf-pagination__pages li { margin: 0; }

.bbf-pagination__page,
.bbf-pagination__step {
    display: inline-flex; align-items: center; justify-content: center;
    gap: .375rem; min-width: 2.5rem; height: 2.5rem; padding: 0 .75rem;
    border: 1px solid var(--bbf-line); border-radius: var(--bbf-radius);
    color: var(--bbf-ink); text-decoration: none; font-size: .9375rem;
    background: #fff; transition: background .15s ease, border-color .15s ease;
}
.bbf-pagination__page:hover,
.bbf-pagination__step:hover {
    background: #f3f4f6; border-color: #d2d6dc; color: var(--bbf-hover);
}

.bbf-pagination__page.is-current {
    background: var(--bbf-button); border-color: var(--bbf-button);
    color: #fff; font-weight: 600;
}
.bbf-pagination__step.is-disabled {
    opacity: .4; background: #fff; border-color: var(--bbf-line);
}
.bbf-pagination__gap {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.75rem; height: 2.5rem; color: var(--bbf-muted);
}
.bbf-pagination__status {
    margin: 1.5rem 0 0; text-align: center;
    font-size: .8125rem; color: var(--bbf-muted);
}

/* On narrow screens drop the word, keep the arrow. */
@media (max-width: 34rem) {
    .bbf-pagination__step { padding: 0 .625rem; min-width: 2.5rem; }
    .bbf-pagination__step > *:not([aria-hidden]) { display: none; }
}

/* --- detail --------------------------------------------------------- */
.bbf-detail__back { display: inline-block; margin-bottom: 1rem; color: inherit; text-decoration: none; }
.bbf-detail__back:hover { color: var(--bbf-hover); }
.bbf-detail__title { margin: 0 0 .25rem; }
.bbf-detail__address { margin: 0 0 .5rem; color: var(--bbf-muted); }
.bbf-detail__price { margin: 0 0 .25rem; font-size: 1.75rem; font-weight: 700; }
/* --- detail slider ---------------------------------------------------
   The stage is a scroll-snap track, so it is fully usable without
   JavaScript: swipe on touch, scroll or drag on desktop. flexmls.js only
   adds arrows, thumbnails and the counter on top. */
.bbf-slider { position: relative; margin: 1.5rem 0; }
.bbf-slider__stage {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    scroll-behavior: smooth; gap: 0; border-radius: var(--bbf-radius);
    scrollbar-width: none;
}
.bbf-slider__stage::-webkit-scrollbar { display: none; }
.bbf-slider__slide {
    flex: 0 0 100%; margin: 0; scroll-snap-align: center; position: relative;
}
.bbf-slider__slide img {
    width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block;
    border-radius: var(--bbf-radius); background: #f3f4f6;
}
.bbf-slider__caption {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: .75rem 1rem; font-size: .8125rem; color: #fff;
    background: linear-gradient(transparent, rgba(0, 0, 0, .65));
    border-radius: 0 0 var(--bbf-radius) var(--bbf-radius);
}
.bbf-slider__nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    display: flex; align-items: center; justify-content: center;
    width: 2.75rem; height: 2.75rem; padding: 0;
    border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .94); color: var(--bbf-ink);
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .28);
    transition: background .15s ease;
    -webkit-appearance: none; appearance: none;
}
/* The chevron, not the circle, is what carries the size. */
.bbf-slider__nav svg { width: 1.625rem; height: 1.625rem; display: block; }

.bbf-slider__nav:hover { background: #fff; }

/* Site stylesheets often put a focus ring on every <button>, which shows up
   as a stray square-ish outline on a round control. Suppressed for mouse
   clicks, kept for keyboard users and drawn to match the circle. */
.bbf-slider__nav:focus { outline: none; }
.bbf-slider__nav:focus-visible {
    outline: 2px solid var(--bbf-hover);
    outline-offset: 2px;
    border-radius: 50%;
}
.bbf-slider__nav[disabled] { opacity: .35; cursor: default; }
.bbf-slider__nav--prev { left: 1rem; }
.bbf-slider__nav--next { right: 1rem; }

@media (max-width: 34rem) {
    .bbf-slider__nav { width: 2.5rem; height: 2.5rem; }
    .bbf-slider__nav svg { width: 1.375rem; height: 1.375rem; }
}

.bbf-slider__counter {
    position: absolute; right: .75rem; top: .75rem; margin: 0;
    padding: .25rem .625rem; border-radius: 999px;
    background: rgba(0, 0, 0, .6); color: #fff; font-size: .75rem;
}
.bbf-slider__thumbs {
    display: flex; gap: .5rem; margin-top: .5rem;
    overflow-x: auto; padding-bottom: .25rem;
}
.bbf-slider__thumb {
    flex: 0 0 5.5rem; padding: 0; border: 2px solid transparent;
    border-radius: 4px; background: none; cursor: pointer; line-height: 0;
}
.bbf-slider__thumb img {
    width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
    border-radius: 2px; display: block;
}
.bbf-slider__thumb.is-active { border-color: var(--bbf-accent); }

@media (prefers-reduced-motion: reduce) {
    .bbf-slider__stage { scroll-behavior: auto; }
}

.bbf-detail__facts {
    display: grid; gap: 1rem; margin: 1.5rem 0;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    padding: 1rem 0; border-block: 1px solid var(--bbf-line);
}
.bbf-detail__facts dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--bbf-muted); margin: 0 0 .25rem; }
.bbf-detail__facts dd { margin: 0; font-size: 1.25rem; font-weight: 600; }
.bbf-detail__section { margin: 3rem 0 0; padding: 0; }
.bbf-detail__section:first-of-type { margin-top: 2.5rem; }
.bbf-detail__section h2 { margin: 0 0 1rem; }

/* The "Listing details  MLS# ..." heading introduces a whole stack of
   groups, so it needs more air beneath it than a plain section heading. */
.bbf-detail__section h2.bbf-detail__lead { margin-bottom: 2.25rem; }
.bbf-detail__list { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.bbf-detail__list div { display: flex; gap: .5rem; border-bottom: 1px solid var(--bbf-line); padding-bottom: .375rem; }
.bbf-detail__list dt { font-weight: 600; margin: 0; }
.bbf-detail__list dd {
    margin: 0; color: var(--bbf-muted);
    min-width: 0; overflow-wrap: anywhere;   /* legal descriptions are long */
}
.bbf-detail__mls {
    font-size: .8125rem; color: var(--bbf-muted); font-weight: 400;
    margin-left: .5rem;
}

.bbf-detail__group { margin-bottom: 3rem; }
.bbf-detail__group:last-child { margin-bottom: 0; }
.bbf-detail__groupTitle {
    margin: 0 0 1rem; font-size: 1rem; font-weight: 700;
    padding-bottom: .375rem; border-bottom: 1px solid var(--bbf-line);
}
.bbf-detail__documents { list-style: none; margin: 0; padding: 0; }
.bbf-detail__documents li { padding: .5rem 0; border-bottom: 1px solid var(--bbf-line); }
.bbf-detail__documents a { color: inherit; text-decoration: none; }
.bbf-detail__documents a:hover { color: var(--bbf-hover); }
.bbf-detail__documents a::before { content: '\1F4C4'; margin-right: .5rem; }
.bbf-detail__map {
    margin-top: 3rem;      /* same rhythm as .bbf-detail__section */
    height: 22rem; border-radius: var(--bbf-radius);
    background: #eef1f4; overflow: hidden;
}
.bbf-detail__map iframe { width: 100%; height: 100%; border: 0; display: block; }
/* Leaflet needs the container to have a resolved height before it initialises. */
.bbf-detail__map[data-bbf-map] { height: 22rem; }
.bbf-detail__map .leaflet-container { height: 100%; width: 100%; font: inherit; }

/* --- notices + disclosure ------------------------------------------- */
.bbf__notice { padding: 1rem; background: #f9fafb; border-radius: var(--bbf-radius); color: var(--bbf-muted); }
.bbf__notice--error { background: #fef2f2; color: #b91c1c; }
.bbf-disclosure { display: flex; align-items: center; gap: .5rem; margin-top: 2rem; font-size: .75rem; color: var(--bbf-muted); }
.bbf-disclosure__mark { background: #374151; color: #fff; padding: .125rem .375rem; font-weight: 700; letter-spacing: .05em; }