/* Public news reuses the product-page hero and the shared public card material. */
.story-news .news-hero { min-height: 520px; padding-bottom: 24px; }
.story-news .news-hero h1 { font-size: clamp(42px, 5vw, 68px); line-height: 1.18; }
.story-news .news-hero .hero-summary { max-width: 670px; margin-top: 25px; font-size: 17px; line-height: 1.75; }
.story-news .hero-iridescence { inset: 0; height: auto; opacity: .13; }
.story-news .news-shell { width: min(1160px, calc(100% - 64px)); margin: 0 auto; padding-top: 54px; }
.story-news.news-detail .news-shell { padding-top: 32px; }
.story-news .news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.story-news .news-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; color: var(--ink); text-decoration: none; }
.story-news .news-card-media { margin: 12px 12px 0; overflow: hidden; border-radius: var(--public-glass-radius-sm); background: var(--surface-soft); }
.story-news .news-cover { display: block; width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.story-news .news-card-media > .news-cover { transition: transform 320ms var(--ease); }
.story-news .news-cover-empty { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 22px; padding: 24px; background: var(--accent-soft); }
.story-news .news-cover-empty .news-placeholder-logo { width: 136px; height: auto; }
.story-news .news-cover-empty > span { color: var(--muted); font-size: 12px; }
.story-news .news-card-copy { display: flex; flex: 1; flex-direction: column; align-items: start; padding: 24px; }
.story-news .news-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 12px; }
.story-news .news-category { color: var(--accent-dark); font-weight: 650; }
.story-news .news-date { color: var(--muted); font-variant-numeric: tabular-nums; }
.story-news .news-date::before { display: inline-block; width: 3px; height: 3px; margin: 0 12px 3px 0; border-radius: 50%; background: var(--line-strong); content: ""; }
.story-news .news-card h2 { margin: 16px 0 12px; font-size: 21px; line-height: 1.5; font-weight: 700; text-wrap: pretty; overflow-wrap: anywhere; transition: color 180ms var(--ease); }
.story-news .news-summary { color: var(--muted); line-height: 1.8; }
.story-news .news-card .news-summary { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 0 0 28px; font-size: 14px; }
.story-news .news-read {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--public-glass-edge);
  border-radius: var(--public-glass-radius-sm);
  background: linear-gradient(125deg, var(--public-glass-raised), var(--public-glass-soft)), var(--accent-soft);
  color: var(--ink-soft);
  box-shadow: var(--public-glass-shadow);
  -webkit-backdrop-filter: var(--public-glass-filter);
  backdrop-filter: var(--public-glass-filter);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.5;
  transition: color 180ms var(--ease), border-color 180ms var(--ease), background-color 180ms var(--ease), box-shadow 180ms var(--ease);
}
.story-news .news-read { align-self: stretch; width: 100%; margin-top: auto; }
.story-news .news-card:hover h2 { color: var(--accent-dark); }
.story-news .news-card:is(:hover, :focus-visible) .news-read {
  border-color: var(--accent-line);
  background: linear-gradient(125deg, var(--public-glass-raised), var(--public-glass)), var(--accent-soft);
  color: var(--accent-dark);
  box-shadow: var(--public-glass-shadow-hover);
}
.story-news .news-actions { justify-content: center; margin: 44px 0 0; }
.story-news .news-article { max-width: 960px; margin-inline: auto; }
.story-news.news-detail .news-hero .hero-copy { max-width: 1040px; }
.story-news.news-detail .news-hero h1 { max-width: 960px; margin: 20px auto 24px; font-size: clamp(32px, 4vw, 52px); line-height: 1.3; overflow-wrap: anywhere; text-wrap: pretty; }
.story-news.news-detail .news-hero .hero-summary { max-width: 760px; margin-top: 0; overflow-wrap: anywhere; }
.story-news .news-hero .news-meta { justify-content: center; }
/* The detail hero shows the date alone — no category label — so it also drops the
   separator dot that separates the two in a list card. */
.story-news.news-detail .news-hero .news-date::before { display: none; }
/* The detail cover is not a fixed frame: the element wraps the image, so its box
   keeps whatever ratio the upload has (portrait stays portrait, panorama stays
   flat) instead of being letterboxed into one shared shape. `max-height` only
   stops an extremely tall upload from covering several screens, and the width
   shrinks with it — 3:2 and wider images still fill the 960px article column. */
