/* === Recipe archive grid — recipe CPT archive ===================
 *
 * 3-column mosaic with a lead card (col 1, spans 2 rows) and supporting
 * cards on the right. Used by the recipe archive — inherits the page's
 * main query so taxonomy/sort/pagination filters apply.
 *
 * The shared `.sb-recipe-card` component (and its --lead typography
 * variant) lives in assets/css/global.css. Grid-layout-specific
 * positioning of those variants is scoped under `.sb-recipe-archive-grid`
 * here.
 */
.sb-recipe-archive-grid {
    display: grid;
    gap: var(--wp--preset--spacing--md);
    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 auto auto;
}

/* Archive cards use slightly smaller title than the homepage mosaic. */
.sb-recipe-archive-grid .sb-recipe-card__title { font-size: var(--wp--preset--font-size--card-title); }

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

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

@media (max-width: 800px) {
    .sb-recipe-archive-grid {
        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-recipe-archive-grid .sb-recipe-card--lead {
        grid-column: 1 / span 2;
        grid-row: span 1;
    }
}
@media (max-width: 480px) {
    .sb-recipe-archive-grid { grid-template-columns: 1fr; }
    .sb-recipe-archive-grid .sb-recipe-card--lead { grid-column: 1; }
}