/* === Archive feature — sparse fallback =================================
 *
 * Layout that REPLACES the category / tag archive grid when there are
 * ≤2 published posts in the queried term. Each post is rendered as a
 * large image-left, body-right "feature article" instead of being lost
 * in a single-card grid. At 3+ posts the pattern falls through to a
 * 3-up `.sb-recipe-card` grid (which uses the shared card component
 * styles in assets/css/global.css; only the wrapper-spacing rule lives
 * here).
 *
 * Lives in the hero/ family per spec §1.2 (sparse-archive HERO swap,
 * even though it occupies the body slot of the template rather than
 * the page top). It does NOT replace the page header — patterns/hero/
 * hero-category/ still sits above it.
 *
 * Distinct from:
 *   - patterns/hero/hero-category/   (default-taxonomy term page HEADER —
 *     this layout sits underneath it as the BODY).
 *   - patterns/grid/recipe-archive-grid/ (recipe CPT archive grid; uses
 *     the same `.sb-recipe-card` cards but in a lead+supporting layout).
 */
.sb-archive-feature-sparse {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--wp--preset--spacing--lg);
    align-items: center;
    padding: var(--wp--preset--spacing--lg) 0 var(--wp--preset--spacing--md-plus);
    border-bottom: 1px solid var(--sb-ink-light);
    max-width: 1180px;
    margin: 0 auto;
}
.sb-archive-feature-sparse__pic {
    display: block;
    aspect-ratio: 4/3;
    background-color: var(--wp--preset--color--sugar);
    border: 1px solid var(--sb-ink-light);
    overflow: hidden;
}
.sb-archive-feature-sparse__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.sb-archive-feature-sparse__cat {
    font-family: var(--wp--preset--font-family--manrope);
    font-size: var(--wp--preset--font-size--eyebrow);
    text-transform: uppercase;
    letter-spacing: .28em;
    color: var(--wp--preset--color--saddle);
    font-weight: 600;
    margin: 0 0 var(--wp--preset--spacing--xs);
}
.sb-archive-feature-sparse__title {
    font-family: var(--wp--preset--font-family--cormorant);
    font-size: var(--wp--preset--font-size--display);
    font-weight: 500;
    line-height: 1.05;
    margin: 0 0 var(--wp--preset--spacing--xs);
    text-wrap: balance;
}
.sb-archive-feature-sparse__title a { color: var(--wp--preset--color--ink); text-decoration: none; }
.sb-archive-feature-sparse__stand {
    font-family: var(--wp--preset--font-family--cormorant);
    font-style: italic;
    font-size: var(--wp--preset--font-size--card-title);
    line-height: 1.5;
    color: var(--wp--preset--color--ink);
    margin: 0 0 var(--wp--preset--spacing--sm);
    text-wrap: pretty;
    hyphens: auto;
    -webkit-hyphens: auto;
}
.sb-archive-feature-sparse__read {
    font-family: var(--wp--preset--font-family--manrope);
    font-size: var(--wp--preset--font-size--meta);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .25em;
    color: var(--wp--preset--color--saddle);
    text-decoration: none;
}

/* Dense fallback wrapper — at 3+ posts the pattern renders a 3-up grid
   of `.sb-recipe-card` items instead of the feature article. The card
   component itself is styled in assets/css/global.css; this wrapper owns
   the grid positioning only. */
.sb-archive-feature-sparse__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--wp--preset--spacing--md);
    max-width: 1180px;
    margin: var(--wp--preset--spacing--lg) auto var(--wp--preset--spacing--xl);
    padding: 0 var(--wp--preset--spacing--md);
}

@media (max-width: 900px) {
    .sb-archive-feature-sparse__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .sb-archive-feature-sparse__grid {
        grid-template-columns: 1fr;
        gap: var(--wp--preset--spacing--sm-plus);
    }
}

@media (max-width: 800px) {
    .sb-archive-feature-sparse {
        grid-template-columns: 1fr;
        gap: var(--wp--preset--spacing--sm-plus);
        padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--sm);
    }
}