.story-news .news-article > .news-cover {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 720px;
  aspect-ratio: auto;
  object-fit: contain;
  margin: 0 auto 52px;
  border: 1px solid var(--line);
  border-radius: var(--public-glass-radius);
  background: var(--surface-soft);
}
/* Markdown body: the 说明文档 article itself — the same `/docs.css` rules and the
   same 760px measure, so headings, callouts, tables, code and images cannot drift
   from the documentation. Only the rule above the body is news-specific, so the
   first block starts flush under it and a leading heading drops its own separator
   instead of drawing a second line. */
.story-news .news-article > .docs-article { --docs-measure: 760px; padding-top: 36px; border-top: 1px solid var(--line); }
.story-news .news-article > .docs-article > :first-child { margin-top: 0; }
.story-news .news-article > .docs-article > :is(h1, h2, h3, h4, h5, h6):first-child { padding-top: 0; border-top: 0; }
.story-news .news-empty { display: grid; place-items: center; min-height: 200px; max-width: none; padding: 40px 24px; border: 1px solid var(--line); border-radius: var(--public-glass-radius); background: var(--surface); color: var(--muted); text-align: center; font-size: 15px; }
.story-news #news-content > .news-empty + .button { margin-top: 20px; }
@media (hover: hover) { .story-news .news-card:hover .news-card-media > .news-cover { transform: scale(1.025); } }
@media (max-width: 900px) { .story-news .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } }
@media (max-width: 760px) {
  .story-news .news-hero { min-height: 470px; padding-bottom: 20px; }
  .story-news .news-shell { width: calc(100% - 44px); padding-top: 32px; }
  .story-news.news-detail .news-shell { padding-top: 28px; }
  .story-news .news-card-copy { padding: 20px; }
}
@media (max-width: 520px) {
  .story-news .news-hero { min-height: 430px; }
  .story-news .news-hero h1 { font-size: clamp(31px, 8.2vw, 40px); }
  .story-news .news-hero .hero-summary { font-size: 15px; line-height: 1.8; }
  .story-news .news-shell { width: calc(100% - 40px); padding-top: 22px; }
  .story-news .news-grid { grid-template-columns: 1fr; gap: 24px; }
  .story-news .news-card h2 { font-size: 20px; }
  .story-news.news-detail .news-hero h1 { font-size: 29px; }
  .story-news .news-article > .news-cover { margin-bottom: 32px; }
  .story-news .news-article > .docs-article { padding-top: 28px; }
}
@media (prefers-reduced-motion: reduce) { .story-news .news-card-media > .news-cover { transition: none; } .story-news .news-card:hover .news-card-media > .news-cover { transform: none; } }

/* Admin panel rules. The Markdown body itself is styled by `/docs.css` on every
   surface (public detail, console documentation, both live previews), so no
   Markdown typography lives here any more. */
.news-empty { padding: 50px 0; color: var(--text-muted, #737373); }
.news-admin-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 20px; align-items: start; }
.news-admin-list, .news-editor { padding: 20px; min-width: 0; }
.news-editor { display: grid; gap: 20px; }
.news-admin-item { display: grid; width: 100%; gap: 8px; padding: 16px 4px; text-align: left; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--text); cursor: pointer; overflow-wrap: anywhere; }
.news-admin-item:hover { background: var(--surface-muted); }
.news-admin-item small { color: var(--text-muted); }
.news-cover-zone { padding: 18px; border: 1px dashed var(--line-strong, #d4d4d4); border-radius: 8px; }
.news-cover-zone img { display: block; max-width: 280px; max-height: 160px; margin: 16px 0; object-fit: contain; }
.news-cover-zone img[hidden] { display: none; }
.news-edit-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; min-width: 0; }
.news-edit-columns > * { min-width: 0; }
.news-edit-columns textarea { min-height: 500px; width: 100%; }
.news-edit-columns .docs-preview { margin-top: 14px; }
.news-editor .admin-field { display: grid; gap: 8px; }
.is-dragging { outline: 2px solid var(--accent, #0ea5e9); outline-offset: 2px; }
.news-card:focus-visible, .news-admin-item:focus-visible { outline: 2px solid var(--accent, #0ea5e9); outline-offset: 4px; }
@media (max-width: 1200px) { .news-edit-columns { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .news-admin-layout { grid-template-columns: 1fr; } }
.news-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 20px 0; }
.news-actions > span { color: var(--text-muted, #737373); font-size: 13px; }
.news-actions[hidden] { display: none; }

@media (prefers-reduced-transparency: reduce) {
  .story-news .news-read { background: var(--public-glass-raised); }
}