/**
 * ============================================================================
 * rate-display.css — .rate-display BEM Block
 * ============================================================================
 *
 * PURPOSE:
 *   Styles the current UK rate display component. Shows the Bank of England
 *   base rate (and optionally other rates) as a trust signal and freshness
 *   indicator. Used on the homepage and within calculator pages.
 *
 * BEM STRUCTURE:
 *   .rate-display              — Outer wrapper
 *   .rate-display__title       — "Current UK Rates" heading
 *   .rate-display__grid        — Grid of rate items
 *   .rate-display__item        — Single rate item
 *   .rate-display__value       — The rate number
 *   .rate-display__label       — What the rate is
 *   .rate-display__updated     — "Last updated" timestamp
 *
 * DESIGN DECISIONS:
 *   - Subtle border and background to separate from main content
 *   - Compact layout — this is supplementary info, not the main event
 *   - Last updated date shows freshness (important for SEO and trust)
 *
 * ============================================================================
 */

.rate-display {
  background-color: var(--color-surface);
  border: var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}

.rate-display__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-xs);
  border-bottom: var(--border);
}

.rate-display__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-md);
}

/* Very small screens: keep rate block compact with 2 columns */
@media (max-width: 480px) {
  .rate-display__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.rate-display__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

/* Decorative icon above the rate value — subtle context indicator */
.rate-display__icon {
  color: var(--color-text-light);
  margin-bottom: var(--space-2xs);
}

.rate-display__value {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.rate-display__label {
  font-size: var(--text-xs);
  color: var(--color-text-light);
  line-height: var(--leading-tight);
}

.rate-display__updated {
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: var(--border);
  font-size: var(--text-xs);
  color: var(--color-text-light);
}