/* Pakistan & Counting — Blog listing + single post.
   Built on the site design system (style.css tokens): sharp corners, 3px dark
   borders, hard offset shadows, 46px grid texture, rainbow bar, brand colours. */

/* ============================================================
   HERO  (mirrors the site's inner-page hero: white + grid, kicker,
   boxed headline, rainbow bar underneath)
   ============================================================ */
.blog-hero{position:relative;margin-top:-84px;padding:168px 0 72px;text-align:center;overflow:hidden;
  background-color:#fff;
  background-image:
    repeating-linear-gradient(0deg,rgba(0,0,0,.06) 0 1px,transparent 1px 46px),
    repeating-linear-gradient(90deg,rgba(0,0,0,.06) 0 1px,transparent 1px 46px);
  background-size:46px 46px}
.blog-hero__inner{position:relative;z-index:1;max-width:980px;margin:0 auto;padding:0 clamp(24px,2.4vw,60px)}
.blog-hero__kicker{display:inline-block;font-weight:800;letter-spacing:3px;text-transform:uppercase;
  font-size:13px;color:var(--gray2);margin-bottom:20px}
.blog-hero__title{font-weight:900;text-transform:uppercase;line-height:1;color:var(--dark);margin:0}
.blog-hero__title .boxed{font-size:clamp(30px,6vw,60px)}
.blog-hero__sub{margin:30px auto 0;max-width:760px;font-weight:500;color:var(--gray);
  font-size:clamp(15px,1.7vw,18px);line-height:1.6}
.blog-rainbow{width:100%;height:10px;
  background:linear-gradient(90deg,#26b685 0 25%,#ffcb00 25% 50%,#ff6b22 50% 75%,#ef2167 75% 100%)}

/* ============================================================
   CATEGORY FILTER  (sharp bordered boxes + green offset shadow,
   active = green fill — same language as the webinar tabs)
   ============================================================ */
.blog-cats{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:34px auto 0;
  max-width:var(--wrap);padding:0 clamp(24px,2.4vw,60px)}
.blog-cats a{font-size:12.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  padding:9px 18px;border:2px solid var(--dark);background:#fff;color:var(--dark);text-decoration:none;
  box-shadow:4px 4px 0 0 var(--green);transition:transform .12s ease,box-shadow .12s ease,background .12s ease}
.blog-cats a:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 0 var(--green)}
.blog-cats a.is-active{background:var(--green);color:#fff;border-color:var(--green);
  box-shadow:4px 4px 0 0 var(--yellow)}
.blog-cats a.is-active:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 0 var(--yellow)}

/* ============================================================
   LISTING GRID  (white cards, 3px dark border, hard offset shadow
   cycling the brand palette, sharp corners)
   ============================================================ */
.blog-sec{padding:52px 0 72px}
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(336px,1fr));gap:48px 38px}

/* Matches the site's deck/webinar cards (.sd-card): a brand-TINTED frame with inner
   padding around the image and a soft TRANSLUCENT colour offset shadow — bold, but not
   a hard outline. Accent + tint cycle across the grid like the homepage product cards. */
.blog-card{--c:var(--green);--c-soft:rgba(38,182,133,.38);--c-tint:var(--mint);
  position:relative;display:flex;flex-direction:column;padding:12px 12px 20px;background:var(--c-tint);
  box-shadow:9px 11px 0 0 var(--c-soft);transition:transform .16s ease,box-shadow .16s ease,background .18s ease}
.blog-card:hover{transform:translate(-2px,-2px);box-shadow:13px 15px 0 0 var(--c-soft)}
.blog-grid > .blog-card:nth-child(4n+2){--c:var(--orange);--c-soft:rgba(255,107,34,.36);--c-tint:var(--peach)}
.blog-grid > .blog-card:nth-child(4n+3){--c:var(--yellow);--c-soft:rgba(249,195,0,.44);--c-tint:var(--cream)}
.blog-grid > .blog-card:nth-child(4n+4){--c:var(--pink);--c-soft:rgba(239,33,103,.32);--c-tint:var(--pink-lt)}

