/* ============================================================
   CAIO Consultants — styles.css
   Shared components. New features go here.
   Pages link this after their own <style> block.
   ============================================================ */

/* ============================================================
   00. COOKIE CONSENT BANNER
   ============================================================ */
.cookie-banner {
  position:fixed;left:0;right:0;bottom:0;z-index:9500;
  display:none;
  background:rgba(11,12,16,0.98);
  border-top:1px solid rgba(197,160,89,0.25);
  box-shadow:0 -8px 28px rgba(0,0,0,0.4);
  padding:18px 24px;
}
.cookie-banner.show { display:block; }
.cookie-banner-inner {
  max-width:1200px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  flex-wrap:wrap;
}
.cookie-banner-text {
  font-family:'Inter',sans-serif;font-size:0.82rem;line-height:1.55;
  color:var(--text,#e3e2e8);margin:0;flex:1;min-width:240px;
}
.cookie-banner-text a { color:var(--gold-l,#C5A059);text-decoration:underline; }
.cookie-banner-actions { display:flex;gap:10px;flex-shrink:0; }
.cookie-btn {
  font-family:'Inter Tight',sans-serif;font-weight:800;font-size:0.72rem;
  letter-spacing:0.08em;text-transform:uppercase;
  padding:10px 18px;border:none;cursor:pointer;white-space:nowrap;
  transition:transform .15s,background .2s;
}
.cookie-btn-decline {
  background:transparent;color:var(--muted,#a09b96);
  border:1px solid rgba(255,255,255,0.15);
}
.cookie-btn-decline:hover { color:var(--text,#e3e2e8);border-color:rgba(255,255,255,0.3); }
.cookie-btn-accept {
  background:var(--gold,#A6894A);color:#120e00;
}
.cookie-btn-accept:hover { transform:translateY(-1px);background:var(--gold-l,#C5A059); }
@media (max-width:640px) {
  .cookie-banner-inner { flex-direction:column;align-items:stretch;gap:14px; }
  .cookie-banner-actions { justify-content:stretch; }
  .cookie-btn { flex:1; }
}

/* ============================================================
   01. CHAOS NEWS FEED
   ============================================================ */

.chaos-feed-wrap { margin-top:40px;position:relative; }

/* ── Controls ── */
.chaos-controls {
  display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap;
}
.chaos-tag-btn {
  font-family:'Inter',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:0.12em;text-transform:uppercase;
  padding:5px 12px;border:1px solid rgba(197,160,89,0.25);
  background:transparent;color:var(--muted,#a09b96);cursor:pointer;
  transition:all .2s;white-space:nowrap;
}
.chaos-tag-btn:hover,.chaos-tag-btn.active {
  border-color:var(--gold-l,#C5A059);color:var(--gold-l,#C5A059);
  background:rgba(197,160,89,0.06);
}
.chaos-month-select {
  font-family:'Inter Tight',sans-serif;font-size:12px;font-weight:800;
  letter-spacing:0.12em;text-transform:uppercase;
  background:rgba(255,255,255,0.04);border:1px solid rgba(197,160,89,0.2);
  color:var(--text,#e3e2e8);padding:5px 10px;cursor:pointer;
  appearance:none;-webkit-appearance:none;
}
.chaos-month-select:focus { outline:none;border-color:var(--gold-l,#C5A059); }

/* ── Category tabs (top-level, like the FAQ tab bar: single row, horizontal scroll, never wraps) ── */
.chaos-cat-outer {
  width:100%;border:1px solid rgba(197,160,89,0.18);background:rgba(255,255,255,0.02);
}
.chaos-cat-row {
  display:flex;align-items:stretch;gap:0;
  overflow-x:auto;scrollbar-width:none;
  -ms-overflow-style:none;
}
.chaos-cat-row::-webkit-scrollbar { display:none; }
.chaos-cat-btn {
  font-family:'Inter Tight',sans-serif;font-weight:700;font-size:11px;
  letter-spacing:0.08em;text-transform:uppercase;
  padding:10px 16px;background:transparent;border:none;
  border-right:1px solid rgba(197,160,89,0.12);
  color:var(--muted,#a09b96);cursor:pointer;white-space:nowrap;
  transition:color .2s,background .2s;flex-shrink:0;
}
.chaos-cat-btn:last-child { border-right:none; }
.chaos-cat-btn:hover { color:var(--text,#e3e2e8);background:rgba(255,255,255,0.03); }
.chaos-cat-btn.active {
  color:var(--gold-l,#C5A059);background:rgba(197,160,89,0.08);
}

/* ── Sub-tag row: fixed height whether empty or populated, so the layout never jumps ── */
.chaos-subtag-row {
  display:flex;gap:6px;flex-wrap:wrap;align-items:center;
  min-height:30px;margin-top:8px;
}
.chaos-subtag-btn {
  font-family:'Inter',sans-serif;font-size:10px;font-weight:600;
  letter-spacing:0.1em;text-transform:uppercase;
  padding:4px 10px;border:1px solid rgba(197,160,89,0.2);
  background:rgba(197,160,89,0.05);color:var(--gold-l,#C5A059);
  cursor:pointer;transition:all .2s;white-space:nowrap;
}
.chaos-subtag-btn:hover { background:rgba(197,160,89,0.12); }
.chaos-subtag-btn.active { background:rgba(197,160,89,0.16);border-color:var(--gold-l,#C5A059); }

/* ── Slider viewport ── */
.chaos-slider-outer { position:relative;overflow:hidden; }
.chaos-slider-track {
  display:flex;gap:20px;
  /* Continuous scroll — JS controls translateX animation */
}

/* ── Card — fixed height ── */
.chaos-card {
  flex:0 0 380px;
  height:450px; /* FIXED height — no layout shift on tag filter */
  background:var(--obs-3,#1a1b20);
  border:1px solid rgba(255,255,255,0.05);
  border-left:3px solid rgba(197,160,89,0.3);
  padding:20px 22px 18px;
  display:flex;flex-direction:column;gap:8px;
  overflow:hidden;
  transition:border-left-color .2s;
}
.chaos-card:hover { border-left-color:var(--gold-l,#C5A059); }

/* Regulatory cards — same gold treatment, no cyan */
.chaos-card.regulatory { border-left-color:rgba(197,160,89,0.25); }
.chaos-card.regulatory:hover { border-left-color:var(--gold-l,#C5A059); }

.chaos-card-date {
  font-family:'Inter Tight',sans-serif;font-size:11px;font-weight:800;
  letter-spacing:0.18em;text-transform:uppercase;color:rgba(197,160,89,0.7);
}
.chaos-card-company {
  font-family:'Inter',sans-serif;font-size:10px;font-weight:600;
  letter-spacing:0.1em;text-transform:uppercase;color:var(--muted,#a09b96);
}
.chaos-card-headline {
  font-family:'Inter Tight',sans-serif;font-size:14px;font-weight:700;
  line-height:1.3;color:var(--text,#e3e2e8);letter-spacing:-0.01em;
}
.chaos-card-summary {
  font-family:'Inter',sans-serif;font-size:12px;font-style:normal;
  line-height:1.6;color:rgba(227,226,232,0.55);flex:1;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;
}
.chaos-card-footer {
  display:flex;flex-direction:column;
  gap:4px;margin-top:auto;
}
.chaos-card-tags-row {
  display:flex;align-items:center;gap:8px;overflow:hidden;
}
.chaos-card-tags { display:flex;gap:4px;flex-wrap:wrap;max-height:3.2em;overflow:hidden; }

.chaos-card-source-row {
  display:flex;justify-content:flex-end;
}
.chaos-tag {
  font-family:'Inter',sans-serif;font-size:9px;font-weight:700;
  letter-spacing:0.1em;text-transform:uppercase;padding:3px 6px;
  border:1px solid rgba(197,160,89,0.2);color:rgba(197,160,89,0.6);
  background:rgba(197,160,89,0.04);
}
.chaos-card-source {
  font-family:'Inter',sans-serif;font-size:10px;color:var(--muted,#a09b96);
  text-decoration:none;opacity:0.6;transition:opacity .2s;white-space:nowrap;
}
.chaos-card-source:hover { opacity:1; }

/* ── Navigation ── */
.chaos-nav { display:flex;align-items:center;gap:12px;margin-top:14px; }
.chaos-arrow {
  display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border:1px solid rgba(197,160,89,0.25);
  background:transparent;color:var(--muted,#a09b96);font-size:15px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all .2s;flex-shrink:0;
}
.chaos-arrow:hover { border-color:var(--gold-l,#C5A059);color:var(--gold-l,#C5A059); }
.chaos-arrow:disabled { opacity:0.3;cursor:not-allowed; }
.chaos-dots { display:flex;gap:5px;flex:1;flex-wrap:wrap; }
.chaos-dot {
  width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,0.1);
  cursor:pointer;transition:background .2s;border:none;padding:0;
}
.chaos-dot.active { background:var(--gold-l,#C5A059); }

/* ── Quote block ── */
.chaos-quote-wrap {
  margin-top:28px;display:flex;gap:16px;align-items:flex-start;
  padding:20px 24px;border-left:2px solid rgba(197,160,89,0.3);
}
.chaos-quote-portrait { flex-shrink:0;margin-top:4px; }
.chaos-quote-body { flex:1; }
.chaos-prompt {
  font-family:'Newsreader',serif;font-style:italic;
  font-size:clamp(1.2rem,2.5vw,1.6rem);line-height:1.45;
  color:rgba(227,226,232,0.85);margin:0 0 8px;border:none;padding:0;
}
.chaos-cite {
  display:block;font-family:'Inter',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:0.1em;text-transform:uppercase;
  color:rgba(197,160,89,0.55);margin-bottom:12px;
}
.chaos-caio-take {
  font-family:'Inter',sans-serif;font-size:13px;line-height:1.65;
  color:rgba(227,226,232,0.45);margin:0;
}

/* ── Progress bar ── */
.chaos-progress-bar { height:2px;background:rgba(197,160,89,0.1);margin-bottom:10px;overflow:hidden; }
.chaos-progress-fill { height:100%;background:var(--gold-l,#C5A059);width:0%; }

/* ── Empty ── */
.chaos-empty {
  padding:32px 24px;text-align:center;color:var(--muted,#a09b96);
  font-family:'Inter',sans-serif;font-size:13px;
  border:1px dashed rgba(255,255,255,0.06);
}

@media (max-width:768px) {
  .chaos-card { flex:0 0 300px;height:450px; }
}
@media (max-width:480px) {
  .chaos-card { flex:0 0 calc(100vw - 64px);height:450px; }
}

/* ── Chaos Quote Block ── */

/* ── Search ── */
.chaos-search-row { display:flex;gap:8px;align-items:center; }
.chaos-search {
  font-family:'Inter',sans-serif;font-size:12px;
  background:rgba(255,255,255,0.04);border:1px solid rgba(197,160,89,0.2);
  color:var(--text,#e3e2e8);padding:5px 12px;outline:none;
  transition:border-color .2s;width:160px;
}
.chaos-search:focus { border-color:var(--gold-l,#C5A059); }
.chaos-search::placeholder { color:rgba(160,155,150,0.5); }

/* ── Bigger dots and arrows ── */
.chaos-dot {
  width:8px !important;height:8px !important;
}
.chaos-arrow {
  width:40px !important;height:40px !important;font-size:18px !important;
}
.chaos-controls {
  flex-direction:column;gap:12px;
}