/* News: the list, each post, and the content written in Trix. */

.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }

.news-card { padding: 0; overflow: hidden; }
.news-card-link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.news-card-link:hover { color: inherit; }
.news-card-link:hover h3 { color: var(--action); }
.news-card-image { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--surface-tint); }
.news-card-placeholder { display: grid; place-items: center; background: var(--navy); color: var(--on-navy); }
.news-card-text { display: grid; gap: 8px; padding: 22px 24px 26px; }
.news-card-text h3 { font-size: 20px; line-height: 1.25; }
.news-card-text p:last-child { color: var(--text-muted); }
.news-meta { font-size: 14px; font-weight: 600; color: var(--text-muted); }

.news-pager { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; margin-top: 36px; }
.news-pager-older { margin-left: auto; }
.news-empty { font-size: 18px; color: var(--text-muted); }

.news-page { background: var(--surface); }
.news-article-head { max-width: 840px; padding-block: 48px 32px; }
.news-article-head h1 { margin-top: 10px; font-size: clamp(34px, 5vw, 50px); font-weight: 800; }
.news-article-excerpt { margin-top: 18px; font-size: 21px; line-height: 1.55; color: var(--text-body); }
.news-article-cover { max-width: 1100px; }
.news-article-cover img { width: 100%; border-radius: var(--radius); }
.news-article-body { max-width: 760px; margin-inline: auto; padding-block: 40px 24px; font-size: 18px; line-height: 1.75; }
.news-back { max-width: 760px; margin-inline: auto; padding-bottom: 72px; }

/* What Trix writes: headings, quotes, lists, code and images. */
.trix-content h1 { font-family: var(--font-body); font-size: 26px; font-weight: 800; letter-spacing: 0; margin-top: 1.6em; }
.trix-content blockquote { margin: 1.5em 0; padding-left: 20px; border-left: 4px solid var(--accent); font-size: 1.1em; color: var(--text); }
.trix-content pre { overflow-x: auto; padding: 16px; border-radius: var(--radius-small); background: var(--surface-tint); font-family: var(--font-mono); font-size: 15px; }
.trix-content .attachment { margin: 1.6em 0; }
.trix-content .attachment img { width: 100%; height: auto; border-radius: var(--radius); }
.trix-content .attachment__caption { margin-top: 8px; font-size: 15px; color: var(--text-muted); text-align: center; }
.trix-content .attachment-gallery { display: flex; flex-wrap: wrap; gap: 12px; }
.trix-content .attachment-gallery .attachment { flex: 1 1 280px; margin: 0; }