/* GENM Articles page (custom-articles.hbs)
/* ----------------------------------------------------------
Loaded only by custom-articles.hbs, after genm-home.css and genm-tool.css (the page's main
element has .genm-home, .genm-tool-page and .genm-articles, so the breadcrumb, title, section
and research card styles apply). Every rule here is scoped to .genm-articles.
Colors and fonts come only from genm-tokens.css. Nothing here animates.
Sizes are in px because Source sets the root font size to 10px.
*/

.genm-articles .genm-articles-cats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.genm-articles .genm-articles-cat {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    padding: 18px 18px 20px;
    border: 1px solid color-mix(in srgb, var(--genm-navy) 18%, transparent);
    border-top: 3px solid var(--genm-gold);
    border-radius: 8px;
}

.genm-articles .genm-articles-cat-name {
    margin: 0 0 8px;
    font-family: var(--genm-font-serif);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--genm-navy);
}

.genm-articles .genm-articles-cat-name a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--genm-gold);
    text-underline-offset: 3px;
}

.genm-articles .genm-articles-cat-desc {
    margin: 0 0 8px;
    font-size: 15px;
    line-height: 1.5;
}

.genm-articles .genm-articles-cat-count {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 500;
    color: color-mix(in srgb, var(--genm-navy) 75%, transparent);
}

.genm-articles .genm-articles-cat-list {
    flex-grow: 1;
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
    border-top: 1px solid color-mix(in srgb, var(--genm-navy) 12%, transparent);
}

.genm-articles .genm-articles-cat-list li {
    margin: 0;
    padding: 10px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--genm-navy) 12%, transparent);
}

.genm-articles .genm-articles-cat-list a {
    display: block;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--genm-navy);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.genm-articles .genm-articles-cat-list a:hover {
    text-decoration: underline;
    text-decoration-color: var(--genm-gold);
    text-underline-offset: 3px;
}

.genm-articles .genm-articles-cat-list time {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: color-mix(in srgb, var(--genm-navy) 75%, transparent);
}

.genm-articles .genm-articles-cat-more {
    margin: auto 0 0;
    font-size: 14px;
    font-weight: 600;
}

.genm-articles .genm-articles-cat-more a {
    color: var(--genm-navy);
    text-decoration: underline;
    text-decoration-color: var(--genm-gold);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}