/* ===== Phase 6 News specific CSS ===== */
.feat{display:grid;grid-template-columns:1.3fr 1fr;gap:0;border:1px solid var(--line);background:var(--bg-2);overflow:hidden;margin-bottom:48px}
.feat .pic{position:relative;overflow:hidden;min-height:360px}
.feat .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:.4s}
.feat:hover .pic img{transform:scale(1.04)}
.feat .pic .tag{position:absolute;top:0;left:0;background:var(--accent);color:#160a00;font-weight:700;font-size:12px;letter-spacing:.06em;padding:8px 16px;text-transform:uppercase;clip-path:polygon(0 0,100% 0,calc(100% - 14px) 100%,0 100%)}
.feat .body{padding:40px;display:flex;flex-direction:column;justify-content:center}
.feat .meta{display:flex;gap:12px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:14px;font-weight:500}
.feat .meta .d{color:var(--muted)}
.feat h2{font-size:clamp(24px,2.6vw,34px);font-weight:700;line-height:1.2;text-transform:none;margin-bottom:16px}
.feat p{color:var(--muted);font-size:16px;margin-bottom:24px}

.filterbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:36px}
.pill{padding:9px 20px;border:1px solid var(--line);background:var(--bg-2);font-size:13.5px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);cursor:pointer;transition:.2s}
.pill:hover{border-color:var(--accent);color:var(--accent)}
.pill.on{background:var(--accent);border-color:var(--accent);color:#160a00}

.bloggrid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.post{border-bottom:1px solid var(--line);border-right:1px solid var(--line);transition:.25s;background:var(--bg-2)}
.post:hover{background:#f7f9fc}
.post .pic{height:200px;overflow:hidden}
.post .pic img{width:100%;height:100%;object-fit:cover;transition:.4s}
.post:hover .pic img{transform:scale(1.05)}
.post .body{padding:24px}
.post .meta{display:flex;gap:12px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:12px;font-weight:500}
.post .meta .d{color:var(--muted)}
.post h3{font-size:20px;font-weight:700;line-height:1.25;margin-bottom:14px;text-transform:none}
.post .rm{font-size:14px;letter-spacing:.05em;text-transform:uppercase;color:var(--steel);font-weight:500}
.post:hover .rm{color:var(--accent)}
.post.hide{display:none}

.empty{display:none;text-align:center;padding:60px 20px;color:var(--muted)}
.empty.show{display:block}
.empty .e-ic{font-size:48px;margin-bottom:14px}

/* Detail page additions */
.arthead{background:var(--bg-2);border-bottom:1px solid var(--line)}
.arthead .wrap{padding:40px 28px 36px;max-width:860px}
.arthead .cat{display:inline-block;background:var(--accent);color:#160a00;font-weight:700;font-size:12px;letter-spacing:.05em;padding:6px 14px;text-transform:uppercase;margin-bottom:16px}
.arthead h1{font-size:clamp(28px,4vw,46px);font-weight:900;text-transform:none;line-height:1.18;margin-bottom:20px}
.artmeta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:14px;color:var(--muted)}
.artmeta .av{width:42px;height:42px;border-radius:50%;background:var(--steel);color:#fff;display:grid;place-items:center;font-weight:700}
.artmeta b{color:var(--text);font-weight:500}
.artmeta .dot{width:4px;height:4px;border-radius:50%;background:#c4cedb}

.artlayout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:48px;align-items:start;max-width:1180px;margin:0 auto}
.cover{margin-bottom:30px}
.cover img{width:100%;max-height:480px;object-fit:cover;border:1px solid var(--line)}
.cover figcaption{font-size:13px;color:var(--muted);margin-top:8px;text-align:center;font-style:italic}
.artbody{font-size:17px;color:#28384a}
.artbody p{margin-bottom:18px}
.artbody h2{font-size:25px;text-transform:none;margin:30px 0 14px;color:var(--text)}
.artbody h3{font-size:20px;text-transform:none;margin:24px 0 12px;color:var(--text)}
.artbody ul,.artbody ol{margin:0 0 18px 22px}
.artbody li{margin-bottom:8px}
.artbody figure{margin:26px 0}
.artbody figure img{width:100%;max-height:460px;object-fit:cover;border:1px solid var(--line)}
.artbody figcaption{font-size:13px;color:var(--muted);margin-top:8px;text-align:center;font-style:italic}
.artbody blockquote{border-left:4px solid var(--accent);background:var(--bg-2);padding:18px 24px;margin:24px 0;font-size:18px;color:var(--text)}
.artbody a.inline{color:var(--steel);text-decoration:underline}
.artbody a.inline:hover{color:var(--accent)}

.artfoot{margin-top:36px;padding-top:26px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
.tags{display:flex;gap:8px;flex-wrap:wrap}
.tags a{font-size:12.5px;color:var(--muted);border:1px solid var(--line);padding:6px 12px;border-radius:20px;transition:.2s}
.tags a:hover{border-color:var(--accent);color:var(--accent)}
.share{display:flex;align-items:center;gap:10px}
.share span{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:500}
.share a,.share button{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line);background:var(--bg-2);color:var(--muted);cursor:pointer;font-weight:700;font-size:14px;transition:.2s}
.share a:hover,.share button:hover{border-color:var(--accent);color:var(--accent)}

.authorbox{margin-top:30px;display:flex;gap:18px;align-items:flex-start;background:var(--bg-2);border:1px solid var(--line);padding:24px}
.authorbox .av{width:60px;height:60px;border-radius:50%;background:var(--steel);color:#fff;display:grid;place-items:center;font-weight:700;font-size:20px;flex-shrink:0}
.authorbox b{display:block;font-size:16px;text-transform:none;margin-bottom:4px}
.authorbox p{font-size:14px;color:var(--muted)}

.artside{position:sticky;top:100px;display:grid;gap:22px}
.sidebox{background:var(--bg-2);border:1px solid var(--line);padding:24px}
.sidebox h3{font-size:15px;letter-spacing:.05em;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.mini{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.mini:last-child{border-bottom:0;padding-bottom:0}
.mini img{width:78px;height:60px;object-fit:cover;flex-shrink:0;border:1px solid var(--line)}
.mini .mb b{display:block;font-size:14px;font-weight:500;line-height:1.3;text-transform:none;color:var(--text);transition:.2s}
.mini:hover .mb b{color:var(--accent)}
.mini .mb span{font-size:12px;color:var(--muted)}
.sidebox.cta{border-top:3px solid var(--accent)}
.sidebox.cta p{font-size:14px;color:var(--muted);margin-bottom:16px}
.sidebox.cta .btn{width:100%;justify-content:center}

.related .bloggrid { grid-template-columns: repeat(3,1fr); gap: 20px; border-top: 0; border-left: 0; }
.related .post { background: var(--panel); border: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column; }
.related .post:hover { background: var(--panel); border-color: var(--accent); box-shadow: 0 18px 44px rgba(16,42,80,.12); }
.related .post .pic { height: 180px; }
.related .post:hover .pic img { transform: scale(1.06); }
.related .post .body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.related .post .meta { gap: 10px; letter-spacing: .05em; }
.related .post h3 { font-size: 17px; line-height: 1.3; }
.related .post .rm { font-size: 13px; margin-top: auto; }

@media(max-width:960px){
  .feat{grid-template-columns:1fr}.feat .pic{min-height:240px}
  .bloggrid{grid-template-columns:1fr 1fr}
  .artlayout{grid-template-columns:1fr;gap:36px}
  .artside{position:static}
}
@media(max-width:576px){
  .bloggrid{grid-template-columns:1fr}
  .feat .body{padding:26px}
  .artfoot{flex-direction:column;align-items:flex-start}
}