/* ============================================================
   RANKED — Breaking News Page
   breaking-page.css
   ============================================================ */

/* ── PAGE LAYOUT ──────────────────────────────────────────── */
.breaking-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 24px 80px;
}

/* ── LAST UPDATED BAR ─────────────────────────────────────── */
.breaking-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 32px;
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--text-muted);
}

.breaking-topbar .live-pill {
  background: #e63946;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 3px 8px;
  border-radius: 3px;
  text-transform: uppercase;
  animation: pulse-bg 2s infinite;
}

@keyframes pulse-bg {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.breaking-topbar .topbar-sep {
  color: var(--border);
}

.breaking-topbar .topbar-updated {
  color: var(--text-dim);
}

/* ── SECTION HEADERS ──────────────────────────────────────── */
.breaking-section {
  margin-bottom: 48px;
}

.section-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.section-count {
  font-size: 10px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

/* ── LIVE STORY CARDS ─────────────────────────────────────── */
.live-stories-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.story-card-breaking {
  position: relative;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px 22px;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s, background 0.15s;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  text-decoration: none;
  color: inherit;
}

.story-card-breaking:hover {
  transform: translateY(-2px);
  border-color: #333345;
  background: var(--bg3);
}

.story-card-breaking.hot {
  border-left: 3px solid #e63946;
  background: #110a0a;
}

.story-card-breaking.hot:hover {
  background: #140c0c;
}

/* Left content */
.card-body {
  flex: 1;
  min-width: 0;
}

.card-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

/* Category badges */
.cat-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 3px;
  font-family: var(--font-mono);
}

.cat-badge.breaking,
.cat-badge.conflict {
  background: #e6394620;
  color: #e63946;
  border: 1px solid #e6394640;
}

.cat-badge.energy {
  background: #f4a26120;
  color: #f4a261;
  border: 1px solid #f4a26140;
}

.cat-badge.politics {
  background: #9b72cf20;
  color: #b890f0;
  border: 1px solid #9b72cf40;
}

.cat-badge.maritime {
  background: #457b9d20;
  color: #457b9d;
  border: 1px solid #457b9d40;
}

.cat-badge.default {
  background: #88888820;
  color: #888899;
  border: 1px solid #88888840;
}

/* Time label */
.card-time {
  font-size: 10px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* HOT badge */
.hot-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #e63946;
  text-transform: uppercase;
  font-family: var(--font-mono);
}

.hot-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e63946;
  animation: hot-pulse 1.2s infinite;
}

@keyframes hot-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 #e6394660; }
  50% { opacity: 0.8; box-shadow: 0 0 0 4px #e6394600; }
}

/* Headline */
.card-headline {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
  margin-bottom: 10px;
  letter-spacing: -0.2px;
}

/* Fact/blurb */
.card-fact {
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.6;
  margin-bottom: 10px;
}

/* Source */
.card-source {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.card-source span {
  color: var(--text-dim);
}

/* Right side: deep dive */
.card-dive {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 8px;
  padding-top: 4px;
}

.deep-dive-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent2);
  border: 1px solid var(--accent2);
  padding: 6px 12px;
  border-radius: 4px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
  background: transparent;
  font-family: var(--font-mono);
  letter-spacing: 0.5px;
}

.deep-dive-btn:hover {
  background: #457b9d22;
  color: #6facc5;
}

/* ── HAPPENING NOW BLOCKS ──────────────────────────────────── */
.happening-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
}

.happening-block {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: 6px;
  padding: 14px 16px;
  transition: background 0.15s;
}

.happening-block:hover {
  background: var(--bg3);
}

.happening-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-family: var(--font-mono);
  margin-bottom: 6px;
}

.happening-headline {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.45;
  margin-bottom: 6px;
}

.happening-meta {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.5;
  font-family: var(--font-mono);
}

/* ── THE RECORD TIMELINE ──────────────────────────────────── */
.record-timeline {
  position: relative;
  padding-left: 0;
}

.record-item-breaking {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}

.record-item-breaking:last-child {
  border-bottom: none;
}

.record-date-col {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  padding-top: 3px;
  line-height: 1.5;
}

.record-content-col {}

.record-event-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.45;
  margin-bottom: 5px;
}

.record-context-text {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.55;
  margin-bottom: 5px;
}

.record-source-text {
  font-size: 10px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

/* ── PAGE TITLE BLOCK ─────────────────────────────────────── */
.breaking-hero {
  margin-bottom: 28px;
}

.breaking-hero-kicker {
  font-size: 10px;
  font-family: var(--font-mono);
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #e63946;
  margin-bottom: 6px;
}

.breaking-hero-title {
  font-size: 32px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.5px;
  line-height: 1.15;
}

.breaking-hero-sub {
  font-size: 14px;
  color: var(--text-muted);
  margin-top: 6px;
}

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .breaking-page {
    padding: 16px 16px 60px;
  }

  .story-card-breaking {
    flex-direction: column;
  }

  .card-dive {
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .card-headline {
    font-size: 16px;
  }

  .happening-grid {
    grid-template-columns: 1fr;
  }

  .record-item-breaking {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .record-date-col {
    color: var(--accent);
  }

  .breaking-hero-title {
    font-size: 24px;
  }
}