/* ============================================================
 * prices.css — styling for price strips and ribbons
 * ============================================================
 * Two layouts:
 *   .price-chip-strip   — full chip with sparkline (for narrative
 *                         pages, sits below the hero or in sidebar)
 *   .price-chip-ribbon  — compact one-line chip (for homepage
 *                         ticker / inline reference)
 * ============================================================ */

.price-strip {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin: 16px 0 24px;
}

.price-chip {
  font-family: var(--font-mono);
  background: white;
  border: 1px solid var(--rule);
  padding: 10px 12px;
}

/* === FULL STRIP === */
.price-chip-strip {
  min-width: 170px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.price-chip-strip .price-chip-name {
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-light);
}
.price-chip-strip .price-chip-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.price-chip-strip .price-chip-value {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.01em;
}
.price-chip-strip .price-chip-spark {
  opacity: 0.8;
}
.price-chip-strip .price-chip-change {
  font-size: 10px;
  letter-spacing: 0.03em;
}

/* === COMPACT RIBBON === */
.price-chip-ribbon {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 10px;
  font-size: 11px;
}
.price-chip-ribbon .price-chip-name {
  color: var(--ink-light);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 9px;
}
.price-chip-ribbon .price-chip-value {
  font-weight: 500;
  color: var(--ink);
}
.price-chip-ribbon .price-chip-change {
  font-size: 10px;
}

/* === STATES === */
.price-chip-loading {
  opacity: 0.5;
}
.price-chip-error .price-chip-value {
  color: var(--ink-light);
}

/* === Ribbon container variant (homepage top) === */
.price-strip-ribbon {
  justify-content: center;
  display: flex;
  gap: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-dark);
  padding: 0;
  margin: 0;
}
.price-strip-ribbon .price-chip {
  border: none;
  border-right: 1px solid var(--rule);
  background: transparent;
  border-radius: 0;
  flex-shrink: 0;
}
.price-strip-ribbon .price-chip:last-child {
  border-right: none;
}

/* === MACRO RELEASES PANEL =================================== */
.releases-panel { background: var(--paper); border-bottom: 1px solid var(--rule); padding: 18px 40px 24px; }
.releases-panel-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-light); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.releases-panel-label::after { content: ''; flex: 1; height: 1px; background: var(--rule); }
.releases-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.release-card { background: white; border: 1px solid var(--rule); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.release-card-name { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-light); }
.release-card-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.release-card-value { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--ink); line-height: 1; letter-spacing: -0.01em; }
.release-card-yoy { font-family: var(--font-mono); font-size: 11px; font-weight: 500; }
.release-card-meta { font-family: var(--font-mono); font-size: 9px; color: var(--ink-light); letter-spacing: 0.03em; }
@media (max-width: 780px) { .releases-panel { padding: 14px 20px 18px; } }

.release-strip { display: flex; gap: 14px; flex-wrap: wrap; margin: 16px 0 24px; }
.release-strip .release-card { min-width: 170px; background: white; border: 1px solid var(--rule); padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; font-family: var(--font-mono); }
.release-strip .release-card-name { font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-light); }
.release-strip .release-card-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.release-strip .release-card-value { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--ink); line-height: 1; letter-spacing: -0.01em; }
.release-strip .release-card-yoy { font-size: 10px; font-weight: 500; }
.release-strip .release-card-meta { font-size: 9px; color: var(--ink-light); letter-spacing: 0.03em; }



/* === HERO CHIP DASHBOARD (right side of two-col hero) ===
 * Compact 4-wide grid that sits alongside the title block.
 * Chips are smaller than the page-strip default so 4 fit in a half-width column.
 * Subtle background tint groups them visually as a 'dashboard' unit.
 */
