/* ShopDot Pet — Blog (listing + article)
   Chrome (nav, footer, .container, .btn, .section-head) + tokens come from
   colors_and_type.css → site.css. These styles are the blog-only layer.
   Classes are prefixed .bl- so they never collide with the existing .blog-*
   partner-card carousel component in site.css. */

/* Blog pages have a light top (no dark hero), so the nav is pinned in its
   opaque `is-scrolled` state from the start; content must clear the 72px bar. */
.bl-wrap { padding-top: 72px; background: var(--sd-bg); }

/* ── Breadcrumb ───────────────────────────────────── */
.bl-crumb { font-size: 13px; color: var(--sd-fg-muted); margin-bottom: 22px; }
.bl-crumb a { color: var(--sd-fg-muted); text-decoration: none; }
.bl-crumb a:hover { color: var(--sd-primary); }
.bl-crumb span { margin: 0 8px; opacity: 0.5; }

/* ── Listing hero ─────────────────────────────────── */
.bl-listing { padding: 128px 24px 40px; }
.bl-listing-head { max-width: 760px; }
.bl-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600;
  color: var(--sd-primary-text);
  letter-spacing: 0.14em; text-transform: uppercase;
  margin-bottom: 14px;
}
.bl-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.bl-listing-head h1 {
  font-family: var(--sd-font-display);
  font-size: var(--sd-text-section);
  font-weight: 700; line-height: 1.1; letter-spacing: -0.02em;
  color: var(--sd-neutral-950); margin: 0 0 14px; text-wrap: balance;
}
.bl-listing-head p {
  font-size: 18px; line-height: 1.6; color: var(--sd-fg-muted);
  max-width: 620px; margin: 0; text-wrap: pretty;
}

/* ── Post grid + cards ────────────────────────────── */
.bl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 28px;
  padding-bottom: 96px;
}
.bl-card {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--sd-border);
  border-radius: 18px;
  padding: 0; overflow: hidden;
  text-decoration: none; color: inherit;
  transition: transform var(--sd-dur-base) var(--sd-ease),
              box-shadow var(--sd-dur-base) var(--sd-ease),
              border-color var(--sd-dur-base) var(--sd-ease);
}
.bl-card-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 22px 24px 22px; }
.bl-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(44,47,50,0.08);
  border-color: var(--sd-border-strong);
}
.bl-card:focus-visible { outline: 2px solid var(--sd-primary); outline-offset: 3px; }
.bl-card-tag {
  align-self: flex-start;
  font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--sd-primary-text); background: var(--sd-primary-100);
  padding: 5px 11px; border-radius: 9999px; margin-bottom: 16px;
}
/* Per-category tint, so category is readable at a glance when scanning the grid.
   The photo covers sit on top of the .bl-cover category gradient, so the tag is the
   only category cue left. Geometry stays identical across all five — only the tint
   changes — and the type stays --sd-neutral-950 on every one, because the DS secondary
   hues (olive, mist, peach) fall well under 4.5:1 on their own -100 tints at 11px.
   Tints mirror the .bl-cover.is-* logic so the two systems agree. */
.bl-card-tag.is-grow    { background: var(--sd-olive-100);   color: var(--sd-neutral-950); }
.bl-card-tag.is-guides  { background: var(--sd-indigo-100);  color: var(--sd-neutral-950); }
.bl-card-tag.is-brands  { background: var(--sd-clay-100);    color: var(--sd-neutral-950); }
.bl-card-tag.is-product { background: var(--sd-peach-100);   color: var(--sd-neutral-950); }
.bl-card-tag.is-news    { background: var(--sd-mist-100);    color: var(--sd-neutral-950); }
.bl-card h2 {
  font-family: var(--sd-font-display);
  font-size: 21px; font-weight: 700; line-height: 1.28; letter-spacing: -0.01em;
  color: var(--sd-neutral-950); margin: 0 0 10px; text-wrap: balance;
}
.bl-card p { font-size: 15px; line-height: 1.6; color: var(--sd-fg-muted); margin: 0 0 20px; }
.bl-card-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: auto; font-size: 13px; color: var(--sd-fg-muted);
}
.bl-card-more { display: inline-flex; align-items: center; gap: 6px; color: var(--sd-primary-text); font-weight: 600; }
.bl-card-more i { width: 15px; height: 15px; transition: transform var(--sd-dur-fast) var(--sd-ease); }
.bl-card:hover .bl-card-more i { transform: translateX(3px); }

