/* === FRP Parents Polish ================================================ */
/* Clean, modern layout for the Our Pups (Parents) page without touching data */

/* Section rhythm */
.section { padding: clamp(2rem, 4vw, 3rem) 0; }
.section h2.script-accent { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.1; margin: .25rem 0 .5rem; }
.section .muted { color: #475569; } /* slate-600 */

/* Breadcrumbs */
.breadcrumbs { color:#6b7280; font-size:.95rem; margin-bottom:.5rem; }
.breadcrumbs a { color:#374151; text-decoration:none; }
.breadcrumbs a:hover { text-decoration:underline; }

/* Responsive grid for parents injected into #parentGrid */
#parentGrid {
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: clamp(1rem, 2.5vw, 1.25rem);
  align-items: stretch;
}

/* Card shell (works with a variety of generated structures) */
#parentGrid > * {
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  overflow:hidden;
  box-shadow: 0 10px 30px rgba(2,6,23,.06);
  display:flex;
  flex-direction:column;
  min-height: 100%;
  transition: transform .12s ease, box-shadow .2s ease;
}
#parentGrid > *:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(2,6,23,.10);
}

/* Images normalize to consistent aspect */
#parentGrid img {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio: 4/3;
  object-fit: cover;
}

/* Generic body padding inside random markup structures */
#parentGrid > * > :not(img):not(figure):not(.thumb) {
  padding: 14px 16px;
}

/* Title + subtitle patterns */
#parentGrid h3, #parentGrid .title { font-size: 1.05rem; margin: 0 0 .25rem; color:#111827; }
#parentGrid h4, #parentGrid .subtitle, #parentGrid .breed { font-size: .95rem; margin: 0 0 .5rem; color:#6b7280; }

/* Small feature list text */
#parentGrid p { font-size:.95rem; margin: .5rem 0 0; color:#334155; }

/* Nice little badge for DNA tested (if present) */
#parentGrid .badge, #parentGrid .pill, #parentGrid .chip {
  display:inline-block;
  font-size:.8rem;
  padding:.25rem .5rem;
  border-radius:999px;
  border:1px solid #e5e7eb;
  background:#fff;
  color:#111827;
  margin-right:.35rem;
}

/* CTA button inside cards */
#parentGrid .btn, #parentGrid a.btn {
  align-self:flex-start;
  margin-top:auto;
  margin: 12px 16px 16px;
  background: var(--brand, #a6362b);
  color:#fff;
  border:1px solid var(--brand, #a6362b);
  border-radius: 12px;
  padding:.6rem .9rem;
  box-shadow: 0 8px 24px rgba(166,54,43,.2);
}
#parentGrid .btn.btn--ghost {
  background: transparent;
  color: var(--brand, #a6362b);
  border:1px solid var(--brand, #a6362b);
  box-shadow: none;
}

/* Keep the parents grid & intro light on dark devices too */
@media (prefers-color-scheme: dark){
  #parentGrid > * { background:#ffffff !important; color:#111111 !important; }
  #parentGrid p, #parentGrid h3, #parentGrid .title { color:#111111 !important; -webkit-text-fill-color:#111111 !important; }
}