/* ==========================================================================
   Cyber Dilmeth — Elements (Articles + News)
   On-brand: navy headings, blue interactive; green reserved for Subscribe/Confirm.
   v1.6 — Hacker-News-style article list + News "rail"/"panel" variants.
   ========================================================================== */

.cde{
  --navy:#0B1E3C; --body:#41506B; --muted:#8A93A6;
  --blue:#2463EB; --blue-dark:#1746A0; --blue-tint:#EAF1FE; --blue-tint-2:#DCE7FD;
  --border:#E6EAF1; --border-hover:#B9CDFB; --section-bg:#F4F7FB; --white:#fff;
  --font-display:'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:'Inter', system-ui, sans-serif;
  font-family:var(--font-body); color:var(--body); box-sizing:border-box;
}
.cde *{ box-sizing:border-box; }
.cde button{ font-family:inherit; cursor:pointer; }

/* Header */
.cde-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:18px; flex-wrap:wrap; }
.cde-title{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800; font-size:clamp(19px,2.2vw,25px); color:var(--navy); margin:0; letter-spacing:-0.02em; }
.cde-title .cde-ico{ width:22px; height:22px; color:var(--blue); flex-shrink:0; }
.cde-viewall{ display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:13px; color:var(--blue); background:#fff; border:1.5px solid var(--border); padding:8px 16px; border-radius:999px; text-decoration:none; white-space:nowrap; transition:border-color .18s ease, background .18s ease, transform .18s ease; }
.cde-viewall:hover{ border-color:var(--blue); background:var(--blue-tint); transform:translateY(-1px); }
.cde-empty{ font-size:14px; color:var(--muted); padding:22px 0; }

/* Filters (compact inline dropdowns) */
.cde-filterbar{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom:22px; }
.cde-filter-select-wrap{ position:relative; display:inline-flex; }
.cde-filter-select-wrap::after{ content:""; position:absolute; right:15px; top:50%; width:7px; height:7px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:translateY(-65%) rotate(45deg); pointer-events:none; }
.cde-filter-select{ -webkit-appearance:none; appearance:none; font-family:inherit; font-size:13.5px; font-weight:600; color:var(--navy); background:#fff; border:1.5px solid var(--border); border-radius:10px; padding:10px 40px 10px 16px; cursor:pointer; transition:border-color .16s ease, box-shadow .16s ease; }
.cde-filter-select:hover{ border-color:var(--border-hover); }
.cde-filter-select:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-tint); }

.cde-nomatch{ font-size:14px; color:var(--muted); padding:20px 0; }

/* ==========================================================================
   ARTICLE LIST (Hacker-News style left column)
   ========================================================================== */
.cde-list{ display:flex; flex-direction:column; gap:var(--cde-row-gap,26px); }
.cde-row{ display:flex; gap:24px; align-items:flex-start; }
.cde-row + .cde-row{ border-top:1px solid var(--border); padding-top:var(--cde-row-gap,26px); }
.cde-row.cde-hidden{ display:none; }
.cde-articles.cde-no-dividers .cde-row + .cde-row{ border-top:none; }

/* Thumbnail sizing presets (set on the wrapper) */
.cde-row-thumb-link{ flex:0 0 260px; display:block; text-decoration:none; }
.cde-row-thumb{ display:flex; align-items:center; justify-content:center; width:100%; height:162px; background-size:cover; background-position:center; overflow:hidden; }
/* Thumbnail corners — square (flat, THN-style) by default; rounded optional */
.cde-thumbs-square  .cde-row-thumb{ border-radius:0; box-shadow:none; }
.cde-thumbs-rounded .cde-row-thumb{ border-radius:12px; box-shadow:0 4px 14px rgba(11,30,60,.08); }
.cde-articles.cde-thumb-small  .cde-row-thumb-link{ flex-basis:200px; }
.cde-articles.cde-thumb-small  .cde-row-thumb{ height:126px; }
.cde-articles.cde-thumb-large  .cde-row-thumb-link{ flex-basis:300px; }
.cde-articles.cde-thumb-large  .cde-row-thumb{ height:190px; }
.cde-articles.cde-no-thumb     .cde-row-thumb-link{ display:none; }

