/* apiscrapy.com — custom blog listing grid ([apiscrapy_blog_grid]).
   Card grid + pagination, brand-themed, CWV-safe. Scoped under .apbg. */

.apbg{
  --apbg-ink:#191627;
  --apbg-body:#3b3b46;
  --apbg-muted:#6c6c7a;
  --apbg-line:#e7e7ef;
  --apbg-soft:#f7f7fb;
  --apbg-primary:#ff0066;
  --apbg-purple:#7030a0;
  --apbg-dark:#1b1533;
  --apbg-radius:16px;
  color:var(--apbg-body);
  font-size:16px;
  line-height:1.6;
  padding:0 0 64px;
}
.apbg *{box-sizing:border-box;}
.apbg .apbg-wrap{max-width:1240px;margin:0 auto;padding:0 24px;width:100%;}

/* ---- hero ---- */
.apbg .apbg-head{text-align:center;max-width:760px;margin:0 auto 54px;padding-top:75px;}
.apbg .apbg-title{
  font-size:clamp(34px,5vw,56px);line-height:1.05;font-weight:800;letter-spacing:-.02em;
  color:var(--apbg-ink);margin:0 0 16px;text-wrap:balance;
}
.apbg .apbg-sub{font-size:clamp(16px,1.4vw,19px);line-height:1.6;color:var(--apbg-muted);margin:0;}

/* ---- grid ---- */
.apbg .apbg-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:32px;align-items:stretch;
}

/* ---- card ---- */
.apbg .apbg-card{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--apbg-line);
  border-radius:var(--apbg-radius);overflow:hidden;
  box-shadow:0 1px 2px rgba(25,22,39,.04);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.apbg .apbg-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(25,22,39,.12);
  border-color:transparent;
}

/* media + category label bar */
.apbg .apbg-card-media{display:block;position:relative;text-decoration:none;}
.apbg .apbg-card-img{
  display:block;width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--apbg-soft);
}
.apbg .apbg-card-img--ph{
  background:linear-gradient(135deg,#efe9f7,#f7e9f0);
}
.apbg .apbg-card-cat{
  position:absolute;left:0;right:0;bottom:0;
  background:var(--apbg-dark);color:#fff;
  font-size:12px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;
  padding:12px 22px;
}

/* body */
.apbg .apbg-card-body{display:flex;flex-direction:column;flex:1;padding:24px 24px 26px;}
.apbg .apbg-card-title{font-size:20px;line-height:1.3;font-weight:800;margin:0 0 12px;letter-spacing:-.01em;}
.apbg .apbg-card-title a{color:var(--apbg-ink);text-decoration:none;transition:color .15s ease;}
.apbg .apbg-card:hover .apbg-card-title a{color:var(--apbg-purple);}
.apbg .apbg-card-excerpt{
  font-size:15.5px;line-height:1.65;color:var(--apbg-muted);margin:0 0 20px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.apbg .apbg-card-meta{
  display:flex;align-items:center;gap:9px;font-size:14px;color:var(--apbg-muted);
  margin-top:auto;padding-top:6px;
}
.apbg .apbg-card-author{font-weight:600;color:var(--apbg-body);}
.apbg .apbg-card-dot{color:var(--apbg-line);}
.apbg .apbg-card-more{
  display:inline-flex;align-items:center;gap:8px;margin-top:18px;
  font-size:15px;font-weight:700;color:var(--apbg-primary);text-decoration:none;
  transition:gap .15s ease,color .15s ease;
}
.apbg .apbg-card-more span{transition:transform .15s ease;}
.apbg .apbg-card-more:hover{color:var(--apbg-purple);}
.apbg .apbg-card-more:hover span{transform:translateX(4px);}

/* ---- pagination ---- */
.apbg .apbg-pagination{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:56px;}
.apbg .apbg-page .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 14px;
  border:1px solid var(--apbg-line);border-radius:10px;background:#fff;
  color:var(--apbg-ink);font-size:15px;font-weight:700;text-decoration:none;
  transition:border-color .15s ease,color .15s ease,background .15s ease;
}
.apbg .apbg-page .page-numbers:hover{border-color:var(--apbg-purple);color:var(--apbg-purple);}
.apbg .apbg-page .page-numbers.current{
  background:linear-gradient(135deg,#8b5cf6,#7030a0);border-color:transparent;color:#fff;
}
.apbg .apbg-page .page-numbers.dots{border-color:transparent;background:transparent;}

/* ---- responsive ---- */
@media (max-width:1024px){
  .apbg .apbg-grid{grid-template-columns:repeat(2,1fr);gap:26px;}
}
@media (max-width:640px){
  .apbg{padding:0 0 48px;}
  .apbg .apbg-wrap{padding:0 18px;}
  .apbg .apbg-head{margin-bottom:36px;}
  .apbg .apbg-grid{grid-template-columns:1fr;gap:22px;}
  .apbg .apbg-card-body{padding:20px 20px 22px;}
}