/* =====================================================================
   Price stats band — Today (open/high/low/avg/range) + period performance
   + 52-week range, metal ratios and last-updated. Values filled by
   prices.js. Tokens only.
   ===================================================================== */

.price-stats {
  padding-block: 28px 36px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.price-stats__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.price-stats__card {
  background: var(--gray-0);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-10);
  padding: 20px 24px;
}
.price-stats__card-title {
  margin: 0 0 14px;
  font-size: var(--fs-18);
  font-weight: var(--fw-bold);
  color: var(--gray-8);
}

/* Today tiles */
.price-stats__tiles {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 24px;
}
.price-stats__tile { display: flex; flex-direction: column; gap: 2px; }
.price-stats__tile dt { font-size: 13px; color: var(--gray-6); }
.price-stats__tile dd { margin: 0; font-size: var(--fs-18); font-weight: var(--fw-medium); color: var(--gray-8); }
.price-stats__tile--wide { grid-column: 1 / -1; }

/* Performance chips */
.price-stats__perf { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.price-stats__perf li {
  flex: 1 1 0; min-width: 54px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 8px; border: 1px solid var(--color-border); border-radius: var(--radius-8);
}
.price-stats__period { font-size: var(--fs-12); color: var(--gray-6); font-weight: var(--fw-medium); }
.price-stats__pct { font-size: var(--fs-14); font-weight: var(--fw-bold); color: var(--gray-8); white-space: nowrap; }
.price-stats__pct--up { color: var(--green); }
.price-stats__pct--down { color: var(--red); }

/* Meta row */
.price-stats__meta {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px 28px;
  font-size: var(--fs-14); color: var(--gray-6);
}
.price-stats__meta b { color: var(--gray-8); font-weight: var(--fw-bold); }
.price-stats__updated { margin-left: auto; }

@media (max-width: 1023.98px) {
  /* Tablet: keep 2-col grid, tighten card padding + fonts */
  .price-stats__card { padding: 16px 18px; }
  .price-stats__card-title { font-size: var(--fs-16); margin-bottom: 10px; }
  .price-stats__tile dd { font-size: var(--fs-16); }
  .price-stats__grid { gap: 14px; }
}

@media (max-width: 767.98px) {
  .price-stats__grid { grid-template-columns: 1fr; }
  .price-stats__tiles { grid-template-columns: repeat(2, 1fr); }
  .price-stats__updated { margin-left: 0; }
}

/* ---- Phone (≤599): revert tablet reductions — matches main ≤599 ---- */
@media (max-width: 599.98px) {
  .price-stats__card { padding: 20px 24px; }
  .price-stats__card-title { font-size: var(--fs-18); margin-bottom: 14px; }
  .price-stats__tile dd { font-size: var(--fs-18); }
  .price-stats__grid { gap: 20px; }
}