/* Blog index: hero thumbnails next to each listing */

/*
  Force the list to stay LEFT-justified.
  (Some site styles center articles/cards with margins or flex alignment.)
*/
#blogAllPosts,
#blogAllPosts .blog-list,
#blogAllPosts .blog-list-item {
  width: 100%;
}

#blogAllPosts .blog-list {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  align-items: stretch !important;
}

#blogAllPosts .blog-list-item {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  justify-content: flex-start;
  align-items: flex-start;
}

.blog-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.blog-list-item {
  display: flex;
  gap: 1rem;
  padding: 0.85rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 0.85rem;
  background: rgba(255, 255, 255, 0.9);
  position: relative;
  text-align: left;
}

.blog-thumb-wrap {
  flex: 0 0 160px;
  max-width: 160px;

  /*
    Visual alignment tweak:
    Text glyphs sit a few pixels below the top of their line box.
    This nudges the thumbnail down so its TOP visually matches the TOP
    of the first title line.

    If you want it tighter/looser, adjust this value (try 0.2rem or 0.3rem).
  */
  padding-top: 1.5rem; /* ~4px */
}

.blog-thumb {
  width: 160px;
  height: 96px;
  object-fit: cover;
  border-radius: 0.65rem;
  border: 1px solid rgba(0, 0, 0, 0.12);
  display: block;
}

.blog-thumb--placeholder {
  background: rgba(0, 0, 0, 0.08);
}

.blog-item-title {
  margin: 0;
}

.blog-item-title a {
  color: inherit;
  text-decoration: none;
}

.blog-item-title a:hover,
.blog-item-title a:focus {
  text-decoration: underline;
}

.blog-meta {
  font-size: 0.9rem;
  color: #6c757d;
}

.blog-excerpt {
  margin: 0.35rem 0 0;
  color: #343a40;
}

.blog-tags {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.blog-list-item:focus-within {
  outline: 3px solid rgba(13, 110, 253, 0.35);
  outline-offset: 2px;
}

@media (max-width: 576px) {
  .blog-list-item {
    flex-direction: column;
  }

  .blog-thumb-wrap {
    flex: 1 1 auto;
    max-width: 100%;
    padding-top: 0; /* stacked layout: no nudge needed */
  }

  .blog-thumb {
    width: 100%;
    height: 180px;
  }
}