/**
 * Related Content Component
 * Teaser zu verwandten Inhalten mit Node-Referenzen
 */

.related-content-wrapper {
  margin: 0 auto var(--space-3xl);
}

/* Drupal field wrapper als Flexbox Container */
.related-content-items {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.related-content-items .field__items {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  width: 100%;
}

.related-content-items .field__item {
  flex: 0 0 100%;
  max-width: 100%;
}

/* Desktop: 3 Spalten */
@media (min-width: 992px) {
  .related-content-items .field__item {
    flex: 0 0 calc(33.333% - 1rem);
    max-width: calc(33.333% - 1rem);
  }
}

/* Tablet: 2 Spalten */
@media (min-width: 768px) and (max-width: 991px) {
  .related-content-items .field__item {
    flex: 0 0 calc(50% - 0.75rem);
    max-width: calc(50% - 0.75rem);
  }
}

/* Individual Related Content Item */
.related-content-item {
  background: var(--bg-white);
  border-radius: 2px;
  overflow: hidden;
  transition: all var(--transition-base);
  border: 1px solid #e0e0e0;
  height: 100%;
}

.related-content-item:hover {
  border-color: #c0c0c0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Link Container - Padding-Trick für 4:3 Aspect Ratio (75% von 50% Breite = 37.5%) */
.related-content-link {
  text-decoration: none;
  color: inherit;
  display: block;
  position: relative;
  overflow: hidden;
  padding-top: 37.5%; /* 4:3 Aspect Ratio für halbe Breite: (3/4) * 50% = 37.5% */
}

/* Image - Links, 50% Breite, absolut positioniert */
.related-content-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
}

.related-content-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-base);
  position: absolute;
  top: 0;
  left: 0;
}

/* Platzhalter wenn kein Bild */
.related-content-image-placeholder {
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.related-content-image-placeholder .placeholder-icon {
  color: #999;
  width: 60%;
  height: 60%;
}

.related-content-link:hover .related-content-image img {
  transform: scale(1.05);
}

/* Text Content - Absolute Positionierung rechts, passt sich Bildhöhe an */
.related-content-text {
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-lg);
  justify-content: flex-start;
  align-items: flex-start;
  overflow-y: auto;
}

.related-content-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-primary);
  margin: 0;
  line-height: var(--line-height-tight);
  transition: color var(--transition-base);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.related-content-link:hover .related-content-title {
  color: var(--color-primary-dark);
}

/* Teaser-Text entfernt - nur noch Titel und "Mehr erfahren" */

.related-content-more {
  font-size: var(--font-size-sm);
  color: var(--color-primary);
  font-weight: 500;
  margin-top: var(--space-xs);
  transition: transform var(--transition-base);
  display: inline-block;
}

.related-content-link:hover .related-content-more {
  transform: translateX(4px);
}

/* Gap wird durch Flexbox gap-Eigenschaft gesteuert */

/* Responsive */
@media (max-width: 768px) {
  .related-content-wrapper {
    margin-bottom: var(--space-2xl);
  }
  
  
  .related-content-title {
    font-size: var(--font-size-lg);
  }
  
  .related-content-items,
  .related-content-items .field__items {
    gap: 1rem;
  }
}

@media (max-width: 480px) {
  .related-content-title {
    font-size: var(--font-size-base);
  }
}