/* ==========================================================
   Daemon Report — Blog & Case Studies Listing Styles
   ========================================================== */

/* ---------- Hero listing ---------- */
.blog-hero{padding:32px 0 20px}
.blog-hero h1{font-family:var(--disp);font-weight:600;font-size:clamp(2rem,4.2vw,3rem);line-height:1.08;letter-spacing:-.03em;margin-bottom:16px;text-wrap:balance}
.blog-hero p{color:var(--muted);max-width:36em;font-size:1.08rem;margin-bottom:32px}

.listing-hero{padding:32px 0 20px}
.listing-hero h1{font-family:var(--disp);font-weight:600;font-size:clamp(2rem,4.2vw,3rem);line-height:1.08;letter-spacing:-.03em;margin-bottom:16px;text-wrap:balance}
.listing-hero p{color:var(--muted);max-width:36em;font-size:1.08rem;margin-bottom:32px}

/* ---------- Filters ---------- */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:44px}
.filter{
  font-family:var(--mono);font-size:.75rem;letter-spacing:.03em;
  padding:7px 16px;border-radius:99px;border:1px solid var(--line-2);background:var(--surface);
  color:var(--muted);cursor:pointer;transition:all .15s;text-decoration:none;
}
.filter:hover,.filter.active{border-color:var(--accent);color:var(--accent);background:var(--accent-tint)}

/* ---------- Cards grid ---------- */
.posts,.cases{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media (max-width:800px){.posts,.cases{grid-template-columns:1fr}}

.post-card,.case-card{
  background:var(--surface);border:1px solid var(--line-2);border-radius:16px;
  padding:26px;text-decoration:none;display:flex;flex-direction:column;
  transition:transform .18s ease,box-shadow .18s ease;
}
.post-card:hover,.case-card:hover{transform:translateY(-4px);box-shadow:0 22px 44px -28px rgba(24,22,31,.3)}
.post-card .cat,.case-card .tag{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.05em;
  color:var(--accent);background:var(--accent-tint);
  align-self:flex-start;padding:4px 10px;border-radius:99px;margin-bottom:14px;
}
.post-card h2,.case-card h2{
  font-family:var(--disp);font-weight:600;
  font-size:1.15rem;letter-spacing:-.01em;margin-bottom:8px;color:var(--ink);
}
.post-card p,.case-card p{color:var(--muted);font-size:.88rem;margin-bottom:14px;flex:1}
.post-card .meta,.case-card .meta{
  font-family:var(--mono);font-size:.72rem;color:var(--muted);
  border-top:1px solid var(--line);padding-top:12px;
}
.post-card .arrow,.case-card .arrow{color:var(--accent);font-size:1.2rem;margin-top:6px;align-self:flex-end}

/* ---------- Deep articles (long format) ---------- */
.post-card.deep,.case-card.deep{position:relative;border-color:var(--accent)}
.post-card.deep .badge,.case-card.deep .badge{
  position:absolute;top:-10px;right:18px;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.04em;
  background:var(--accent);color:#fff;padding:3px 10px;border-radius:99px;
}

/* ---------- CTA cards inside listing ---------- */
.cta-card{
  grid-column:1/-1;background:var(--accent-tint);border:1px solid var(--accent);
  border-radius:16px;padding:28px 26px;text-align:center;
}
.cta-card h3{font-family:var(--disp);font-weight:600;font-size:1.15rem;color:var(--ink);margin-bottom:8px}
.cta-card p{color:var(--muted);font-size:.9rem;margin-bottom:18px}
.cta-card .btn{display:inline-flex}

/* ---------- Bottom CTA ---------- */
.blog-cta,.listing-cta{margin-top:64px;padding:48px 0;border-top:1px solid var(--line);text-align:center}
.blog-cta h3,.listing-cta h3{font-family:var(--disp);font-weight:600;font-size:1.3rem;margin-bottom:10px}
.blog-cta p,.listing-cta p{color:var(--muted);margin-bottom:24px}

/* ---------- Animations listing ---------- */
.js-anim .case-card,.js-anim .post-card,.js-anim .listing-hero>*{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.js-anim .case-card.in,.js-anim .post-card.in,.js-anim .listing-hero.in>*{opacity:1;transform:none}
.js-anim .case-card:nth-child(2){transition-delay:.06s}
.js-anim .case-card:nth-child(3){transition-delay:.12s}
.js-anim .case-card:nth-child(4){transition-delay:.18s}
.js-anim .case-card:nth-child(5){transition-delay:.24s}

/* ---------- Animations ---------- */