/* ==========================================================================
   parts/horse-card.css — horse card (parts/horse-card.php), live's .horse-slider__slide (Bricks kyvusr).
   Live CSS: docs/scout/bricks-inline.pretty.css 94–119, 282–283; measurements: SECTIONS-A §3.3,
   SECTIONS-B §2.3. Card 540 × 590 @1440 · 337.8 × 412.4 @768 · 347.6 × 467.6 @390 (2 / 2 / 1 per view).

   Paint order is live's and matters: card ::before (dark fade) → wrapper (image) → badge → wrapper ::after
   (the 12 % → 48 % fade that darkens the lower photo AND the badge) → content (z-index 2 flex item).
   Live Bricks-block traits (display flex column, width 100 %, content-gap) are spelled out per element.
   Known live quirk kept (DI-D9): at 768–~788px "Learn more" runs ~10px past the card edge and is clipped by
   the card's overflow:hidden — the two min-width:140px buttons do not fit side by side.
   ========================================================================== */

.horse-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 30rem;
  overflow: hidden;
  border: 1px solid var(--secondary-semi-dark);
  border-radius: var(--radius-l);
}
.horse-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--wfx-horse-card-overlay);
  pointer-events: none;
}
.horse-card > * { position: relative; }

.horse-card__wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  align-items: flex-start;
  justify-content: space-between;
  row-gap: 0;
  width: 100%;
  padding-bottom: 4rem;
}
.horse-card__wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--wfx-horse-wrapper-overlay);
  pointer-events: none;
}

/* 1024 × 884 ("large"); width/height attributes keep the ratio, the file is already cropped (fill). */
.horse-card__image {
  border-top-left-radius: var(--radius-l);
  border-top-right-radius: var(--radius-l);
}

.horse-card__wrapper > .badge {
  position: absolute;
  top: 0;
  right: 8%;
}

/* Overlaps the photo by 16rem (< 768) / 22rem (≥ 768); paints above the wrapper fade as a z-indexed flex item. */
.horse-card__content {
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: 0;
  width: 100%;
  margin-top: -16rem;
  padding-inline: 2rem;
  color: var(--secondary-semi-light);
}

.horse-card__title { color: var(--white); }

.horse-card__text {
  margin: 1.4rem 0 2.4rem;
  font-size: var(--text-l);
  font-weight: 700;
}

.horse-card__row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding-block: 1.2rem;
  border-top: 1px solid var(--secondary-semi-light);
}
.horse-card__row--pedigree {
  margin-bottom: 3rem;
  border-bottom: 1px solid var(--secondary-semi-light);
}

.horse-card__price {
  font-size: var(--text-l);
  font-weight: 700;
}

.horse-card__pedigree { --link-color: var(--secondary-semi-light); }   /* hover → --primary-hover (base.css) */

.horse-card__buttons {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--content-gap);
  width: 100%;
}

/* Card actions: v2 sm buttons locked to live's compact card geometry (Buttons v2 lock, docs/design/BUTTONS.md
   §4.3): 11px labels, 10px side padding; "Enquire Today" 31 tall (42 when it wraps at 768) and "Learn more" 35. */
.horse-card__button {
  --btn-font-size: 1.1rem;
  --btn-padding-inline: 1rem;
}
.horse-card__button--enquire {
  --btn-h: 3.1rem;
  --btn-padding-inline: .8rem;          /* its 2px border is new: keep live's outer width (no extra wrap at 390) */
}
.horse-card__button--more { --btn-h: 3.5rem; }

/* Ladies-only horse (sold or not): the pink primary. Hover follows the system (ice fill). */
.horse-card--ladies .horse-card__button--enquire { --btn-bg: var(--wfx-btn-grad-ladies); }

@media (min-width: 479px) {
  .horse-card__content { padding-inline: 4rem; }
}

@media (min-width: 768px) {
  .horse-card__content { margin-top: -22rem; }
}