/* 1.6.0: publication catalogue and article authoring. */
.article-grid { align-items: stretch; }
.article-grid .article-card {
    display: grid;
    grid-template-rows: 24px 78px minmax(0, 1fr) 24px;
    gap: 12px;
    height: 340px;
    min-width: 0;
    padding: 24px;
    overflow: hidden;
}
.article-card-meta { display: flex; align-items: center; gap: 12px; min-width: 0; font-size: 12px; }
.article-card-meta time { flex-shrink: 0; color: #b2c0d1; }
.article-category { color: #7ee2ff; text-decoration: underline; text-underline-offset: 4px; overflow-wrap: anywhere; }
.article-card-meta .article-category { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.article-grid .article-card h3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    overflow-wrap: anywhere;
    margin: 0;
    font-size: 20px;
    line-height: 26px;
}
.article-grid .article-excerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    overflow-wrap: anywhere;
    max-height: 88px;
    font-size: 15px;
    line-height: 22px;
}
.article-read-more { justify-self: start; color: #f0ce8b; font-size: 14px; }
.article-card .article-read-more span { color: inherit; }
.article-read-more:hover,
.article-category:hover,
.section-heading .eyebrow a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.article-search { max-width: 820px; margin-bottom: 22px; }
.article-search label { color: #e8eef7; font-weight: 500; }
.article-search-row { display: flex; gap: 12px; }
.article-search input { min-width: 0; color: #fff; }
.article-search input::placeholder { color: #b2c0d1; opacity: 1; }
.article-search button { flex-shrink: 0; }
.article-categories { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.article-categories a { padding: 8px 14px; border: 1px solid #49617b; border-radius: 8px; color: #d9e4f1; font-size: 14px; overflow-wrap: anywhere; }
.article-categories a[aria-current],
.article-categories a:hover { color: #06101d; background: #7ee2ff; border-color: #7ee2ff; }
.article-results { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.article-results p { margin: 0; }
.article-results a { color: #7ee2ff; text-decoration: underline; }
.articles-empty { grid-column: 1 / -1; }
.article-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 32px; }
.article-pagination :is(a, span) { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; min-height: 38px; padding: 6px 12px; border: 1px solid #49617b; border-radius: 8px; font-size: 14px; }
.article-pagination [aria-current],
.article-pagination a:hover { color: #07111f; background: #f0ce8b; border-color: #f0ce8b; }
.article-pagination .page-disabled { color: #93a3b8; }
.article-pagination .page-gap { border-color: transparent; }
.article-body { overflow-wrap: anywhere; }
.article-body a { color: #7ee2ff; text-decoration: underline; text-underline-offset: 3px; }
.article-body img { display: block; max-width: 100%; height: auto; margin: 24px auto; border-radius: 8px; }
.article-body pre { white-space: pre-wrap; }
.article-body table { display: block; overflow-x: auto; }
.article-page > .article-category { display: inline-block; margin-bottom: 16px; }
.article-page h1 { overflow-wrap: anywhere; }
.category-create { margin-bottom: 24px; }
.category-edit { display: flex; gap: 10px; align-items: center; }
.category-edit input { min-width: 0; }
.article-editor { margin-bottom: 20px; min-width: 0; }
.article-editor-toolbar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.article-editor-toolbar button { display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid #8c9bae; border-radius: 6px; color: #21354d; background: #fff; cursor: pointer; }
.article-editor-toolbar button:hover { background: #eaf1f7; }
.article-editor-toolbar svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.article-editor button:disabled { opacity: .6; cursor: wait; }
.editor-status { font-size: 13px; margin: 8px 0 0; color: #305477; }
.editor-status:empty,
.dialog-error:empty { display: none; }
.article-editor-dialog { width: min(520px, calc(100% - 32px)); max-height: calc(100dvh - 40px); padding: 24px; overflow: auto; color: #182434; background: #fff; border: 1px solid #8c9bae; border-radius: 8px; }
.article-editor-dialog::backdrop { background: rgba(3, 10, 20, .72); }
.admin-shell .article-editor-dialog h2 { margin: 0 0 22px; }
.editor-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; }
.preview-dialog { width: min(900px, calc(100% - 32px)); }
.preview-dialog iframe { display: block; width: 100%; height: 55dvh; border: 1px solid #cbd5e1; margin-bottom: 20px; background: #fff; }
@media (max-width: 620px) {
    .article-search-row { flex-wrap: wrap; }
    .article-search-row input { flex-basis: 100%; }
    .article-grid .article-card { padding: 20px; }
    .article-editor-dialog { padding: 18px; }
}