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

.post-meta__author-avatar-img {
  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);
  /* Allows long words to break at any character to prevent overflow */
  overflow-wrap: anywhere;
  /* Ensures standard words still prefer breaking at spaces/hyphens */
  word-break: normal;
}

/* 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;
}

/* New wrapper for semantic grouping */
.toc-wrapper {
  margin-bottom: 20px;
}

/* Block: toc */
.toc {
  --_toc-background: var(--toc-background, gray);
  padding: 15px;
  background: var(--_toc-background);
  /*border: 1px solid #ccc;
  background-color: #f9f9f9;
  border-radius: 5px;*/
}

/* Element: toc__heading */
.toc__heading {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 1.2em;
  display: inline-block;
  vertical-align: middle;
}

.toc__toggle {
  background: none;
  color: contrast-color(var(--_toc-background));
  border: none;
  cursor: pointer;
  padding: 16px;
  width: 100%;
  /* Default state (mobile first): toggle is visible */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.toc__toggle-icon {
  width: 20px;
  height: 20px;
  display: block;
}

/* Modifier: toc__toggle-icon--minus (shown by default for expanded state) */
.toc__toggle-icon--minus {
  display: block;
}

/* Modifier: toc__toggle-icon--plus (hidden by default for expanded state) */
.toc__toggle-icon--plus {
  display: none;
}

/* Element: toc__list */
.toc__list {
  list-style: none;
  padding-inline: 16px;
  margin: 0;
  position: relative;
}

.toc__list::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 5px; /* Width of the color strip */
  height: 100%;
  background-color: transparent; /* Default state */
  transition: background-color 0.3s ease; /* Smooth transition for the strip's color */
  transform: translateX(-100%); /* Start off-screen to the left */
  opacity: 0; /* Make it invisible by default */
}

.toc__list[hidden] {
  display: none;
}

/* Icon visibility based on toc--expanded class */
.toc:not(.toc--expanded) .toc__toggle-icon--plus {
  display: block; /* Show plus when collapsed */
}

.toc:not(.toc--expanded) .toc__toggle-icon--minus {
  display: none; /* Hide minus when collapsed */
}

.toc.toc--expanded .toc__toggle-icon--plus {
  display: none; /* Hide plus when expanded */
}

.toc.toc--expanded .toc__toggle-icon--minus {
  display: block; /* Show minus when expanded */
}

/* Modifier: toc__list--nested (for sub-lists) */
.toc__list--nested {
  padding-left: 20px;
  margin-top: 5px;
}

/* Element: toc__list-item */
.toc__list-item {
  margin-bottom: 8px;
}

/* Element: toc__link */
.toc__link {
  position: relative;
  display: block;
  padding: 8px 8px 8px 6px; /* Space for the strip */
  text-decoration: none;
  /*color: #333;
  transition: background-color 0.3s ease, color 0.3s ease;*/
  /*overflow: hidden;*/
  /* Define default custom property value (optional, but good practice) */
  /*--dynamic-strip-color: transparent;*/
}

/* --- Indentation for TOC Levels --- */
/* Assuming a minimum left padding of 10px for the outermost level */
.toc__link.level1 {
  padding-left: 10px;
}

/* Each subsequent level increases left padding by 6px */
.toc__link.level2 {
  padding-left: 16px; /* 10px + 6px */
}

.toc__link.level3 {
  padding-left: 22px; /* 16px + 6px */
}

.toc__link.level4 {
  padding-left: 28px; /* 22px + 6px */
}

.toc__link.level5 {
  padding-left: 34px; /* 28px + 6px */
}

.toc__link.level6 {
  padding-left: 40px; /* 34px + 6px */
}

.toc__link:hover,
.toc__link:focus {
  text-decoration: underline;
}

/* Pseudo-element for the color strip */
.toc__link::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 5px; /* Width of the color strip */
  height: 100%;
  background-color: transparent; /* Default state */
  transition: background-color 0.3s ease; /* Smooth transition for the strip's color */
  transform: translateX(-100%); /* Start off-screen to the left */
  opacity: 0; /* Make it invisible by default */
}

/* Style for partially visible sections */
/*.toc__link.is-partially-visible::before {
    background-color: #f3e5f5;
    transform: translateX(0);*/ /* Slide in */
/*opacity: 1;*/ /* Make it visible */
/*}*/
/* Style for actively visible sections (most visible) */
/*.toc__link.is-visible::before {
    background-color: #00796b;*/ /* A darker teal for active state, stands out more */
/*transform: translateX(0);*/ /* Ensure it's in view */
/*opacity: 1;*/ /* Make it visible */
/*}*/
/* Optional: Subtle background color for the link itself when active/partially active */
/*.toc__link.is-partially-visible {
    background-color: #fcf8fd;*/ /* Very light subtle background for partially active */
/*}*/
.toc__link.is-visible {
  background-color: var(--_toc-background); /* Slightly more visible background for active */
  font-weight: bold;
}

/*prefer media over container, because it affects picture sizes attribute*/
@media (width < 60rem) {
  .toc {
    background: var(--_toc-background);
  }
  .toc__toggle h2 {
    color: contrast-color(var(--_toc-background));
  }
  .toc__link {
    color: contrast-color(var(--_toc-background));
  }
}
@media (width >= 60rem) {
  .toc__toggle {
    cursor: default;
    pointer-events: none; /* Prevents all mouse events */
  }
  .toc__list {
    display: block !important; /* Always show the list on desktop */
  }
  /*.toc__heading {*/ /* The element acting as a toggle */
  /*cursor: default;
      pointer-events: none;*/ /* Prevents all mouse events */
  /*}*/
  .toc__toggle-icon {
    display: none !important; /* Hides the icons visually */
  }
}