/* MBK — related.css — the "Related Projects" section at the foot of project/case pages.
   Rendered by js/related.js. Paper-ground, three quiet cards (poster + title + meta). */

.related-section {
  max-width: var(--container);
  margin: 0 auto;
  padding: 64px 24px 24px;
  border-top: 1px solid var(--line-on-paper);
}
.related-section .eyebrow { margin-bottom: 28px; }

.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.related-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: inherit;
}
.related-card:hover { color: var(--red); }
.related-card:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.related-card-poster {
  display: block;
  overflow: hidden;
  border: 1px solid var(--line-on-paper);
  aspect-ratio: 2 / 3;
  background: var(--ink);
}
.related-card-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms var(--ease);
}
.related-card:hover .related-card-poster img { transform: scale(1.04); }

.related-card-title {
  font-size: 1.15rem;
  line-height: 1.15;
}
.related-card-meta {
  font-size: var(--size-eyebrow);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--grey-2);
}

@media (max-width: 720px) {
  .related-grid { grid-template-columns: 1fr 1fr; gap: 18px; }
}
@media (max-width: 420px) {
  .related-grid { grid-template-columns: 1fr; }
}