.cde-row-thumb .cde-ico{ width:42px; height:42px; color:rgba(255,255,255,.92); }
.cde-row-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:10px; }
.cde-row-title-link{ text-decoration:none; color:inherit; }
.cde-row-title{ display:block; font-family:var(--font-display); font-weight:800; font-size:21px; line-height:1.32; color:var(--navy); letter-spacing:-0.01em; transition:color .16s ease; }
.cde-row-title-link:hover .cde-row-title{ color:var(--blue); }
.cde-row-meta{ display:flex; align-items:center; gap:9px; font-size:13px; color:var(--muted); flex-wrap:wrap; }
.cde-row-meta .cde-ico{ width:14px; height:14px; color:var(--muted); }
.cde-row-terms{ display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; }
.cde-row-term{ color:var(--blue); font-weight:600; text-decoration:none; }
.cde-row-term:hover{ text-decoration:underline; }
.cde-row-sep{ color:var(--muted); }
.cde-row-read{ color:var(--muted); }
.cde-row-excerpt-link{ text-decoration:none; color:inherit; }
.cde-row-excerpt{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:14.5px; line-height:1.6; color:var(--body); }
@media (max-width:560px){
  .cde-row{ flex-direction:column; gap:12px; }
  .cde-row-thumb-link,
  .cde-articles.cde-thumb-small .cde-row-thumb-link,
  .cde-articles.cde-thumb-large .cde-row-thumb-link{ flex-basis:auto; width:100%; }
  .cde-row-thumb{ height:auto; aspect-ratio:16/9; }
  .cde-row + .cde-row{ padding-top:22px; }
  .cde-row-title{ font-size:18px; }
}

/* ==========================================================================
   ARTICLE GRID (cards)
   ========================================================================== */
.cde-grid{ display:grid; gap:20px; }
.cde-cols-1{ grid-template-columns:1fr; }
.cde-cols-2{ grid-template-columns:repeat(2,1fr); }
.cde-cols-3{ grid-template-columns:repeat(3,1fr); }
.cde-cols-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:1000px){ .cde-cols-3,.cde-cols-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .cde-grid{ grid-template-columns:1fr !important; } }

