/* ============================================================
   Cashemire Cats Ragdolls — kitten cards
   Shared by index.html, kittens.html and kitten.html.
   Uses only the variables each page already defines, so the
   blush / gray palette variants stay correct.
   ============================================================ */

/* ---------- status pill ---------- */
.status{display:inline-block;font-family:var(--font-body);font-size:12px;text-transform:uppercase;letter-spacing:.18em;padding:6px 12px;border-radius:var(--radius);border:1px solid currentColor;background:var(--white)}
.status-available{color:var(--ink-text)}
.status-reserved{color:var(--accent)}
.status-sold{color:#7A7A7A}
.status-upcoming{color:var(--green)}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:32px 24px}
.card{display:block;background:var(--white);border:1px solid rgba(54,54,54,.16);border-radius:var(--radius);overflow:hidden;transition:border-color .25s var(--ease)}
.card:hover{border-color:var(--ink)}
.card .shot{position:relative;aspect-ratio:4/5;background:var(--surface) center/cover no-repeat;overflow:hidden}
.card .shot img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.card:hover .shot img{transform:scale(1.03)}
.card .shot .status{position:absolute;top:14px;left:14px}
.card.is-sold .shot img{filter:grayscale(.7);opacity:.82}
.card .body{padding:22px 22px 26px}
.card h3{font-size:var(--size-h3);margin-bottom:6px}
.card .meta{font-family:var(--font-body);font-size:var(--size-small);letter-spacing:.06em;color:var(--text);opacity:.75}
.card .say{font-family:var(--font-heading);font-size:var(--size-body);line-height:1.45;margin-top:12px;color:var(--text)}
.card .price{margin-top:16px;padding-top:14px;border-top:1px solid rgba(54,54,54,.14);font-family:var(--font-body);font-size:var(--size-small);letter-spacing:.12em;text-transform:uppercase;color:var(--text);display:flex;justify-content:space-between;align-items:center;gap:12px}
.card .price .go{color:var(--ink-text)}

/* ---------- empty state ---------- */
.empty{border:1px solid rgba(54,54,54,.16);border-radius:var(--radius);padding:56px 24px;text-align:center;background:var(--white)}
.empty h3{font-size:var(--size-h3);margin-bottom:10px}
.empty p{max-width:46ch;margin:0 auto;opacity:.8}

/* ---------- "kittens.json didn't load" notice ---------- */
.datawarn{border:1px solid var(--accent);border-radius:var(--radius);background:var(--white);padding:26px;margin:24px 0;text-align:left}
.datawarn h3{font-size:var(--size-h3);color:var(--accent);margin-bottom:8px}
.datawarn code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:15px;background:var(--cream);padding:2px 6px}

@media(max-width:980px){ .cards{grid-template-columns:repeat(2,1fr)} }
@media(max-width:600px){ .cards{grid-template-columns:1fr} }