:root { --news-blue:#008cff; --news-ink:#1d1d1f; --news-muted:#6e6e73; --news-line:#d2d2d7; --news-wash:#f5f5f7; }
* { box-sizing:border-box; }
body.newsroom-page { margin:0; background:#fff; color:var(--news-ink); font-family:"PingFang SC","Microsoft YaHei",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif; }
a { color:inherit; text-decoration:none; }
button,input,select { font:inherit; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.newsroom-intro { padding: var(--hg-space-36) var(--hg-space-8) var(--hg-space-18); background:#fff; }
.newsroom-intro-inner,.newsroom-tools,.newsroom-results { max-width:1180px; margin:0 auto; }
.newsroom-kicker { margin: 0 0 var(--hg-space-5); color:var(--news-blue); font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.newsroom-intro h1 { margin:0; font-size:clamp(42px, 5vw, 56px); line-height:1.08; letter-spacing:-.04em; font-weight:700; }
.newsroom-lede { max-width:520px; margin: var(--hg-space-6) 0 0; color:var(--news-muted); font-size:19px; line-height:1.7; }

.newsroom-tools { padding: 0 var(--hg-space-8) var(--hg-space-10); }
.newsroom-tools-inner { display:flex; gap:16px; align-items:center; }
.newsroom-search { position:relative; flex:1; min-width:0; }
.newsroom-search > svg { position:absolute; top:50%; left:17px; width:18px; height:18px; transform:translateY(-50%); fill:none; stroke:var(--news-muted); stroke-width:1.8; pointer-events:none; }
.newsroom-search input { width:100%; height:44px; padding: 0 44px 0 var(--hg-space-12); border:0; border-radius:999px; outline:none; color:var(--news-ink); background:#f1f1f3; }
.newsroom-search input::-webkit-search-cancel-button,
.newsroom-search input::-webkit-search-decoration { -webkit-appearance:none; appearance:none; display:none; }
.newsroom-search input::placeholder { color:var(--news-muted); }
.newsroom-search input:focus { box-shadow:0 0 0 3px rgba(0,140,255,.16); }
/* 44px 可点区域 + 20px 图标：不能只给 21px 方块，tokens-v0910 的 min-height:44px 会把它拉成竖椭圆 */
.newsroom-search button { position:absolute; top:50%; right:4px; display:none; align-items:center; justify-content:center; width:44px; height:44px; min-height:44px; padding:0; border:0; border-radius:50%; transform:translateY(-50%); color:var(--news-muted); background:none; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.newsroom-search button.is-visible { display:flex; }
.newsroom-search button svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; }
.newsroom-search button:hover { color:var(--news-ink); }
.newsroom-search button:focus-visible { outline:2px solid var(--news-blue); outline-offset:-2px; }
.newsroom-sort { display:flex; align-items:center; gap:8px; color:var(--news-muted); font-size:14px; white-space:nowrap; }
/* 自定义下拉：原生 select 的选项面板由系统渲染，位置不受 CSS 控制（窄屏会飘到视口顶部）。
   这里用 button + role=listbox 自己渲染面板，始终 top:100% 向下展开；
   隐藏的 #sortSelect 仍保留为状态源，newsroom.js 读它的 value / 监听它的 change，逻辑不用改。 */
.sort-dropdown { position:relative; display:inline-block; }
.sort-trigger { display:inline-flex; align-items:center; gap:8px; height:44px; min-height:44px; padding:0 14px; border:0; border-radius:999px; color:var(--news-ink); font-size:14px; background:#f1f1f3; cursor:pointer; }
.sort-trigger > svg { flex:none; width:12px; height:8px; fill:none; stroke:#6e6e73; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; transition:transform 160ms ease; }
.sort-trigger[aria-expanded="true"] > svg { transform:rotate(180deg); }
.sort-trigger:focus-visible { outline:0; box-shadow:0 0 0 3px rgba(0,140,255,.16); }
.sort-menu { position:absolute; top:calc(100% + 6px); left:0; z-index:20; min-width:100%; margin:0; padding:6px; list-style:none; border-radius:14px; background:#fff; box-shadow:0 12px 32px rgba(0,0,0,.14); }
.sort-menu[hidden] { display:none; }
/* 打开面板时会把焦点放到当前项以支持方向键，浏览器默认焦点环会画成一个突兀的蓝框，
   看起来像"被强行选中"。这里换成柔和底色，选中态只用蓝字表达。 */
.sort-option { padding:10px 14px; border-radius:10px; outline:0; color:var(--news-ink); font-size:14px; cursor:pointer; }
.sort-option:hover,
.sort-option:focus { background:#f1f1f3; }
.sort-option[aria-selected="true"] { color:var(--news-blue); font-weight:600; }
.newsroom-tags { display:flex; gap: var(--hg-space-2); flex-wrap:wrap; padding-top: var(--hg-space-5); }
.newsroom-tag { padding: var(--hg-space-2) var(--hg-space-4); border:1px solid var(--news-line); border-radius:999px; color:var(--news-muted); background:#fff; cursor:pointer; }
.newsroom-tag:hover,.newsroom-tag.is-active { border-color:var(--news-blue); color:#fff; background:var(--news-blue); }

.newsroom-results { padding: 0 var(--hg-space-8) var(--hg-space-24); }
.newsroom-results-head { display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin-bottom: var(--hg-space-5); }
.newsroom-results-head p { margin:0; color:var(--news-muted); font-size:14px; }
.newsroom-results-head #resultsHeading { color:var(--news-ink); font-size:36px; font-weight:700; letter-spacing:-.03em; }
.newsroom-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; padding:28px; border-radius:28px; background:var(--news-wash); }
.news-card { display:flex; flex-direction:column; min-width:0; overflow:hidden; border-radius:24px; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.04); transition:transform .25s ease, box-shadow .25s ease; }
.news-card:hover { transform:translateY(-3px); box-shadow:0 12px 28px rgba(0,0,0,.1); }
.news-card-image { width:100%; aspect-ratio:1.42 / 1; overflow:hidden; background:#e8eef6; }
.news-card-image img { width:100%; height:100%; object-fit:cover; transition:transform .45s ease; }
.news-card:hover .news-card-image img { transform:scale(1.035); }
.news-card-body { display:flex; flex:1; flex-direction:column; padding: var(--hg-space-5) var(--hg-space-5) var(--hg-space-6); }
.news-card-category { align-self:flex-start; margin-bottom:12px; color:var(--news-muted); font-size:13px; }
.news-card-title { margin:0; color:var(--news-ink); font-size:20px; line-height: var(--hg-line-normal); letter-spacing:-.02em; }
.news-card-summary { margin: var(--hg-space-3) 0 var(--hg-space-5); color:var(--news-muted); font-size:14px; line-height:1.7; }
.news-card-meta { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:auto; padding-top: var(--hg-space-4); border-top:1px solid #e5e5e7; color:var(--news-muted); font-size:13px; }
.news-card-read { color:var(--news-blue); font-weight:600; }
.news-card-read::after { content:"  ↗"; }
.newsroom-empty { padding: var(--hg-space-18) var(--hg-space-5); text-align:center; border-radius:28px; background:var(--news-wash); }
.newsroom-empty h2 { margin: 0 0 var(--hg-space-2); font-size:22px; }
.newsroom-empty p { margin:0; color:var(--news-muted); }

@media (max-width:1024px) {
    .newsroom-intro { padding: var(--hg-space-32) var(--hg-space-6) var(--hg-space-14); }
    .newsroom-tools,.newsroom-results { padding-left: var(--hg-space-6); padding-right: var(--hg-space-6); }
    .newsroom-grid { padding: var(--hg-space-5); }
}
@media (max-width:720px) {
    .newsroom-intro h1 { font-size:42px; }
    .newsroom-lede { font-size:16px; }
    .newsroom-tools-inner,.newsroom-results-head { align-items:stretch; flex-direction:column; }
    /* 不要 flex:1 拉满：44px 高的控件被拉到整行宽后，文字贴左、箭头贴右，中间是大片空白 */
    .newsroom-sort { justify-content:flex-start; gap:10px; }
    .sort-dropdown { flex:0 1 auto; min-width:0; max-width:100%; }
    .sort-trigger { padding:0 12px; max-width:100%; }
    .newsroom-results-head #resultsHeading { font-size:30px; }
    .newsroom-grid { grid-template-columns:1fr; padding: var(--hg-space-3); border-radius:22px; }
    .news-card { border-radius:20px; }
    .news-card-image { aspect-ratio:1.65 / 1; }
    .news-card-title { font-size:19px; }
    .newsroom-results { padding-bottom: var(--hg-space-16); }
}


.newsroom-pager {
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:var(--hg-space-2);
    margin-top:var(--hg-space-8);
}
.newsroom-pager[hidden] { display:none; }
.newsroom-pager button {
    min-width:40px;
    min-height:40px;
    padding:var(--hg-space-2) var(--hg-space-3);
    border:1px solid var(--hg-color-line);
    border-radius:999px;
    color:var(--hg-color-body);
    background:var(--hg-color-white);
    cursor:pointer;
}
.newsroom-pager button:hover,
.newsroom-pager button:focus-visible {
    border-color:var(--hg-color-brand);
    color:var(--hg-color-brand-strong);
    outline:2px solid var(--hg-color-brand);
    outline-offset:2px;
}
.newsroom-pager button[aria-current="page"] {
    border-color:var(--hg-color-brand);
    color:var(--hg-color-white);
    background:var(--hg-color-brand);
}
.newsroom-pager button:disabled {
    border-color:var(--hg-color-line);
    color:var(--hg-color-muted);
    background:var(--hg-color-surface-soft);
    cursor:not-allowed;
    opacity:.55;
}
.newsroom-pager > span {
    min-width:var(--hg-space-6);
    color:var(--hg-color-muted);
    text-align:center;
}