/* ============================================================================
 * Reading Time Badge — Estimated study time indicator
 *
 * Displays an estimated reading/study time badge near the page title on study
 * content pages. Calculated at build time based on word count (200 wpm).
 * ============================================================================ */

.reading-time-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--chip-bg);
  border: 1px solid var(--chip-border);
  color: var(--chip-text);
  border-radius: 999px;
  padding: 0.2rem 0.65rem;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
  vertical-align: middle;
  margin-left: 0.5rem;
  white-space: nowrap;
  user-select: none;
}

.reading-time-badge .reading-time-icon {
  font-size: 0.8rem;
  line-height: 1;
}

/* When placed inside the article heading row, align nicely */
.reading-time-wrapper {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.reading-time-wrapper h2 {
  margin-bottom: 0;
}

/* Responsive: on very small screens, stack below the title */
@media (max-width: 480px) {
  .reading-time-wrapper {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }

  .reading-time-badge {
    margin-left: 0;
  }
}