/* ==========================================================================
   Related posts — The Sri COM
   Sits under the article body on single posts. Reuses the .post-row grid and
   .post-tile card from post-grid.css so the cards match the home page exactly.
   ========================================================================== */

.related {
  max-width: 980px;
  margin: 72px auto 0;
  padding-top: 38px;
  border-top: 1px solid rgba(180, 204, 237, .16);
}

html[data-theme="light"] .related { border-color: #dce4ef; }

/* If the topic had no other posts the grid renders empty — hide the whole
   block rather than leaving a heading with nothing under it. */
.related:not(:has(.post-tile)) { display: none; }

.related-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 6px 24px;
  margin-bottom: 4px;
}

.related-head .section-label {
  grid-column: 1 / -1;
  margin: 0 0 6px;
}

.related-head h2 {
  margin: 0;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-weight: 650;
  line-height: 1.24;
  letter-spacing: .004em;
}

.related-all {
  color: #2475e8;
  font-size: .78rem;
  font-weight: 700;
  white-space: nowrap;
}

.related-all:hover { color: #5b9cff; }

html[data-theme="light"] .related-all:hover { color: #14509f; }

.related .post-row { margin-top: 24px; }

/* --------------------------------------------------------------------------
   Light-theme contrast fix for the article furniture.
   .dek, .byline and the image caption inherit dark-theme greys (#aebdd2,
   #8b9ab0) that were never overridden for light mode, leaving them at roughly
   1.9:1 and 2.9:1 against the light page — effectively unreadable. These bring
   them to ~5.5:1. Dark mode is untouched.
   -------------------------------------------------------------------------- */

html[data-theme="light"] .dek,
html[data-theme="light"] .byline {
  color: #4f627c;
}

html[data-theme="light"] .article-image figcaption {
  color: #5b6f89;
}

@media (max-width: 620px) {
  .related {
    margin-top: 52px;
    padding-top: 30px;
  }

  .related-head {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .related-all { margin-top: 6px; }
}