/* Bridge between WordPress block wrappers and the locked components in site.css. Colours and fonts only through tokens (DESIGN.md). */
.wp-site-blocks { padding: 0; }
:where(.wp-site-blocks) > * { margin-block: 0; }
.wp-block-group { margin-block: 0; }
.wp-block-group:not(.wrap) { margin-inline: 0; }

/* breadcrumb: the static "Front page" item, then the post's category */
.crumbs { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs); }
.crumbs ol { display: inline-flex; }
.crumbs .wp-block-post-terms { font: 400 var(--text-sm)/1.4 var(--font-ui); color: var(--muted); }
.crumbs .wp-block-post-terms::before { content: "/"; margin-right: var(--space-xs); color: var(--rule-2); }

/* article plate: WordPress prints <figure class="wp-block-post-featured-image plate"> */
.wp-block-post-featured-image.plate { margin-block: 0; }
.wp-block-post-featured-image.plate img { width: 100%; height: auto; object-fit: contain; }

/* rows: query loops print <ul class="wp-block-post-template"><li><div class="row"> */
.rows .wp-block-post-template { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--rule-2); }
.rows .wp-block-post-template > li { margin: 0; }
.rows .row { grid-template-columns: minmax(0, 2.2fr) minmax(0, 8fr) minmax(0, 1.6fr); }
.rows .row__head { margin: 0; font: 400 var(--text-lg)/1.3 var(--font-display); letter-spacing: 0; }
.rows .row__head a { text-decoration: none; color: var(--ink); }
.rows .row__head a:hover { text-decoration: underline; text-decoration-color: var(--accent); }
.rows .row__place a { color: var(--muted); text-decoration: none; }
.rows .row__date { text-align: right; }
.wp-block-query-title { font-size: var(--text-section); font-weight: 700; letter-spacing: -0.02em; padding-block: var(--space-xl) var(--space-lg); }
.wp-block-query-pagination { display: flex; justify-content: space-between; padding-block: var(--space-lg); font: 400 var(--text-sm)/1.4 var(--font-ui); }

/* the front page body is pushed by blog_studio (design/build.py --wp) */
.front { display: block; }

@media (max-width: 60rem) {
  .rows .row { grid-template-columns: minmax(0, 1fr) auto; }
  .rows .row__head { grid-column: 1 / -1; order: -1; }
}