/**
 * Ionis Medicine Cards component styles
 * Matches the styling of ionis-text-and-cards
 */
.ionis-medicine-cards {
  width: 100%;
  background-color: var(--color-light-gray);
  padding: 40px 0;
}

.ionis-medicine-cards__container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* Grid layout for cards - 2 columns on desktop */
.ionis-medicine-cards__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  width: 100%;
  align-items: start; /* Align items to the start of the grid cell */

  .paragraph--type--card-medicine {
    height: 100%;
  }
}

/* Ensure cards maintain their own height */
.ionis-medicine-cards .ionis-card-medicine {
  height: 100%;
  min-height: 180px; /* Set a minimum height for collapsed state */
  transition: min-height 0.3s ease-in-out;
  position: relative;
  overflow: hidden;
}

/* When a card is expanded, it can grow independently */
.ionis-card-medicine[aria-expanded="true"] {
  z-index: 2; /* Ensure expanded card appears above others */
  position: relative;
}

/* Responsive adjustments - 1 column on mobile */
@media (max-width: 1024px) {
  .ionis-medicine-cards__grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}