/* =============================================================
   Pedigree Cats & Kittens – Front-end Styles  v5.0.0
   Two-column card: details on the left, featured image on the right.
   Card background uses a very light tint of the chosen accent colour.
   Status badge is a polished frosted-glass pill on the image.
   ============================================================= */

:root {
  --pks-accent:        #c8a96e;
  --pks-tint-bg:       rgba(200,169,110,0.06);
  --pks-tint-border:   rgba(200,169,110,0.18);
  --pks-tint-pricing:  rgba(200,169,110,0.10);

  --pks-text:         var(--color-text,    var(--text-color,       #2d2d2d));
  --pks-text-muted:   var(--color-muted,                           #6b7280);
  --pks-radius:       14px;
  --pks-radius-sm:    8px;
  --pks-shadow:       0 2px 10px rgba(0,0,0,.07), 0 0 0 1px rgba(0,0,0,.04);
  --pks-shadow-hover: 0 10px 32px rgba(0,0,0,.13), 0 0 0 1px rgba(0,0,0,.05);
  --pks-font:         var(--font-primary,  var(--body-font, inherit));
}

/* ── Card shell — TWO COLUMNS ────────────────────────────── */

.pks-card {
  background:            var(--pks-tint-bg);
  border:                1px solid var(--pks-tint-border);
  border-radius:         var(--pks-radius);
  overflow:              hidden;
  box-shadow:            var(--pks-shadow);
  font-family:           var(--pks-font);
  isolation:             isolate;
  transition:            box-shadow .22s ease, transform .22s ease;
  display:               grid;
  grid-template-columns: 1fr 42%;
  align-items:           stretch;
}

.pks-card:hover {
  box-shadow: var(--pks-shadow-hover);
  transform:  translateY(-2px);
}

/* ── LEFT COLUMN: body / details ─────────────────────────── */

.pks-card__body {
  padding:        28px;
  display:        flex;
  flex-direction: column;
  gap:            18px;
}

.pks-card__name {
  margin:      0;
  font-size:   1.25rem;
  font-weight: 700;
  color:       var(--pks-text);
  line-height: 1.3;
}

/* ── Details grid ────────────────────────────────────────── */

.pks-card__details {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   10px 16px;
  margin:                0;
}

.pks-card__detail {
  display:        flex;
  flex-direction: column;
  gap:            2px;
}

.pks-card__detail dt {
  font-size:      0.68rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color:          var(--pks-text-muted);
}

.pks-card__detail dd {
  margin:      0;
  font-size:   0.9rem;
  color:       var(--pks-text);
  font-weight: 500;
}

/* ── Pricing block ───────────────────────────────────────── */

.pks-card__pricing {
  display:       flex;
  gap:           20px;
  align-items:   center;
  padding:       12px 16px;
  background:    var(--pks-tint-pricing);
  border:        1px solid var(--pks-tint-border);
  border-radius: var(--pks-radius-sm);
}

.pks-card__price,
.pks-card__deposit {
  display:        flex;
  flex-direction: column;
  gap:            2px;
}

.pks-card__price-label {
  font-size:      0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight:    700;
  color:          var(--pks-text-muted);
}

.pks-card__price-value {
  font-size:   1.35rem;
  font-weight: 800;
  color:       var(--pks-accent);
  line-height: 1;
}

.pks-card__deposit-value {
  font-size:   1.05rem;
  font-weight: 700;
  color:       var(--pks-text);
  line-height: 1;
}

/* ── Additional details block ────────────────────────────── */

.pks-card__additional {
  padding:       14px 16px;
  background:    var(--pks-tint-bg);
  border:        1px solid var(--pks-tint-border);
  border-radius: var(--pks-radius-sm);
}

.pks-card__additional-heading {
  margin:         0 0 6px;
  font-size:      0.68rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color:          var(--pks-text-muted);
}

.pks-card__additional-text {
  margin:      0;
  font-size:   0.88rem;
  color:       var(--pks-text);
  line-height: 1.7;
  font-style:  italic;
}

/* ── CTA button ──────────────────────────────────────────── */

.pks-card__cta {
  display:         block;
  text-align:      center;
  padding:         11px 20px;
  background:      var(--pks-accent);
  color:           #fff !important;
  border-radius:   var(--pks-radius-sm);
  font-size:       0.875rem;
  font-weight:     700;
  text-decoration: none;
  letter-spacing:  0.03em;
  margin-top:      auto;
  transition:      filter .18s ease, transform .15s ease, box-shadow .18s ease;
  box-shadow:      0 2px 8px rgba(0,0,0,.15);
}

.pks-card__cta:hover,
.pks-card__cta:focus {
  filter:          brightness(0.88);
  color:           #fff !important;
  transform:       translateY(-1px);
  box-shadow:      0 5px 16px rgba(0,0,0,.20);
  text-decoration: none;
}

/* ── RIGHT COLUMN: featured image ────────────────────────── */

.pks-card__image {
  position:   relative;
  overflow:   hidden;
  background: var(--pks-tint-bg);
  min-height: 260px;
}

.pks-card__img {
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: center;
  display:         block;
  transition:      transform .4s ease;
}

.pks-card:hover .pks-card__img {
  transform: scale(1.04);
}

.pks-card__image--no-photo {
  display:         flex;
  align-items:     center;
  justify-content: center;
}

/* ── STATUS BADGE ────────────────────────────────────────── */

.pks-card__status {
  position:   absolute;
  top:        14px;
  right:      14px;
  z-index:    10;

  display:       inline-flex;
  align-items:   center;
  gap:           6px;
  padding:       5px 13px 5px 10px;
  border-radius: 30px;
  white-space:   nowrap;

  font-size:      0.70rem;
  font-weight:    700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height:    1;

  backdrop-filter:         blur(10px) saturate(1.4);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  background:  rgba(255,255,255,0.75);
  border:      1px solid rgba(255,255,255,0.55);
  box-shadow:  0 2px 12px rgba(0,0,0,.18),
               inset 0 1px 0 rgba(255,255,255,.85);
  transition:  opacity .2s ease, transform .2s ease;
}

.pks-card__status::before {
  content:       '';
  display:       inline-block;
  width:         7px;
  height:        7px;
  border-radius: 50%;
  flex-shrink:   0;
}

/* ── Status colour tokens ────────────────────────────────── */

.pks-status--available       { color: #065f46; }
.pks-status--available::before       { background: #10b981; box-shadow: 0 0 0 2px rgba(16,185,129,.25); }

.pks-status--reserved        { color: #78350f; }
.pks-status--reserved::before        { background: #f59e0b; box-shadow: 0 0 0 2px rgba(245,158,11,.25); }

.pks-status--athome          { color: #312e81; }
.pks-status--athome::before          { background: #6366f1; box-shadow: 0 0 0 2px rgba(99,102,241,.25); }

.pks-status--active-queen    { color: #831843; }
.pks-status--active-queen::before    { background: #ec4899; box-shadow: 0 0 0 2px rgba(236,72,153,.25); }

.pks-status--active-sire     { color: #1e3a5f; }
.pks-status--active-sire::before     { background: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,.25); }

.pks-status--retired-queen   { color: #4a1942; }
.pks-status--retired-queen::before   { background: #a855f7; box-shadow: 0 0 0 2px rgba(168,85,247,.25); }

.pks-status--retired-sire    { color: #1c3040; }
.pks-status--retired-sire::before    { background: #64748b; box-shadow: 0 0 0 2px rgba(100,116,139,.25); }

.pks-status--avail-ret-queen { color: #6b21a8; }
.pks-status--avail-ret-queen::before { background: #c084fc; box-shadow: 0 0 0 2px rgba(192,132,252,.25); }

.pks-status--avail-ret-sire  { color: #0c4a6e; }
.pks-status--avail-ret-sire::before  { background: #38bdf8; box-shadow: 0 0 0 2px rgba(56,189,248,.25); }

/* ── Error / empty states ────────────────────────────────── */

.pks-error,
.pks-no-kittens {
  text-align:    center;
  padding:       32px 20px;
  color:         var(--pks-text-muted);
  font-style:    italic;
  border:        2px dashed var(--pks-tint-border);
  border-radius: var(--pks-radius);
}

/* ── Responsive ──────────────────────────────────────────── */

@media (max-width: 680px) {
  /* Stack to single column; image moves above details */
  .pks-card {
    grid-template-columns: 1fr;
  }

  .pks-card__image {
    order:       -1;
    min-height:  220px;
    aspect-ratio:16 / 9;
  }

  .pks-card__body {
    padding: 20px 18px 22px;
  }
}

@media (max-width: 400px) {
  .pks-card__details {
    grid-template-columns: 1fr;
  }
}