/* ================================
   CrewX listing — showroom look
==================================*/


.crew-wrap{ max-width:925px; margin:22px auto 28px; padding:0 16px; }
.crew-wrap .intro{ text-align:center; max-width:62ch; margin:0 auto 18px; }
.crew-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* exactly 3 across on desktop */
  gap: 20px;                              /* a touch more breathing room */
}

@media (max-width: 900px){
  .crew-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .crew-grid{ grid-template-columns: 1fr; }
}

/* card frame (match showroom vibe) */
.pet-card{
  background:#fcfcfb;
  border-radius:14px;
  outline:1px solid rgba(0,0,0,.04);
  border:1px solid rgba(167,124,207,.18);
  box-shadow:0 4px 12px rgba(70,56,104,.10);
  padding:10px;
  text-align:center;
  transition: transform .12s ease, box-shadow .18s ease;
}
.pet-card:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(70,56,104,.16),
             0 0 0 3px rgba(90,201,180,.10) inset;
}

/* square image well */
.pet-card .thumb{
  width:100%;
  aspect-ratio: 1 / 1;                 /* perfect square */
  border:1px solid rgba(0,0,0,.06);
  border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  background:
    radial-gradient(var(--dot) .8px, transparent 1.2px),
    var(--bg);
  background-size:14px 14px;
}

/* center image; shrink if too big, with breathing room */
.pet-card .thumb img{
  max-width:88%;
  max-height:88%;
  object-fit:contain;
  display:block;
}

/* caption */
.pet-card figcaption{ margin-top:8px; line-height:1.35; }
.pet-name{ font-weight:700; color:var(--text); }

/* tags line */
.pet-tags{
  margin-top:6px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:6px;
}
.pet-tag{
  font-family:'Raleway',system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:11px; font-weight:700; letter-spacing:.4px;
  text-transform:uppercase; color:#333;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(0,0,0,.08);
  border-radius:999px; padding:2px 8px;
}

.breeder{
  font-style: italic;
  color: var(--text-muted, #555); /* optional if you want it softer */
  font-size: 0.9em; /* slightly smaller for hierarchy */
}	

.pager{
  display:flex; justify-content:center; align-items:center;
  gap:6px; margin:14px 0 18px;
  font-family:'Raleway', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
.pager a, .pager .gap{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:32px; height:32px; padding:0 8px;
  border-radius:999px;
  text-decoration:none; color:#333;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 4px 12px rgba(70,56,104,.10);
}
.pager a:hover{ filter:brightness(1.03); transform:translateY(-1px); }
.pager a.current{
  font-weight:700; color:var(--title,#a77ccf);
  box-shadow:0 0 0 2px rgba(167,124,207,.25) inset, 0 6px 14px rgba(70,56,104,.12);
}
.pager a.is-disabled{ opacity:.4; pointer-events:none; }
.pager .gap{ border-style:dashed; background:transparent; box-shadow:none; }