/* Blog section. Loaded only on /blog pages, on top of styles.css, so the
   landing pages carry none of this weight and their cached CSS is untouched.
   Every colour, radius and shadow comes from the variables in styles.css. */

/* ---------------------------------------------------------------- listing */
.blog-hero { padding: 56px 0 8px; background: linear-gradient(180deg, var(--green-50), transparent); }
.blog-hero h1 { font-size: clamp(2.1rem, 5vw, 3.1rem); margin: 6px 0 12px; }
.blog-hero .lede { max-width: 62ch; }
.cat-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }

.crumbs { font-size: 14px; color: var(--text-3); margin-bottom: 10px; }
.crumbs a { color: var(--text-3); }
.crumbs a:hover { color: var(--emerald); }
.crumbs span { margin: 0 2px; }

.bgrid {
  display: grid; gap: 22px; padding: 34px 0 80px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.bcard {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}
.bcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.bcard-link { display: block; color: inherit; text-decoration: none; }
.bcard img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--green-50); }
.bcard-body { padding: 18px 20px 22px; }
.bcard-cat {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--green-700); background: var(--green-50);
  border-radius: 999px; padding: 4px 11px; margin-bottom: 10px;
}
.bcard h2 { font-size: 1.22rem; line-height: 1.3; margin: 0 0 8px; }
.bcard p { color: var(--text-2); margin: 0 0 10px; font-size: 15px; }
.bcard-meta { color: var(--text-3); font-size: 13.5px; margin: 0; }

/* ---------------------------------------------------------------- article */
.post .prose { padding-top: 34px; }
.post-cat {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--green-700); background: var(--green-50);
  border-radius: 999px; padding: 4px 11px; margin: 0 0 14px;
}
.post-meta { color: var(--text-3); font-size: 14.5px; margin: -6px 0 24px; }
.hero-img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--radius); margin: 0 0 12px; background: var(--green-50);
}

.post .prose h2 { scroll-margin-top: 90px; }
.post .prose h3 { scroll-margin-top: 90px; font-size: 1.08rem; }
.post .prose p, .post .prose li { font-size: 17px; line-height: 1.72; }
.post .prose li { margin-bottom: .45em; }
.post .prose strong { color: var(--text); }

.toc {
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 16px 20px 18px; margin: 26px 0 30px;
}
.toc-h { font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-3); margin: 0 0 8px; }
.toc ol { margin: 0; padding-left: 20px; }
.toc li { margin-bottom: .3em; font-size: 15.5px; }
.toc a { color: var(--text-2); text-decoration: none; }
.toc a:hover { color: var(--emerald); text-decoration: underline; }

.post figure { margin: 28px 0; }
.post figure img { width: 100%; height: auto; border-radius: var(--radius-sm); display: block; }
.post figcaption { font-size: 14px; color: var(--text-3); margin-top: 8px; text-align: center; }

.tablewrap { overflow-x: auto; margin: 22px 0; -webkit-overflow-scrolling: touch; }
.tablewrap table { width: 100%; border-collapse: collapse; font-size: 15.5px; min-width: 420px; }
.tablewrap th, .tablewrap td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.tablewrap th { background: var(--green-50); color: var(--green-900); font-weight: 700; white-space: nowrap; }
.tablewrap tr:last-child td { border-bottom: 0; }

.post-cta {
  margin: 44px 0 10px; padding: 26px 28px; border-radius: var(--radius);
  background: linear-gradient(135deg, var(--green-50), var(--paper));
  border: 1px solid var(--green-100);
}
.post-cta h2 { margin-top: 0; font-size: 1.3rem; }
.post-cta p:last-child { margin-bottom: 0; display: flex; flex-wrap: wrap; gap: 10px; }

.related { margin: 44px 0 0; }
.related h2 { font-size: 1.25rem; }
.rel-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.rel-card {
  display: block; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--paper); text-decoration: none; transition: border-color .15s ease, transform .15s ease;
}
.rel-card:hover { border-color: var(--green-500); transform: translateY(-2px); }
.rel-cat { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--green-700); margin-bottom: 6px; }
.rel-title { display: block; color: var(--text); font-weight: 600; line-height: 1.35; font-size: 15.5px; }

