/* ============================================================================
 * MFV Preview Card — grid card redesign (PRESENTATION ONLY)
 * ----------------------------------------------------------------------------
 * Turns MyListing's preview card from "everything printed on top of the cover
 * photo" into the marketplace layout: a photo panel at the top, then the name
 * and every field on white underneath it. The title is never on the image.
 *
 * ⚠️ NOT A CONTENT CHANGE. Which fields a card shows, in what order, with which
 * icons and labels, is still entirely the listing type's Preview Card config in
 * MyListing (Listing Types → <type> → Preview Card). This file only decides
 * where those fields land and what they look like. Delete it and the stock card
 * returns with exactly the same words in it.
 *
 * The DOM it styles (MyListing `default` preview template — every listing type
 * on this site uses it):
 *
 *   .lf-item-container.listing-preview.type-<slug>   ← the card
 *     .lf-item.lf-item-default                       ← photo + name block
 *       a
 *         .overlay                                   ← hidden here
 *         .lf-background | .pc-slider                ← the cover photo
 *         .lf-item-info                              ← moved BELOW the photo
 *           .lf-avatar                               ← author, pinned on the photo
 *           h4.listing-preview-title                 ← the name, on white
 *           .mfv-item-status-wrap                    ← optional status pill
 *           ul.lf-contact                            ← info fields, dot separated
 *       .lf-head > .lf-head-btn                      ← price chip, on the photo
 *     .listing-details-3 > ul.details-list           ← footer detail columns
 *     .listing-details (categories)                  ← place/church footer variant
 *     .listing-details.actions > .ld-info            ← quick view / bookmark row
 *
 * ── THE TWO ANCHORS, AND WHY THEY ARE THOSE AND NOT SOMETHING SHORTER ──────
 *
 * `.lf-item-container.listing-preview` — both classes, one element. Three other
 * things on this site reuse these class names and none of them may be caught:
 *   • the quick-view modal builds a bare `.lf-item-container` inside a separate
 *     `.listing-quick-view-container.listing-preview` wrapper — the pair is
 *     split across two elements, so it never matches;
 *   • the mapbox popup wrapper carries `listing-preview` but not
 *     `lf-item-container` — likewise;
 *   • single-listing pages reuse `.listing-details` / `.details-list` inside
 *     `.pf-body`, nowhere near a card container.
 *
 * `.lf-item-default` — NOT `.lf-item`. It is on the same element, added by the
 * template as `lf-item-<template>`, so it costs the same to write but it also
 * excludes the `alternate` template's slide-up panel (`.lf-item-alternate`),
 * which assumes an absolutely positioned info block and would be wrecked by
 * this layout. No type uses `alternate` today; this keeps it that way safely.
 *
 * ── ⚠️ CASCADE ORDER — THE THING THAT WILL BITE WHOEVER EDITS THIS ─────────
 *
 * This file is enqueued from the child's main `wp_enqueue_scripts` closure,
 * which runs at PRIORITY 20. Two consequences, both load-bearing:
 *
 *   1. It prints BEFORE the parent theme's `frontend.css` — `mylisting-frontend`
 *      is enqueued later still — so every rule here has to OUT-SPECIFY the
 *      parent rather than merely follow it. That is why the selectors are long
 *      and why `!important` appears on properties the parent also sets. Source
 *      order buys nothing against the parent.
 *   2. It prints AFTER `mfv-list-view.css` (priority 10, no deps). List view
 *      rebuilds this same card as a horizontal row using `!important`, and on
 *      an equal-specificity tie the LATER sheet wins — which would be this one.
 *      So every rule here is deliberately kept BELOW list view's weight:
 *        list view      `.finder-listings.mfv-view-list .results-view .lf-item-container`  (0,3,0)
 *        here           `.lf-item-container.listing-preview`                               (0,2,0)
 *        list view      `… .results-view .lf-item`                                         (0,4,0)
 *        here           `.lf-item-container.listing-preview .lf-item-default`              (0,3,0)
 *        list view      `… .results-view .lf-item .lf-item-info {display:none}`            (0,5,0)
 *        here           `… .lf-item-default .lf-item-info`                                 (0,4,0)
 *      Do not add a class or a `:not()` to the two anchors above without
 *      re-checking those pairs — one extra class silently un-hides the info
 *      block in list view.
 *      Footer rows get a second guard: list view's JS re-parents them into
 *      `.mfv-footer-bar`, so the `>` combinator below stops matching the moment
 *      it does. Keep the `>`.
 * ========================================================================== */

/* ── Tokens ──────────────────────────────────────────────────────────────── */
:root {
    --mfv-card-radius: 14px;
    --mfv-card-line: #eaeff4;          /* hairline between card rows */
    --mfv-card-pad: 16px;
    --mfv-card-photo-ratio: 2 / 1;     /* matches the reference crop */
    --mfv-card-photo-max: 240px;
    --mfv-card-photo-bg: #e9eef3;      /* shows through where a cover is missing */
    --mfv-card-btn-bg: #f5f8fa;
}


