/**
 * Bento Grid Layout für Knowledge Hub
 * Featured Cards sind größer und spannen mehrere Spalten
 */

/* Bento Grid - Auto-flow dense für intelligentes Layout */
.content-grid {
    grid-auto-flow: dense !important;
}

/* Featured Bento Cards - Desktop (4 Spalten) */
.knowledge-card.featured-bento {
    grid-column: span 2;
    grid-row: span 2;
}

.knowledge-card.featured-bento .card-image {
    height: 240px;
}

.knowledge-card.featured-bento .card-content {
    padding: 1.5rem;
}

.knowledge-card.featured-bento .card-title {
    font-size: 1.35rem;
    margin-bottom: 0.75rem;
    -webkit-line-clamp: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.knowledge-card.featured-bento .card-excerpt {
    font-size: 0.95rem;
    -webkit-line-clamp: 4;
    margin-bottom: 1rem;
}

.knowledge-card.featured-bento .card-meta {
    margin-bottom: 1rem;
}

.knowledge-card.featured-bento .content-type {
    padding: 4px 14px;
    font-size: 12px;
}

.knowledge-card.featured-bento .category {
    padding: 4px 14px;
    font-size: 12px;
}

.knowledge-card.featured-bento .card-footer {
    margin-bottom: 1rem;
    font-size: 0.85rem;
}

.knowledge-card.featured-bento .card-link {
    font-size: 0.95rem;
}

/* Tablet - 3 Spalten */
@media (max-width: 1200px) {
    .knowledge-card.featured-bento {
        grid-column: span 2;
        grid-row: span 1;
    }
    
    .knowledge-card.featured-bento .card-image {
        height: 200px;
    }
    
    .knowledge-card.featured-bento .card-title {
        font-size: 1.2rem;
    }
}

/* Small Tablet - 2 Spalten */
@media (max-width: 900px) {
    .knowledge-card.featured-bento {
        grid-column: span 2;
        grid-row: span 1;
    }
    
    .knowledge-card.featured-bento .card-image {
        height: 180px;
    }
}

/* Mobile - Alle Cards gleich groß */
@media (max-width: 768px) {
    .knowledge-card.featured-bento {
        grid-column: span 1;
        grid-row: span 1;
    }
    
    .knowledge-card.featured-bento .card-image {
        height: 140px;
    }
    
    .knowledge-card.featured-bento .card-content {
        padding: 1rem;
    }
    
    .knowledge-card.featured-bento .card-title {
        font-size: 1rem;
    }
    
    .knowledge-card.featured-bento .card-excerpt {
        font-size: 0.85rem;
    }
}