@media (max-width: 560px) {
  .bgrid { grid-template-columns: 1fr; gap: 18px; padding-top: 26px; }
  .post .prose p, .post .prose li { font-size: 16.5px; }
  .post-cta { padding: 22px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .bcard, .rel-card { transition: none; }
  .bcard:hover, .rel-card:hover { transform: none; }
}


/* Guide cards carry a tall phone screenshot rather than a wide hero. */
.bgrid.gguide { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.gcard img { aspect-ratio: 9 / 16; object-fit: cover; object-position: top center; background: var(--green-50); }
.gcard .bcard-body { padding: 16px 18px 20px; }
.gcard h2 { font-size: 1.08rem; }
.guide .prose figure { margin: 26px 0; text-align: center; }
.guide .prose figure img { max-width: 300px; width: 100%; border: 1px solid var(--line);
  border-radius: 18px; box-shadow: var(--shadow); }
@media (max-width: 560px) { .guide .prose figure img { max-width: 240px; } }

/* Urdu articles (front matter `lang: ur`): Nastaliq needs tall lines, and the
   article is right-to-left while the site header and footer stay as they are. */
.post[lang="ur"] .prose, .post[lang="ur"] .prose h1, .post[lang="ur"] .prose h2,
.post[lang="ur"] .prose h3, .post[lang="ur"] .lede, .bcard-body[lang="ur"], .bcard-body[lang="ur"] h2,
.rel-card[lang="ur"] .rel-title {
  font-family: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", var(--font), serif;
  letter-spacing: 0;
}
.post[lang="ur"] .prose h1 { line-height: 1.9; font-weight: 700; }
.post[lang="ur"] .prose h2, .post[lang="ur"] .prose h3 { line-height: 1.9; font-weight: 700; }
.post[lang="ur"] .prose p, .post[lang="ur"] .prose li { line-height: 2.25; }
.bcard-body[lang="ur"] h2 { line-height: 1.9; }
.bcard-body[lang="ur"] p, .rel-card[lang="ur"] .rel-title { line-height: 2; }
.post[dir="rtl"] .tablewrap th, .post[dir="rtl"] .tablewrap td { text-align: right; }
.post[dir="rtl"] .prose ul, .post[dir="rtl"] .prose ol, .post[dir="rtl"] .toc ol { padding-left: 0; padding-right: 22px; }
.post[dir="rtl"] .post-cat, .post[dir="rtl"] .toc-h, .post[dir="rtl"] .rel-cat { letter-spacing: 0; }
.post[dir="rtl"] time { direction: ltr; unicode-bidi: isolate; }
.post[lang="ur"] .lede { line-height: 2.1; }
.bcard-body[lang="ur"] .bcard-meta { font-family: var(--font); }

/* ---- category chips that are links, the language row, the in-text app line, ad units, the author */
a.chip { text-decoration: none; transition: background .15s ease; }
a.chip:hover { background: var(--green-100); }
a.chip.on:hover { background: var(--green-700); }
.post-cat a { color: inherit; text-decoration: none; }
.post-cat a:hover { text-decoration: underline; }
.post-langs { font-size: 14.5px; color: var(--text-3); margin: -14px 0 24px; }
.post-langs a { color: var(--green-700); font-weight: 600; text-decoration: none; }
.post-langs a:hover { text-decoration: underline; }
.inline-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px;
  margin: 34px 0; padding: 16px 20px; border-radius: var(--radius-sm);
  background: var(--green-50); border: 1px solid var(--green-100);
}
.inline-cta p { margin: 0; flex: 1 1 260px; font-weight: 600; color: var(--text); }
.inline-cta .btn { flex: 0 0 auto; }
/* the height is held before the ad arrives, so the text below it does not jump */
.ad-slot { margin: 34px 0; min-height: 250px; text-align: center; clear: both; }
.bgrid + .ad-slot { margin-top: 44px; }
.author-box {
  margin: 44px 0 0; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper);
}
.author-box p { margin: 0 0 6px; }
.author-box p:last-child { margin-bottom: 0; color: var(--text-2); }
.author-h { font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.author-name { font-weight: 700; font-size: 1.05rem; }
.author-name a { color: inherit; text-decoration: none; }
.author-role { font-weight: 500; color: var(--text-3); margin-inline-start: 10px; font-size: .95rem; }
.post[lang="hi"] .prose, .post[lang="hi"] { line-height: 1.85; }
.post[lang="ar"] { line-height: 1.9; }
@media print { .ad-slot, .inline-cta { display: none; } }