/* Aktuelles list page styles */

.news-item {
    margin-bottom: 2rem;
}

/* Base layout using CSS Grid */
.news-item {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        "title"
        "date"
        "image"
        "text";
    gap: 0;
}

.news-title {
    grid-area: title;
}

.news-date {
    grid-area: date;
}

.news-image {
    grid-area: image;
    margin: 1rem 0;
}

.news-image img {
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

.news-text {
    grid-area: text;
}

/* Desktop layout - magazine style with image on left */
@media (min-width: 768px) {
    .news-item {
        grid-template-columns: 200px 1fr;
        grid-template-areas:
            "image title"
            "image date"
            "image text";
        gap: 0 1.5rem;
    }

    .news-image {
        margin: 0;
    }

    .news-image img {
        width: 200px;
        height: 150px;
        object-fit: cover;
        border-radius: 4px;
    }
}

/* For items without images - single column layout */
.news-item:not(:has(.news-image)) {
    grid-template-columns: 1fr;
    grid-template-areas:
        "title"
        "date"
        "text";
}