/* ==========================================================================
   Blog related — "More blogs" at the foot of a single post (block: blog-related)
   3-up cards (image + category pill + date + title), same card style as the
   blog archive's 3-across. Matches the live site's recent-posts strip.
   ========================================================================== */

.section--blog-related {
  padding-top: clamp(48px, 7vh, 96px);
  padding-bottom: clamp(56px, 8vh, 110px);
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.blog-related__heading {
  margin: 0 0 clamp(28px, 4vh, 48px);
  font-size: clamp(28px, 2.6vw, 44px);
  line-height: 1.05;
}
.blog-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2vw, 32px); }
.blog-related__card { display: flex; flex-direction: column; gap: 12px; color: var(--fg); text-decoration: none; }
.blog-related__card[hidden] { display: none; }
.blog-related__media { position: relative; display: block; aspect-ratio: 586 / 304; overflow: hidden; }
.blog-related__photo { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.22,.61,.36,1); }
.blog-related__card:hover .blog-related__photo { transform: scale(1.04); }
.blog-related__cat {
  position: absolute; left: 16px; bottom: 16px; padding: 6px 15px; border-radius: 999px;
  background: var(--accent); color: var(--black, #0d0d0d);
  font-family: var(--font-display); font-size: 13px; letter-spacing: .04em; text-transform: capitalize;
}
.blog-related__date { color: rgba(255,255,255,.55); font-family: var(--font-display); font-size: 14px; letter-spacing: .05em; }
.blog-related__name {
  font-family: var(--font-display); font-weight: 500; font-size: clamp(19px, 1.5vw, 24px);
  line-height: 1.15; transition: color .3s ease;
}
.blog-related__card:hover .blog-related__name { color: var(--accent); }

@media (max-width: 1024px) { .blog-related__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .blog-related__grid { grid-template-columns: 1fr; gap: 32px; } }

/* Client call 30 Sep: square images on the blog */
.section--blog-related .card-img { border-radius: 0; }