/* Concept Card Wrapper */
/* Most styling is now handled by carousel.css via the carousel-item classes */
/* This file only contains wrapper-specific and error state styles */

.concept-card {
    margin-bottom: 1rem;
}

/* When concept cards are in a grid or flex container, ensure they stretch to match heights */
.concept-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Override carousel fixed widths for standalone concept cards */
.concept-card .concept-carousel-item {
    height: 100%;
    /* Remove fixed width constraints - allow card to be responsive */
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    min-width: 280px; /* Minimum width for very small screens */
}

/* On larger screens, cap the max width for better readability */
@media (min-width: 768px) {
    .concept-card .concept-carousel-item {
        max-width: 600px; /* Reasonable max width on desktop */
    }
}

/* Error State */
.concept-card.error {
    background-color: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.concept-card.error p {
    margin: 0;
    color: #856404;
}