/* Related posts responsive layout ------------------------------------------------- */
.related-articles {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 24px 0;
  align-items: stretch;
}

/* Each item: on desktop show as a compact card with thumbnail left + title right */
.related-item {
  /* base: take up one third minus gap (3 columns) */
  flex: 1 1 calc(33.333% - 10.666px);
  min-width: 220px;                     /* prevents items from getting too narrow */
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 8px 6px;
  box-sizing: border-box;
}

/* Thumbnail: fixed small box, preserve aspect ratio and crop with object-fit */
.related-item img {
  flex: 0 0 120px;      /* fixed width on desktop/tablet */
  width: 120px;
  height: 80px;         /* fixed height to keep uniform rows */
  object-fit: cover;    /* crop to fill without distortion */
  border-radius: 6px;
  display: block;
}

/* Title link */
.related-item a {
  display: block;
  font-size: 15px;
  line-height: 1.3;
  font-weight: 600;
  color: #222;
  text-decoration: none;
  word-break: break-word;
}

/* Hover state */
.related-item a:hover {
  text-decoration: underline;
}

/* Tablet: 2 columns */
@media (max-width: 1024px) {
  .related-item {
    flex: 1 1 calc(50% - 8px);
  }
}

/* Mobile: stack items vertically, thumbnail on top at full width */
@media (max-width: 600px) {
  .related-articles {
    gap: 12px;
  }

  .related-item {
    flex: 1 1 calc(50% - 2px);
    min-width: 0;
    flex-direction: column;    /* stack image above title */
    align-items: flex-start;
    padding: 2px 1px;
  }

  .related-item img {
     flex: 0 0 80px;
    width: 80px;               /* full width image on small screens */
    height: 40px;              /* natural height, not cropped */
    margin-bottom: 8px;
  }

  .related-item a {
    font-size: 16px;
    display: block;
  }
}

/* Optional: make sure images don't overflow inside the editor preview */
.related-articles img {
  max-width: 100%;
  height: auto;
  display: block;
}