/* ── Article ──────────────────────────────────────── */
.bl-article { padding: 120px 24px 24px; }
.bl-article-inner { max-width: 720px; margin: 0 auto; }
.bl-head { margin-bottom: 36px; }
.bl-head h1 {
  font-family: var(--sd-font-display);
  font-size: clamp(30px, 5vw, 42px);
  font-weight: 700; line-height: 1.12; letter-spacing: -0.02em;
  color: var(--sd-neutral-950); margin: 12px 0 18px; text-wrap: balance;
}
.bl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 14px; color: var(--sd-fg-muted); }
.bl-meta .bl-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--sd-border-strong); }
.bl-meta .bl-author { font-weight: 600; color: var(--sd-neutral-900); }

/* Article body typography — generous measure + rhythm */
.bl-body { font-size: 18px; line-height: 1.75; color: var(--sd-fg); }
.bl-body > p { margin: 0 0 22px; text-wrap: pretty; }
.bl-body > p:first-of-type { font-size: 20px; line-height: 1.7; color: var(--sd-neutral-900); }
.bl-body h2 {
  font-family: var(--sd-font-display);
  font-size: 26px; font-weight: 700; line-height: 1.25; letter-spacing: -0.015em;
  color: var(--sd-neutral-950); margin: 44px 0 14px;
}
.bl-body h3 { font-size: 20px; font-weight: 600; color: var(--sd-neutral-950); margin: 32px 0 12px; }
.bl-body ul, .bl-body ol { margin: 0 0 22px; padding-left: 24px; }
.bl-body li { margin-bottom: 10px; }
.bl-body li::marker { color: var(--sd-primary); }
.bl-body a { color: var(--sd-primary-text); text-decoration: underline; text-underline-offset: 2px; }
.bl-body a:hover { color: var(--sd-primary-700); }
.bl-body strong { font-weight: 600; color: var(--sd-neutral-950); }
.bl-body blockquote {
  margin: 28px 0; padding: 4px 0 4px 22px;
  border-left: 3px solid var(--sd-primary);
  color: var(--sd-neutral-900); font-size: 20px; line-height: 1.6;
}

/* Comparison tables — guide posts use these for at-a-glance answers (also the shape
   AI search tends to quote). Scroll horizontally on narrow screens rather than squash. */
