/* "From the blog" on the home and downloads pages. blog-news.js fills the list
   from the Atom feed; the section stays hidden until it has a post to show. */
.blog-news { position: relative; z-index: 10; max-width: 72rem; margin-inline: auto; margin-bottom: 5rem; }
.blog-news-below-grid { margin-top: 4rem; }
.blog-news-head {
  display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
  margin-bottom: 1.75rem; text-align: center;
}
.blog-news-head h2 { font-family: 'Fraunces', serif; font-size: 1.875rem; color: #ffe9e3; }
.blog-news-all { color: #ffc8b8; font-size: 0.9rem; border-bottom: 1px solid rgba(255,200,184,0.35); }
.blog-news-all:hover { color: #ff9a85; border-color: currentColor; }

.blog-news-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem; list-style: none; padding: 0; margin: 0; }
.blog-news-list > li { flex: 1 1 18rem; max-width: 26rem; display: flex; }
.blog-news-post {
  position: relative; flex: 1; display: flex; flex-direction: column; gap: 0.5rem;
  padding: 1.5rem; border-radius: 1rem; color: #ffe9e3;
}
.blog-news-post:hover, .blog-news-post:focus-within {
  border-color: rgba(255,200,184,0.55);
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -20px rgba(0,0,0,0.6);
}
/* The title's link covers the whole card, and draws the card's focus ring. */
.blog-news-post h3 a { outline: none; }
.blog-news-post h3 a::after { content: ''; position: absolute; inset: 0; border-radius: 1rem; }
.blog-news-post h3 a:focus-visible::after { outline: 2px solid #ffc8b8; outline-offset: 3px; }
.blog-news-hero {
  display: block; width: calc(100% + 3rem); max-width: none; height: auto; aspect-ratio: 2 / 1;
  object-fit: cover; margin: -1.5rem -1.5rem 0.5rem; border-radius: 1rem 1rem 0 0;
  border-bottom: 1px solid rgba(255,200,184,0.18);
}
.blog-news-meta { margin: 0; display: flex; align-items: center; gap: 0.6rem; font-size: 0.8rem; color: rgba(255,200,184,0.8); }
.blog-news-new {
  padding: 0.1rem 0.55rem; border-radius: 9999px; font-size: 0.7rem; font-weight: 600;
  background: rgba(255,216,107,0.14); color: #ffd86b; border: 1px solid rgba(255,216,107,0.35);
}
.blog-news-post h3 { font-family: 'Fraunces', serif; font-size: 1.3rem; line-height: 1.25; }
.blog-news-summary {
  font-size: 0.9rem; font-weight: 300; line-height: 1.6; color: rgba(255,233,227,0.7);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .blog-news-post:hover, .blog-news-post:focus-within { transform: none; }
}