/* ===========================================================================
 * Pharmaville Blog Tweaks — uniform post cards in the MyListing Simple Blog Feed
 * ===========================================================================
 *
 * WHERE THIS APPLIES
 *   The /blog/ and /news-and-insights/ listing pages both render posts as
 *   MyListing "Simple Blog Feed" cards (`.sbf-container`, via the
 *   case27-blog-feed-widget). Both pages emit identical `.sbf-*` markup, so this
 *   one stylesheet normalizes both. Selectors verified against the live DOM
 *   (pharmaville.com/blog/) on 2026-07-09.
 *
 * THE PROBLEM
 *   Out of the box the card wrapper does not enforce equal column widths and the
 *   title (`.sbf-title a`) has no line limit, so a long title stretches its card
 *   wider/taller than its neighbours.
 *
 * THE FIX (pure CSS, five parts)
 *   1. Wrapper -> uniform responsive grid (equal-width columns).
 *   2. Card    -> full width/height, laid out top->bottom.
 *   3. Thumb   -> fixed 16:9 box so every image area matches.
 *   4. Title   -> clamped to 3 lines, with that height reserved.
 *   5. Footer  -> category list pinned to the bottom so footers align.
 *
 * IF IT TARGETS THE WRONG THING
 *   MyListing builds vary. Confirm the real markup in ~30 seconds:
 *     1. Open the listing page, right-click a card -> "Inspect".
 *     2. Walk UP from `.sbf-container` to the element that holds ALL the cards.
 *        Part 1 targets that wrapper via `:has(> .sbf-container)` (no guessing of
 *        its class).
 *
 * TUNING
 *   - Columns: edit the `minmax(300px, 1fr)` below. For EXACTLY three per row use
 *     `repeat(3, 1fr)`; smaller min = more columns.
 *   - Title lines: change every `3` in part 4 (line-clamp + height) to the number
 *     of lines you want to allow (height = lines × 1.3em).
 * ------------------------------------------------------------------------- */

/* ── 1. WRAPPER → uniform responsive grid ─────────────────────────────────────
 * Target the direct parent of the cards via :has() so we don't depend on the
 * wrapper's (build-specific) class name. */
:where(div, ul, section, main):has(> .sbf-container) {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
    gap: 28px !important;
    align-items: stretch !important;
}

/* ── 2. CARD → fill the column, stack top→bottom ──────────────────────────────
 * width/height 100% makes every card identical regardless of content; flex
 * column lets the footer (part 5) push to the bottom. */
.sbf-container {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;          /* the grid gap handles spacing */
    float: none !important;        /* in case the theme floats the cards */
}

/* ── 3. THUMBNAIL → identical 16:9 box on every card ──────────────────────────
 * The source images are 1024×576 (16:9). We size the link to that ratio and make
 * the overlay + background fill it, so the image area never varies. aspect-ratio
 * + cover crops to 16:9 regardless of the source image's real dimensions. */
.sbf-thumb {
    width: 100% !important;
}
.sbf-thumb > a {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    overflow: hidden !important;
}
.sbf-thumb .sbf-background,
.sbf-thumb .overlay {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
}
.sbf-thumb .sbf-background {
    background-size: cover !important;
    background-position: center !important;
}

/* ── 4. TITLE → FIXED 3-line height for every card ────────────────────────────
 * We pin the line-height and set an exact `height` of 3 lines (not min-height),
 * so a 1-, 2- or 3-line title all occupy the same box. A long title is capped at
 * 3 lines; a short one leaves blank space below. */
.sbf-title a.case27-primary-text {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
    overflow: hidden !important;
    line-height: 1.3 !important;   /* pin it so the height math is exact */
    height: 3.9em !important;      /* exactly 3 lines (3 × 1.3em) — same on every card */
}
/* the theme leaves an empty <p> under the title — drop its margin */
.sbf-title p:empty {
    margin: 0 !important;
}

/* ── 5. FOOTER → pin the category list to the bottom ──────────────────────────
 * With the card as a flex column, margin-top:auto pushes the footer down so
 * every card's category row sits on the same baseline. The category <ul>
 * (`.c27-listing-preview-category-list`) lives inside `.listing-details`. */
.sbf-container .listing-details {
    margin-top: auto !important;
}