.bl-tablewrap { margin: 10px 0 34px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.bl-body table {
  width: 100%; min-width: 460px; border-collapse: collapse;
  font-size: 15px; line-height: 1.55; text-align: left;
}
.bl-body table th,
.bl-body table td { padding: 12px 14px; border-bottom: 1px solid var(--sd-border); vertical-align: top; }
.bl-body table thead th {
  font-weight: 600; color: var(--sd-neutral-950); border-bottom-width: 2px;
  background: color-mix(in oklab, var(--sd-primary) 7%, transparent);
}
.bl-body table tbody th { font-weight: 600; color: var(--sd-neutral-950); }
.bl-body table tbody tr:last-child th,
.bl-body table tbody tr:last-child td { border-bottom: none; }

/* In-article image */
.bl-fig { margin: 12px 0 36px; }
.bl-fig img { width: 100%; height: auto; display: block; border-radius: 16px; }
.bl-fig figcaption {
  margin-top: 10px; text-align: center;
  font-size: 14px; line-height: 1.55; color: var(--sd-fg-muted);
}

/* End-of-article CTA */
.bl-cta {
  margin: 48px 0 8px; padding: 34px 32px;
  background: linear-gradient(180deg, #ffffff 0%, var(--sd-bg-cream) 100%);
  border: 1px solid var(--sd-border); border-radius: 18px; text-align: center;
}
.bl-cta h2 {
  font-family: var(--sd-font-display);
  font-size: 24px; font-weight: 700; letter-spacing: -0.015em;
  color: var(--sd-neutral-950); margin: 0 0 10px;
}
.bl-cta p { font-size: 16px; line-height: 1.6; color: var(--sd-fg-muted); margin: 0 0 20px; }

/* Back-to-blog link under the article */
.bl-back { display: inline-flex; align-items: center; gap: 7px; margin: 40px 0 8px; font-size: 15px; font-weight: 600; color: var(--sd-primary-text); text-decoration: none; }
.bl-back i { width: 16px; height: 16px; }

@media (max-width: 640px) {
  .bl-listing { padding: 104px 20px 32px; }
  .bl-article { padding: 100px 20px 16px; }
  .bl-grid { grid-template-columns: 1fr; gap: 20px; padding-bottom: 72px; }
  .bl-body { font-size: 17px; }
  .bl-body > p:first-of-type { font-size: 18px; }
}

/* ── FAQ (AEO / PAA capture) ───────────────────────── */
.bl-faq { margin: 48px 0 8px; }
.bl-faq h2 {
  font-family: var(--sd-font-display);
  font-size: 26px; font-weight: 700; letter-spacing: -0.015em;
  color: var(--sd-neutral-950); margin: 0 0 18px;
}
.bl-faq-item { border-top: 1px solid var(--sd-border); padding: 18px 0; }
.bl-faq-item:last-child { border-bottom: 1px solid var(--sd-border); }
.bl-faq-q { font-size: 18px; font-weight: 600; color: var(--sd-neutral-950); margin: 0 0 8px; }
.bl-faq-a { font-size: 17px; line-height: 1.7; color: var(--sd-fg); margin: 0; }

/* ── Author / credibility note (E-E-A-T) ───────────── */
.bl-author-note {
  margin: 40px 0 8px; padding: 18px 20px;
  background: var(--sd-bg-cream); border: 1px solid var(--sd-border); border-radius: 14px;
  font-size: 14px; line-height: 1.6; color: var(--sd-fg-muted);
}
.bl-author-note strong { color: var(--sd-neutral-950); font-weight: 600; }

/* ═══════════ HUB — filter · covers · featured · newsletter · video ═══════════ */

/* Category filter bar */
.bl-filter { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 34px; }
.bl-filter-btn {
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  padding: 9px 16px; border-radius: 9999px;
  color: var(--sd-fg-muted); background: #fff; border: 1px solid var(--sd-border);
  transition: color var(--sd-dur-fast) var(--sd-ease),
              background var(--sd-dur-fast) var(--sd-ease),
              border-color var(--sd-dur-fast) var(--sd-ease);
}
.bl-filter-btn:hover { color: var(--sd-neutral-950); border-color: var(--sd-border-strong); }
.bl-filter-btn:focus-visible { outline: 2px solid var(--sd-primary); outline-offset: 2px; }
.bl-filter-btn[aria-pressed="true"] { color: #fff; background: var(--sd-primary); border-color: var(--sd-primary); }

/* Cover — gradient + motif icon placeholder (swap for a real <img> anytime). Tints
   all derive from the Pet primary so the set reads as one family. */
.bl-cover { position: relative; aspect-ratio: 16 / 9; overflow: hidden; display: grid; place-items: center; }
.bl-cover i { width: 34px; height: 34px; color: #fff; opacity: 0.9; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.22)); }
.bl-cover img { width: 100%; height: 100%; object-fit: cover; }
.bl-cover.is-grow    { background: linear-gradient(135deg, var(--sd-primary), var(--sd-primary-700)); }
.bl-cover.is-guides  { background: linear-gradient(135deg, color-mix(in oklab, var(--sd-primary) 75%, #3f7d63), color-mix(in oklab, var(--sd-primary-700) 65%, #28483a)); }
.bl-cover.is-brands  { background: linear-gradient(140deg, var(--sd-neutral-900), color-mix(in oklab, var(--sd-primary) 50%, var(--sd-neutral-900))); }
.bl-cover.is-product { background: linear-gradient(135deg, color-mix(in oklab, var(--sd-primary) 80%, #f0b45c), var(--sd-primary)); }
.bl-cover.is-news    { background: linear-gradient(140deg, var(--sd-neutral-700), var(--sd-neutral-900)); }

/* Video badge on a card cover */
.bl-badge {
  position: absolute; left: 12px; top: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: #fff;
  background: rgba(0,0,0,0.42); backdrop-filter: blur(4px);
  padding: 5px 10px; border-radius: 9999px;
}
.bl-badge i { width: 13px; height: 13px; }

/* Featured (pinned) hero card — cover left, body right; stacks on mobile */
.bl-featured {
  display: grid; grid-template-columns: 1.05fr 1fr;
  background: #fff; border: 1px solid var(--sd-border); border-radius: 20px; overflow: hidden;
  text-decoration: none; color: inherit; margin: 0 0 40px;
  transition: transform var(--sd-dur-base) var(--sd-ease),
              box-shadow var(--sd-dur-base) var(--sd-ease),
              border-color var(--sd-dur-base) var(--sd-ease);
}
.bl-featured:hover { transform: translateY(-4px); box-shadow: 0 22px 44px rgba(44,47,50,0.10); border-color: var(--sd-border-strong); }
.bl-featured:focus-visible { outline: 2px solid var(--sd-primary); outline-offset: 3px; }
.bl-featured .bl-cover { aspect-ratio: auto; min-height: 300px; height: 100%; }
.bl-featured-body { padding: 34px 36px; display: flex; flex-direction: column; justify-content: center; }
.bl-featured h2 {
  font-family: var(--sd-font-display);
  font-size: 28px; font-weight: 700; line-height: 1.18; letter-spacing: -0.015em;
  color: var(--sd-neutral-950); margin: 14px 0 12px; text-wrap: balance;
}
.bl-featured p { font-size: 16px; line-height: 1.6; color: var(--sd-fg-muted); margin: 0 0 20px; }

/* Newsletter — branded band + heading; the Kit "clean" inline form (email + orange
   button, no heading of its own) sits inside .bl-newsletter-form. */
.bl-newsletter {
  margin: 44px 0 96px; padding: 44px 32px; text-align: center;
  background: linear-gradient(180deg, #ffffff 0%, var(--sd-bg-cream) 100%);
  border: 1px solid var(--sd-border); border-radius: 20px;
}
.bl-newsletter h2 { font-family: var(--sd-font-display); font-size: 26px; font-weight: 700; letter-spacing: -0.015em; color: var(--sd-neutral-950); margin: 0 0 8px; }
.bl-newsletter p { font-size: 16px; line-height: 1.6; color: var(--sd-fg-muted); margin: 0 auto 22px; max-width: 480px; }
.bl-newsletter-form { max-width: 460px; margin: 0 auto; }

@media (max-width: 720px) { .bl-newsletter { padding: 32px 22px; } }

/* Responsive 16:9 video embed (article body) */
.bl-video { position: relative; margin: 28px 0; border-radius: 14px; overflow: hidden; background: var(--sd-neutral-900); }
.bl-video::before { content: ""; display: block; padding-top: 56.25%; }
.bl-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Article cover image */
.bl-article .bl-cover { aspect-ratio: 16 / 9; border-radius: 16px; margin: 0 0 32px; }

/* Filter utility */
.bl-card.is-hidden, .bl-featured.is-hidden { display: none; }

@media (max-width: 720px) {
  .bl-featured { grid-template-columns: 1fr; }
  .bl-featured .bl-cover { min-height: 0; aspect-ratio: 16 / 9; }
  .bl-featured-body { padding: 24px 22px; }
  .bl-filter { flex-wrap: nowrap; overflow-x: auto; margin: 0 -20px 26px; padding: 0 20px 6px; -webkit-overflow-scrolling: touch; }
  .bl-filter-btn { flex: 0 0 auto; }
  .bl-newsletter { margin-bottom: 72px; padding: 32px 22px; }
}