/* fullstacktechies.com — Blog Hub (Card Grid) page template.
   Loaded only on pages using blog-hub.php. Scoped under .apbh. Brand: navy + blue/green. */

.apbh{
  --apbh-navy:#0f2545;--apbh-ink:#122142;--apbh-body:#3d4a63;--apbh-muted:#657189;
  --apbh-line:#e5eaf1;--apbh-soft:#f4f7fb;--apbh-blue:#0B9BD7;--apbh-green:#00C97B;
  color:var(--apbh-body);font-size:16px;line-height:1.65;
  padding-top:92px; /* clear the fixed/transparent Divi header */
}
.apbh *{box-sizing:border-box;}
.apbh .apbh-wrap{max-width:1240px;margin:0 auto;padding:0 40px;width:100%;}

/* ---- hero header ---- */
.apbh .apbh-head{text-align:center;padding:34px 0 46px;}
.apbh .apbh-eyebrow{
  font-size:13px;letter-spacing:2px;text-transform:uppercase;font-weight:800;margin:0 0 18px;
  background:linear-gradient(90deg,var(--apbh-blue),var(--apbh-green));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--apbh-blue);
}
.apbh .apbh-h1{font-size:56px;line-height:1.08;margin:0 0 18px;font-weight:800;color:var(--apbh-navy);letter-spacing:-.02em;}
.apbh .apbh-sub{font-size:19px;line-height:1.55;color:var(--apbh-muted);max-width:680px;margin:0 auto;}

/* ---- card grid ---- */
.apbh .apbh-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;}
.apbh .apbh-card{display:flex;}
.apbh .apbh-card-link{
  display:flex;flex-direction:column;width:100%;background:#fff;border:1px solid var(--apbh-line);
  border-radius:16px;overflow:hidden;text-decoration:none;
  box-shadow:0 1px 2px rgba(15,37,69,.04);
  transition:box-shadow .18s ease,transform .18s ease,border-color .18s ease;
}
.apbh .apbh-card-link:hover{box-shadow:0 18px 40px -18px rgba(15,37,69,.32);transform:translateY(-4px);border-color:#d3ddea;}

/* image */
.apbh .apbh-thumb{position:relative;display:block;aspect-ratio:16/9;background:var(--apbh-soft);overflow:hidden;}
.apbh .apbh-img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease;}
.apbh .apbh-card-link:hover .apbh-img{transform:scale(1.05);}
.apbh .apbh-img-ph{background:linear-gradient(135deg,#e9eff6,#dbe6f1);}

/* navy category bar (full width, under image) */
.apbh .apbh-cat{
  display:block;background:linear-gradient(90deg,var(--apbh-blue),var(--apbh-green));color:#fff;font-size:12px;font-weight:800;
  letter-spacing:1.4px;text-transform:uppercase;padding:14px 22px;line-height:1.2;
}

/* body */
.apbh .apbh-body{display:flex;flex-direction:column;padding:22px 22px 24px;flex:1;}
.apbh .apbh-title{
  font-size:20px;font-weight:800;line-height:1.3;color:var(--apbh-navy);letter-spacing:-.01em;margin-bottom:12px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.apbh .apbh-excerpt{
  font-size:15px;color:var(--apbh-body);line-height:1.6;margin-bottom:20px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.apbh .apbh-meta{font-size:13.5px;color:var(--apbh-muted);margin-top:auto;margin-bottom:14px;display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.apbh .apbh-meta b{color:var(--apbh-ink);font-weight:700;}
.apbh .apbh-dot{color:var(--apbh-line);}
.apbh .apbh-more{font-size:14.5px;font-weight:800;color:var(--apbh-blue);display:inline-flex;align-items:center;gap:8px;}
.apbh .apbh-more span{transition:transform .18s ease;}
.apbh .apbh-card-link:hover .apbh-more span{transform:translateX(4px);}

.apbh .apbh-empty{padding:48px 0;text-align:center;color:var(--apbh-muted);font-size:17px;}

/* ---- pagination ---- */
.apbh .apbh-pagination{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:50px 0 10px;}
.apbh .apbh-page{
  display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 14px;
  border:1px solid var(--apbh-line);border-radius:10px;font-size:14.5px;font-weight:700;color:var(--apbh-ink);
  text-decoration:none;background:#fff;transition:.14s;
}
.apbh a.apbh-page:hover{border-color:var(--apbh-blue);color:var(--apbh-blue);}
.apbh span.apbh-page.current{background:var(--apbh-navy);border-color:var(--apbh-navy);color:#fff;}
.apbh span.apbh-page.dots{border:0;background:transparent;}

/* ---- responsive ---- */
@media (max-width:980px){
  .apbh{padding-top:66px;}
  .apbh .apbh-grid{grid-template-columns:repeat(2,1fr);gap:22px;}
  .apbh .apbh-h1{font-size:40px;}
  .apbh .apbh-sub{font-size:17px;}
}
@media (max-width:600px){
  .apbh .apbh-wrap{padding:0 18px;}
  .apbh .apbh-grid{grid-template-columns:1fr;}
  .apbh .apbh-head{padding:20px 0 32px;}
  .apbh .apbh-h1{font-size:30px;}
  .apbh .apbh-sub{font-size:16px;}
  .apbh .apbh-title{font-size:19px;}
}