/* ==========================================================================
   parts/horse-textboxes.css — horse single overview / pedigree textboxes (parts/horse/textboxes.php).
   Live: `#brxe-kliruk.masonry--2.masonry--s-1.gap--xxl.gap--l-l.width--xl` > 2 column blocks (#wukpyq, #krghlk)
   > `.wlp-textbox` (docs/scout/r2/SINGLE.md §6.5 / §6.5a; R2-PLAN GAP-FILL #4, the reference CSS used verbatim).
   Layout rule (checked by scripts/extract/r2-masonry-check.mjs --part-css, variant P):
     - CSS multi-column, never grid or flex; row-gap/gap do nothing in a multicol container.
     - Spacing lives on the columns: flex gap --content-gap between textboxes, and margin-block-end --row-gap after
       each column (ACSS [class*=masonry]…gap--… > *), which counts: height = c1 + c2 + 2·rg in one column,
       max(c1, c2, (c1 + c2 + 2·rg) / 2) in two (Chromium balances on the whole flow).
     - Queries 481 / 993 (ACSS masonry s / l are max-width 480 / 992), not the replica's 479 / 992.
   Live heights (masonry) Noverre 1575.09 / 2311.47 / 4098.75, Cool Aza 1561.47 / 2050.44 / 3826.25, Profondo
   1588.72 / 2178.13 / 4098.75 at 1440 / 768 / 390.
   ========================================================================== */

.horse-textboxes {                         /* live #brxe-kliruk .masonry--2.masonry--s-1.gap--xxl.gap--l-l.width--xl */
  --row-gap: var(--space-l);               /* ≤992 (.gap--l-l, max-width: 992px) */
  display: block;                          /* multicol; never flex/grid */
  inline-size: var(--width-xl);
  max-inline-size: 100%;
  column-count: 1;                         /* ≤480 (.masonry--s-1) */
  column-gap: var(--row-gap);
}
@media (min-width: 481px) { .horse-textboxes { column-count: 2; } }
@media (min-width: 993px) { .horse-textboxes { --row-gap: var(--space-xxl); } }

.horse-textboxes__col {                    /* live #brxe-wukpyq / #brxe-krghlk (.brxe-block, no settings) */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--content-gap);                 /* = --space-m: spacing BETWEEN textboxes */
  inline-size: 100%;
  break-inside: avoid;
  margin-block-end: var(--row-gap);        /* ACSS [class*=masonry]…gap--… > * ; trailing margin counts */
}

.horse-textbox {                           /* live .wlp-textbox (.brxe-block: width 100%) */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: 0;
  inline-size: 100%;
}

/* live h4.wlp-textbox__heading.text--secondary-semi-light: Nimbus 700 var(--h4) (base h4), lh calc(4px + 2ex);
   the stored headings are upper case (no transform) */
.horse-textbox__heading {
  color: var(--secondary-semi-light);
}

/* live .wlp-textbox__content (#brxe-snxrze …): 1px top rule, 1rem margin + padding, white Inter 16 / 27.25;
   paragraphs butt together (base: p margins 0) */
.horse-textbox__content {
  width: 100%;
  max-width: 100%;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #dddedf;           /* live: Bricks' default border colour (measured rgb(221, 222, 223)) */
  color: var(--white);
}
.horse-textbox__content a:not([class*="btn--"]) {
  --link-color: var(--white);
  --link-color-hover: var(--primary-light);
  text-decoration: underline;
}