/* =============================================
   POST.CSS — Blog post page styles
   Layout tokens live in article.css (shared with case-study)
   This file: post-specific components only.
   ============================================= */


/* =============================================
   RELATED POSTS  — full-bleed light section
   ============================================= */

.post-related {
  padding:     56px 64px;
  border-top:  1px solid var(--border);
  box-sizing:  border-box;
}

.post-related__label {
  font-size:      11px;
  font-weight:    600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color:          var(--text-muted);
  margin-bottom:  24px;
  display:        block;
}

.post-related__grid {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   16px;
}

.post-related__card {
  display:         flex;
  align-items:     flex-start;
  gap:             16px;
  padding:         24px;
  border:          1px solid var(--border);
  border-radius:   var(--radius-md);
  text-decoration: none;
  color:           inherit;
  background:      var(--bg-elevated);
  transition:
    transform    0.3s var(--ease-out),
    box-shadow   0.3s ease,
    border-color 0.3s ease;
}

.post-related__card:hover {
  transform:    translateY(-3px);
  box-shadow:   var(--shadow-md);
  border-color: rgba(26,70,201,0.18);
}

.post-related__emoji {
  font-size:   1.8rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top:  2px;
}

.post-related__card-tag {
  font-size:      10px;
  font-weight:    600;
  letter-spacing: 0.12em;
  color:          var(--blue);
  text-transform: uppercase;
  margin-bottom:  6px;
}

.post-related__card-title {
  font-size:     14px;
  font-weight:   500;
  color:         var(--text-primary);
  line-height:   1.35;
  margin-bottom: 6px;
}

.post-related__card-excerpt {
  font-size:   13px;
  line-height: 1.55;
  color:       var(--text-muted);
}


/* =============================================
   RESPONSIVE
   ============================================= */

@media (max-width: 1024px) {
  .post-related { padding: 56px 40px; }
}

@media (max-width: 768px) {
  .post-related            { padding: 48px 20px; }
  .post-related__grid      { grid-template-columns: 1fr; }
}