/* 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{
  /* Fit the card width; height follows the image's natural ratio (no fixed box,
     no stretch, no crop). */
  display:block;width:100%;height:auto;background:var(--apbg-soft);
}
.apbg .apbg-card-img--ph{
  aspect-ratio:2/1;background:linear-gradient(135deg,#efe9f7,#f7e9f0);
}
/* Category label: a full-width band BELOW the image (not overlapping it). */
.apbg .apbg-card-cat{
  display:block;
  background:#4833b4;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);text-decoration:none;transition:color .15s ease;}
a.apbg-card-author:hover{color:var(--apbg-purple);text-decoration:underline;}
.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;}
}

/* ---- category filter pills ---- */
.apbg .apbg-filters{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0 auto 40px;max-width:900px;}
.apbg .apbg-filter{
  display:inline-flex;align-items:center;justify-content:center;
  padding:9px 20px;border:1.5px solid var(--apbg-line);border-radius:999px;
  background:#fff;color:var(--apbg-ink);font-size:14.5px;font-weight:600;line-height:1;
  text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:border-color .15s ease,background .15s ease,color .15s ease,box-shadow .15s ease,transform .15s ease;
}
.apbg .apbg-filter:hover{border-color:var(--apbg-purple);color:var(--apbg-purple);transform:translateY(-1px);}
.apbg .apbg-filter.is-active{
  background:var(--apbg-purple);border-color:var(--apbg-purple);color:#fff;
  box-shadow:0 6px 18px rgba(112,48,160,.28);
}
.apbg .apbg-filter.is-active:hover{color:#fff;transform:none;}

/* ---- end-of-page CTA box ---- */
.apbg .apbg-cta{
  position:relative;overflow:hidden;border-radius:24px;margin:64px 0 0;
  min-height:340px;display:flex;align-items:center;justify-content:center;isolation:isolate;
  box-shadow:0 20px 50px rgba(27,21,51,.22);
}
.apbg .apbg-cta-bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
}
.apbg .apbg-cta::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(115deg,rgba(27,21,51,.92) 0%,rgba(27,21,51,.78) 42%,rgba(112,48,160,.55) 100%);
}
.apbg .apbg-cta-inner{
  position:relative;z-index:1;text-align:center;color:#fff;
  max-width:760px;padding:56px 40px;
}
.apbg .apbg-cta-title{
  font-size:clamp(26px,3.2vw,40px);line-height:1.12;font-weight:800;letter-spacing:-.02em;
  color:#fff;margin:0 0 16px;text-wrap:balance;
}
.apbg .apbg-cta-text{
  font-size:clamp(15.5px,1.4vw,18px);line-height:1.6;color:rgba(255,255,255,.9);
  margin:0 auto 28px;max-width:620px;
}
.apbg .apbg-cta-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;}
.apbg .apbg-cta-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:14px 28px;border-radius:12px;font-size:15.5px;font-weight:700;line-height:1;
  text-decoration:none;transition:transform .15s ease,box-shadow .15s ease,background .15s ease,opacity .15s ease;
}
.apbg .apbg-cta-btn-primary{background:var(--apbg-primary);color:#fff;box-shadow:0 10px 26px rgba(255,0,102,.38);}
.apbg .apbg-cta-btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(255,0,102,.46);}
.apbg .apbg-cta-btn-secondary{background:rgba(255,255,255,.12);color:#fff;border:1.5px solid rgba(255,255,255,.55);backdrop-filter:blur(2px);}
.apbg .apbg-cta-btn-secondary:hover{background:rgba(255,255,255,.2);transform:translateY(-2px);}

@media (max-width:600px){
  .apbg .apbg-filters{margin-bottom:30px;}
  .apbg .apbg-filter{padding:8px 16px;font-size:13.5px;}
  .apbg .apbg-cta{min-height:300px;border-radius:18px;}
  .apbg .apbg-cta-inner{padding:44px 22px;}
  .apbg .apbg-cta-actions .apbg-cta-btn{flex:1;}
}