/* ==================================================================
 *                       NEWS.CSS - NEUIGKEITEN
 * ==================================================================
 * Version: 1.0.0
 * Letzte Aktualisierung: 2025-03-13
 *
 * Dieses Stylesheet gestaltet die Nachrichten-Karten in der
 * "Was ist neu"-Sektion.
 * ================================================================== */

/* ==================================================================
   1. GRID-LAYOUT FÜR DIE NACHRICHTEN
   ================================================================== */
.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--spacing-lg);
}

/* ==================================================================
   2. STYLING DER NACHRICHTEN-KARTE
   ================================================================== */
.news-card {
    background-color: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    height: 100%; /* Sorgt dafür, dass alle Karten im Grid gleich hoch sind */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative; /* Wichtig für die absolute Positionierung des Links */
}

.news-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

/* Spezielle Hervorhebung für die "featured"-Karte */
.news-card.featured {
    border-color: var(--color-primary);
    border-width: 2px;
}

/* ==================================================================
   3. INHALT DER NACHRICHTEN-KARTE
   ================================================================== */
.news-date {
    background-color: var(--color-primary);
    color: white;
    text-align: center;
    padding: var(--spacing-xs) 0;
    width: 60px;
    border-radius: 0 0 var(--border-radius) 0; /* Rundet die untere rechte Ecke ab */
    position: absolute;
    top: -1px; /* Korrigiert Position wegen des Borders */
    left: -1px;
    z-index: 2;
}

.news-date .day {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
}

.news-date .month {
    font-size: 0.8rem;
    text-transform: uppercase;
}

.news-content {
    padding: var(--spacing-lg);
    padding-top: 60px; /* Platz für das absolute Datum schaffen */
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Nimmt den restlichen Platz in der Karte ein */
}

.news-title {
    color: var(--color-text-headline);
    font-size: 1.3rem;
    margin-bottom: var(--spacing-sm);
}

.news-excerpt {
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-md);
    flex-grow: 1; /* Schiebt die Tags und den Link nach unten */
}

.news-excerpt strong {
    color: var(--color-primary);
}

.news-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 60px; /* Platz für den absolut positionierten Button schaffen */
}

/* .tag wird von components.css übernommen */

.news-link {
    /* Nutzt die Basis-Stile von .btn und .btn-primary */
    position: absolute;
    bottom: var(--spacing-lg);
    right: var(--spacing-lg);
}

.news-link i {
    transition: transform 0.3s ease;
}

.news-link:hover i {
    transform: translateX(4px); /* Bewegt den Pfeil beim Hovern */
}


/* ==================================================================
   4. RESPONSIVE ANPASSUNGEN
   ================================================================== */
@media (max-width: 768px) {
    .news-grid {
        grid-template-columns: 1fr;
    }
}