/*
 * Key Facts component -- production styles.
 *
 * Structural properties reference only the resolved Stage 2 tokens
 * (spacing) -- no raw pixel value appears below. Responsive behaviour
 * follows Product Design System §5.2 exactly:
 *   - Desktop: row of up to six compact items.
 *   - Tablet: two rows of three.
 *   - Mobile: horizontal scroll, one item primarily visible, others
 *     peeking -- NOT a vertical stack.
 * No CSS `order` or reverse flex-direction is used anywhere, so DOM
 * order always matches visual/reading order at every breakpoint.
 *
 * Colour is NOT resolved yet (Stage 2: color.text-primary, color.muted
 * remain pending-design-signoff). No colour value is set below.
 */

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

.sr-keyfacts {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-m);
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
  box-sizing: border-box;
}

.sr-keyfacts__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
  flex: 1 1 0;
  min-width: 120px; /* consistent card width regardless of value length, per §5.2 */
  box-sizing: border-box;
}

.sr-keyfacts__icon-slot {
  display: inline-block;
  width: var(--space-l);
  height: var(--space-l);
  border-radius: var(--radius-small);
  background: var(--color-primary-light);
  /* No icon glyph -- icon family remains pending-product-decision. This
     tinted placeholder matches the legacy site's icon-chip visual
     rhythm (e.g. .rm-icon/.sv-icon backgrounds) without inventing a
     glyph that does not exist. */
}

.sr-keyfacts__label {
  font-family: var(--font-family-body);
  font-size: var(--font-caption-size);
  font-weight: var(--font-weight-regular);
  color: var(--color-muted);
}

.sr-keyfacts__value {
  font-family: var(--font-family-body);
  font-size: var(--font-body-size);
  font-weight: var(--font-weight-bold); /* visually heavier than the label, per §5.2 hierarchy rule */
  color: var(--color-text-primary);
  word-break: break-word;
}

/* --- Tablet: two rows of three ------------------------------------------ */
@media (min-width: 768px) and (max-width: 1023px) {
  .sr-keyfacts__item {
    flex: 1 1 calc(33.333% - var(--space-m));
    max-width: calc(33.333% - var(--space-m));
  }
}

/* --- Desktop/laptop: single row of up to six ---------------------------- */
@media (min-width: 1024px) {
  .sr-keyfacts__item {
    flex: 1 1 0;
  }
}

/* --- Mobile: horizontal scroll, one primarily visible, others peeking --- */
@media (max-width: 767px) {
  .sr-keyfacts {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .sr-keyfacts__item {
    flex: 0 0 auto;
    min-width: 70%;
    scroll-snap-align: start;
  }
}