.cde-card{ display:flex; flex-direction:column; background:#fff; border:1.5px solid var(--border); border-radius:18px; overflow:hidden; text-decoration:none; color:inherit; box-shadow:0 6px 20px rgba(11,30,60,.05); transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.cde-card:hover{ border-color:var(--border-hover); box-shadow:0 20px 40px rgba(36,99,235,.14); transform:translateY(-4px); }
.cde-card.cde-hidden{ display:none; }

.cde-thumb{ position:relative; aspect-ratio:16/9; background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center; }
.cde-thumb .cde-ico{ width:44px; height:44px; color:rgba(255,255,255,.92); }
.cde-badge{ position:absolute; top:14px; left:14px; font-size:11px; font-weight:700; letter-spacing:0.04em; color:#fff; background:rgba(11,30,60,.55); backdrop-filter:blur(4px); padding:5px 13px; border-radius:999px; }

.cde-body{ display:flex; flex-direction:column; gap:8px; padding:18px 20px 18px; flex:1; }
.cde-date{ font-size:12px; color:var(--muted); font-weight:500; }
.cde-card-title{ font-family:var(--font-display); font-weight:700; font-size:17px; line-height:1.35; color:var(--navy); margin:0; letter-spacing:-0.01em; }
.cde-excerpt{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; font-size:13.5px; line-height:1.6; color:var(--body); margin:0; }
.cde-card-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top:12px; }
.cde-read{ font-size:12.5px; color:var(--muted); font-weight:500; }
.cde-arrow{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:var(--blue-tint); color:var(--blue); border:1px solid var(--blue-tint-2); font-size:15px; font-weight:700; transition:background .18s ease, color .18s ease; }
.cde-card:hover .cde-arrow{ background:var(--blue); color:#fff; }

/* Footer view-all */
.cde-foot{ display:flex; justify-content:center; margin-top:24px; }
.cde-viewall-btn{ padding:11px 24px; font-size:14px; }

/* ==========================================================================
   NEWS — shared
   ========================================================================== */
.cde-news .cde-title .cde-ico{ color:var(--blue); }
.cde-newslist{ list-style:none; margin:0; padding:0; }
.cde-news-item > a{ display:flex; gap:14px; align-items:flex-start; text-decoration:none; color:inherit; }
.cde-news-thumb{ flex-shrink:0; background-size:cover; background-position:center; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.cde-news.cde-thumbs-square  .cde-news-thumb{ border-radius:0; }
.cde-news.cde-thumbs-rounded .cde-news-thumb{ border-radius:10px; }
.cde-news-thumb .cde-ico{ width:24px; height:24px; color:#fff; }
.cde-news-body{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.cde-news-meta{ font-size:11.5px; font-weight:600; color:var(--muted); }
.cde-news-cat{ color:var(--blue); letter-spacing:0.04em; text-transform:uppercase; }
.cde-news-sep{ color:var(--border-hover); }
.cde-news-title{ font-family:var(--font-display); font-weight:700; line-height:1.4; color:var(--navy); transition:color .16s ease; }
.cde-news-item > a:hover .cde-news-title{ color:var(--blue); }
.cde-news-excerpt{ font-size:13px; line-height:1.5; color:var(--body); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* Optional leading number */
.cde-news-num{ flex-shrink:0; font-family:var(--font-display); font-weight:800; font-size:15px; line-height:1.4; color:var(--muted); min-width:20px; text-align:center; }

/* ---- Variant: RAIL (borderless Top-Stories, Hacker-News right column) ---- */
.cde-news--rail .cde-newslist{ }
.cde-news--rail .cde-news-item > a{ padding:var(--cde-item-gap,13px) 0; }
.cde-news--rail .cde-news-item + .cde-news-item{ border-top:1px solid var(--border); }
.cde-news--rail.cde-no-dividers .cde-news-item + .cde-news-item{ border-top:none; }
.cde-news--rail .cde-news-thumb{ width:58px; height:58px; }
.cde-news--rail .cde-news-title{ font-size:15px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* ---- Variant: PANEL (boxed white card) ---- */
.cde-news--panel{ background:#fff; border:1.5px solid var(--border); border-radius:20px; padding:22px 24px; box-shadow:0 10px 30px rgba(11,30,60,.06); }
.cde-news--panel .cde-news-item{ border-top:1px solid var(--border); }
.cde-news--panel .cde-news-item:first-child{ border-top:none; }
.cde-news--panel.cde-no-dividers .cde-news-item{ border-top:none; }
.cde-news--panel .cde-news-item > a{ padding:var(--cde-item-gap,15px) 0; }
.cde-news--panel .cde-news-thumb{ width:62px; height:62px; }
.cde-news--panel .cde-news-title{ font-size:15px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.cde-news--panel .cde-head{ margin-bottom:8px; }
.cde-news--panel .cde-foot{ margin-top:16px; }

.cde-news .cde-foot{ margin-top:16px; }

/* Gradient tiles / news icons (no reserved green) */
.cde-grad-0{ background-image:linear-gradient(135deg,#2463EB,#1746A0); }
.cde-grad-1{ background-image:linear-gradient(135deg,#6D28D9,#4338CA); }
.cde-grad-2{ background-image:linear-gradient(135deg,#0E7490,#0EA5B7); }
.cde-grad-3{ background-image:linear-gradient(135deg,#4F46E5,#7C3AED); }
.cde-grad-4{ background-image:linear-gradient(135deg,#1D4ED8,#3B82F6); }
.cde-grad-5{ background-image:linear-gradient(135deg,#334155,#0B1E3C); }

@media (prefers-reduced-motion: reduce){
  .cde-card,.cde-row,.cde-viewall,.cde-arrow,.cde-filter-select,.cde-news-title{ transition:none; }
}