/* ==========================================================================
   栏目文章区块（`app\widgets\school\ArticleListWidget`：notice / news / more）
   落点：web/static/widgets/css/portal_article_list.css
   三种形态共用同一套条目（封面 + 标题 + 摘要 + 元信息一行），差异只在取数来源。
   设计口径：条目一律同构；不用卡片边框/阴影分区，靠**列间距 + 行间距**；
   封面与文字横排，没封面的条目文字占满整格，元信息一行收尾（日期 / 栏目 / 作者 / 阅读量）。
   ========================================================================== */

/* ── 两列文章（每格 = 封面 + 标题 + 摘要 + 元信息）── */
.ph-arts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-5, 24px) var(--sp-6, 32px);
}
.ph-art {
    display: grid;
    grid-template-columns: 168px minmax(0, 1fr);
    gap: var(--sp-4, 16px);
    color: inherit;
    border-radius: var(--radius-sm, 6px);
}
/* 没有封面的文章：文字占满整格（不留一块空白图位；实测有文章的封面是空的） */
.ph-art--text { grid-template-columns: minmax(0, 1fr); }
.ph-art__cover {
    display: block;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-sm, 6px);
    overflow: hidden;
    border: 1px solid var(--c-border);
    background-color: var(--c-surface-2);
}
/* 与课程卡同口径：只作用于**直接子级**主封面（容器里若再挂徽标/标签类小图也不会被撑大） */
.ph-art__cover > img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-base, .24s) var(--ease-out, ease); }
.ph-art:hover .ph-art__cover { border-color: var(--c-primary-border); }
.ph-art:hover .ph-art__cover > img { transform: scale(1.03); }
/* 元信息钉在格子底部：同一行里"有封面的"和"没封面的"格子高度不同，
   这样两张卡的日期/作者/阅读量会落在同一条基线上（否则一行两格参差不齐）。 */
.ph-art__body { min-width: 0; display: flex; flex-direction: column; height: 100%; }
.ph-art__t {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: var(--fs-sm, 14px);
    font-weight: var(--fw-semibold, 600);
    line-height: 1.5;
    color: var(--c-text);
    transition: color var(--dur-fast, .14s) var(--ease-out, ease);
}
.ph-art__s {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: var(--sp-1, 4px);
    font-size: var(--fs-xs, 12px);
    line-height: 1.7;
    color: var(--c-text-tertiary);
}
.ph-art__m {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-1, 4px) var(--sp-3, 12px);
    margin-top: auto;                     /* 见上：钉到格子底部 */
    padding-top: var(--sp-2, 8px);
    font-size: var(--fs-xs, 12px);
    color: var(--c-text-tertiary);
}
.ph-art__d,
.ph-art__v { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.ph-art__c,
.ph-art__a { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-art__ico { width: 13px; height: 13px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ph-art:hover .ph-art__t { color: var(--c-primary-text); }
.ph-art:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }

@media (max-width: 1024px) {
    /* 两列到底，只把封面收窄（1024 下每格约 470px，够放两行标题 + 两行摘要） */
    .ph-art { grid-template-columns: 140px minmax(0, 1fr); gap: var(--sp-3, 12px); }
    /* ⚠ 这里必须再写一遍、且把选择器写成两节：`.ph-art` 与 `.ph-art--text` 权重相同，
       后者在上面的断点规则之前 ⇒ 少了这条时没封面的条目会留一个 140px 的空列
       （只有 `.ph-art__body` 一个子元素，被塞进第一列 ⇒ 文字被挤成 140px 宽）。 */
    .ph-art.ph-art--text { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    /* 窄屏：一列，封面在上、文字在下（横排会把标题挤成一两个字） */
    .ph-arts { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4, 16px); }
    .ph-art { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3, 12px); }
}