.post-meta__author-info {
  display: flex;
  align-items: center;
  gap: var(--post-meta__author-gap, 0.5rem);
}

.post-meta__author-avatar-picture {
  border-radius: 50%;
}

.blog-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--blog-card-background, #ffffff);
  border-radius: var(--blog-card-border-radius, 12px);
  border: var(--blog-card-border, 1px solid var(--blog-card-border-color, #e1e4e8));
  overflow: hidden; /* Clips the image to the border radius */
  height: 100%; /* Ensures all cards in a row are equal height */
}

.blog-card__image-wrapper {
  aspect-ratio: var(--blog-card-image-aspect-ratio, 16/9);
  overflow: hidden;
}

.blog-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-card__image-wrapper--empty {
  /* Use a subtle gradient or your Postgres brand color */
  background: linear-gradient(135deg, var(--blog-card-border-color, #e1e4e8), var(--blog-card-background, #ffffff));
  display: flex;
  align-items: center;
  justify-content: center;
}

.blog-card__image-wrapper--empty::after {
  content: var(--bg-text, "no image"); /* Or a background-image of your logo */
  font-weight: 800;
  font-size: 1.5rem;
  opacity: 0.1;
  color: var(--card-title);
}

.blog-card__content {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.blog-card__title {
  margin: var(--blog-card-title-margin, 0.5rem 0 1rem);
  font-size: var(--blog-card-title-font-size, 1.25rem);
  line-height: var(--blog-card-title-line-height, 1.4);
}

/* Element: The "Stretched" Link */
.blog-card__link {
  text-decoration: var(--blog-card-link-text-decoration, none);
  color: var(--blog-card-link-text-color, #1a1a1a);
}

.blog-card__link::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

/* Description */
.blog-card__desc {
  margin: 0;
  font-size: var(--blog-card-desc-font-size, 0.95rem);
  color: var(--blog-card-desc-text-color, #586069);
  word-wrap: break-word;
}

/* Block States */
.blog-card:hover {
  box-shadow: var(--blog-card-hover-box-shadow, 0 8px 16px rgba(0, 0, 0, 0.1));
}

@media (prefers-reduced-motion: no-preference) {
  .blog-card {
    transition: all 0.3s ease;
  }
  .blog-card:hover {
    transform: var(--blog-card-hover-transform, translateY(-4px));
  }
  .blog-card:hover .blog-card__image {
    transform: var(--blog-card-image-hover-transform, scale(1.05));
  }
  .blog-card__image {
    transition: transform 0.5s ease;
  }
}
/* Modifier for the whole card */
.blog-card--draft {
  border-style: var(--blog-card-draft-border-style, dashed); /* Visual cue for "work in progress" */
  opacity: var(--blog-card-draft-opacity, 0.85);
  filter: var(--blog-card-draft-filter, grayscale(0.2));
}

/* Status Badge */
.blog-card__status-badge {
  position: absolute;
  top: var(--blog-card-status-badge-top, 12px);
  right: var(--blog-card-status-badge-right, 12px);
  background-color: var(--blog-card-status-badge-background-color, #fca311); /* Amber/Warning color */
  color: var(--blog-card-status-badge-text-color, #000);
  font-size: var(--blog-card-status-badge-font-size, 0.7rem);
  font-weight: var(--blog-card-status-badge-font-weight, 800);
  text-transform: var(--blog-card-status-badge-text-transform, uppercase);
  padding: var(--blog-card-status-badge-padding, 4px 8px);
  border-radius: var(--blog-card-status-badge-border-radius, 4px);
  z-index: 3; /* Above the stretched link */
  box-shadow: var(--blog-card-status-badge-box-shadow, 0 2px 4px rgba(0, 0, 0, 0.2));
}

.blog-card__date {
  display: block;
  font-size: var(--blog-card-date-font-size, 0.75rem);
  font-weight: var(--blog-card-date-font-weight, 500);
  color: var(--blog-card-date-text-color);
  margin-bottom: var(--blog-card-date-margin-bottom, 0.5rem);
}

.blog-card__date-label {
  text-transform: var(--blog-card-date-label-text-transform, uppercase);
  font-weight: var(--blog-card-date-label-font-weight, 700);
  font-size: var(--blog-card-date-label-font-size, 0.7rem);
  opacity: var(--blog-card-date-label-opacity, 0.8);
  margin-right: var(--blog-card-date-label-margin-right, 4px);
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--blog-grid-card-min-width, 320px), 1fr));
  gap: var(--blog-grid-gap, 2rem);
  padding: var(--blog-grid-padding, 1rem);
}

.blog-grid li {
  list-style-type: none;
}