/*
 * This file _should only_ be for the main page. If it used elsewhere, _please_ delete it from there!
 * General CSS should go in `general-2024.css` and there only!
 */

/* Always show the TOC */
:root {
    --toc-on-small-screens: var(--toc-shown);
}

#news-boxes-bottom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 1fr; /* TODO(restioson): rare? */
    gap: 15px;
}

@media (max-width: 500px) {
    #news-boxes-bottom {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }
}

.news-box {
    display: flex;
    flex-direction: column;
    gap: 5px;
    border: 1px solid lightgrey;
    padding: 15px;
    border-radius: 5px;
}

.news-box-header {
    font-weight: bold;
}

.news-box-header h2 {
    margin: 0;
    font-size: 1.2rem;
}

.news-box-content {
    display: grid;
    grid-template-areas: "desc picture"
                         "link picture";
    grid-template-rows: auto 1fr;
    flex: 1;
}

.news-box-content .news-box-text {
    grid-area: desc;
}

.news-box-content .news-box-link {
    grid-area: link;
    display: flex;
    align-items: end;
}

.news-box-content .news-box-image {
    grid-area: picture;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 600px) {
    .news-box-content {
        grid-template-areas: "picture"
                             " desc  "
                             " link  ";
        grid-template-rows: 1fr auto auto;

    }
}

@media (max-width: 1200px) { /* Break 3-col layout */
    /* Show TOC after main content */
    .container {
        grid-template-areas: "main-content "
                             "     toc     "
                             "sidebar-right";
    }
}