/* Blog: the post list (/blog) and one post (/blog/<slug>). Uses the site's tokens from site.css. */

.blog-intro { padding-block: var(--space-6) var(--space-4); }
.blog-intro__title { max-width: 20ch; color: var(--espresso); }
.blog-intro__lede { max-width: 56ch; margin-top: var(--space-3); font-size: var(--step-1); line-height: 1.5; }
.blog-list { padding-top: 0; }
.blog-empty { color: var(--brown-soft); }

.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: var(--space-5) var(--space-4); }
.post-card { display: flex; flex-direction: column; gap: .6rem; }
.post-card__link { display: grid; gap: var(--space-2); color: inherit; text-decoration: none; }
.post-card__img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); background: var(--paper); }
.post-card__title { font-size: var(--step-2); line-height: 1.1; color: var(--espresso); text-wrap: balance; }
.post-card__link:hover .post-card__title, .post-card__link:focus-visible .post-card__title { text-decoration: underline; text-underline-offset: .15em; }
.post-card__meta, .post-head__meta { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin: 0; font-size: var(--step--1); color: var(--brown-soft); }
.post-card__desc { margin: 0; line-height: 1.55; }

.post-head { padding-block: var(--space-6) var(--space-4); }
.post-head__title { max-width: 22ch; color: var(--espresso); text-wrap: balance; }
.post-head__meta { margin-top: var(--space-3); font-size: var(--step-0); }

.post-layout { display: grid; gap: var(--space-5); justify-items: center; padding-bottom: var(--space-6); }
.post-hero { margin: 0; width: 100%; max-width: 46rem; }
.post-hero img { display: block; width: 100%; height: auto; max-height: 80vh; object-fit: cover; border-radius: var(--radius); }

.post-body { width: 100%; max-width: 40rem; font-size: 1.125rem; line-height: 1.7; }
.post-body > * + * { margin-top: 1.15em; }
.post-body h2 { margin-top: 2em; font-size: var(--step-2); line-height: 1.15; color: var(--espresso); text-wrap: balance; }
.post-body h3 { margin-top: 1.6em; font-size: var(--step-1); line-height: 1.25; color: var(--espresso); }
.post-body h2 + *, .post-body h3 + * { margin-top: .6em; }
.post-body a:not(.btn) { color: var(--oak-deep); text-underline-offset: .15em; }
.post-body ul, .post-body ol { padding-left: 1.3em; }
.post-body li + li { margin-top: .45em; }
.post-body blockquote { margin-inline: 0; padding-left: 1.1em; border-left: 3px solid var(--oak); font-size: var(--step-1); line-height: 1.5; color: var(--espresso); }
.post-figure { margin-inline: 0; }
.post-figure img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.post-figure figcaption { margin-top: .5rem; font-size: var(--step--1); color: var(--brown-soft); }

.post-cta { margin-block: 2em; padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.post-cta p { margin: 0; }
.post-cta p + p { margin-top: .5rem; }
.post-cta__name { font-size: var(--step-1); font-weight: 700; color: var(--espresso); }
.post-cta__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: var(--space-2) !important; }

.post-related { padding-block: var(--space-6) var(--space-5); border-top: 1px solid var(--line); }
.post-related h2 { margin-bottom: var(--space-4); color: var(--espresso); }

@media (max-width: 600px) {
  .post-body { font-size: 1.0625rem; }
  .post-cta { padding: var(--space-3); }
}