/* ==========================================================================
   parts/stable-card.css — stable card (parts/stable-card.php), live's .wlp-stable (Bricks owwbzw).
   Live CSS: docs/scout/bricks-inline.pretty.css 142–156 + Bricks image-gallery rules; measurements:
   SECTIONS-B §4.3. Card 330.9 × 610.6 @1440 (image 320.9 × 277, 768:663, "medium_large").
   The card grows to the slide height (the tallest card sets it); the info block takes the spare height,
   so the logo row sits at the same y on every card. Live Bricks-block traits are spelled out per element.
   ========================================================================== */

.stable-card {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  align-items: flex-start;
  align-self: stretch !important;
  gap: 0;
  width: 100%;
  padding: .5rem;
  overflow: hidden;
  border-radius: var(--radius-l);
  background-color: var(--white);
  box-shadow: var(--shadow-card);
}

.stable-card__image {
  border-top-left-radius: var(--radius-m);
  border-top-right-radius: var(--radius-m);
}

.stable-card__body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  align-items: center;
  gap: 2rem;
  width: 100%;
  padding: 2rem;
}

.stable-card__title {
  font-size: var(--text-l);
  text-align: center;
}

.stable-card__info-wrapper {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  align-items: flex-start;
  gap: var(--content-gap);
  width: 100%;
  margin-top: var(--space-m);
}

/* Sire | Sex / Dam | Age / Colour | Trainer */
.stable-card__info {
  display: grid;
  grid-template-columns: var(--grid-2);
  align-items: flex-start;
  gap: 1rem;
  width: 100%;
}

.stable-card__info-item {
  font-size: 1.3rem;
  line-height: 1.3em;
}

/* Race-series logos (live Bricks image gallery, 50 × 50 tiles, 1rem apart, centred). */
.stable-card__logos-wrapper {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: var(--content-gap);
  width: 100%;
}

.stable-card__logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.stable-card__logo {
  position: relative;
  display: grid;
  align-items: center;
  max-width: 50px;
  height: 50px;
  background-color: var(--white);
  line-height: 1.6;
}

.stable-card__logo-figure {
  display: block;
  margin: 0;
}

.stable-card__logo-image {
  display: block;
  object-fit: cover;
}

/* ---- variant grid (round 5, R5-PLAN §1.4: /our-stable/, live loop element tbysga; STABLE §4.2). Same card CSS as
   the slider (live's .wlp-stable* rules are identical on both pages) plus: the image sits in a <figure> (live
   figure.wlp-stable__image, the 15px top radius on the figure and on the img), the labels are bold, and the logos are
   the medium_large files (a 768×461 logo shows 50 × 30, centred by the li's align-items). */
.stable-card__figure {
  width: 100%;
  margin: 0;
  overflow: hidden;
  border-top-left-radius: var(--radius-m);
  border-top-right-radius: var(--radius-m);
}
.stable-card__figure .stable-card__image {
  display: block;
  width: 100%;
  height: auto;
}
.stable-card__info-item strong { font-weight: 700; }
.stable-card--grid .stable-card__logo-image {
  width: 100%;
  height: auto;
}