/* ============================================================================
   1. THE CARD SHELL
   ========================================================================== */

.lf-item-container.listing-preview {
    background: var(--mfl-bg-white, #fff);
    border: 1px solid var(--mfv-card-line);
    border-radius: var(--mfv-card-radius) !important;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 6px 16px -10px rgba(15, 23, 42, .18);
    transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
    margin-bottom: 16px;
}

/*
 * Hover: lift plus a soft teal glow, so the card the cursor is on reads as
 * selected rather than merely shadowed.
 *
 * Three layers, in order: a 1px teal rim that replaces the resting border
 * without shifting layout, the glow itself (large blur, negative spread so it
 * hugs the card instead of smearing across the grid), and a small neutral
 * shadow underneath to keep the card sitting on the page rather than floating
 * in colour.
 *
 * ⚠️ Not `!important`. The featured and promoted tiers draw their own gold and
 * blue rings with `!important` at the same specificity, and they must keep
 * winning — a promoted card should not lose its ring the moment it is hovered.
 */
.lf-item-container.listing-preview:hover {
    box-shadow:
        0 0 0 1px rgba(var(--mfv-primary-rgb, 14, 116, 144), .22),
        0 10px 30px -12px rgba(var(--mfv-primary-rgb, 14, 116, 144), .45),
        0 2px 6px rgba(15, 23, 42, .06);
    transform: translateY(-3px);
    border-color: rgba(var(--mfv-primary-rgb, 14, 116, 144), .38);
}

/* The promoted / featured tiers draw their own inset ring and force a 6px
   radius. Match the card so a promoted result is the same shape as the plain
   one beside it — the ring and the ribbon still mark it out. */
.lf-item-container.listing-preview.level-featured,
.lf-item-container.listing-preview.level-promoted {
    border-radius: var(--mfv-card-radius) !important;
}

/*
 * `.lf-item` used to BE the card: fixed height, own border, own shadow, own
 * hover lift. It is now just the photo + name block, so that chrome moves up to
 * the container and the height becomes content-driven.
 *
 * `height: auto` needs !important — the parent sets `.lf-item{height:230px}` and
 * the child sets `.lf-small-height .lf-item{height:220px!important}`, which
 * every explore card carries (three footer details is enough to trigger it).
 */
.lf-item-container.listing-preview .lf-item-default {
    height: auto !important;
    position: relative;
    overflow: hidden;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* The inner block must not lift on its own — the whole card does that now. */
.lf-item-container.listing-preview .lf-item-default:hover {
    transform: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

/* The anchor wraps photo + name + fields, so the whole upper half is one target. */
.lf-item-container.listing-preview .lf-item-default > a {
    display: block;
    width: 100%;
    height: auto;
    color: var(--mfl-text-dark, #1e293b);
}


/* ============================================================================
   2. THE PHOTO PANEL
   ========================================================================== */

/* The dark scrim existed only to make white text readable on the photo. Nothing
   is printed on the photo any more, so it goes. */
.lf-item-container.listing-preview .lf-item-default .overlay {
    display: none !important;
}

.lf-item-container.listing-preview .lf-item-default .lf-background {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: var(--mfv-card-photo-ratio);
    max-height: var(--mfv-card-photo-max);
    min-height: 150px;
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
    /* A listing with no cover still renders `background-image:url('')`, so the
       colour underneath is what the visitor actually sees — it has to be
       deliberate rather than a transparent hole. */
    background-color: var(--mfv-card-photo-bg);
    border-radius: 0;
    /* Positioning context + clip for the zoom pseudo-element and the badge. */
    position: relative;
    overflow: hidden;
}

/*
 * ⚠️ THE ZOOM IS ON A PSEUDO-ELEMENT, NOT ON `.lf-background` ITSELF.
 *
 * The distance badge is parented INTO `.lf-background` (that is the only box
 * that equals the photo in both card DOM shapes — see the note on the badge
 * below). A transform on an element also transforms its children, so scaling
 * `.lf-background` would grow the badge by 4.5% and walk it out of the corner
 * on every hover.
 *
 * `background-image: inherit` picks up the inline `url(...)` the template
 * prints on the parent, so the photo is unchanged; `overflow: hidden` on the
 * parent now clips the zoom to the photo box, which it previously was not —
 * the scaled image used to bleed a couple of pixels over the title row.
 */
.lf-item-container.listing-preview .lf-item-default .lf-background::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: inherit;
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
    transition: transform .35s ease;
}

.lf-item-container.listing-preview:hover .lf-item-default .lf-background::before {
    transform: scale(1.045);
}

/* Gallery covers (jobs) — same panel, same ratio. */
.lf-item-container.listing-preview .lf-item-default .pc-slider {
    background: var(--mfv-card-photo-bg);
}

.lf-item-container.listing-preview .lf-item-default .pc-slider .single-slide {
    height: auto !important;
    width: 100%;
    aspect-ratio: var(--mfv-card-photo-ratio);
    max-height: var(--mfv-card-photo-max);
    min-height: 150px;
    object-fit: cover;
    background: var(--mfv-card-photo-bg);
}

/* Arrows centred on the photo, not on the whole card. */
.lf-item-container.listing-preview .lf-item-default .pc-slider .gallery-nav {
    top: 50%;
    transform: translateY(-50%);
    height: 0;
}

/* ── Price / badge chip, top-left over the photo ─────────────────────────── */
.lf-item-container.listing-preview .lf-item-default .lf-head {
    top: 12px;
    left: 12px;
    right: 12px;
    gap: 6px;
    align-items: flex-start;
    pointer-events: none;         /* chips are labels; the card link stays live */
}

.lf-item-container.listing-preview .lf-item-default .lf-head-btn {
    background: rgba(15, 23, 42, .86) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    backdrop-filter: blur(6px) !important;
    border: 1px solid rgba(255, 255, 255, .10) !important;
    border-radius: 9px !important;
    color: #fff !important;
    font-family: var(--mfl-font-body, sans-serif) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    height: 30px !important;
    padding: 0 11px !important;
    max-width: 100%;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-shadow: none !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .22);
    pointer-events: auto;
}

/*
 * Distance badge, injected by mfv-explore-distance.js. Lighter than the price
 * chip so the price stays the loudest thing on the photo, but the same shape so
 * they read as one row of metadata rather than two ideas.
 *
 * ⚠️ The look is on the bare `.mfv-dist` class, NOT on a selector that assumes
 * `.lf-head`. In list view the badge is re-parented onto the thumbnail because
 * `.lf-head` is hidden there — see the script's `badgeHost()`. Anything that
 * scopes the chip styling to one parent breaks the other mode silently.
 */
.lf-item-container .mfv-dist {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 10px;
    border-radius: 9px;
    /*
     * Deliberately see-through: the distance is a hint, not a headline, and the
     * photo should read through it.
     *
     * .76 is as far as it goes. The blur keeps it legible against busy photos,
     * but transparency is bounded by CONTRAST, not by taste — against a black
     * cover the plate resolves to ~#c7c7c7, which still holds 8.3:1 with the
     * #1e293b text. Going much lower starts trading the number's readability
     * for an effect, and the badge exists to be read.
     */
    background: rgba(255, 255, 255, .76);
    -webkit-backdrop-filter: blur(8px) saturate(1.1);
    backdrop-filter: blur(8px) saturate(1.1);
    border: 1px solid rgba(255, 255, 255, .5);
    box-shadow: 0 2px 8px rgba(15, 23, 42, .22);
    font-family: var(--mfl-font-body, sans-serif);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.005em;
    color: var(--mfl-text-dark, #1e293b);
    white-space: nowrap;
}

/*
 * Grid: pinned to the bottom-right of the cover photo.
 *
 * 🔴 THE ANCHOR IS `.lf-background` — THE PHOTO ITSELF — AND IT HAS TO BE.
 *
 * The obvious anchor is the cover link, and it is wrong on most of the site.
 * MyListing's template prints `.lf-item-info` INSIDE that `<a>`, but a card
 * whose avatar is a link to the author (`.lf-avatar--link`, i.e. anything with
 * `has-logo`) contains an `<a>` inside an `<a>` — which HTML forbids, so the
 * parser silently closes the outer link early and the info block lands OUTSIDE
 * it. The link's box is therefore the photo on some cards and the photo plus
 * the whole white title block on others, and the shape depends on the LISTING'S
 * DATA, not on its type. Anchoring there put the badge neatly on the photo for
 * services and halfway down the address row for churches.
 *
 * `.lf-background` is the one box that is always exactly the photo.
 *
 * ⚠️ It only works because the hover zoom moved to `.lf-background::before`
 * (see above). Put a transform back on `.lf-background` and this badge grows
 * and slides on every hover.
 */
.lf-item-container.listing-preview .lf-item-default .lf-background > .mfv-dist {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 5;
    pointer-events: auto;
}

/* Cards with no cover photo have no `.lf-background`; the script falls back to
   the cover link, which on those is all there is to pin to. */
.lf-item-container.listing-preview .lf-item-default > a > .mfv-dist {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 5;
    pointer-events: auto;
}

/*
 * List: overlaid on the 180px thumbnail, bottom-left.
 *
 * `pointer-events:none` here and not in grid — the whole thumbnail column is one
 * absolutely positioned link, and a chip that swallowed clicks in the corner of
 * a 180px target would be felt. The tooltip is worth less than the tap area.
 */
.finder-listings.mfv-view-list .results-view .lf-item > .mfv-dist {
    position: absolute;
    left: 8px;
    bottom: 8px;
    z-index: 5;
    height: 26px;
    padding: 0 8px;
    font-size: 12px;
    pointer-events: none;
}

.lf-item-container.listing-preview .lf-item-default .lf-head-btn .rent-price,
.lf-item-container.listing-preview .lf-item-default .lf-head-btn .rent-price span.value,
.lf-item-container.listing-preview .lf-item-default .lf-head-btn .event-date {
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

/* ── Author avatar, top-right so it can never sit on the name ────────────── */
.lf-item-container.listing-preview .lf-item-default:has(.lf-background) .lf-avatar,
.lf-item-container.listing-preview .lf-item-default:has(.pc-slider) .lf-avatar {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    z-index: 6;
}

/* A type with no cover at all: the child theme already pins the avatar
   top-left and pads the info block round it. Keep that, just give it room now
   that the block sits on white rather than over a photo. */
.lf-item-container.listing-preview .lf-item-default:not(:has(.lf-background)):not(:has(.pc-slider)) .lf-item-info {
    padding-left: 60px !important;
    padding-top: 16px !important;
}


/* ============================================================================
   3. THE NAME BLOCK — below the photo, on white
   ========================================================================== */

.lf-item-container.listing-preview .lf-item-default .lf-item-info {
    position: static !important;
    display: block !important;
    left: auto;
    right: auto;
    bottom: auto;
    z-index: auto;
    min-height: 0;
    overflow: hidden;
    color: var(--mfl-text-dark, #1e293b) !important;
    padding: 13px var(--mfv-card-pad) 12px !important;
    text-align: left;
    /*
     * ⚠️ Load-bearing, and it does not look it.
     *
     * The parent theme sets `will-change: transform` on `.lf-item-info` (it
     * used to slide). `will-change: transform` makes the element a CONTAINING
     * BLOCK for absolutely positioned descendants — so `.lf-avatar`'s
     * `top:12px; right:12px` below resolved against this block instead of the
     * card, and the avatar landed on top of the listing name rather than on the
     * photo. Clearing it hands the avatar back to `.lf-item-default`.
     */
    will-change: auto;
}

/*
 * The title. Three separate rules were painting it white with a drop shadow for
 * legibility over the cover, and the child theme sizes every h4 globally with
 * `!important` — all four have to be beaten, hence the weight below.
 */
.lf-item-container.listing-preview .lf-item-default .lf-item-info h4,
.lf-item-container.listing-preview .lf-item-default .lf-item-info h4 a {
    color: var(--mfl-text-dark, #1e293b) !important;
    text-shadow: none !important;
    font-family: var(--mfl-font-heading, sans-serif) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    /*
     * ⚠️ line-height in PIXELS, not a ratio, and the box below is sized from it.
     *
     * A ratio resolves against whatever font-size finally wins the cascade
     * (the child theme sizes every h4 with `clamp(17px,2vw,22px)!important`),
     * so the two lines measured 26px each on a wide viewport and 22px on a
     * narrow one — which is precisely how cards in the same row ended up
     * different heights.
     */
    line-height: 25px !important;
    letter-spacing: -0.011em;
    margin: 0 0 7px !important;
}

/*
 * Exactly two lines, always. `height` (not `min-height`) plus `overflow:hidden`
 * makes it exact: a one-line name is padded out to two and a three-line name is
 * cut to two, so every card in a row is the same height however long the
 * listing is called. 44px = 2 × the 22px line above.
 *
 * ⚠️ The clamp is declared here EXPLICITLY even though mfl-widgets.css already
 * forces `-webkit-line-clamp: 2 !important` on this element. Inheriting a
 * layout property from another module's `!important` by accident is how the
 * one-line-per-type overrides below silently stopped working; owning it here
 * means the geometry is stated where the height is.
 */
.lf-item-container.listing-preview .lf-item-default .lf-item-info h4 {
    display: -webkit-box;
    /*
     * ⚠️ ONE line, not two — because the height is 25px.
     *
     * The requested geometry was 13px text in a 25px box with the clamp left at
     * 2. Two lines do not fit in 25px at any readable line-height (two 13px
     * lines need ~32px minimum), so a clamp of 2 would have rendered one full
     * line plus a ~3px sliver of the second — a row of chopped letter-tops
     * along the bottom edge of every long title.
     *
     * Clamping to 1 gives the intended 25px card with a clean ellipsis instead.
     * If two lines are wanted later, the height has to go to ~36px and the
     * line-height below to 18px; the three numbers are a set.
     */
    /*
     * ⚠️ NOT a line clamp — a plain one-line truncation, on BOTH the h4 and its
     * anchor, and both need !important.
     *
     * The clamp that used to be here never drew an ellipsis, for two reasons
     * stacked on each other:
     *
     *   1. mfl-widgets.css declares `-webkit-line-clamp: 2 !important` on this
     *      element, so a plain `1` lost to it, and a clamp of 2 inside a 25px
     *      box puts the ellipsis on a second line the box never shows;
     *   2. even at 1, the name is wrapped in a block-level `<a>` (mfl-widgets
     *      also forces `display: -webkit-box` on the anchor), so the h4 has no
     *      line box of its own to clamp — it just CLIPS the anchor, and a clip
     *      says nothing about what was cut off.
     *
     * `nowrap` + `text-overflow` on the element that actually holds the text
     * has neither problem: one line, always, ending in a real ellipsis.
     */
    display: block !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 25px;
}

.lf-item-container.listing-preview .lf-item-default .lf-item-info h4 a {
    display: block !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/*
 * ⚠️ THE TITLE MUST NEVER BE WHITE. This looks redundant — the rule above
 * already sets a dark colour — and it is not.
 *
 * mfl-widgets.css carried a legacy pair of rules that painted the title white
 * whenever the card had a cover image, from the era when the title was printed
 * ON the photo. The plain-state half lost to the selector above, but the
 * `:hover` half tied on specificity and won on source order, so the listing
 * name turned white-on-white and DISAPPEARED the moment the cursor touched it.
 *
 * Those rules are now deleted at source. This stays as the guarantee: the title
 * has an explicit hover state of its own, so nothing can quietly reintroduce a
 * colour for it.
 */
.lf-item-container.listing-preview .lf-item-default .lf-item-info h4 a,
.lf-item-container.listing-preview .lf-item-default .lf-item-info h4 a:hover,
.lf-item-container.listing-preview .lf-item-default .lf-item-info h4 a:focus {
    /* The listing name is already the loudest thing on the card; an underline on
       hover adds noise and, at this weight, thickens the whole block. The colour
       shift carries the affordance on its own. */
    text-decoration: none !important;
}

.lf-item-container.listing-preview .lf-item-default .lf-item-info h4 a:hover,
.lf-item-container.listing-preview .lf-item-default .lf-item-info h4 a:focus {
    color: var(--mfl-primary, #0e7490) !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

/*
 * The tick is an <img> inside the clamped title box. Left at its natural size it
 * counted as a word and could be pushed onto a third line of its own, which the
 * clamp then hid — the listing looked unverified. Shrinking it to the cap height
 * keeps it on the last line of the name.
 */
.lf-item-container.listing-preview .lf-item-default .lf-item-info h4 .verified-listing {
    display: inline-block;
    vertical-align: -2px;
    margin-left: 4px;
    max-height: 15px;
    width: auto;
}

/*
 * ── Status pill → a badge on the photo ───────────────────────────────────
 *
 * The item-status module ("Available", "Sold", "Scheduled") prints its pill
 * between the name and the meta row, and it only prints when the listing HAS a
 * status. So one card in a row grew a 24px band the others did not have, and
 * the grid stopped lining up. Lifting it out of flow onto the photo fixes the
 * height AND puts the most scannable fact where the eye already is.
 *
 * It sits to the LEFT of the author avatar, which owns the top-right corner:
 * `right: 56px` clears a 36px avatar plus its gutter. When the card has no
 * avatar (`.no-logo` on the wrapper) the badge takes the corner itself.
 */
.lf-item-container.listing-preview .lf-item-default .lf-item-info .mfv-item-status-wrap {
    position: absolute;
    top: 12px;
    right: 56px;
    margin: 0 !important;
    z-index: 6;
    pointer-events: none;
}

.lf-item-container.listing-preview.no-logo .lf-item-default .lf-item-info .mfv-item-status-wrap {
    right: 12px;
}

/* On a photoless card there is no image to sit on, so leave it in the flow. */
.lf-item-container.listing-preview .lf-item-default:not(:has(.lf-background)):not(:has(.pc-slider)) .lf-item-info .mfv-item-status-wrap {
    position: static;
    margin: 0 0 8px !important;
}

.lf-item-container.listing-preview .lf-item-default .lf-item-info .mfv-item-status {
    background: rgba(15, 23, 42, .86) !important;
    border-color: rgba(255, 255, 255, .14) !important;
    color: #fff !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: 0 2px 6px rgba(15, 23, 42, .22);
    padding: 5px 10px !important;
    font-size: 11px !important;
}


/* ============================================================================
   4. INFO FIELDS — one dot-separated line under the name
   ========================================================================== */

.lf-item-container.listing-preview .lf-item-default .lf-item-info > ul.lf-contact {
    display: flex;
    /*
     * ⚠️ Fixed height + wrap + overflow:hidden. All three, and in that
     * combination, for two different reasons:
     *
     *  • FIXED HEIGHT is what makes every card of a type the same height. Left
     *    to grow, a listing with a long address ("Lawrenceville, GA" against
     *    "GA, USA") took a second line and that one card stood ~20px taller
     *    than its neighbours, which reads as a broken grid.
     *  • WRAP, not `nowrap`, is how the overflow is trimmed. `nowrap` made
     *    every field shrink together and hard-clip mid-word — "For Sale" came
     *    out as "For Sal". Wrapping pushes a field that does not fit onto a
     *    second line, which the fixed height then hides, so a field is either
     *    shown whole or not at all.
     */
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    padding: 0;
    overflow: hidden;
    height: 19px;
}

.lf-item-container.listing-preview .lf-item-default .lf-item-info > ul.lf-contact > li {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: none;          /* never shrink — see the wrap note above */
    min-width: 0;
    max-width: 100%;
    padding: 0 !important;
    font-family: var(--mfl-font-body, sans-serif);
    font-size: 13px;
    line-height: 1.45;
    color: var(--mfl-text-body, #475569) !important;
    text-shadow: none !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The separator is drawn, not typed — the fields themselves stay whatever the
   listing type config says they are. */
.lf-item-container.listing-preview .lf-item-default .lf-item-info > ul.lf-contact > li + li::before {
    content: '·';
    margin: 0 8px;
    color: var(--mfl-text-muted, #94a3b8);
    font-weight: 700;
    flex: none;
}

.lf-item-container.listing-preview .lf-item-default .lf-item-info > ul.lf-contact > li i {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    top: 0;
    flex: none;
    font-size: 15px !important;
    line-height: 1;
    color: var(--mfl-text-muted, #94a3b8) !important;
    background: transparent !important;
}


/* ============================================================================
   5. FOOTER ROWS
   ----------------------------------------------------------------------------
   ⚠️ The `>` combinator is the list-view guard — see the header. Keep it.
   ========================================================================== */

.lf-item-container.listing-preview > .c27-footer-section {
    background: var(--mfl-bg-white, #fff);
    border-top: 1px solid var(--mfv-card-line) !important;
}

/* ── 5a. Detail columns (`details` section) ──────────────────────────────── */

.lf-item-container.listing-preview > .listing-details-3 {
    padding: 0 !important;
    height: auto !important;
    position: relative;
}

/*
 * A type can define a detail whose value is empty for a given listing —
 * MyListing still prints the `<li>`, just with `style="display:none"`. When
 * every detail is empty (church/place listings hit this: the row renders one
 * hidden `<li>` and nothing else) the row collapses to nothing but its own
 * border, leaving a stray hairline across the card. Drop the whole row when it
 * has no visible item left.
 */
.lf-item-container.listing-preview > .listing-details-3:not(:has(.details-list > li:not([style*="display:none"]))) {
    display: none !important;
}

.lf-item-container.listing-preview > .listing-details-3 .details-list {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    margin: 0;
    padding: 0;
}

/*
 * The parent hands each column a percentage width through a chain of
 * `:first-child:nth-last-child(n)` selectors that out-specify anything sane
 * here, so the flex sizing is forced instead. Equal columns whatever the count.
 */
.lf-item-container.listing-preview > .listing-details-3 .details-list > li {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 5px;
    /* Tight, because these columns are only ~105px wide in the explore rail and
       every pixel of padding is a character of the label lost to the ellipsis. */
    padding: 0 6px !important;
    height: 44px;
    position: relative;
    /*
     * One line, ellipsised, and a FIXED row height. A wrapping label ("Sports &
     * Hobbies", "125 Cranleigh Gardens") made this row 20px taller on some
     * cards than others; a fixed height plus `nowrap` keeps every card of a type
     * identical. Types differ from each other — that is fine and intended.
     */
    white-space: nowrap;
    overflow: hidden;
    font-family: var(--mfl-font-body, sans-serif);
}

/* Hairline between columns, drawn on the item so it needs no extra node. */
.lf-item-container.listing-preview > .listing-details-3 .details-list > li + li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 11px;
    bottom: 11px;
    width: 1px;
    background: var(--mfv-card-line);
}

/* Icon beside the label rather than stacked above it, and without the theme's
   grey disc — the column divider already does the separating. */
.lf-item-container.listing-preview > .listing-details-3 .details-list > li i {
    flex: none;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    font-size: 15px !important;
    line-height: 1;
    color: var(--mfl-text-muted, #94a3b8) !important;
}

.lf-item-container.listing-preview > .listing-details-3 .details-list > li span {
    width: auto !important;
    min-width: 0;
    margin: 0 !important;
    text-align: left !important;
    font-size: 12.5px;
    line-height: 1.3;
    color: var(--mfl-text-body, #475569);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* A rating detail draws its own star row — let it keep its width. */
.lf-item-container.listing-preview > .listing-details-3 .details-list > li.listing-rating span {
    text-overflow: clip;
}

/* ── 5b. Category row (`categories` section — place / church) ────────────── */

.lf-item-container.listing-preview > .listing-details:not(.actions):not(.listing-details-3) {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    height: auto !important;
    padding: 9px 12px 9px var(--mfv-card-pad) !important;
}

/* The theme positions this list absolutely at a fixed left offset with the
   buttons absolutely at the right. A flex row does the same job and survives a
   long category name instead of running under the buttons. */
.lf-item-container.listing-preview > .listing-details > ul.c27-listing-preview-category-list {
    position: static !important;
    float: none !important;
    left: auto !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
}

.lf-item-container.listing-preview > .listing-details > ul.c27-listing-preview-category-list > li {
    float: none !important;
    max-width: 100% !important;
    margin: 0 !important;
    min-width: 0;
    overflow: hidden;
}

.lf-item-container.listing-preview > .listing-details .cat-icon {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    margin-right: 8px !important;
    border-radius: 50%;
}

.lf-item-container.listing-preview > .listing-details .cat-icon i {
    font-size: 15px !important;
}

.lf-item-container.listing-preview > .listing-details .category-name {
    font-family: var(--mfl-font-body, sans-serif);
    font-size: 13px;
    font-weight: 500;
    color: var(--mfl-text-body, #475569);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Buttons on this row sit at the right, not spread across it. */
.lf-item-container.listing-preview > .listing-details:not(.actions) .ld-info {
    position: static !important;
    float: none !important;
    right: auto !important;
    width: auto !important;
    flex: none;
}

.lf-item-container.listing-preview > .listing-details:not(.actions) .ld-info > ul {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
}

.lf-item-container.listing-preview > .listing-details:not(.actions) .ld-info > ul > li {
    float: none !important;
    margin: 0 !important;
}

/* ── 5c. Action row (`actions` section) ──────────────────────────────────── */

.lf-item-container.listing-preview > .listing-details.actions {
    display: block !important;
    height: auto !important;
    padding: 0 !important;
    text-align: center;
}

.lf-item-container.listing-preview > .listing-details.actions .ld-info {
    position: static !important;
    float: none !important;
    right: auto !important;
    display: block !important;
    width: 100% !important;
}

.lf-item-container.listing-preview > .listing-details.actions .ld-info > ul {
    display: flex;
    align-items: stretch;
    margin: 0;
    padding: 0;
}

/*
 * Equal columns with the same hairline as the detail row above, so the two
 * footer rows read as one grid.
 *
 * Works for two buttons or three. The parent theme hides the compare button
 * inside footer sections outright (`.c27-footer-section li.compare-button-li
 * {display:none}` in frontend.css) and nothing else in the theme renders the
 * comparison view, so most types show two. Nothing here re-enables it — that
 * would be turning a feature on, not styling one.
 */
.lf-item-container.listing-preview > .listing-details.actions .ld-info > ul > li {
    flex: 1 1 0 !important;
    width: auto !important;
    float: none !important;
    margin: 0 !important;
    padding: 8px 0 !important;
    /*
     * ⚠️ `display` needs !important, and this is not belt-and-braces.
     *
     * `.compare-button-li` also matches `.c27-footer-section li.compare-button-li
     * {display:none}` in the parent and other list-item rules elsewhere; without
     * a forced `flex` here that third item fell back to a block and its round
     * button hugged the left edge of its column instead of centring, which is
     * exactly the misalignment the last row showed.
     */
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: relative;
}

.lf-item-container.listing-preview > .listing-details.actions .ld-info > ul > li + li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 1px;
    background: var(--mfv-card-line);
}

/* ── 5d. Round buttons (both footer variants) ────────────────────────────── */

.lf-item-container.listing-preview > .c27-footer-section .ld-info ul li > a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--mfv-card-btn-bg);
    border: 1px solid var(--mfv-card-line);
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.lf-item-container.listing-preview > .c27-footer-section .ld-info ul li > a i {
    font-size: 18px;
    color: var(--mfl-text-body, #475569);
    transition: color .18s ease;
}

.lf-item-container.listing-preview > .c27-footer-section .ld-info ul li > a:hover {
    background: var(--mfl-primary-50, rgba(14, 116, 144, .08));
    border-color: rgba(var(--mfv-primary-rgb, 14, 116, 144), .35);
}

.lf-item-container.listing-preview > .c27-footer-section .ld-info ul li > a:hover i {
    color: var(--mfl-primary, #0e7490);
}

/* Saved: solid fill, the way the reference shows an active heart. */
.lf-item-container.listing-preview > .c27-footer-section .ld-info ul li > a.c27-bookmark-button.bookmarked {
    background: var(--mfl-primary, #0e7490) !important;
    border-color: var(--mfl-primary, #0e7490) !important;
}

.lf-item-container.listing-preview > .c27-footer-section .ld-info ul li > a.c27-bookmark-button.bookmarked i {
    color: #fff !important;
}


/* ============================================================================
   6. NARROW CARDS
   ========================================================================== */

@media (max-width: 600px) {
    :root {
        --mfv-card-pad: 14px;
        --mfv-card-photo-max: 210px;
    }

    .lf-item-container.listing-preview .lf-item-default .lf-item-info h4 {
        font-size: 16px !important;
        line-height: 21px !important;
        height: 42px;
    }

    .lf-item-container.listing-preview.type-vehicle .lf-item-default .lf-item-info h4,
    .lf-item-container.listing-preview.type-real-estate .lf-item-default .lf-item-info h4,
    .lf-item-container.listing-preview.type-members .lf-item-default .lf-item-info h4 {
        line-height: 23px !important;
        height: 23px;
    }

    .lf-item-container.listing-preview > .listing-details-3 .details-list > li {
        gap: 5px;
        padding: 10px 6px !important;
    }

    .lf-item-container.listing-preview > .listing-details-3 .details-list > li span {
        font-size: 12px;
    }

    .lf-item-container.listing-preview > .c27-footer-section .ld-info ul li > a {
        width: 36px;
        height: 36px;
    }
}


/* ============================================================================
   7. PER-TYPE TUNING
   ----------------------------------------------------------------------------
   `type-<slug>` is on the card wrapper. Only geometry lives here — what each
   type SHOWS is still that type's Preview Card config in MyListing.
   ========================================================================== */

/*
 * Vehicles and real estate: the name is short and it is the meta line that
 * carries the value (year · mileage · condition / beds · baths · size), so the
 * name gets one confident line and the meta gets weight. This is the second
 * reference layout.
 */
/* One line for these types. `-webkit-line-clamp: 1` needs `!important` to beat
   mfl-widgets.css's blanket `-webkit-line-clamp: 2 !important`. */
.lf-item-container.listing-preview.type-vehicle .lf-item-default .lf-item-info h4,
.lf-item-container.listing-preview.type-real-estate .lf-item-default .lf-item-info h4 {
    font-size: 18px !important;
    line-height: 24px !important;
    -webkit-line-clamp: 1 !important;
    height: 24px;
}

.lf-item-container.listing-preview.type-vehicle .lf-item-default .lf-item-info > ul.lf-contact > li,
.lf-item-container.listing-preview.type-real-estate .lf-item-default .lf-item-info > ul.lf-contact > li {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--mfl-text-dark, #1e293b) !important;
}

/* Members cards carry a name and nothing else — a 2:1 band over a single line
   of text reads as a broken card, so square the photo up. */
.lf-item-container.listing-preview.type-members .lf-item-default .lf-background {
    aspect-ratio: 4 / 3;
    max-height: 260px;
}

/* Events lead with a venue and a date-time range; both are long, so stack them
   rather than running them together on one dotted line. */
.lf-item-container.listing-preview.type-event .lf-item-default .lf-item-info > ul.lf-contact {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    row-gap: 3px;
    height: 41px;        /* exactly the two stacked lines */
}

.lf-item-container.listing-preview.type-event .lf-item-default .lf-item-info > ul.lf-contact > li {
    max-width: 100%;
    overflow: hidden;
}

.lf-item-container.listing-preview.type-event .lf-item-default .lf-item-info > ul.lf-contact > li + li::before {
    content: none;
}

/* Churches and other places show one address line and a category row, and the
   name is the thing being scanned for — let it breathe. */
.lf-item-container.listing-preview.type-place .lf-item-default .lf-item-info h4 {
    font-size: 17.5px !important;
}

/* Members cards have a name and no meta row, so one generous line reads better
   than two with an empty second. */
.lf-item-container.listing-preview.type-members .lf-item-default .lf-item-info h4 {
    font-size: 18px !important;
    line-height: 24px !important;
    -webkit-line-clamp: 1 !important;
    height: 24px;
}


/* ── The tagline badge must stop before the avatar ───────────────────────────
 *
 * ⚠️ `.lf-head` and `.lf-avatar` both sit on the photo and both reach the same
 * right edge, so the avatar (z-index 6) covered the last ~36px of the tagline:
 * measured, the badge ran to x=610 and the avatar occupied 574–610. It read as
 * truncated copy — "Family-owned. Design-build. Crafted" losing its last word
 * behind a disc — rather than as an overlap, which is why it looked like a text
 * bug rather than a layout one.
 *
 * 68px = the avatar's 36px + its 12px inset + a 20px gap. `max-width` rather
 * than padding so the badge's own background stops short too, and ellipsis so a
 * long tagline truncates on its line instead of wrapping under the avatar.
 */
.lf-item-container.listing-preview .lf-item-default .lf-head {
    max-width: calc(100% - 68px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}