/* === Latest mosaic — homepage 'latest' section ====================
 *
 * Asymmetric 6-up mosaic: 1 lead (col 1, spans 2 rows) + 4 supporting
 * (cols 2-3, rows 1-2) + 1 P.S. rule + 1 tail (spans all 3 cols, row 3).
 *
 * The shared `.sb-recipe-card` component (and its --lead / --tail
 * typography variants) lives in assets/css/global.css. Grid-layout-
 * specific positioning of those variants is scoped under
 * `.sb-latest-mosaic` here.
 */
.sb-latest-mosaic {
    display: grid;
    gap: var(--wp--preset--spacing--md-plus);
    padding: 0 var(--wp--preset--spacing--lg) calc(var(--wp--preset--spacing--lg) + var(--wp--preset--spacing--xxs));
    grid-template-columns: 1.4fr 1fr 1fr;
    grid-template-rows: auto;
    row-gap: calc(var(--wp--preset--spacing--md) + var(--wp--preset--spacing--xs));
}

/* Lead card spans col 1, 2 rows. */
.sb-latest-mosaic .sb-recipe-card--lead {
    grid-column: 1 / span 1;
    grid-row: span 2;
}

/* Tail card spans all 3 cols on row 3. */
.sb-latest-mosaic .sb-recipe-card--tail {
    grid-column: 1 / -1;
}

/* --- P.S. rule (above the tail) --- */
.sb-latest-mosaic__ps {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: var(--wp--preset--spacing--sm-plus);
    margin: var(--wp--preset--spacing--sm-plus) 0 calc(-1 * var(--wp--preset--spacing--xxs));
    color: var(--wp--preset--color--saddle);
    font-family: var(--wp--preset--font-family--manrope);
    font-size: var(--wp--preset--font-size--tiny);
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
}
.sb-latest-mosaic__ps::before,
.sb-latest-mosaic__ps::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--wp--preset--color--saddle);
    opacity: .4;
}
.sb-latest-mosaic__ps span {
    padding: 0 var(--wp--preset--spacing--xs);
    font-style: italic;
    font-family: var(--wp--preset--font-family--cormorant);
    font-size: var(--wp--preset--font-size--body);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0.04em;
    color: var(--wp--preset--color--saddle);
}

/* View Transitions naming (formerly attached to .sb-recipe-grid). */
@supports (view-transition-name: a) {
    .sb-latest-mosaic { view-transition-name: sb-latest-mosaic; }
}

@media (max-width: 800px) {
    .sb-latest-mosaic {
        padding: 0 var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
        gap: var(--wp--preset--spacing--sm-plus);
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
    }
    .sb-latest-mosaic .sb-recipe-card--lead {
        grid-column: 1 / span 2;
        grid-row: span 1;
    }
    .sb-latest-mosaic .sb-recipe-card--tail {
        grid-column: 1 / -1;
    }

    /* Center all card content on mobile. */
    .sb-latest-mosaic .sb-recipe-card__body { text-align: center; }
    .sb-latest-mosaic .sb-recipe-card__meta { justify-content: center; }
    .sb-latest-mosaic .sb-recipe-card--lead .sb-recipe-card__body-top,
    .sb-latest-mosaic .sb-recipe-card--tail .sb-recipe-card__body-top {
        align-items: center;
    }
    /* Stack the tail card's stars + CTA vertically on mobile so each
       row is independently centered (matches the lead card). The
       desktop rule sets flex-direction:row (global.css:190). */
    .sb-latest-mosaic .sb-recipe-card--tail .sb-recipe-card__body-bottom {
        flex-direction: column;
        align-items: center;
        gap: var(--wp--preset--spacing--xs);
    }
    .sb-latest-mosaic .sb-recipe-card__stand {
        margin-left: auto;
        margin-right: auto;
    }
    /* Tail body has asymmetric padding (left:0) for the desktop
       image-left/text-right layout; even it out on mobile single-col. */
    .sb-latest-mosaic .sb-recipe-card--tail .sb-recipe-card__body {
        padding-left: var(--wp--preset--spacing--xxs);
    }
}
@media (max-width: 480px) {
    .sb-latest-mosaic { grid-template-columns: 1fr; }
    /* Explicit longhand reset — the @max-width:800px rule above sets
       `grid-column: 1 / span 2` on the lead. iOS Safari WebKit does
       not always reset `grid-column-end` when a later cascade rule
       uses the `grid-column: 1` shorthand, so the lead card kept
       spanning into an implicit second column on iPhone and
       overflowed the mosaic's right padding (~37px off-center). */
    .sb-latest-mosaic .sb-recipe-card--lead,
    .sb-latest-mosaic .sb-recipe-card--tail {
        grid-column-start: 1;
        grid-column-end: -1;
    }
}