/* === Collection roman list ============================================
 *
 * Roman-numeral list of curated items shown on a single-collection page,
 * directly below the hero. Renders recipes (with recipe_type · region
 * eyebrow + total time + rating) and articles (with "Article · {category}"
 * eyebrow, no time/rating). Reads `sb_collection_get_items()` (global
 * helper in features/collections/) — see that feature's README for the
 * data shape.
 *
 * Wrapper class renamed from `.sb-coll-list` → `.sb-collection-list`
 * (R1 wrapper-class compliance against the `collection-list` slug). All
 * BEM children renamed accordingly. Markup is fully PHP-rendered server-
 * side (the pattern returns a `core/html` block), so no saved post content
 * references the old class names — no legacy CSS alias needed.
 *
 * Distinct from:
 *   - patterns/hero/hero-collection/ — single-collection page HEADER
 *     (text + 4:5 lead image, Pool-Water background). This pattern
 *     renders the curated item LIST below the header.
 */
.sb-collection-list { list-style: none; margin: 0; padding: 0; }
.sb-collection-list__item {
    display: grid;
    grid-template-columns: 50px 240px 1fr 100px;
    gap: 24px; align-items: center;
    padding: calc(var(--wp--preset--spacing--sm-plus) + var(--wp--preset--spacing--xxs)) 0;
    border-top: 1px dashed var(--sb-ink-light);
}
.sb-collection-list__item:first-child { border-top: 2px solid var(--wp--preset--color--saddle); }
.sb-collection-list__item:last-child { border-bottom: 2px solid var(--wp--preset--color--saddle); }
.sb-collection-list__num {
    font-family: var(--wp--preset--font-family--italiana);
    font-size: var(--wp--preset--font-size--display); color: var(--wp--preset--color--saddle);
    text-align: center; line-height: 1;
}
.sb-collection-list__pic {
    display: block;
    aspect-ratio: 4/3;
    background-size: cover; background-position: center;
    background-color: var(--wp--preset--color--sugar);
    border: 1px solid var(--sb-ink-light);
}
.sb-collection-list__cat {
    font-family: var(--wp--preset--font-family--manrope);
    font-size: var(--wp--preset--font-size--eyebrow); text-transform: uppercase; letter-spacing: .25em;
    color: var(--wp--preset--color--saddle); font-weight: 600;
}
.sb-collection-list__title {
    font-family: var(--wp--preset--font-family--cormorant);
    font-size: var(--wp--preset--font-size--heading); font-weight: 500; line-height: 1.15;
    margin: var(--wp--preset--spacing--xxs) 0 var(--wp--preset--spacing--xs);
}
.sb-collection-list__title a { color: inherit; text-decoration: none; }
.sb-collection-list__excerpt {
    font-family: var(--wp--preset--font-family--lora);
    font-size: var(--wp--preset--font-size--small); line-height: 1.55;
    color: rgba(42,26,10,.55); margin: 0;
}
.sb-collection-list__time {
    font-family: var(--wp--preset--font-family--cormorant);
    font-style: italic; font-size: var(--wp--preset--font-size--aside-body);
    color: var(--wp--preset--color--saddle); text-align: right; line-height: 1.3;
    display: flex; flex-direction: column; gap: 4px; align-items: flex-end;
}
.sb-collection-list__stars {
    color: var(--wp--preset--color--tuscan);
    font-style: normal; letter-spacing: 1px; font-size: var(--wp--preset--font-size--small);
}
@media (max-width: 800px) {
    .sb-collection-list__item { grid-template-columns: 36px 1fr; gap: 14px; }
    .sb-collection-list__pic, .sb-collection-list__time { display: none; }
}