/*
 * Platform blocks + icon colours.
 * Used by templates/partials/platform_blocks.html and templates/partials/icons/*.html.
 * The section around the grid uses main.css (.section, .stack, .section-head).
 *
 * Colours come only from main.css tokens, so light/dark mode follows the site.
 * Icon strokes use currentColor. The accent detail uses --accent; if main.css
 * names its accent token differently, change the one line marked ACCENT below.
 * Without this file the icons still render, in a single colour.
 */

/* ---------- Icons ---------- */
.ux-icon {
  --ux-icon-accent: var(--accent, currentColor); /* ACCENT */
  display: block;
  flex-shrink: 0;
  overflow: visible;
}
.ux-icon .ux-icon__accent { stroke: var(--ux-icon-accent); }
.ux-icon .ux-icon__accent-fill { fill: var(--ux-icon-accent); }

/* ---------- Grid: 1 col phone, 2 col small tablet, 3 col tablet, 5 col desktop ---------- */
.ux-blocks__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
@media (min-width: 560px) {
  .ux-blocks__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* odd tile out spans the row instead of leaving a gap */
  .ux-block:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 860px) {
  .ux-blocks__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ux-block:last-child:nth-child(odd) { grid-column: auto; }
}
@media (min-width: 1100px) {
  .ux-blocks__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ---------- Tile ---------- */
.ux-block {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 24px 20px 22px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-primary);
  color: var(--text-primary);
}
.ux-block__num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--label, var(--text-secondary));
  font-variant-numeric: tabular-nums;
}
.ux-block__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.ux-block__text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-secondary, var(--text-primary));
}