/* ==========================================================================
   parts/horse-details.css — horse single, section 2 (parts/horse/details.php).
   Live: Bricks #1060 `section.bg--tertiary.wlp-pad-top--none` (docs/scout/r2/SINGLE.md §6, used-css-r2.css).
   Sub-parts style themselves: horse-pedigree.css, horse-facts.css, horse-pricing.css, horse-textboxes.css.
   Live heights (Noverre, forced final state): 5473.28 / 3345.14 / 2594.94 at 390 / 768 / 1440.
     section   padding-top 0 (.wlp-pad-top--none), bottom = section padding (49.25 / 65.03 / 90), gutter sides
     container flex column, gap --content-gap (24.18 / 26.43 / 30)
     head      .brxe-block.center--all: flex column, centred, text-align centre, gap --content-gap
     lower     .gap--xl.align-items--center.width--xl.self--center.margin-top--xl
   ========================================================================== */

.horse-details {
  background-color: var(--tertiary);                 /* live .bg--tertiary (#042E4A) */
}

.horse-details__container {
  gap: var(--content-gap);
}

/* live .brxe-block.center--all (#algxvh): h1, button stack, pedigree, facts, pricing */
.horse-details__head {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--content-gap);
  width: 100%;
  text-align: center;
}

/* live h1.brxe-post-title.text--white.h--2: Nimbus 700 var(--h2), lh calc(4px + 2ex) (base), text-wrap pretty (base) */
.horse-details__title {
  color: var(--white);
  font-size: var(--h2);
}

/* live #brxe-zijscs .center--all.gap--s: width 100%, max 40rem */
.horse-details__buttons {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--space-s);
  width: 100%;
  max-width: 40rem;
}

/* Buttons v2 lock (docs/design/BUTTONS.md §3.1 R1 / R2): live's 52 px boxes (btn--m 16/32 + a 2px border), so the
   head block and every later y stay equal to live. Geometry only; the style, surface and glow come from buttons.css. */
.horse-details__btn--enquire,
.horse-details__btn--pedigree {
  --btn-h: 5.2rem;
}

/* live .brxe-block.gap--xl.align-items--center.width--xl.self--center.margin-top--xl (#klnowo):
   post content, the textboxes, the bottom "Enquire now" */
.horse-details__lower {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: center;
  gap: var(--space-xl);
  inline-size: var(--width-xl);
  max-inline-size: 100%;
  margin-top: var(--space-xl);
}

/* live .brxe-post-content.text--white (7 stable horses; none of the 13 archive horses) */
.horse-details__content {
  width: 100%;
  color: var(--white);
}
.horse-details__content > * + * { margin-top: 1.6rem; }   /* live: 16 px between post-content blocks at every width (DI-R5-05) */
/* Links (the mailto links of 7 stable singles): live prints the plain ACSS link, --primary with no underline (measured
   round 5, DI-R5-11): base.css's default link rule, so no override here. */
.horse-details__content img { height: auto; }

/* live a#brxe-xjavir: .btn--m with no border (48 px), width 60rem / ≤991 50rem / ≤767 35rem / ≤478 100%.
   Buttons v2 lock (BUTTONS.md §3.1 R3): the 48 px box; the widths are the block's own layout. */
.horse-details__btn--bottom {
  --btn-h: 4.8rem;
  width: 100%;
}
@media (min-width: 479px) {
  .horse-details__btn--bottom { width: 35rem; }
}
@media (min-width: 768px) {
  .horse-details__btn--bottom { width: 50rem; }
}
@media (min-width: 992px) {
  .horse-details__btn--bottom { width: 60rem; }
}