/* News (最新消息): the list and the posts, on the static pages (news/) and the app (#page=news) */

.n-index, .n-post, .news-page { --n-radius: 16px; }
.n-index img, .n-post img, .news-page img { display: block; max-width: 100%; height: auto; }

/* List: the newest post large, the rest in a grid */
.n-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 18px 0 28px; }
.n-item {
  display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; align-items: start; padding: 16px;
  border-radius: var(--n-radius); background: var(--surface); border: 1px solid var(--border); color: var(--text); text-decoration: none;
  transition: transform .15s, border-color .15s;
}
.n-item:hover { transform: translateY(-2px); border-color: var(--accent); }
.n-item img { width: 110px; border-radius: 8px; box-shadow: 0 8px 20px #0003; }
.n-item span { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.n-item time { color: var(--muted); font-size: 13px; }
.n-item b { font-size: 18px; line-height: 1.35; }
.n-item small { color: var(--muted); font-size: 14px; line-height: 1.6; }
.n-item em { color: var(--accent); font-style: normal; font-size: 14px; font-weight: 600; }
.n-item.big {
  grid-column: 1 / -1; grid-template-columns: 200px minmax(0, 1fr); padding: 24px; color: #fff; border: 0;
  background: radial-gradient(circle at 85% 20%, #7c4d9f 0, transparent 55%), linear-gradient(135deg, #1b1530, #3a2766 70%, #4b2f7d);
}
.n-item.big img { width: 200px; transform: rotate(-4deg); box-shadow: 0 16px 34px #0007; }
.n-item.big b { font-size: clamp(22px, 2.6vw, 30px); }
.n-item.big time, .n-item.big small { color: #e1dbf1; }
.n-item.big em { color: #d9c8ff; }

/* Post */
.n-post { max-width: 760px; margin: 0 auto; }
.n-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; color: var(--muted); font-size: 14px; }
.n-tag { padding: 1px 10px; border-radius: 999px; background: var(--surface-2); color: var(--text); font-size: 12px; font-weight: 600; }
.n-post h1 { margin: 0 0 12px; font-size: clamp(26px, 3.4vw, 36px); line-height: 1.25; }
.n-lead { font-size: 18px; line-height: 1.7; color: var(--muted); }
.n-body { font-size: 17px; line-height: 1.85; }
.n-body h2 { margin: 36px 0 10px; font-size: 24px; }
.n-body h3 { margin: 26px 0 8px; font-size: 19px; }
.n-body p, .n-body ul, .n-body ol { margin: 0 0 14px; }
.n-body li { margin: 4px 0; }
.n-body a:not([class]) { color: var(--accent); }

/* A card box */
.n-card {
  display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 20px; margin: 22px 0; padding: 18px;
  border-radius: var(--n-radius); background: var(--surface); border: 1px solid var(--border);
}
.n-cardpic { display: block; }
.n-cardpic img { width: 100%; border-radius: 10px; box-shadow: 0 10px 24px #0004; transition: transform .15s; }
.n-cardpic:hover img { transform: translateY(-3px); }
.n-card figcaption { min-width: 0; font-size: 15px; line-height: 1.7; }
.n-card-name { margin: 0 !important; }
.n-card-name b { font-size: 20px; }
.n-card-name small { display: block; color: var(--muted); font-size: 14px; }
.n-card-meta { margin: 4px 0 10px !important; color: var(--muted); font-size: 13px; }
.n-card-text { padding: 10px 14px; border-radius: 10px; background: var(--surface-2); }
.n-card-text p { margin: 0 0 6px; }
.n-card-text p:last-child { margin: 0; }
.n-card-text .ic { display: inline-block; padding: 0 5px; border-radius: 5px; background: var(--surface); font-size: .85em; white-space: nowrap; width: auto; height: auto; }
.n-card-text .reminder { color: var(--muted); }
.n-card-link { display: inline-block; margin-top: 10px; color: var(--accent); font-weight: 600; text-decoration: none; }

/* A row of cards */
.n-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; margin: 16px 0 22px; }
.n-cards p { margin: 6px 0 0 !important; font-size: 12px; line-height: 1.4; color: var(--muted); text-align: center; }

/* A set link box */
.n-set {
  display: flex; align-items: center; gap: 16px; margin: 16px 0 22px; padding: 14px; border-radius: var(--n-radius);
  background: var(--surface); border: 1px solid var(--border); color: var(--text); text-decoration: none;
}
.n-set:hover { border-color: var(--accent); }
.n-set img { width: 150px; border-radius: 8px; }
.n-set b { display: block; font-size: 17px; }
.n-set small { color: var(--accent); font-size: 14px; }

/* Share buttons under the title, each with its icon on the left */
.n-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 18px; }
.n-share a, .n-share button {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font: inherit; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer;
}
.n-share [hidden] { display: none; }
.n-share svg { width: 17px; height: 17px; flex: none; }
.n-share a:hover, .n-share button:hover { border-color: var(--accent); color: var(--accent); }
.n-share a[href*="wa.me"] svg { color: #25d366; }
.n-share a[href*="facebook"] svg { color: #1877f2; }
.n-share .n-copied { color: #16a34a; font-size: 14px; }
.n-app { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 26px; }
.n-back { display: inline-block; margin-bottom: 14px; padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; }

@media (max-width: 720px) {
  .n-list { grid-template-columns: minmax(0, 1fr); }
  .n-item { grid-template-columns: 84px minmax(0, 1fr); }
  .n-item img { width: 84px; }
  .n-item.big { grid-template-columns: 110px minmax(0, 1fr); padding: 18px; }
  .n-item.big img { width: 110px; }
  .n-card { grid-template-columns: 110px minmax(0, 1fr); gap: 14px; padding: 14px; }
  .n-body { font-size: 16px; }
  .n-set img { width: 110px; }
}

/* A picture in a post */
.n-figure { margin: 18px 0 22px; text-align: center; }
.n-figure img { display: inline-block; width: min(320px, 100%); border-radius: 14px; box-shadow: 0 12px 28px #0004; }
.n-figure figcaption { margin-top: 8px; color: var(--muted); font-size: 14px; }

/* Copyright notice at the end of a post */
.n-copyright { margin: 34px 0 0 !important; padding-top: 16px; border-top: 1px solid var(--border); color: var(--muted); font-size: 13px; line-height: 1.7; }