/*
 * Roadmap Icon component -- prototype styles.
 *
 * Roadmap Card Icons prototype sprint. NOT YET linked from index.html or
 * any production stylesheet -- only the preview page below imports this
 * file today. See roadmap-icon.js for the full sprint context.
 *
 * Sizing: 36px on desktop, 28px on mobile, per the approved brief.
 * Reuses home-page.css's existing 767px mobile breakpoint (the same
 * breakpoint the roadmap card grid itself already collapses at) rather
 * than introducing a new one.
 *
 * Colour: entirely CSS-controlled via var(--color-primary) (SpainReady
 * terracotta, #C0392B -- config/tokens/tokens.generated.css). No SVG in
 * roadmap-icon.js hardcodes this colour; every icon inherits it through
 * `stroke="currentColor"` plus this `color` declaration.
 */

@import url("../../config/tokens/tokens.generated.css");

.sr-roadmap-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  color: var(--color-primary);
}

.sr-roadmap-icon svg {
  width: 100%;
  height: 100%;
}

@media (max-width: 767px) {
  .sr-roadmap-icon {
    width: 28px;
    height: 28px;
  }
}