/* ==========================================================================
   hounds.css — the hound pages.

   Hounds at Home, one hound's profile, Hounds Past, Hounds Around, Hounds
   Future and a litter. Loaded only by those pages.
   ========================================================================== */

/* -- The grid -------------------------------------------------------------- */

.zb-hound-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zb-space-2);
  margin-block: var(--zb-space-5);
}

.zb-hound-grid { margin-top: var(--zb-space-5); }

.zb-hound-card .zb-card__body { display: flex; flex-direction: column; gap: 0.25rem; }
.zb-hound__name { margin: 0; }
.zb-hound__name a { text-decoration: none; }
.zb-hound__name a:hover { text-decoration: underline; text-underline-offset: 0.18em; }

.zb-hound__regname { display: block; font-size: var(--zb-size-small); line-height: 1.35; }

.zb-hound__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  margin: 0.25rem 0 0;
  color: var(--zb-text-muted);
  font-size: var(--zb-size-small);
}

.zb-hound__facts span { display: inline-flex; align-items: center; gap: 0.25rem; }
.zb-hound__years { font-family: var(--zb-font-display); font-style: italic; }

/* No photograph yet: a quiet placeholder of the right shape, not a gap and
   not a broken image. Most of these are waiting on the media import. */
.zb-hound-card__nophoto {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 12rem;
  background: var(--zb-bg-tint);
  color: var(--zb-meadow);
}

/* -- Hounds Past ----------------------------------------------------------- */

.zb-memorial-head { text-align: center; }
.zb-memorial-head .zb-prose { margin-inline: auto; }

.zb-hound-card--memorial .zb-card__media img { filter: saturate(0.92); }

/* -- One hound ------------------------------------------------------------- */

.zb-hound-hero { display: grid; gap: var(--zb-space-5); align-items: center; }

@media (min-width: 48em) {
  .zb-hound-hero { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--zb-space-6); }
}

.zb-hound-hero__media {
  border-radius: var(--zb-radius-lg);
  overflow: hidden;
  background: var(--zb-bg-tint);
  aspect-ratio: 4 / 5;
}

.zb-hound-hero__media img,
.zb-hound-hero__media picture { width: 100%; height: 100%; object-fit: cover; display: block; }

.zb-hound__fullname { font-size: 1.0625rem; line-height: 1.4; margin-bottom: 0.5rem; }
.zb-hound__years { font-size: 1.125rem; color: var(--zb-text-muted); }
.zb-hound__years--memorial { font-family: var(--zb-font-display); font-style: italic; font-size: 1.25rem; }

.zb-hound__epitaph {
  margin-top: var(--zb-space-4);
  padding-left: var(--zb-space-4);
  border-left: 3px solid var(--zb-russet);
  font-family: var(--zb-font-display);
  font-style: italic;
  font-size: 1.125rem;
}

.zb-hound--memorial .zb-hound-hero__name .zb-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--zb-accent);
}

.zb-hound-grid-main { display: grid; gap: var(--zb-space-6); }

@media (min-width: 62em) {
  .zb-hound-grid-main { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; }
}

/* Title abbreviations explain themselves on hover and on focus. */
abbr.zb-title { text-decoration: underline dotted; text-underline-offset: 0.2em; cursor: help; }

.zb-facts { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem var(--zb-space-4); margin: 0; }
.zb-facts dt { color: var(--zb-text-muted); font-size: var(--zb-size-small); font-weight: 600; }
.zb-facts dd { margin: 0; }

.zb-facts--inline {
  grid-template-columns: repeat(auto-fit, minmax(10rem, max-content));
  gap: var(--zb-space-3) var(--zb-space-6);
  margin-block: var(--zb-space-5);
}

.zb-facts--inline dt { grid-row: 1; }
.zb-facts--inline dd { grid-row: 2; }

.zb-hound__related,
.zb-hound__posts { list-style: none; margin: 0; padding: 0; }
.zb-hound__related li + li,
.zb-hound__posts li + li { margin-top: 0.35rem; }
.zb-hound__posts .zb-small { color: var(--zb-text-muted); margin-left: 0.5rem; }

.zb-hound-more { margin-top: var(--zb-space-7); }
.zb-hound-more a { display: inline-flex; align-items: center; gap: 0.4rem; }

/* -- Photographs -----------------------------------------------------------
   The grid itself is in zoiboyz.css, since a journal post has one too. */

/* -- Hounds Future --------------------------------------------------------- */

.zb-status {
  padding: var(--zb-space-5);
  margin-block: var(--zb-space-5);
  border: 1.5px solid var(--zb-rule);
  border-left-width: 6px;
  border-radius: var(--zb-radius-lg);
  background: var(--zb-surface);
}

.zb-status h2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: var(--zb-size-h3);
}

.zb-status p:last-child { margin-bottom: 0; }

/* The honest default is the quiet one. */
.zb-status--none      { border-left-color: var(--zb-stone); }
.zb-status--planned   { border-left-color: var(--zb-sport-zassc); }
.zb-status--available { border-left-color: var(--zb-pasture); background: var(--zb-bg-tint); }

.zb-litter-card .zb-card__body { padding-block: var(--zb-space-5); }