/* static/dash/nonfinytnews.css
   NON-FINANCE YTNEWS — TIMELINE ONLY (CLEAN / 90°)

   Scope:
   ✅ ONLY content cards generated by:
      - core/renderers/nonfinytnews.py
      - _ytnews_card_from_entry() in public_shell.py

   HARD RULE:
   ✅ DO NOT style top navigation (top-chessboard / nonfin-switch buttons)
   ✅ NO :root edits here (TreeSelector.css owns shell tokens)
*/

/* ─────────────────────────────────────────────
   WRAPPER
────────────────────────────────────────────── */

.nonfin-yt-timeline{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding:4px 2px;
  align-items:stretch;
  box-sizing:border-box;

  /* safety */
  word-break:break-word;
  overflow-wrap:anywhere;
  white-space:normal;
}

/* ─────────────────────────────────────────────
   CARD (3 columns)
────────────────────────────────────────────── */

.press-timeline .nonfin-yt-card,
.nonfin-yt-timeline .nonfin-yt-card{
  flex:0 0 calc(33.333% - 7px);
  max-width:calc(33.333% - 7px);
  box-sizing:border-box;

  background:#000000;
  border:1px solid rgba(255,255,255,0.22);
  border-radius:0;

  padding:12px 14px;
  color:var(--text,#e5e7eb);
  font-size:13px;
  line-height:1.5;

  display:flex;
  flex-direction:column;
  gap:8px;

  /* safety */
  word-break:break-word;
  overflow-wrap:anywhere;
  white-space:normal;
}

@media (max-width: 1100px){
  .press-timeline .nonfin-yt-card,
  .nonfin-yt-timeline .nonfin-yt-card{
    flex:0 0 calc(50% - 6px);
    max-width:calc(50% - 6px);
  }
}

@media (max-width: 900px){
  .press-timeline .nonfin-yt-card,
  .nonfin-yt-timeline .nonfin-yt-card{
    flex:0 0 100%;
    max-width:100%;
  }
}

/* ─────────────────────────────────────────────
   DATE / HEADER
────────────────────────────────────────────── */

.nonfin-yt-date-header{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.10em;
  color:var(--text-dim,#cbd5e1);
}

/* ─────────────────────────────────────────────
   LEAD + BULLETS
────────────────────────────────────────────── */

.nonfin-yt-lead{
  font-size:16px;
  line-height:1.6;
  font-weight:500;
  margin:4px 0 6px 0;
}

.nonfin-yt-bullets{
  margin:0 0 8px 0;
  padding-left:18px;
  font-size:13px;
}

.nonfin-yt-bullets li{
  margin-bottom:3px;
}

/* ─────────────────────────────────────────────
   VIDEOS ROW
────────────────────────────────────────────── */

.nonfin-yt-videos-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:4px;
}

/* one video block inside a news card */
.nonfin-yt-video-card{
  flex:1 1 260px;
  background:transparent;
  border:none;
  border-radius:0;
  padding:0;
  box-sizing:border-box;

  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;

  word-break:break-word;
  overflow-wrap:anywhere;
  white-space:normal;
}

/* SOURCE pills */
.nonfin-yt-video-source-label,
.nonfin-yt-video-source{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:2px 8px;
  margin-right:4px;
  margin-bottom:2px;

  border-radius:999px;
  border:1px solid rgba(148,163,184,0.6);
  background:#000;

  font-size:10px;
  text-transform:uppercase;
  letter-spacing:0.12em;
  white-space:nowrap;
}

.nonfin-yt-video-source-label{
  color:rgba(148,163,184,0.95);
}
.nonfin-yt-video-source{
  font-weight:600;
  color:var(--text,#e5e7eb);
}

/* Thumbnail */
.nonfin-yt-thumb-link{
  display:block;
  margin:4px auto;
  text-align:center;
}

.nonfin-yt-thumb-img{
  max-width:100%;
  width:140px;
  height:auto;
  object-fit:cover;
  border-radius:0;
  border:1px solid rgba(148,163,184,0.5);
  display:block;
  margin:0 auto;
}

/* Title under thumbnail */
.nonfin-yt-video-title{
  display:block;
  margin-top:4px;
  padding:4px 6px;
  background:#000;
  border:1px solid rgba(255,255,255,0.22);
  border-radius:0;

  font-size:12px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:0.06em;

  color:var(--text,#e5e7eb);
  text-decoration:none;

  word-break:break-word;
  overflow-wrap:anywhere;
  white-space:normal;
}

.nonfin-yt-video-title:hover{
  text-decoration:underline;
}

/* ─────────────────────────────────────────────
   BACKWARD COMPAT (old classes)
────────────────────────────────────────────── */

.nonfin-yt-thumb-block{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  margin-top:4px;

  background:transparent;
  border:none;
  border-radius:0;
  padding:0;
  box-sizing:border-box;

  word-break:break-word;
  overflow-wrap:anywhere;
  white-space:normal;
}

.nonfin-yt-thumb-label,
.nonfin-yt-thumb-source{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:2px 8px;
  margin-right:4px;
  margin-bottom:2px;

  border-radius:999px;
  border:1px solid rgba(148,163,184,0.6);
  background:#000;

  font-size:10px;
  text-transform:uppercase;
  letter-spacing:0.12em;
  white-space:nowrap;
}

.nonfin-yt-thumb-label{ color:rgba(148,163,184,0.95); }
.nonfin-yt-thumb-source{
  font-weight:600;
  color:var(--text,#e5e7eb);
}

.nonfin-yt-title{
  display:block;
  margin-top:4px;
  padding:4px 6px;
  background:#000;
  border:1px solid rgba(255,255,255,0.22);
  border-radius:0;

  font-size:12px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:0.06em;

  color:var(--text,#e5e7eb);
  text-decoration:none;

  word-break:break-word;
  overflow-wrap:anywhere;
  white-space:normal;
}

.nonfin-yt-title:hover{
  text-decoration:underline;
}

/* ─────────────────────────────────────────────
   SAFETY: ensure no accidental topbar styling
────────────────────────────────────────────── */

/* Intentionally empty: do NOT add .top-chessboard rules here. */