.blog-card__top{position:relative;display:block;line-height:0;overflow:hidden}
.blog-card__media{display:block;line-height:0}
.blog-card__media img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .5s ease}
.blog-card:hover .blog-card__media img{transform:scale(1.05)}
/* category badge sits over the image corner, like the deck cards' "Coming Soon" badge */
.blog-card__cat{position:absolute;top:12px;left:12px;z-index:2;display:inline-block;background:var(--c);
  color:#fff;padding:6px 13px;border:1.5px solid var(--dark);box-shadow:3px 3px 0 0 rgba(58,58,58,.22);
  font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;line-height:1.1;text-decoration:none}
.blog-grid > .blog-card:nth-child(4n+3) .blog-card__cat{color:var(--dark)}  /* yellow needs dark text */

.blog-card__body{padding:18px 8px 0;display:flex;flex-direction:column;gap:11px;flex:1}
.blog-card__meta{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.blog-card__date{color:var(--gray);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.blog-card__title{margin:0;font-size:17px;font-weight:800;text-transform:uppercase;line-height:1.3;color:#161616}
.blog-card__title a{color:inherit;text-decoration:none}
.blog-card__title a:hover{color:var(--green-dk)}
.blog-card__ex{color:#5b5b5b;font-size:13.5px;line-height:1.62;margin:0;font-weight:500}
.blog-card__more{margin-top:auto;padding-top:15px;border-top:1px solid rgba(0,0,0,.14);
  display:inline-flex;align-items:center;gap:7px;font-weight:800;font-size:12.5px;letter-spacing:.4px;
  text-transform:uppercase;color:var(--dark);text-decoration:none;transition:gap .16s ease,color .16s ease}
.blog-card__more::after{content:"";width:10px;height:12px;flex:0 0 auto;background:currentColor;
  clip-path:polygon(0 0,100% 50%,0 100%);transition:transform .16s ease}
.blog-card:hover .blog-card__more{gap:11px;color:var(--green-dk)}
.blog-empty{text-align:center;color:var(--gray);font-weight:600;padding:56px 0}

/* ============================================================
   PAGINATION  (sharp bordered boxes + green offset shadow)
   ============================================================ */
/* matches the deck/webinar pager (.sd-page): white, dark border, dark offset shadow */
.blog-pager{display:flex;justify-content:center;align-items:center;gap:9px;margin-top:56px;flex-wrap:wrap}
.blog-pager a,.blog-pager span{min-width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  padding:0 14px;border:2px solid #1d1d1d;border-radius:3px;background:#fff;color:#1d1d1d;font-weight:800;font-size:15px;
  text-decoration:none;box-shadow:3px 3px 0 0 #1d1d1d;transition:transform .12s ease,box-shadow .12s ease,background .12s ease,color .12s ease}
.blog-pager a:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 0 #1d1d1d}
.blog-pager .is-active{background:var(--green);border-color:#1d1d1d;color:#fff}
.blog-pager .is-disabled{opacity:.4;pointer-events:none;box-shadow:2px 2px 0 0 #1d1d1d}

/* ============================================================
   SINGLE POST  (same border/shadow language for cover + widgets)
   ============================================================ */
/* preview strip (admin draft/scheduled preview) */
.bp-preview{background:var(--cream);border-bottom:3px solid var(--yellow);color:#7a5c00;font-weight:700;font-size:14px;padding:11px 0}
.bp-preview b{color:#5c4600}

/* article header band — same grid-texture hero language as the listing */
.bp-head{position:relative;margin-top:-84px;padding:148px 0 48px;overflow:hidden;
  background-color:#fff;
  background-image:
    repeating-linear-gradient(0deg,rgba(0,0,0,.06) 0 1px,transparent 1px 46px),
    repeating-linear-gradient(90deg,rgba(0,0,0,.06) 0 1px,transparent 1px 46px);
  background-size:46px 46px}
.bp-head .container{position:relative;z-index:1}
.bp-crumb{font-size:12.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--gray);
  text-decoration:none;display:inline-block;margin-bottom:22px}
.bp-crumb:hover{color:var(--green-dk)}
.bp-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.bp-meta__cat{display:inline-block;background:var(--green);color:#fff;padding:6px 14px;border:1.5px solid var(--dark);
  box-shadow:3px 3px 0 0 rgba(58,58,58,.22);text-transform:uppercase;letter-spacing:.5px;font-size:11px;
  font-weight:800;text-decoration:none}
.bp-meta__by{color:var(--dark);font-weight:800;font-size:12.5px;text-transform:uppercase;letter-spacing:.4px}
.bp-meta__by strong{color:var(--green-dk)}
.bp-meta__date{color:var(--gray);font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.4px}
.bp-meta__by+.bp-meta__date::before{content:"•";margin-right:14px;color:var(--gray2);font-weight:700}
.bp-title{font-size:clamp(30px,4.4vw,48px);font-weight:900;line-height:1.1;margin:0;color:var(--dark);max-width:960px}
.bp-lede{margin:22px 0 0;max-width:820px;font-size:clamp(16px,1.9vw,20px);line-height:1.55;font-weight:500;color:var(--gray)}
.bp-rainbow{width:100%;height:10px;
  background:linear-gradient(90deg,#26b685 0 25%,#ffcb00 25% 50%,#ff6b22 50% 75%,#ef2167 75% 100%)}

.bp-wrap{padding:52px 0 72px}
.bp-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:48px;align-items:start}
.bp-cover{width:100%;aspect-ratio:16/9;object-fit:cover;margin:0 0 44px;
  box-shadow:16px 18px 0 0 rgba(38,182,133,.22)}
.bp-content{font-size:16.5px;line-height:1.8;color:#2a2a2a}
.bp-content h2{font-size:26px;font-weight:900;margin:34px 0 12px;line-height:1.25;color:var(--dark)}
.bp-content h3{font-size:21px;font-weight:900;margin:28px 0 10px;color:var(--dark)}
.bp-content h4{font-size:18px;font-weight:800;margin:24px 0 8px;color:var(--dark)}
.bp-content p{margin:0 0 16px}
.bp-content ul,.bp-content ol{margin:0 0 16px;padding-left:26px}
.bp-content ul{list-style:disc}.bp-content ol{list-style:decimal}
.bp-content li{margin:0 0 7px}
.bp-content a{color:var(--green-dk);text-decoration:underline;font-weight:600}
.bp-content img{max-width:100%;height:auto;margin:26px 0;box-shadow:0 14px 32px rgba(16,24,32,.13)}
.bp-content blockquote{margin:24px 0;padding:14px 22px;border-left:5px solid var(--green);background:var(--mint);
  font-style:italic;color:var(--ink)}
.bp-content figure{margin:24px 0}
.bp-content figcaption{font-size:13px;color:var(--gray);margin-top:8px;text-align:center}

/* FAQ heading (accordion itself reuses legal.css .faq-*) */
.bp-faq{margin:44px 0 6px}
.bp-faq__h{font-size:24px;font-weight:900;margin:0 0 18px;color:var(--dark)}

/* sidebar widgets */
.bp-side{display:flex;flex-direction:column;gap:30px;position:sticky;top:104px}
.bp-wgt{background:var(--mint);padding:22px;box-shadow:9px 11px 0 0 rgba(38,182,133,.24)}
.bp-wgt:nth-child(2){background:var(--cream);box-shadow:9px 11px 0 0 rgba(249,195,0,.4)}
.bp-wgt__h{font-size:14px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;margin:0 0 16px;
  padding-bottom:11px;border-bottom:2px solid var(--dark);color:var(--dark)}
.bp-recent{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.bp-recent li{display:flex;gap:12px}
.bp-recent img{width:70px;height:52px;object-fit:cover;border:1px solid rgba(0,0,0,.1);flex:0 0 auto}
.bp-recent a{font-weight:800;color:var(--dark);text-decoration:none;font-size:13.5px;line-height:1.35}
.bp-recent a:hover{color:var(--green-dk)}
.bp-recent small{display:block;color:var(--gray);font-weight:600;font-size:12px;margin-top:4px;
  text-transform:uppercase;letter-spacing:.3px}
.bp-catlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.bp-catlist li{border-bottom:1px solid var(--line)}
.bp-catlist li:last-child{border-bottom:0}
.bp-catlist a{display:flex;justify-content:space-between;padding:11px 2px;color:var(--dark);text-decoration:none;
  font-weight:700;font-size:14px}
.bp-catlist a:hover{color:var(--green-dk)}
.bp-catlist span:last-child{color:#fff;background:var(--green);font-weight:800;font-size:12px;
  min-width:24px;text-align:center;padding:1px 7px}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .blog-hero{padding:138px 0 56px}
  .bp-layout{grid-template-columns:1fr;gap:38px}
  .bp-side{position:static}
}
@media (max-width:560px){
  .blog-grid{grid-template-columns:1fr;gap:26px}
}