/* Container styling */
body.news {
    background-color: var(--news-background-color);
    color: var(--news-text-color);
}
section#articlelist {
    padding-top: 64px;
}
section#articlelist .articlelistcontainer {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 1rem;
    font-family: sans-serif;
}
section#articlelist .articlelistcontainer h1 {
}
/* Base style for all previews */
section#articlelist .articlelistcontainer .articlepreview {
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    overflow: hidden;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
    align-items: end;
}

/* Image handling */
section#articlelist .articlelistcontainer .articlepreview img {
    width: 95%;
    height: 250px;
    object-fit: cover;
    background-color: #f0f0f0;
}

/* Text content padding */
section#articlelist .articlelistcontainer .articlepreview h2,
section#articlelist .articlelistcontainer .articlepreview .articledate,
section#articlelist .articlelistcontainer .articlepreview .abstract,
section#articlelist .articlelistcontainer .articlepreview .more {
    padding: 0 1.5rem;
}

section#articlelist .articlelistcontainer .articlepreview .articledate {
    margin-top: 1.5rem;
    font-size: 0.85rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 1px;
}

section#articlelist .articlelistcontainer .articlepreview h2 {
    margin: 0.5rem 0;
    font-size: 1.25rem;
    color: #222;
}

section#articlelist .articlelistcontainer .articlepreview .abstract {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #444;
    flex-grow: 1; /* Ensures buttons align even with varying text lengths */
}

section#articlelist .articlelistcontainer .articlepreview .more {
    display: inline-block;
    margin: 1rem 0 1.5rem 0;
    color: #0056b3;
    text-decoration: none;
    font-weight: bold;
}

section#articlelist .articlelistcontainer .articlepreview .more:after {
    content: " →";
}

.news header {
    background-color: #f7f7ff;
    color: #2f4858;
    animation: none;
}

/* --- THE FIRST ARTICLE (FEATURED) --- */
@media (min-width: 768px) {
    section#articlelist .articlelistcontainer .articlepreview:first-child {
        grid-column: 1 / -1; /* Spans full width of the grid */
        align-items: start;
    }

    section#articlelist .articlelistcontainer .articlepreview:first-child img {
        width: 95%;
        height: 460px;
        object-fit: cover;
        margin: 0px auto;
    }

    section#articlelist
        .articlelistcontainer
        .articlepreview:first-child
        .abstract {
        font-size: 1.1rem;
    }

    section#articlelist .articlelistcontainer .articlepreview:first-child h2 {
        font-size: 2rem;
    }
}

section#article {
}
section#article p {
    line-height: 1.8em;
    font-weight: 200;
    font-size: 1.2em;
}
section#article h3 .icon {
    font-size: 0.75em;
    vertical-align: middle;
    padding-right: 12px;
}
section#article img.featured {
    aspect-ratio: 3 / 1.5;
    object-fit: cover;
}

.postimagegrid {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px 0; /* Prevents scrollbar from cutting off content */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

.postimagegrid img {
    flex-shrink: 0; /* Prevents images from being squished */
    height: 300px; /* Adjust to your preferred height */
    width: auto; /* Maintains aspect ratio */
    object-fit: cover;
    border-radius: 4px;
    cursor: pointer; /* Optional: indicates images are interactive */
}

/* Optional: Hide scrollbar but keep functionality */
.postimagegrid::-webkit-scrollbar {
    height: 8px;
}

.postimagegrid::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.postimagegrid::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.postimagegrid::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Mobile view - vertical column */
@media (max-width: 768px) {
    .postimagegrid {
        flex-direction: column;
        overflow-x: visible;
        overflow-y: visible;
    }

    .postimagegrid img {
        width: 100%;
        height: auto;
    }
}

/* Mobile adjustments */
@media (max-width: 480px) {
    section#articlelist .articlelistcontainer {
        grid-template-columns: 1fr;
    }
}