/**
 * Toggle-Cards Block Styles
 * Interaktive expandierbare Cards mit Hover- und Active-States
 */

/* Grid-Container */
.toggle-cards__grid {
  display: flex;
  gap: clamp(1rem, 2vw, 1.5rem);
  margin: 0;
}

/* Card-Basis */
.toggle-cards__card {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.5rem);
  background: transparent 
    linear-gradient(180deg, rgba(0, 0, 0, 0.06) 0%, rgba(255, 255, 255, 0) 100%)
    0 0 no-repeat padding-box;
  border-radius: var(--bs-border-radius, 0.375rem);
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  outline: none;
}

/* Hover-Effekt (nur Desktop) */
@media (min-width: 1201px) {
  .toggle-cards__card:hover {
    background: transparent 
      linear-gradient(180deg, rgba(122, 122, 122, 0.06) 0%, rgba(46, 46, 46, 0) 100%)
      0 0 no-repeat padding-box;
  }
  
  .toggle-cards__card:focus-visible {
    outline: 2px solid var(--brand-primary-color, var(--bs-primary));
    outline-offset: 2px;
  }
}

/* Active State (Desktop) */
@media (min-width: 1201px) {
  .toggle-cards__card.active {
    flex: 2;
  }
  
  .toggle-cards__card.active .toggle-cards__title {
    color: var(--brand-secondary-color, var(--bs-link-color));
  }
}

/* Titel */
.toggle-cards__title {
  margin: 0;
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  line-height: 1.3;
  transition: color 0.2s ease-in-out;
}

/* Beschreibung */
.toggle-cards__description {
  font-size: clamp(0.875rem, 1.5vw, 1rem);
  line-height: 1.6;
  margin: 0;
}

/* Text-Clipping (Desktop) */
@media (min-width: 1201px) {
  .toggle-cards__description {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
  }
  
  .toggle-cards__card.active .toggle-cards__description {
    -webkit-line-clamp: 10;
    line-clamp: 10;
  }
}

/* Tablet-Layout (2 Spalten) */
@media (max-width: 1200px) and (min-width: 769px) {
  .toggle-cards__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  
  .toggle-cards__card {
    cursor: default;
  }
  
  .toggle-cards__description {
    -webkit-line-clamp: unset;
    line-clamp: unset;
  }
}

/* Mobile-Layout (1 Spalte) */
@media (max-width: 768px) {
  .toggle-cards__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .toggle-cards__card {
    background: rgba(0, 0, 0, 0.06);
    padding: 2rem 1rem;
    cursor: default;
  }
  
  .toggle-cards__description {
    -webkit-line-clamp: unset;
    line-clamp: unset;
  }
}