/* 1. Container & Überschrift */
#related-posts {
    margin: 2rem 0;
  }

#related-posts h3 {
    margin-bottom: 1rem;
    font-family: 'Titillium Web', sans-serif;
    font-size: 20px;
    font-weight: 600;
}
  
  /* 2. Grid-Layout für die Liste */
  #related-posts .rp-acf-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 30px;
  }
  
  /* 3. Einzelner Eintrag */
  #related-posts .rp-acf-item {
    position: relative;
    overflow: hidden;
    border-radius: 0;
  }
  
  /* 4. Link-Block als Karte */
  #related-posts .rp-acf-item a {
    display: block;
    position: relative;
    color: #fff;
    text-decoration: none;
    transition: transform .3s;
    z-index: 1;
    overflow: hidden;
    max-height: 230px;
  }
  /* #related-posts .rp-acf-item a:hover {
    transform: translateY(-5px);
  } */
  
  /* 5. Featured Image */
  /* #related-posts .rp-acf-item a img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
  } */

  #related-posts .rp-acf-item a img {
    width: 100%;
    height: 230px; /* Adjust this value to make the thumbnails taller */
    object-fit: cover;
    object-position: center;
}
  
  /* 6. Kategorie-Label */
  .rp-acf-category {
    display: block;
    padding: 0.15rem .25rem;
    font-size: 10px;
    background-color: var(--clr-category);
    color: #fff;
    line-height: 10px;
    margin-bottom: .25rem;
  }
  /* Beispiel-Farben nach Kategorie-Slug */
  /* .rp-acf-category.cat-vitiligo-wissen {
    background-color: #f1821c;
  }
  .rp-acf-category.cat-betroffene-berichten-vitiligo {
    background-color: #034ea2;
  } */
  /* (füge bei Bedarf weitere Slug-Farben hinzu) */
  
  /* 7. Titel-Overlay */
  .rp-acf-title {
    font-size: 16px;
    font-family: 'Titillium Web';
    font-weight: 600;
    /* leichter Schatten, damit Text vor hellen Bildern lesbar bleibt */
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
    color: white !important;
    margin: 0;
    font-size: 1rem;
    line-height: 1.3;
  }
  
  /* 8. Optional: semi-transparentes Overlay hinter Text */
  #related-posts .rp-acf-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(transparent 50%, rgba(0,0,0,0.4));
    z-index: 1;
  }
  

  .rp-acf-content-wrapper {
    /* position: relative; */
    z-index: 2;
    padding: 1rem 0 0 1rem;
    color: #fff;
    /* background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%); */
    position: absolute;
    /* bottom: 0;
    left: 0;
    right: 0; */
    bottom: 10px;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    /* justify-content: space-between; */
}