.hero-chip-col {
  flex: 0 1 640px;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  background: rgba(0, 0, 0, 0.018);
  border: 1px solid var(--rule);
}
.hero-chip-col .price-strip,
.hero-chip-col .release-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}
.hero-chip-col .price-chip,
.hero-chip-col .release-card {
  min-width: 0;
  padding: 8px 10px;
  background: white;
  border: 1px solid var(--rule);
}
.hero-chip-col .price-chip-name,
.hero-chip-col .release-card-name {
  font-size: 8px;
  letter-spacing: 0.08em;
}
.hero-chip-col .price-chip-value,
.hero-chip-col .release-card-value {
  font-size: 16px;
}
.hero-chip-col .price-chip-change,
.hero-chip-col .release-card-yoy,
.hero-chip-col .release-card-meta {
  font-size: 8px;
}
.hero-chip-col .price-chip-spark svg {
  width: 50px;
  height: 18px;
}
/* Subtle band labels above each row */
.hero-chip-col::before {
  content: 'LIVE  ·  ' attr(data-live-label);
  display: none;
}
@media (max-width: 980px) {
  .hero-chip-col { flex: 1 1 100%; max-width: 100%; }
  .hero-chip-col .price-strip, .hero-chip-col .release-strip { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 640px) {
  .hero-chip-col .price-strip, .hero-chip-col .release-strip { grid-template-columns: repeat(2, 1fr); }
}

/* === FIX: release-card layout inside .hero-chip-col === */
/* Stack value, YoY, and meta vertically (matching the price-chip pattern). */
/* Eliminates the wrapping inconsistency where +0.37% YoY shares a line with $6.71T. */
.hero-chip-col .release-card {
  padding: 8px 10px;
  gap: 3px;
  min-height: 0;
}
.hero-chip-col .release-card-row {
  display: block;
}
.hero-chip-col .release-card-value {
  font-size: 15px;
  display: block;
  line-height: 1.1;
}
.hero-chip-col .release-card-yoy {
  display: block;
  font-size: 9px;
  line-height: 1.2;
  margin-top: 2px;
}
.hero-chip-col .release-card-meta {
  font-size: 8px;
  line-height: 1.2;
  margin-top: 2px;
}

/* === FIX: title block beside .hero-chip-col should shrink ===
 * Without this, a single-line title (like Fed Independence) expands the title block
 * and pushes the chip dashboard narrower, causing chip text to wrap and boxes to grow tall.
 * Constrains the title block so the chip-col always gets its full 640px basis.
 */
div:has(> .hero-chip-col) > div:first-child {
  flex: 1 1 0;
  min-width: 0;
  max-width: calc(100% - 688px); /* 640 chip-col + 48 gap */
}

/* =========================================== */
/* === MOBILE RESPONSIVE === */
/* Tablet / phone breakpoint - applies to all pages via shared prices.css */
/* =========================================== */

@media (max-width: 768px) {
  /* === Homepage tracker grid: collapse 3 columns to 1 === */
  .narratives-grid {
    grid-template-columns: 1fr !important;
    padding: 0 16px !important;
    gap: 16px !important;
  }

  /* === Two-column hero (chip dashboard pages): stack vertically === */
  /* The flex container becomes a column layout instead of side-by-side */
  div:has(> .hero-chip-col) {
    flex-direction: column !important;
    gap: 24px !important;
  }
  /* Title block: remove the desktop max-width constraint */
  div:has(> .hero-chip-col) > div:first-child {
    max-width: 100% !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  /* Chip dashboard: full width on mobile, no longer fixed 640px */
  .hero-chip-col {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  /* Chip dashboard inner grid: 2 columns instead of 4 */
  .hero-chip-col .price-strip,
  .hero-chip-col .release-strip {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* === Editorial stat band: 4 cols -> 2 cols === */
  /* Targets the full-width stat bands below the hero on dashboard pages */
  div[style*="grid-template-columns:repeat(4"]:not(.price-strip):not(.release-strip),
  div[style*="grid-template-columns: repeat(4"]:not(.price-strip):not(.release-strip) {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* === Hero overall padding === */
  div[style*="padding:20px 40px"],
  div[style*="padding: 20px 40px"] {
    padding: 16px !important;
  }

  /* === Nav bar: scale down text and tighten === */
  .top-nav,
  nav {
    padding: 12px 16px !important;
  }

  /* === Hero title: scale down so it does not occupy half the screen === */
  .hero-title {
    font-size: 38px !important;
    line-height: 1.05 !important;
  }

  /* === Body content padding === */
  body > div[style*="padding"],
  main {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* === Voices page: sidebar stacks above content === */
  .narrative-mode {
    flex-direction: column !important;
    gap: 16px !important;
  }
  .narrative-sidebar {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 240px !important;
    overflow-y: auto !important;
  }
  /* KEY VOICES / ALSO TRACKING: stack to single column */
  .position-cols {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* === Card body: reduce overflow risk === */
  .card-value,
  .card-deck {
    font-size: 14px !important;
    line-height: 1.4 !important;
  }
  .card-title {
    font-size: 17px !important;
  }
}

@media (max-width: 480px) {
  /* === Phone: tighten further === */
  .hero-title {
    font-size: 32px !important;
  }
  /* Editorial stat band collapses to 1 col on phones */
  div[style*="grid-template-columns:repeat(4"]:not(.price-strip):not(.release-strip),
  div[style*="grid-template-columns: repeat(4"]:not(.price-strip):not(.release-strip) {
    grid-template-columns: 1fr !important;
  }
  /* Chip dashboard inner grid: stays at 2 cols even on phone */
  /* (chips are small enough that 2 cols still works at 390px) */
}