/* === Hero — featured collection (homepage Pool-Water block) ===========
 *
 * Editor's-pick block on the homepage. Top: centred header with eyebrow,
 * Italiana title, italic deck. Bottom: 4:5 lead image on the left and a
 * roman-numeral list of recipes on the right (any length — Mark curates
 * per collection). Pool-Water background with saddle 2-px top/bottom
 * borders and diamond-corner accents.
 *
 * Distinct from:
 *   - patterns/hero/hero-collection/ (single-collection landing hero —
 *     same colour story but a 2-column hero, not a header + list).
 *   - patterns/hero/hero-featured-recipe/ (split-feature recipe hero with
 *     seal overlay — different visual + different data source).
 */
.sb-hero-featured-collection {
    background: var(--wp--preset--color--pool);
    border-top: 2px solid var(--wp--preset--color--saddle);
    border-bottom: 2px solid var(--wp--preset--color--saddle);
    padding: 0 var(--wp--preset--spacing--lg);
    position: relative;
}
.sb-hero-featured-collection::before,
.sb-hero-featured-collection::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 12px;
    height: 12px;
    background: var(--wp--preset--color--paper);
    border: 1.5px solid var(--wp--preset--color--saddle);
}
.sb-hero-featured-collection::before { top: -8px; }
.sb-hero-featured-collection::after  { bottom: -8px; }
.sb-hero-featured-collection__header {
    text-align: center;
    padding: var(--wp--preset--spacing--lg) 0 var(--wp--preset--spacing--md);
}
.sb-hero-featured-collection__eyebrow {
    font-family: var(--wp--preset--font-family--manrope);
    font-size: var(--wp--preset--font-size--eyebrow);
    text-transform: uppercase;
    letter-spacing: .3em;
    color: var(--wp--preset--color--saddle);
    font-weight: 600;
    margin: 0;
}
.sb-hero-featured-collection__title {
    font-family: var(--wp--preset--font-family--italiana);
    font-size: var(--wp--preset--font-size--display);
    letter-spacing: .12em;
    margin: var(--wp--preset--spacing--xs) 0 var(--wp--preset--spacing--xxs);
    font-weight: 400;
    color: var(--wp--preset--color--ink);
    text-wrap: balance;
}
.sb-hero-featured-collection__deck {
    font-family: var(--wp--preset--font-family--cormorant);
    font-style: italic;
    font-size: var(--wp--preset--font-size--body);
    color: var(--wp--preset--color--ink);
    max-width: 480px;
    margin: 0 auto;
    text-wrap: pretty;
    hyphens: auto;
    -webkit-hyphens: auto;
}
.sb-hero-featured-collection__body {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: var(--wp--preset--spacing--lg);
    padding: 0 0 calc(var(--wp--preset--spacing--lg) + var(--wp--preset--spacing--xxs));
}
.sb-hero-featured-collection__lead {
    aspect-ratio: var(--sb-aspect-hero-photo);
    border: 2px solid var(--wp--preset--color--saddle);
    background-color: var(--wp--preset--color--paper);
    overflow: hidden;
    align-self: center;
}
.sb-hero-featured-collection__lead-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.sb-hero-featured-collection__list {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
}
.sb-hero-featured-collection__row {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: var(--wp--preset--spacing--sm);
    padding: calc(var(--wp--preset--spacing--sm-plus) - var(--wp--preset--spacing--xxs)) calc(var(--wp--preset--spacing--sm-plus) - var(--wp--preset--spacing--xxs));
    margin: 0 calc(-1 * (var(--wp--preset--spacing--sm-plus) - var(--wp--preset--spacing--xxs)));
    border-bottom: 1px dashed var(--wp--preset--color--saddle);
    align-items: center;
    transition: background-color .15s ease, transform .15s ease;
    cursor: pointer;
}
.sb-hero-featured-collection__row:hover,
.sb-hero-featured-collection__row:focus-within {
    background-color: rgba(250, 246, 240, 0.55); /* paper @ 55% over Pool */
}
.sb-hero-featured-collection__row:hover .sb-hero-featured-collection__rowtitle,
.sb-hero-featured-collection__row:focus-within .sb-hero-featured-collection__rowtitle {
    color: var(--wp--preset--color--saddle);
}
.sb-hero-featured-collection__row:hover .sb-hero-featured-collection__num,
.sb-hero-featured-collection__row:focus-within .sb-hero-featured-collection__num {
    color: var(--wp--preset--color--ink);
}
.sb-hero-featured-collection__row:last-child { border-bottom: 0; }
.sb-hero-featured-collection__rowtitle {
    transition: color .15s ease;
}
.sb-hero-featured-collection__num {
    transition: color .15s ease;
    font-family: var(--wp--preset--font-family--italiana);
    font-size: var(--wp--preset--font-size--heading);
    color: var(--wp--preset--color--saddle);
    text-align: center;
    line-height: 1;
}
.sb-hero-featured-collection__link { display: block; text-decoration: none; color: inherit; }
.sb-hero-featured-collection__rowtitle {
    display: block;
    font-family: var(--wp--preset--font-family--cormorant);
    font-size: var(--wp--preset--font-size--heading);
    line-height: 1.15;
    color: var(--wp--preset--color--ink);
    font-weight: 500;
}
.sb-hero-featured-collection__rowmeta {
    display: block;
    font-family: var(--wp--preset--font-family--manrope);
    font-size: var(--wp--preset--font-size--eyebrow);
    text-transform: uppercase;
    letter-spacing: .2em;
    color: var(--wp--preset--color--saddle);
    font-weight: 600;
    margin-top: var(--wp--preset--spacing--xxs);
}
@media (max-width: 800px) {
    .sb-hero-featured-collection { padding: 0 var(--wp--preset--spacing--sm); }
    .sb-hero-featured-collection__body { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--md); padding-bottom: var(--wp--preset--spacing--md); }
}