.news-events {

}

.news-events__main-heading {
    margin-bottom: var(--spacing-6);
}

/* Featured Post Styling */
.featured-post {
    display: flex;
    gap: var(--spacing-5);
    margin-bottom: var(--spacing-6);
    background-color: var(--color-surface);
}

.featured-post__media{
    flex: 1;
    max-height: 500px;
    overflow: hidden;
    border-radius: var(--radius-lg);
}

.featured-post__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.featured-post__content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.featured-post__date {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    color: var(--color-text-light);
    font-size: var(--text-sm);
    margin-bottom: var(--spacing-3);
}

.featured-post__title {
    font-size: var(--text-lg);
    margin-bottom: var(--spacing-4);
    color: var(--color-text);
    margin-top:0;
}

.featured-post__excerpt {
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--color-text-light);
    margin-bottom: var(--spacing-4);
}

.featured-post__link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    color: var(--color-primary);
    transition: var(--transition);
}

.featured-post__link:hover {
    color: var(--color-primary-light);
}

/* Latest News Section */
.latest-news__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-4);
}

.latest-news__heading {
    font-size: var(--text-xl);
    margin: 0;
}

.latest-news__archive-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    color: var(--color-primary);
    font-size: var(--text-sm);
}

.latest-news__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-4);
}

/* News Card Styling */
.news-events  .news-card {
border-bottom: none;
}

.news-events .news-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: flex-start;
    gap:0;
}

.news-events .news-card__media{
    width:100%;
    max-width:100%;
    max-height:unset;
    border-radius: var(--radius-lg);
}

.news-card__media {
    aspect-ratio: 16/9;
    overflow: hidden;
    margin-bottom: var(--spacing-3);
}

.news-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}

.news-card__link:hover .news-card__image {
    transform: scale(1.05);
}

.news-events .news-card__date {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    color: var(--color-text-light);
    font-size: var(--text-xs);
    margin-bottom: var(--spacing-2);
    width:100%;
}

.news-card__title {
    font-size: var(--text-base);
    color: var(--color-text);
    margin: 0;
}

/* Responsive Styles */
@media (max-width: 80rem) { /* 1280px */
    .latest-news__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .featured-post__title {
        font-size: var(--text-xl);
    }
}

@media (max-width: 64rem) { /* 1024px */
    .featured-post {
        flex-direction: column;
    }
    
    .featured-post__media {
        max-height: 400px;
    }
    
    .latest-news__grid {
        gap: var(--spacing-4);
    }
    .news-events__main-heading{
        display: none;
    }
}

@media (max-width: 48rem) {
    .news-events {

    }

    .news-events__wrapper{
        padding: var(--spacing-2) var(--spacing-3) !important;
    }

    .latest-news__header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-3);
    }

    /* Ändern des Grid-Layouts auf eine einzelne Spalte */
    .latest-news__grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-4);
    }

    /* Anpassungen für die News-Cards im mobilen Layout */
    .news-events .news-card__link {
        flex-direction: row-reverse; /* Bild rechts, Content links */
        gap: var(--spacing-4);
        align-items: flex-start;
        grid-template-columns:2fr 1fr;
        display: grid;
    }

    .news-events .news-card__media{
        order:2;

    }

    /* Content-Bereich (links) */
    .news-events .news-card__content {
        flex: 0 0 60%; /* Fixe Breite von 60% */
        padding-right: var(--spacing-2);
    }

    /* Medien-Bereich (rechts) */
    .news-events .news-card__media {
        flex: 0 0 40%; /* Fixe Breite von 40% */
        margin-bottom: 0;
        aspect-ratio: 1/1; /* Quadratisches Format für konsistenteres Layout */
    }

    /* Datum und Titel Anpassungen */
    .news-events .news-card__date {
        margin-bottom: var(--spacing-2);
        font-size: var(--text-xs);
    }

    .news-events .news-card__title {
        font-size: var(--text-sm);
        line-height: var(--leading-tight);
    }

    /* Featured Post Anpassungen */
    .featured-post {
        margin-bottom: var(--spacing-6);
    }

    .featured-post__title {
        font-size: var(--text-lg);
        margin-bottom: var(--spacing-3);
    }

    .featured-post__excerpt {
        font-size: var(--text-sm);
    }
}

/* Zusätzliche Anpassungen für sehr kleine Bildschirme */
@media (max-width: 30rem) { /* 480px */
    .news-events .news-card__link {
        gap: var(--spacing-3); /* Kleinerer Abstand zwischen Bild und Content */
    }

    .news-events .news-card__content {
        flex: 0 0 65%; /* Etwas mehr Platz für den Content */
    }

    .news-events .news-card__media {
        flex: 0 0 35%; /* Entsprechend weniger Platz für das Bild */
    }
}