/* ═══════════════════════════════════════════════════════════════════════
   Svayambu — CURRENT AFFAIRS  (listing + detail)
   ═══════════════════════════════════════════════════════════════════════ */

.ca-page,
.cad-page {
  --blue:      #2563eb;
  --blue-dark: #1d4ed8;
  --blue-soft: #eff6ff;
  --purple:    #7c3aed;
  --purple-bg: #f5f3ff;
  --magenta:   #c026d3;
  --ink:       #0f172a;
  --ink2:      #1e293b;
  --ink3:      #334155;
  --muted:     #64748b;
  --faint:     #94a3b8;
  --line:      #e2e8f0;
  --card:      #ffffff;
  --bg:        #f8fafc;
  --tile:      #f1f5f9;

  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* ══════════════════════════════════════════════════════════════════════
   LISTING PAGE  /current-affairs
   ══════════════════════════════════════════════════════════════════════ */

.ca-page { background: #fff; min-height: 80vh; }

/* ── Header ── */
.ca-header {
  background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
  padding: 2rem 0;
  width: 100%;
}
.ca-header-inner {
  max-width: 900px; margin: 0 auto; padding: 0 1.5rem;
  display: flex; align-items: flex-end;
  justify-content: space-between; gap: 2rem; flex-wrap: wrap;
}
.ca-eyebrow {
  font-size: 0.67rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.14em; color: #93c5fd; margin-bottom: 0.5rem;
}
.ca-title {
  font-size: 1.9rem; font-weight: 800; color: #fff;
  margin: 0 0 0.45rem; line-height: 1.1;
}
.ca-desc { font-size: 0.88rem; color: #bfdbfe; line-height: 1.65; margin: 0; max-width: 500px; }
.ca-back-all {
  display: inline-block; margin-top: 0.75rem;
  font-size: 0.8rem; font-weight: 700; color: #93c5fd; text-decoration: none;
}
.ca-back-all:hover { color: #fff; }

.ca-header-stats { display: flex; gap: 1.5rem; flex-shrink: 0; }
.ca-stat { text-align: right; }
.ca-stat-num { display: block; font-size: 1.5rem; font-weight: 800; color: #fff; line-height: 1.1; }
.ca-stat-lbl { display: block; font-size: 0.63rem; font-weight: 700; color: #bfdbfe;
               text-transform: uppercase; letter-spacing: 0.08em; margin-top: 2px; }

/* ── Body ── */
.ca-body { max-width: 900px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }

/* ── 2-column months grid ── */
.ca-months-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
}

/* ── Compilation type tabs ── */
.ca-type-tabs {
  display: flex;
  gap: .6rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.ca-type-tab {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .55rem 1.2rem;
  border-radius: 8px;
  font-size: .85rem; font-weight: 700;
  border: 2px solid #e2e8f0;
  background: #fff;
  color: #475569;
  text-decoration: none;
  transition: all .15s;
}
.ca-type-tab:hover { border-color: #2563eb; color: #2563eb; background: #eff6ff; }
.ca-type-tab.active { background: #2563eb; color: #fff; border-color: #2563eb; }
.ca-type-count {
  background: rgba(255,255,255,.25); color: inherit;
  font-size: .68rem; font-weight: 800;
  padding: 1px 7px; border-radius: 99px;
}
.ca-type-tab:not(.active) .ca-type-count {
  background: #e2e8f0; color: #64748b;
}

/* ── Month block (wraps title bar + list + view more) ── */
.ca-month-block {
  background: #fff;
  border-top: 1px solid #f97316;
  border-left: 1px solid #4a5568;
  border-right: 1px solid #4a5568;
  border-bottom: 1px solid #4a5568;
  border-radius: 0;
  overflow: hidden;
  margin-bottom: 0;
}

/* ── Month title bar — plain white, no colour ── */
.ca-month-bar {
  background: #fff;
  padding: 0.6rem 1.1rem;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid #f97316;
}
.ca-month-bar-title {
  font-size: 0.92rem; font-weight: 800; color: #f97316;
}
.ca-month-bar-count {
  font-size: 0.72rem; font-weight: 700; color: #64748b;
}

/* ── News list inside each month ── */
.ca-news-list { padding: 0.5rem 0; }

.ca-news-row {
  display: flex; align-items: flex-start; gap: 0.55rem;
  padding: 0.65rem 1.1rem;
  border-bottom: 1px solid var(--tile);
  transition: background 0.12s;
}
.ca-news-row:last-child { border-bottom: none; }
.ca-news-row:hover { background: var(--tile); }

/* Arrow prefix */
.ca-news-arrow {
  flex-shrink: 0; margin-top: 1px;
  font-size: 1rem; font-weight: 800;
  color: #f97316;
}

/* "New" badge (magenta pill) */
.ca-news-badge {
  flex-shrink: 0;
  background: var(--magenta);
  color: #fff;
  font-size: 0.62rem; font-weight: 800;
  padding: 2px 7px; border-radius: 4px;
  margin-top: 2px; text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* News title link */
.ca-news-link {
  font-size: 0.88rem; font-weight: 700;
  color: #ea580c;
  text-decoration: none; line-height: 1.5;
  transition: color 0.12s;
}
.ca-news-link:hover { color: #f97316; text-decoration: underline; }

/* ── View More button ── */
.ca-view-more-wrap {
  padding: 0.85rem 1.1rem;
  border-top: 1px solid var(--line);
  text-align: right;
}
.ca-view-more-btn {
  display: inline-block;
  background: #4a5568;
  color: #fff;
  font-size: 0.82rem; font-weight: 800;
  padding: 0.5rem 1.4rem;
  border-radius: 0;
  text-decoration: none;
  transition: opacity 0.15s, transform 0.15s;
}
.ca-view-more-btn:hover { background: #374151; transform: translateX(2px); }

/* ── Grid (category filter) ── */
.ca-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
}
.ca-grid-box {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 8px; padding: 1rem 1.1rem;
  color: var(--ink); text-decoration: none;
  font-size: 0.87rem; font-weight: 600; line-height: 1.5;
  transition: border-color 0.15s, background 0.15s;
}
.ca-grid-box:hover { border-color: var(--blue); background: var(--blue-soft); color: var(--blue); }

/* ── Empty ── */
.ca-empty {
  text-align: center; padding: 4rem 1rem;
  background: var(--card); border: 1px dashed var(--line);
  border-radius: 10px; color: var(--muted);
}
.ca-empty-icon { font-size: 2.2rem; margin-bottom: 0.5rem; }
.ca-empty h2 { font-size: 1rem; color: var(--ink); margin: 0 0 0.4rem; }
.ca-empty p  { font-size: 0.85rem; margin: 0; }

/* (old card selectors kept for backward compat — hidden in new layout) */
.ca-date-stripe, .ca-date-inner { display: contents; }
.ca-date-card { display: none; }


/* ══════════════════════════════════════════════════════════════════════
   DETAIL PAGE  /current-affairs/<id>
   AffairsCloud-style: plain newspaper text, no boxes, no cards
   ══════════════════════════════════════════════════════════════════════ */

.cad-page { background: #fff; min-height: 80vh; }

/* ── Top bar ── */
.cad-topbar {
  background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
  padding: 0.6rem 0;
}
.cad-topbar-inner {
  max-width: 1100px; margin: 0 auto; padding: 0 1.5rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.cad-breadcrumb {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.74rem; color: #bfdbfe;
}
.cad-breadcrumb a { color: #93c5fd; text-decoration: none; font-weight: 600; }
.cad-breadcrumb a:hover { color: #fff; }
.cad-breadcrumb span { color: rgba(255,255,255,0.35); }
.cad-breadcrumb span:last-child { color: #fff; font-weight: 700; }

.cad-nav-btns { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.cad-nav-btn {
  font-size: 0.72rem; font-weight: 700; color: #bfdbfe;
  padding: 4px 11px; border: 1px solid rgba(255,255,255,0.25);
  border-radius: 6px; text-decoration: none;
  background: rgba(255,255,255,0.1);
  transition: background 0.15s, color 0.15s;
}
.cad-nav-btn:hover { background: rgba(255,255,255,0.22); color: #fff; }
.cad-nav-all { background: #fff; color: var(--blue); border-color: #fff; }
.cad-nav-all:hover { background: #eff6ff; }

/* ── Page header ── */
.cad-header {
  background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
  padding: 1.2rem 0 1.5rem;
}
.cad-header-inner {
  max-width: 1100px; margin: 0 auto; padding: 0 1.5rem;
  display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap;
}
.cad-date-badge {
  display: flex; align-items: center; gap: 0.7rem; flex-shrink: 0;
  background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.25);
  border-radius: 10px; padding: 0.65rem 1rem;
}
.cad-day-num    { font-size: 1.9rem; font-weight: 800; color: #fff; line-height: 1; }
.cad-day-name   { font-size: 0.8rem; font-weight: 700; color: #fff; }
.cad-month-year { font-size: 0.7rem; font-weight: 600; color: #bfdbfe; margin-top: 1px; }
.cad-header-text { flex: 1; min-width: 0; }
.cad-title   { font-size: 1.2rem; font-weight: 800; color: #fff; margin: 0 0 3px; line-height: 1.25; }
.cad-summary { font-size: 0.83rem; color: #bfdbfe; margin: 0; line-height: 1.5; }

/* ── Body layout ── */
.cad-body {
  max-width: 1100px; margin: 0 auto; padding: 1.8rem 1.5rem 4rem;
  display: grid; grid-template-columns: 1fr 260px; gap: 2rem; align-items: start;
}
.cad-main { min-width: 0; display: flex; flex-direction: column; gap: 1.1rem; }

/* ── Category filter chips ── */
.cad-cat-chips {
  display: flex;
  gap: 0.4rem;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.cad-cat-chips::-webkit-scrollbar { display: none; }
.cad-chip {
  font-size: 0.72rem; font-weight: 700;
  padding: 5px 13px; border-radius: 6px;
  border: 1px solid var(--line); background: var(--card);
  color: var(--muted); cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.cad-chip:hover  { border-color: var(--purple); color: var(--purple); }
.cad-chip.active { background: var(--purple); color: #fff; border-color: var(--purple); }

/* ── Article wrapper — plain white, no box ── */
.cad-article {
  background: #fff;
  font-size: 0.93rem;
  color: #222;
  line-height: 1.85;
}

/* ── Category section ── */
.cad-section { margin-bottom: 0.5rem; }

/* Category heading — bold, coloured, centred exactly like affairscloud */
.cad-section-title {
  font-size: 1rem;
  font-weight: 900;
  color: #f97316;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 1.6rem 0 0.6rem;
  padding: 0.45rem 0;
}

/* ── Single news entry ── */
.cad-entry {
  margin-bottom: 1.4rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid #e5e7eb;
}
.cad-entry:last-child { border-bottom: none; }

/* Headline — bold black, slightly larger */
.cad-entry-headline {
  font-size: 0.97rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.5;
  margin: 0 0 0.55rem;
}

/* Image */
.cad-entry-img {
  margin: 0.5rem 0 0.75rem;
}
.cad-entry-img img {
  max-width: 100%; height: auto;
  display: block; border-radius: 4px;
}

/* Body — plain paragraph text exactly like affairscloud */
.cad-entry-body {
  font-size: 0.9rem;
  color: #374151;
  line-height: 1.9;
}
.cad-entry-body p  { margin: 0 0 0.6em; }
.cad-entry-body p:last-child { margin-bottom: 0; }
.cad-entry-body ul,
.cad-entry-body ol { padding-left: 1.4rem; margin: 0.45em 0; }
.cad-entry-body li { margin-bottom: 3px; }
.cad-entry-body strong,
.cad-entry-body b  { color: #111; font-weight: 700; }
.cad-entry-body a  { color: #1a0dab; }
.cad-entry-body a:hover { text-decoration: underline; }
.cad-entry-body h2,
.cad-entry-body h3,
.cad-entry-body h4 {
  color: #0f172a; margin: 0.85em 0 0.3em; line-height: 1.3; font-weight: 700;
}
.cad-entry-body h2 { font-size: 0.96rem; }
.cad-entry-body h3 { font-size: 0.91rem; }
.cad-entry-body table {
  width: 100%; border-collapse: collapse; margin: 0.7em 0;
  border: 1px solid #d1d5db; font-size: 0.84rem;
}
.cad-entry-body th {
  background: #fff7ed; color: #9a3412;
  padding: 0.45em 0.7em; text-align: left;
  font-weight: 700; border: 1px solid #d1d5db;
}
.cad-entry-body td {
  padding: 0.4em 0.7em; border: 1px solid #d1d5db; color: #374151;
}
.cad-entry-body tbody tr:nth-child(even) td { background: #fafafa; }
.cad-entry-body img { max-width: 100%; height: auto; border-radius: 4px; }

/* Source */
.cad-entry-source {
  margin-top: 0.5rem;
  font-size: 0.72rem; color: #9ca3af; font-style: italic;
}

/* ── Bottom prev/next ── */
.cad-bottom-nav {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.65rem;
  margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #e5e7eb;
}
.cad-bottom-btn {
  font-size: 0.79rem; font-weight: 700; color: #374151;
  padding: 8px 15px; border: 1px solid #d1d5db;
  border-radius: 7px; text-decoration: none; background: #fff;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.cad-bottom-btn:hover { background: #1a0dab; color: #fff; border-color: #1a0dab; }

/* ── Empty ── */
.cad-empty {
  text-align: center; padding: 3rem 1.5rem;
  color: #9ca3af; font-size: 0.88rem;
}
.cad-empty p { margin: 0; }

/* ── Ad sidebar ── */
.cad-sidebar {
  display: flex; flex-direction: column; gap: 1rem;
  position: sticky; top: calc(64px + 1rem);
}
.cad-ad-slot {
  background: var(--card); border: 1px dashed var(--line);
  border-radius: 8px; min-height: 160px; width: 100%;
  display: flex; align-items: center; justify-content: center;
}
.cad-ad-slot::after {
  content: 'Advertisement';
  font-size: 0.57rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint);
}
.cad-ad-slot-tall { min-height: 280px; }

/* ── Responsive ── */
@media (max-width: 860px) {
  .cad-body { grid-template-columns: 1fr; }
  .ca-months-grid { grid-template-columns: 1fr; }
  .cad-sidebar { position: static; flex-direction: row; flex-wrap: wrap; }
  .cad-ad-slot { flex: 1; min-width: 200px; min-height: 100px; }
  .cad-ad-slot-tall { min-height: 100px; }
}
@media (max-width: 600px) {
  .cad-title { font-size: 1rem; }
  .cad-section-title { font-size: 0.9rem; }
  .cad-entry-headline { font-size: 0.92rem; }
  .cad-entry-body { font-size: 0.86rem; }
}
@media (max-width: 540px) { .cad-sidebar { display: none; } }