/* Native posts: Figma 4096:152 / 251 / 198 / 301. */
.mr-blog-index { padding-block: var(--mr-space-12); }
.mr-blog-index > h1 { margin: 0 0 var(--mr-space-8); font-size: 3rem; line-height: 1.05; text-align: start; }
.mr-blog-intro { max-inline-size: 47.5rem; margin-block: 0 var(--mr-space-8); color: var(--mr-color-text-muted); font-size: 1.125rem; line-height: 1.55; }
.mr-post-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mr-space-8); }
.mr-blog-card { display: grid; grid-template-rows: auto 1fr; min-inline-size: 0; background: var(--mr-color-blog-card); border: 1px solid var(--mr-color-border); }
.mr-blog-card-media { display: block; aspect-ratio: 3 / 2; }
.mr-blog-card-media img, .mr-blog-card-placeholder { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.mr-blog-card-placeholder { background: linear-gradient(135deg, var(--mr-color-surface), var(--mr-color-border)); }
.mr-blog-card-media img { transition: opacity var(--mr-transition); }
.mr-blog-card-media:focus-visible img { opacity: .85; }
.mr-blog-card-body { display: grid; grid-template-rows: auto auto 1fr; align-content: start; gap: var(--mr-space-6); padding: var(--mr-space-6); min-inline-size: 0; }
.mr-blog-card-body > * { margin: 0; }
.mr-blog-card-category { color: var(--mr-color-action); font: 400 .8125rem / 1.2 var(--mr-font-heading); text-transform: uppercase; }
.mr-blog-card-title { font-size: 1.5rem; line-height: 1.15; font-weight: var(--mr-weight-semibold); text-wrap: initial; }
.mr-blog-card-title a { text-decoration: none; transition: color var(--mr-transition); }
.mr-blog-card-title a:focus-visible { color: var(--mr-color-action); }
.mr-blog-card-excerpt { color: var(--mr-color-text-muted); font-size: 1rem; line-height: 1.55; }
.mr-post-count { margin-block: var(--mr-space-12) 0; color: var(--mr-color-text-muted); font-size: .875rem; }
.pagination { margin-block-start: var(--mr-space-8); }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: var(--mr-space-3); }
.pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-inline-size: var(--mr-touch-target); min-block-size: var(--mr-touch-target); }
.pagination .current { color: var(--mr-color-accent); }
.mr-post { display: flex; flex-direction: column; gap: var(--mr-space-8); padding-block: var(--mr-space-10); }
.mr-post-opening, .mr-post-featured, .mr-post-content, .mr-post-tags { inline-size: calc(100% - 2 * var(--mr-space-5)); margin-inline: auto; min-inline-size: 0; }
.mr-post-opening { max-inline-size: 50rem; display: flex; flex-direction: column; gap: var(--mr-space-6); }
.mr-post-back { display: inline-flex; align-items: center; min-block-size: var(--mr-touch-target); align-self: start; color: var(--mr-color-accent); font: 400 .9375rem / 1.5 var(--mr-font-heading); text-decoration: none; padding-block: .5rem; margin-block: -.5rem; }
.mr-post-opening h1 { font-size: 2.375rem; line-height: 1.08; margin: 0; text-wrap: initial; }
.mr-post-meta { display: flex; flex-wrap: wrap; gap: 0 .5rem; color: var(--mr-color-text-muted); font-size: .8125rem; line-height: 1.5; }
.mr-post-meta > * + *::before { content: '·'; margin-inline-end: .5rem; }
.mr-post-meta .mr-post-reading { flex-basis: 100%; }
.mr-post-meta .mr-post-reading::before { content: none; }
.mr-post-featured { max-inline-size: 56.25rem; }
.mr-post-featured img { display: block; inline-size: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.mr-post-content, .mr-post-tags { max-inline-size: 40.625rem; }
.mr-post-content { font-size: 1.0625rem; line-height: 1.7; }
.mr-post-content > * { max-inline-size: 100%; margin-block: 0 1.625rem; }
.mr-post-content > :last-child { margin-block-end: 0; }
.mr-post-content :is(h2, h3, h4) { margin-block: var(--mr-space-10) var(--mr-space-5); line-height: 1.2; }
.mr-post-content h2 { font-size: 2rem; }
.mr-post-content h3 { font-size: 1.75rem; }
.mr-post-content h4 { font-size: 1.5rem; }
.mr-post-content a { color: var(--mr-color-accent); }
.mr-post-content :is(ul, ol) { padding-inline-start: 1.5em; }
.mr-post-content li + li { margin-block-start: .3em; }
.mr-post-content blockquote { border-inline-start: 3px solid var(--mr-color-accent); padding: var(--mr-space-4) var(--mr-space-5); margin-inline: 0; font: 400 1.5rem / 1.35 var(--mr-font-heading); }
.mr-post-content blockquote > :last-child { margin-block-end: 0; }
.mr-post-content :is(figcaption, cite) { color: var(--mr-color-text-muted); font: 400 .875rem / 1.5 var(--mr-font-body); }
.mr-post-content figure { margin-inline: 0; }
.mr-post-content figcaption { margin-block-start: var(--mr-space-2); }
.mr-post-content table { display: block; max-inline-size: 100%; overflow-x: auto; }
.mr-post-content :is(th, td) { padding: var(--mr-space-3); border: 1px solid var(--mr-color-border); }
.mr-post-tags { display: flex; flex-wrap: wrap; gap: 0 var(--mr-space-4); color: var(--mr-color-accent); font: 400 .875rem / 1.8 var(--mr-font-heading); }
.mr-post-tags a { display: inline-flex; align-items: center; min-block-size: var(--mr-touch-target); text-decoration: none; }
.mr-related { padding-block: var(--mr-space-12); }
.mr-related > h2 { margin: 0 0 var(--mr-space-8); font-size: 2.125rem; line-height: 1.15; }

@media (hover: hover) and (pointer: fine) {
  .mr-blog-card-title a:hover { color: var(--mr-color-action); }
  .mr-blog-card-media:hover img { opacity: .85; }
}
@media (min-width: 48rem) {
  .mr-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Share text rows within each visual row; all content remains uncropped. */
  @supports (grid-template-rows: subgrid) {
    .mr-blog-card { grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
    .mr-blog-card-body { grid-row: span 3; grid-template-rows: subgrid; row-gap: var(--mr-space-6); }
  }
  .mr-post-meta .mr-post-reading { flex-basis: auto; }
  .mr-post-meta .mr-post-reading::before { content: '·'; }
}
@media (min-width: 64rem) {
  .mr-blog-index { padding-block: var(--mr-space-20); }
  .mr-blog-index > h1 { font-size: 4.75rem; }
  .mr-blog-intro { font-size: 1.375rem; }
  .mr-post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mr-blog-card-body { padding: var(--mr-space-8); gap: 1.625rem; }
  .mr-blog-card-title { font-size: 1.875rem; }
  .mr-blog-card-excerpt { font-size: 1.0625rem; }
  .mr-post { padding-block: var(--mr-space-16); gap: var(--mr-space-12); }
  .mr-post-opening h1 { font-size: 3.5rem; }
  .mr-post-meta { font-size: .875rem; }
  .mr-post-content { font-size: 1.125rem; }
  .mr-post-content blockquote { font-size: 1.75rem; }
  .mr-post-tags { font-size: .9375rem; margin-block-start: -1.375rem; }
  .mr-related { padding-block: var(--mr-space-18); }
  .mr-related > h2 { font-size: 2.875rem; }
}