/* =========================
   PetDentify · Blog styles (polished & deduped)
   ========================= */

/* --- Blog index --- */
.blog-hero { padding: 42px 0 10px; border-top: 1px solid var(--line); }
.blog-index .lead { color: #475467; }

.blog-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width:820px){ .blog-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width:1160px){ .blog-grid { grid-template-columns: 1fr 1fr 1fr; } }

.blog-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .18s ease, transform .18s ease;
}
.blog-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.blog-media img { display: block; width: 100%; height: auto; }
.blog-body { padding: 16px; }
.blog-title { display: block; font-weight: 800; margin: 0 0 6px; letter-spacing: -.005em; }
.meta { color: #94a3b8; font-size: .85rem; }

/* --- Post header + meta --- */
.post .post-header { padding: 42px 0 12px; border-top: 1px solid var(--line); }
.post .post-header .meta { font-size: .85rem; color: #64748b; margin-top: 4px; }

/* --- Hero (base) --- */
.post .post-hero{
  display:block; width:100%;
  margin-top:12px;
  border-radius:12px;
  overflow:hidden;
  box-shadow: var(--shadow-lg);
}
.post .post-hero img{
  display:block; width:100%; height:100%;
}

/* --- Body --- */
.post-body { margin-top: 16px; }
.post-body h2 { margin: 20px 0 10px; }

/* Post CTAs — centered, framed, not floaty */
.post-cta{
  margin: 28px 0;                 /* balanced spacing from content above/below */
  padding: 16px 0;                /* equal padding so CTAs sit centered */
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);   /* add bottom divider */
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;        /* center horizontally like your homepage CTA band */
}
.post-cta .btn{ min-width:160px; text-align:center; }

/* --- Subscribe — match homepage pill exactly --- */
.post-subscribe{
  margin: 24px 0;
  padding: 16px;
  border: 1px solid #eef2f7;
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.post-subscribe .updates-row{
  display: flex;
  align-items: stretch;
  gap: 0;                                   /* single pill look */
}
.post-subscribe .input-pill{
  flex: 1; min-width: 240px;
  padding: 14px 16px;
  border: 1px solid #d2d6db;
  border-right: 0;                          /* seamless join */
  border-radius: 999px 0 0 999px;           /* left half of pill */
}
.post-subscribe .updates-row .btn{
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 20px; min-width: 140px;
  border-radius: 0 999px 999px 0;           /* right half of pill */
}

/* Hide Netlify honeypot (spam trap) in the blog subscribe form */
.post-subscribe input[name="bot-field"]{
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px; height:1px;
  overflow:hidden;
}

/* Focus (same as home) */
.post-subscribe .input-pill:focus-visible{ outline: 3px solid var(--green); outline-offset: 2px; }
.post-subscribe .updates-row .btn:focus-visible{ outline: 3px solid var(--green); outline-offset: 2px; }
/* Mobile stack */
@media (max-width: 640px){
  .post-subscribe .updates-row{ flex-direction: column; gap: 8px; }
  .post-subscribe .input-pill{ border: 1px solid #d2d6db; border-radius: 999px; }
  .post-subscribe .updates-row .btn{ border-radius: 999px; width: 100%; }
}

/* --- Post nav --- */
.post-nav { display: flex; justify-content: space-between; margin: 24px 0; }

/* --- Optional hero variant: no-crop (contain) for tall/subject photos --- */
.post .post-hero--contain{
  /* Let the image decide the height; keep it from getting huge */
  aspect-ratio: auto;                         /* override the 1200/630 ratio */
  max-height: clamp(260px, 56vw, 560px);      /* responsive cap without cropping */
  margin-top: 12px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.post .post-hero--contain img{
  width: 100%;
  height: 100%;
  object-fit: contain;                        /* <-- no cropping */
  background: #fff;                           /* avoids dark letterbox feel */
  display: block;
}

/* Desktop/tablet: wide hero */
.post .post-hero.post-hero--cover{
  display:block; width:100%;
  aspect-ratio: 1200 / 630;
  max-height: clamp(220px, 46vw, 420px);
  margin-top:12px;
  border-radius:12px; overflow:hidden;
  box-shadow: var(--shadow-lg);
}
.post .post-hero.post-hero--cover img{
  width:100%; height:100%;
  object-fit: cover;
  object-position: 40% 40%; /* nudge subject if needed */
  display:block;
}

/* Phones: use 4:3 to give the subject breathing room */
@media (max-width: 640px){
  .post .post-hero.post-hero--cover{
    aspect-ratio: 4 / 3;   /* matches hero-mobile-800 */
    max-height: 56vh;      /* never dominates the screen */
  }
}