/* === Search result card — single mixed-content row ====================
 *
 * One row inside the `search-results` grid. A 140px 4:5 thumbnail
 * (`__pic`) sits next to a `__body` column carrying a type badge
 * (`__badge` with `--recipe` / `--culture` / `--tip` / `--collection`
 * modifier), an editorial title, an excerpt, and a meta line of
 * dot-separated bits (recipe type · region · rating; or "N min read · Mar 2024").
 *
 * Wrapper: `.sb-search-result-card` (renamed from `.sb-result` — the
 * old class name was too generic and broke the R1 wrapper-class linter).
 * Inner BEM children keep the `.sb-result__*` names so existing JS hooks
 * and visual-test selectors (`.sb-result__excerpt`, `.sb-result__pic`)
 * keep working — they're scoped descendants here.
 *
 * 1-up list-mode framing (the 200/1fr columns, hairline dividers, etc.)
 * lives in the sibling `search-results/style.css` since that geometry is
 * a property of the container `.sb-results-list`, not of the card.
 */

/* --- Default 2-col grid card (used when not in a 1-up list) -------- */
.sb-search-result-card {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: var(--wp--preset--spacing--sm);
    padding: calc(var(--wp--preset--spacing--sm) - var(--wp--preset--spacing--xxs) / 2);
    border: 1px solid var(--sb-ink-light);
    background: var(--wp--preset--color--paper);
    color: var(--wp--preset--color--ink);
    text-decoration: none;
    transition: border-color .2s, transform .2s;
}
.sb-search-result-card:hover {
    border-color: var(--wp--preset--color--saddle);
    transform: translateY(-2px);
}

/* --- Thumbnail ---------------------------------------------------- */
.sb-search-result-card .sb-result__pic {
    aspect-ratio: 4 / 5;
    background-color: rgba(237, 213, 192, 0.5);
    border: 1px solid var(--sb-ink-light);
    overflow: hidden;
}
.sb-search-result-card .sb-result__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* --- Body --------------------------------------------------------- */
.sb-search-result-card .sb-result__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

/* --- Badge -------------------------------------------------------- */
.sb-search-result-card .sb-result__badge {
    font-family: var(--wp--preset--font-family--manrope);
    font-size: var(--wp--preset--font-size--tiny);
    text-transform: uppercase;
    letter-spacing: 0.25em;
    font-weight: 600;
    color: var(--wp--preset--color--paper);
    background: var(--wp--preset--color--saddle);
    padding: calc(var(--wp--preset--spacing--xxs) - 1px) calc(var(--wp--preset--spacing--xs) + var(--wp--preset--spacing--xxs) / 4);
    border-radius: 999px;
    display: inline-block;
    margin-bottom: var(--wp--preset--spacing--xs);
}
.sb-search-result-card .sb-result__badge--recipe {
    background: var(--wp--preset--color--saddle);
    color: var(--wp--preset--color--paper);
}
.sb-search-result-card .sb-result__badge--culture {
    background: var(--wp--preset--color--breeze);
    color: var(--wp--preset--color--ink);
}
.sb-search-result-card .sb-result__badge--tip {
    background: var(--wp--preset--color--tuscan);
    color: var(--wp--preset--color--ink);
}
.sb-search-result-card .sb-result__badge--collection {
    background: var(--wp--preset--color--pool);
    color: var(--wp--preset--color--ink);
}

/* --- Title, excerpt, meta ----------------------------------------- */
.sb-search-result-card .sb-result__title {
    font-family: var(--wp--preset--font-family--cormorant);
    /* 19px isn't a token; --card-title (18px) is the closest slot. */
    font-size: var(--wp--preset--font-size--card-title);
    font-weight: 500;
    line-height: 1.15;
    margin: 0 0 calc(var(--wp--preset--spacing--xs) - var(--wp--preset--spacing--xxs) / 2);
    color: var(--wp--preset--color--ink);
}
.sb-search-result-card .sb-result__excerpt {
    font-family: var(--wp--preset--font-family--lora);
    font-size: var(--wp--preset--font-size--small);
    line-height: 1.5;
    color: var(--wp--preset--color--ink);
    margin: 0 0 var(--wp--preset--spacing--xs);
}
.sb-search-result-card .sb-result__meta {
    margin-top: auto;
    font-family: var(--wp--preset--font-family--manrope);
    font-size: var(--wp--preset--font-size--eyebrow);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--wp--preset--color--saddle);
    font-weight: 600;
    display: flex;
    flex-wrap: wrap;
    gap: var(--wp--preset--spacing--xs);
    align-items: center;
}
.sb-search-result-card .sb-result__sep {
    color: var(--wp--preset--color--saddle);
    opacity: 0.4;
}

/* --- Responsive --------------------------------------------------- */
@media (max-width: 800px) {
    .sb-search-result-card {
        grid-template-columns: 110px 1fr;
        gap: calc(var(--wp--preset--spacing--sm) - var(--wp--preset--spacing--xxs));
        padding: calc(var(--wp--preset--spacing--sm) - var(--wp--preset--spacing--xxs));
    }
}