/* ==========================================================================
   parts/horse-facts.css — horse single key facts (parts/horse/facts.php).
   Live: `#brxe-evuzhl.grid--auto-6.gap--none.margin-top--m.margin-bottom--m` > 6 × `.wlp-iconbox1`
   (docs/scout/r2/SINGLE.md §6.3, used-css-r2.css). ACSS declarations folded into BEM (R2-PLAN §1.3):
     .grid--auto-6  repeat(auto-fit, minmax(min(100%, max(--min, (100% − 5 × --grid-gap) / 6)), 1fr)),
                    --min = (--content-width − 5 × --grid-gap) / 6 × 0.7; the column gap is 0 (.gap--none) but the
                    formula keeps --grid-gap, so the grid has 6 / 5 / 4 / 3 / 2 columns at ≥991 / 840 / 767 / 520 /
                    ≤481 (live probes): 6 × 220 at 1440, 4 × 173.89 at 768, 2 × 173.81 at 390.
     rows           row-gap 0, 2rem at ≤767 (#brxe-evuzhl _cssCustom); margin-block --space-m (30 / 26.43 / 24.18)
   Box: flex column (wrap), centred, gap 1rem, padding-inline 1rem, white, 1px --secondary-semi-light rules at both
   sides (the right one at −1px, over the next box's left rule). 102.34 px tall (icon 30 + 10 + heading 27.25 + 10 +
   value 25.09); the Race Series box holds the logo grid instead (50 px per row, 10px apart: 127.25 / 187.25).
   ========================================================================== */

.horse-facts {
  --hf-columns: 6;                                   /* ACSS .grid--auto-6 */
  --hf-min: calc((var(--content-width) - (var(--hf-columns) - 1) * var(--grid-gap)) / var(--hf-columns) * 0.7);
  --hf-min-formula: min(100%, max(var(--hf-min), (100% - (var(--hf-columns) - 1) * var(--grid-gap)) / var(--hf-columns)));
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--hf-min-formula), 1fr));
  gap: 2rem 0;                                       /* ≤767: row-gap 2rem (live _cssCustom); columns: .gap--none */
  inline-size: 100%;
  margin-block: var(--space-m);                      /* live .margin-top--m.margin-bottom--m */
}
@media (min-width: 768px) {
  .horse-facts { row-gap: 0; }
}

/* live .wlp-iconbox1 (+ the ACSS grid--auto child rule: min-width 0, max-width 100%, overflow-wrap) */
.horse-facts__item {
  position: relative;
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  align-self: stretch;
  gap: 1rem;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding-inline: 1rem;
  color: var(--white);
  overflow-wrap: break-word;
}
.horse-facts__item::before,
.horse-facts__item::after {
  content: "";
  position: absolute;
  top: 0;
  display: block;
  width: 1px;
  height: 100%;
  background: var(--secondary-semi-light);
}
.horse-facts__item::before { left: 0; }
.horse-facts__item::after { right: -1px; }

/* live .brxe-icon 30 × 30 (#brxe-kgvbgi … { height: 30px; width: 30px }); the 32×28 Colour icon is fitted inside */
.horse-facts__icon {
  display: block;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  max-width: 100%;
  overflow: hidden;
}

/* live span.wlp-iconbox1__heading: Inter 700 var(--text-l), #79ACD2, lh 27.25 (inherited) */
.horse-facts__label {
  max-width: 100%;
  color: var(--secondary-semi-light);
  font-size: var(--text-l);
  font-weight: 700;
}

/* live p.wlp-iconbox1__text: Inter 400 1.4rem, white, lh 25.09 (base p: calc(10px + 2ex)) */
.horse-facts__value {
  max-width: 100%;
  font-size: 1.4rem;
}

/* live ul#brxe-nvxmdh (Bricks image gallery, --columns 2, --gutter 1rem): 50px 50px, 10px apart, shrink-wrapped.
   (0,2,0): beats race-series-logos.css's flex row, which prints after this file. */
.horse-facts .horse-facts__logos {
  display: grid;
  grid-template-columns: repeat(2, var(--rsl-tile));
  gap: var(--rsl-gap);
  justify-content: center;
}