/* ============================================================
   BozCode — News section (TechRadar / TechPlanet card grid)
   Adapted from a provided template: scoped under .news-block so
   these custom properties don't leak into the rest of the site.
   ============================================================ */
.news-block {
    --bg:         #e7eef7;
    --surface:    #ffffff;
    --surface-2:  #eef3fb;
    --border:     #dbe3ef;
    --text:       #10151f;
    --text-soft:  #5a6577;
    --text-faint: #9aa4b5;
    --brand:      #2b8cff;
    --brand-2:    #1f6feb;
    --ring:       rgba(43,140,255,.35);
    --shadow-sm:  0 1px 2px rgba(16,21,31,.06), 0 1px 3px rgba(16,21,31,.08);
    --shadow-md:  0 6px 20px rgba(16,21,31,.10);
    --shadow-lg:  0 18px 50px rgba(16,21,31,.16);
    --radius:     16px;
    --radius-sm:  10px;
    --mono: ui-monospace,"SF Mono","JetBrains Mono","Fira Code",Menlo,monospace;
}

.news-block { max-width: 1180px; margin: 0 auto; padding: 40px 22px 70px; }
.news-block *, .news-block *::before, .news-block *::after { box-sizing: border-box; }
.news-block a { color: inherit; text-decoration: none; }

.news-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:8px; }
.news-title { font-size:26px; font-weight:800; letter-spacing:-.6px; display:flex; align-items:center; gap:11px; margin:0; color: var(--text); }
.live-dot { width:9px; height:9px; border-radius:50%; background:#22c55e; animation:news-pulse 2s infinite; }
@keyframes news-pulse { 0%{box-shadow:0 0 0 0 rgba(34,197,94,.5)} 70%{box-shadow:0 0 0 8px rgba(34,197,94,0)} 100%{box-shadow:0 0 0 0 rgba(34,197,94,0)} }
.news-tools { display:flex; align-items:center; gap:10px; }
.news-sub { color:var(--text-faint); font-size:13.5px; font-family:var(--mono); }

.news-filters { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:22px 0 26px; }
.news-chip { display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-size:13.5px; font-weight:600; color:var(--text-soft); background:var(--surface); border:1px solid var(--border); padding:8px 14px; border-radius:999px; transition:all .18s; }
.news-chip:hover { color:var(--text); border-color:var(--brand); }
.news-chip .swatch { width:8px; height:8px; border-radius:50%; }
.news-chip .count { font-family:var(--mono); font-size:11.5px; color:var(--text-faint); }
.news-chip.active { color:#fff; background:linear-gradient(135deg,var(--brand),var(--brand-2)); border-color:transparent; }
.news-chip.active .count { color:rgba(255,255,255,.85); }

/* Per-source accent color. CSP blocks inline style="" attributes (even ones
   injected via innerHTML), so cards get colored via a data-src attribute
   selector instead of an inline --accent custom property. */
.news-chip[data-src="techradar"] .swatch  { background:#e01f26; }
.news-chip[data-src="techplanet"] .swatch { background:#1fb6a8; }
.news-card[data-src="techradar"]  { --accent:#e01f26; }
.news-card[data-src="techplanet"] { --accent:#1fb6a8; }

.news-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.news-card { display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:20px; position:relative; overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .2s,box-shadow .25s,border-color .2s; animation:news-rise .4s ease both; }
@keyframes news-rise { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
.news-card::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent,var(--brand)); opacity:0; transition:opacity .2s; }
.news-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--accent,var(--brand)); }
.news-card:hover::before { opacity:1; }
.news-card.featured { grid-column:span 2; grid-row:span 2; justify-content:space-between; padding:26px; }
.news-card.featured .news-headline { font-size:24px; line-height:1.25; }
.news-card.featured .news-thumb { height:190px; }
.news-thumb { height:128px; border-radius:var(--radius-sm); margin-bottom:15px; background:linear-gradient(135deg,var(--accent,var(--brand)),#1a2540); position:relative; overflow:hidden; display:grid; place-items:center; border:1px solid rgba(0,0,0,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.25); }
.news-thumb::after { content:""; position:absolute; inset:0; background:radial-gradient(120% 80% at 80% -10%,rgba(255,255,255,.28),transparent 60%); }
.news-thumb .glyph { font-family:var(--mono); font-weight:700; color:rgba(255,255,255,.92); font-size:15px; letter-spacing:.5px; z-index:1; }
.news-thumb picture { position:absolute; inset:0; display:block; background:#211771; }
.news-thumb-img { width:100%; height:100%; object-fit:cover; display:block; }
.news-card-top { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.news-badge { display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.3px; text-transform:uppercase; color:var(--accent,var(--brand)); background:rgba(43,140,255,.12); padding:4px 9px; border-radius:999px; }
.news-badge .swatch { width:7px; height:7px; border-radius:50%; background:var(--accent,var(--brand)); }
.news-time { margin-left:auto; font-size:12px; color:var(--text-faint); font-family:var(--mono); white-space:nowrap; }
.news-headline { font-size:16px; font-weight:700; line-height:1.35; letter-spacing:-.2px; margin-bottom:12px; color:var(--text); }
.news-card:hover .news-headline { color:var(--accent,var(--brand)); }
.news-card-foot { margin-top:auto; display:flex; align-items:center; justify-content:space-between; padding-top:12px; }
.news-read { font-size:12.5px; font-weight:600; color:var(--text-faint); display:inline-flex; align-items:center; gap:6px; transition:gap .2s,color .2s; }
.news-card:hover .news-read { color:var(--accent,var(--brand)); gap:10px; }
.news-empty { text-align:center; color:var(--text-faint); padding:60px 0; font-family:var(--mono); font-size:14px; grid-column:1/-1; }
.news-more-row { display:flex; justify-content:center; margin-top:30px; }
.news-load-more { font-family:var(--mono); font-size:13.5px; font-weight:600; color:var(--text-soft); background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:11px 24px; cursor:pointer; transition:all .18s; }
.news-load-more:hover { color:var(--text); border-color:var(--brand); box-shadow:var(--shadow-sm); transform:translateY(-1px); }

@media (max-width:900px){ .news-grid{grid-template-columns:repeat(2,1fr)} .news-card.featured{grid-column:span 2;grid-row:auto} .news-card.featured .news-thumb{height:150px} }
@media (max-width:640px){ .news-grid{grid-template-columns:1fr} .news-card.featured{grid-column:span 1} .news-title{font-size:22px} }