/* Blog layout.

   Modelled on how blog indexes are actually built, after looking at Pokemon's own news page,
   Linear's blog and Nintendo Life. They disagree on almost everything except the anatomy of a
   post card, which all three share:

     a wide image, the same shape on every card, doing most of the work
     a category label
     a headline at MODEST size, not display size
     one line of description
     a date

   The two earlier attempts here failed by ignoring that. The first was a row of bordered boxes
   with no images; the second was a magazine feature spread, alternating sides with headlines at
   display size, which competes with the page title and cannot form a uniform grid. Transparent
   sprites were the root problem in both: a grid needs images of one shape, so the posts now have
   rendered 16:9 banners (build_blog_banners.py).

   Type stays quiet on purpose. The headline keeps her serif so the page still looks like her
   site, but at card size and in a solid colour rather than the rainbow gradient, which was too
   loud repeated three times. The gradient is kept for the page title, where it means something.

   Tokens come from guide.css (--rainbow, --line, --muted, --mint, --cream). */

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 40px 28px;
  margin-top: 8px;
}

.card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

/* The image band. One shape on every card is the whole point. */
.card-media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: #11142a;
}
.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .45s ease;
}
.card:hover .card-media img,
.card:focus-visible .card-media img {
  transform: scale(1.035);
}

.card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 0;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.card-cat {
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  color: var(--mint);
  white-space: nowrap;
}
.card-date {
  color: #8b91a8;
  letter-spacing: .06em;
}

.card-title {
  margin: 11px 0 7px;
  font-family: 'DM Serif Display', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.62rem;
  line-height: 1.22;
  letter-spacing: -.02em;
  color: #f8f8ff;
  transition: color .18s ease;
}
.card:hover .card-title {
  color: var(--cream);
}

.card-dek {
  margin: 0;
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.62;
}

/* What the raid hands over, under the description. Small, so it reads as metadata and not as
   another headline. */
.card-drops {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}
.card-drop {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
  font-size: .72rem;
  font-weight: 800;
  white-space: nowrap;
  color: var(--cream);
}
.card-drop img {
  width: 21px;
  height: 21px;
  object-fit: contain;
}

/* Item icons in the reward grid on a post page. */
.reward-box img {
  width: 46px;
  height: 46px;
  object-fit: contain;
  margin: 0 auto 8px;
  display: block;
}

@media (max-width: 720px) {
  .blog-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .card-title {
    font-size: 1.45rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-media img,
  .card-title {
    transition: none;
  }
  .card:hover .card-media img {
    transform: none;
  }
}