/* ==========================================================================
   parts/horse-grid.css — horse grid section (parts/horse-grid.php).
   Live: /horses/ main > section.brxe-section.wlp-pad-top--none > .brxe-container >
         .brxe-block.width--xl.self--center.gap--l.grid--3.grid--s-1.grid--m-1 (+ the hidden #brxe-ddbrzj pagination).
   Spec: docs/scout/r2/ARCHIVE.md §4. Heights (live): 10842.06 / 14773.28 / 4501.92 at 390 / 768 / 1440.
   The section has no background of its own: the page's --secondary shows through (base.css html background).
   Columns: 1 up to 768px, 3 from 769px (ACSS .grid--m-1 is max-width 768px; not the replica's 767/768 step).
   ========================================================================== */

/* .section.section--no-top: padding 0 / --section-space-m, --gutter inline. .container: flex column, flex-start,
   gap --space-m (live .brxe-container). */

.horse-grid__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-l);                               /* live .gap--l: 32.38 / 37.27 / 45 */
  width: var(--width-xl);                            /* live .width--xl: 1092.8px, max 100% */
  max-width: 100%;
  align-self: center;                                /* live .self--center */
}

@media (min-width: 769px) {
  .horse-grid__grid {
    grid-template-columns: var(--grid-3);            /* live .grid--3 */
  }
}

/* Pagination (only when the query has more than one page; never on live's 13 today). Live Bricks
   .brxe-pagination.margin-top--s: .page-numbers --primary, --text-l, current page white. */
.horse-grid__pagination {
  width: 100%;
  margin-top: var(--space-s);
}

.horse-grid__pagination ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.horse-grid__pagination :is(a, span).page-numbers {
  color: var(--primary);
  font-size: var(--text-l);
  text-decoration: none;
}

.horse-grid__pagination .page-numbers.current { color: var(--white); }

/* Round 5 (R5-PLAN §1.3): the /our-stable/ listing (.horse-grid--stable, stable cards in their grid variant). Live
   .grid--3.grid--m-2.grid--s-1, probed with no reload at 479/480/481/768/769 (STABLE §4.1): 1 column up to 480px,
   2 from 481 to 768, 3 from 769 (the rule above). The section keeps its top padding (padding: default). */
@media (min-width: 481px) and (max-width: 768px) {
  .horse-grid--stable .horse-grid__grid { grid-template-columns: var(--grid-2); }
}