/* ==========================================================================
   parts/horse-card-archive.css — archive horse card (parts/horse-card-archive.php).
   Live: .wlp-horse (Bricks template #1019 inline CSS + Fluent Snippet 11), verbatim in docs/scout/r2/ARCHIVE.md §5.3.
   Spec: ARCHIVE §5.1–§5.4. Card heights (live): New 905.39 / 1201.66 / 963.08, Sold 769.34 / 1065.61 / 810.23.
   Every wrapper is a Bricks block (flex column, gap --space-m = 24.17 / 26.43 / 30); the empty p.__desc and
   div.__prices each keep a gap, as on live. Grid items stretch to the row height and space-between spreads the rest.
   No hover on the card, image, title or logos (live); buttons only.
   ========================================================================== */

.horse-card-archive {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  width: 100%;
  padding: 1.2rem 1.2rem 5rem;
  border-radius: .4rem;                              /* live .wlp-horse (literal) */
  background-color: var(--white);
}

.horse-card-archive__top,
.horse-card-archive__middle,
.horse-card-archive__bottom {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  align-items: center;
  gap: var(--space-m);
  width: 100%;
}

/* Featured image, medium_large (768 × 663) + srcset: full content width, height from the ratio, no radius. */
.horse-card-archive__image {
  display: block;
  width: 100%;
  height: auto;
}

/* Badge (parts/badge.php, context archive): live .wlp-horse__badge. Absolute to the card: flush with its top edge
   and the image's right edge. Colours are the badge part's (--primary / --wfx-sold / --wfx-ladies while New). */
.horse-card-archive .badge {
  position: absolute;
  top: 0;
  right: 1.2rem;
  padding: 1rem 2rem;
}

.horse-card-archive__title {
  width: 90%;
  text-align: center;
}

.horse-card-archive__desc {                          /* live .short_desc */
  font-size: 1.4rem;
  line-height: 1.2;
  text-align: center;
}

/* Share prices: live div.brxe-div (always) > .wlp-horse__share-price-wrapper (only with rows). */
.horse-card-archive__price-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.horse-card-archive__price-label {                   /* "Share price: " — line-height 27.25 (inherited) */
  color: var(--base-dark);
  font-size: 1.3rem;
  font-weight: 700;
}

.horse-card-archive__price {
  font-size: 1.3rem;
  line-height: 1em;
  text-align: center;
}

/* Availability line: live .wlp-horse__remaining. Not uppercased (only the badge is). */
.horse-card-archive__availability {
  width: 100%;
  color: var(--primary);
  font-size: 1.2rem;
  font-weight: 700;
  text-align: center;
}

.horse-card-archive--ladies .horse-card-archive__availability { color: var(--wfx-ladies); }

/* Trainer: live .wlp-horse__trainer-value, "Trainer:" + <br> + the label (always 2+ lines). */
.horse-card-archive__trainer {
  color: var(--base-dark);
  font-size: 1.2rem;
  text-align: center;
}

/* Buttons: live .wlp-horse__button-wrapper (gap 1.6rem) + btn--primary btn--m with padding-block 1.2rem → h 40. */
.horse-card-archive__buttons {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  width: 100%;
}

/* v2 md, full width (btn--block), locked to live's 40px box, 16px label and outer text width (30px padding + the
   2px border = live's 32px), so they wrap to 56 at 769–~850 exactly as on live (Buttons v2 lock, docs/design/
   BUTTONS.md §4.3). "Learn more" is the secondary on light (was live's dark gradient, DI-U-07). */
.horse-card-archive__button {
  --btn-h: 4rem;
  --btn-font-size: 1.6rem;
  --btn-padding-inline: 3rem;
}

/* Ladies-only (Snippet 11 .wlp-horse[wlp-lo='True'] .btn--primary): the pink "Enquire now". Hover follows the
   system (ink fill on the white card). */
.horse-card-archive--ladies .horse-card-archive__button--enquire { --btn-bg: var(--wfx-btn-grad-ladies); }

/* Logos: live .wlp-horse__image-buttom (width 70%) > ul.wlp-horse__image-gallery (centred, wrapping, 10px gap). */
.horse-card-archive__logos {
  max-width: 70%;
}

@media (min-width: 479px) {
  .horse-card-archive__availability { width: 95%; }
}