/* ============================================================
   news.css — /news listing + single news post, in the home v2
   design language. Loaded right after home-v2.css, so it shares
   all :root tokens (--accent, --ink, --line, --surface, --r, etc.).
   ============================================================ */

/* ---- breadcrumbs ---- */
.news-crumbs { display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:13px; color:var(--ink-3); padding:20px 0 2px; }
.news-crumbs a { color:var(--ink-3); text-decoration:none; transition:color .2s var(--ease); }
.news-crumbs a:hover { color:var(--accent); }
.news-crumbs .sep { color:var(--ink-4); }

/* ---- section + head ---- */
.news-section { padding: 6px 0 var(--sec-y); }
.news-head { margin: 16px 0 calc(var(--gap) * 1.25); }

/* ---- featured (newest) ---- */
.news-feat { display:grid; grid-template-columns:1fr; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-1); margin-bottom:calc(var(--gap) * 1.5); text-decoration:none; color:inherit; transition:box-shadow .35s var(--ease), transform .35s var(--ease); }
.news-feat:hover { box-shadow:var(--shadow-2); transform:translateY(-2px); }
.nf-media { position:relative; aspect-ratio:16/9; background:var(--surface-2); overflow:hidden; }
.nf-media img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--ease); }
.news-feat:hover .nf-media img { transform:scale(1.03); }
.nf-ph { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--ink-4); font-size:13px; letter-spacing:.04em; }
.nf-body { padding:26px 24px 28px; display:flex; flex-direction:column; gap:13px; }
.nf-meta { display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-size:12.5px; color:var(--ink-3); }
.nf-tag { display:inline-flex; align-items:center; height:23px; padding:0 10px; border-radius:999px; background:var(--accent-tint); color:var(--accent-d); font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.nf-title { font-family:var(--font-display); font-size:clamp(21px,2.7vw,29px); font-weight:800; line-height:1.16; letter-spacing:-.02em; margin:0; color:var(--ink); }
.nf-excerpt { color:var(--ink-2); font-size:15.5px; line-height:1.62; margin:0; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.nf-more { display:inline-flex; align-items:center; gap:8px; margin-top:6px; font-size:14px; font-weight:700; color:var(--accent); }
.nf-more svg { width:16px; height:16px; transition:transform .25s var(--ease); }
.news-feat:hover .nf-more svg { transform:translateX(4px); }

@media (min-width:880px){
  .news-feat { grid-template-columns:1.12fr 1fr; }
  .nf-media { aspect-ratio:auto; min-height:360px; height:100%; }
  .nf-body { padding:42px; justify-content:center; }
}

/* ---- grid of cards ---- */
.news-grid { display:grid; grid-template-columns:1fr; gap:var(--gap); }
@media (min-width:560px){ .news-grid { grid-template-columns:repeat(2,1fr); } }
@media (min-width:980px){ .news-grid { grid-template-columns:repeat(3,1fr); } }

.news-card { display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-1); text-decoration:none; color:inherit; transition:box-shadow .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease); }
.news-card:hover { box-shadow:var(--shadow-2); transform:translateY(-3px); border-color:color-mix(in srgb, var(--accent) 28%, var(--line)); }
.nc-media { position:relative; aspect-ratio:16/10; background:var(--surface-2); overflow:hidden; }
.nc-media img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--ease); }
.news-card:hover .nc-media img { transform:scale(1.04); }
.nc-ph { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--ink-4); font-size:12.5px; letter-spacing:.04em; }
.nc-body { padding:17px 18px 19px; display:flex; flex-direction:column; gap:9px; flex:1; }
.nc-date { font-size:12px; color:var(--ink-3); letter-spacing:.02em; }
.nc-title { font-size:16px; font-weight:700; line-height:1.32; letter-spacing:-.01em; margin:0; color:var(--ink); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.nc-excerpt { font-size:13.5px; line-height:1.55; color:var(--ink-2); margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.nc-more { margin-top:auto; padding-top:5px; display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--accent); }
.nc-more svg { width:14px; height:14px; transition:transform .25s var(--ease); }
.news-card:hover .nc-more svg { transform:translateX(3px); }

/* ---- empty / pagination ---- */
.news-empty { text-align:center; color:var(--ink-3); padding:80px 0; font-size:15px; }
.news-pag { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin-top:calc(var(--gap) * 1.6); }
.news-pag a, .news-pag span { min-width:42px; height:42px; padding:0 14px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface); color:var(--ink); font-size:14px; font-weight:600; text-decoration:none; transition:all .2s var(--ease); }
.news-pag a:hover { border-color:var(--accent); color:var(--accent); }
.news-pag .cur { background:var(--ink); color:#fff; border-color:var(--ink); }

/* ============================================================
   single post
   ============================================================ */
.article { max-width:840px; margin:0 auto; padding:4px 0 calc(var(--sec-y) * .7); }
.art-back { display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:600; color:var(--ink-2); text-decoration:none; margin:18px 0 22px; transition:color .2s var(--ease); }
.art-back:hover { color:var(--accent); }
.art-back svg { width:16px; height:16px; }
.art-head { margin:0 0 26px; }
.art-meta { display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-size:13px; color:var(--ink-3); margin-bottom:16px; }
.art-title { font-family:var(--font-display); font-size:clamp(27px,4.2vw,44px); font-weight:800; line-height:1.1; letter-spacing:-.025em; margin:0 0 14px; color:var(--ink); }
.art-lead { font-size:18px; line-height:1.55; color:var(--ink-2); margin:0; }
.art-cover { width:100%; aspect-ratio:16/9; border-radius:var(--r-lg); overflow:hidden; margin:4px 0 32px; background:var(--surface-2); }
.art-cover img { width:100%; height:100%; object-fit:cover; display:block; }

/* prose */
.prose { font-size:17px; line-height:1.72; color:var(--ink); overflow-wrap:anywhere; }
.prose > * + * { margin-top:1.05em; }
.prose h2 { font-family:var(--font-display); font-size:1.55em; font-weight:800; line-height:1.2; letter-spacing:-.02em; margin:1.7em 0 .35em; }
.prose h3 { font-size:1.25em; font-weight:700; margin:1.4em 0 .3em; }
.prose h4 { font-size:1.1em; font-weight:700; margin:1.3em 0 .3em; }
.prose p { margin:0; }
.prose a { color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
.prose strong { font-weight:700; }
.prose ul, .prose ol { padding-left:1.4em; }
.prose li { margin:.4em 0; }
.prose li::marker { color:var(--accent); }
.prose img { max-width:100%; height:auto; border-radius:var(--r); margin:1.4em 0; display:block; }
.prose figure { margin:1.4em 0; }
.prose figcaption { font-size:13px; color:var(--ink-3); text-align:center; margin-top:8px; }
.prose blockquote { border-left:3px solid var(--accent); padding:4px 0 4px 20px; margin:1.4em 0; color:var(--ink-2); }
.prose table { width:100%; border-collapse:collapse; font-size:.95em; margin:1.2em 0; }
.prose th, .prose td { border:1px solid var(--line); padding:10px 12px; text-align:left; vertical-align:top; }
.prose th { background:var(--surface-2); font-weight:700; }
.prose hr { border:0; border-top:1px solid var(--line); margin:1.8em 0; }

/* related */
.art-related { border-top:1px solid var(--line); margin-top:44px; padding-top:34px; }
.art-related h2 { font-family:var(--font-display); font-size:22px; font-weight:800; letter-spacing:-.02em; margin:0 0 20px; color:var(--ink); }
.art-related .nc-title { -webkit-line-clamp:2; }