/* ============================================================================
   Sayban.pk — Blog index (.sb-blog) + single article (.sb-article)
   Matches the Claude Design language. Fonts/styles free (non-Elementor pages).
   ========================================================================== */
.sb-blog, .sb-article{
  --ink:var(--sb-charcoal); --ink2:var(--sb-ink-2); --ink3:var(--sb-ink-3);
  --gold:var(--sb-gold); --gold-deep:var(--sb-gold-deep); --gold-soft:var(--sb-gold-soft);
  --teal:var(--sb-teal); --teal-deep:var(--sb-teal-deep); --teal-soft:var(--sb-teal-soft);
  --bg:var(--sb-paper); --surface:#FFFFFF; --line:var(--sb-line); --line2:var(--sb-line-2); --brick:var(--sb-brick);
  --serif:'Marcellus', Georgia, serif;
  --sans:'Manrope','Segoe UI',system-ui,sans-serif;
  background:var(--bg); font-family:var(--sans); color:var(--ink); line-height:1.6;
}
.sb-blog *, .sb-article *{box-sizing:border-box;}
.sb-blog a, .sb-article a{text-decoration:none; color:inherit;}
.sb-blog h1,.sb-blog h2,.sb-blog h3,.sb-blog h4,.sb-blog p,
.sb-article h1,.sb-article h2,.sb-article h3,.sb-article h4{margin:0;}

/* shared bits ------------------------------------------------------------- */
.sb-kicker{display:inline-block; font-size:12px; font-weight:800; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold-deep);}
.sb-kicker-light{color:var(--gold);}
.sb-breadcrumb{font-size:13px; color:var(--ink3); display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.sb-breadcrumb a:hover{color:var(--gold-deep);}
.sb-breadcrumb b{color:var(--ink); font-weight:700;}
.sb-post-dot{color:var(--line2);}

.sb-chip{display:inline-block; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--teal-deep); background:var(--teal-soft); padding:4px 10px; border-radius:999px; line-height:1.2;}
a.sb-chip:hover{background:var(--teal); color:#fff;}

/* buttons (shared with the rest of the site's convention) */
.sb-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--sans);
  font-weight:700; font-size:14px; padding:12px 24px; border-radius:8px; border:1px solid transparent; cursor:pointer;
  line-height:1; transition:background-color .15s,border-color .15s,color .15s,filter .15s;}
.sb-btn-gold{background:var(--gold) !important; color:#fff !important; border-color:var(--gold);}
.sb-btn-gold:hover{background:var(--gold-deep) !important; border-color:var(--gold-deep); color:#fff !important;}
.sb-btn-ghost{background:transparent; border-color:var(--line2); color:var(--ink);}
.sb-btn-ghost:hover{border-color:var(--gold); color:var(--gold-deep);}
.sb-btn-lightghost{background:transparent; border-color:rgba(255,255,255,.35); color:#fff !important;}
.sb-btn-lightghost:hover{border-color:var(--gold); color:#fff !important; background:rgba(255,255,255,.06);}

.sb-post-more{font-weight:800; font-size:13.5px; color:var(--gold-deep); display:inline-flex; align-items:center; gap:6px;}
.sb-post-more span{transition:transform .15s;}
.sb-post-more:hover span{transform:translateX(3px);}

/* ============================ INDEX HEADER ============================== */
.sb-blog-head{background:var(--surface); border-bottom:1px solid var(--line);}
.sb-blog-head-inner{max-width:1200px; margin:0 auto; padding:30px 40px 40px;}
.sb-blog-head .sb-breadcrumb{margin-bottom:22px;}
.sb-blog-head .sb-kicker{margin-bottom:12px;}
.sb-blog-h1{font-family:var(--serif); font-size:46px; line-height:1.08; letter-spacing:.005em; color:var(--ink); max-width:16ch;}
.sb-blog-sub{margin-top:16px; font-size:16px; color:var(--ink2); max-width:60ch; line-height:1.65;}

.sb-blog-wrap{max-width:1200px; margin:0 auto; padding:34px 40px 20px;}

/* category filter */
.sb-blog-filter{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:30px; padding-bottom:26px; border-bottom:1px solid var(--line);}
.sb-fchip{font-size:13.5px; font-weight:700; color:var(--ink2); background:var(--surface); border:1px solid var(--line2);
  padding:9px 18px; border-radius:999px; transition:all .15s;}
.sb-fchip:hover{border-color:var(--gold); color:var(--gold-deep);}
.sb-fchip.on{background:var(--ink); border-color:var(--ink); color:#fff;}

.sb-blog-filterhead{display:flex; align-items:baseline; gap:12px; margin:-4px 0 24px;}
.sb-blog-filtertitle{font-family:var(--serif); font-size:28px; color:var(--ink);}
.sb-blog-filtercount{font-size:13px; color:var(--ink3); font-weight:600;}

/* ============================ POST CARDS =============================== */
.sb-post{background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden;
  display:flex; flex-direction:column; transition:transform .18s, box-shadow .18s, border-color .18s;}
.sb-post:hover{transform:translateY(-4px); box-shadow:0 14px 30px rgba(31,28,20,.10); border-color:var(--line2);}
.sb-post-img{display:block; height:210px; background:var(--gold-soft) center/cover no-repeat; position:relative;
  overflow:hidden;}
.sb-post-img-fallback{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:64px; color:#fff; opacity:.55;
  background:linear-gradient(135deg,var(--gold) 0%,var(--gold-deep) 100%);}
.sb-post-body{padding:20px 22px 22px; display:flex; flex-direction:column; flex:1;}
.sb-post-meta{display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--ink3); font-weight:600; margin-bottom:12px;}
/* .sb-post prefix raises specificity above the .sb-blog h3 / .sb-blog p reset */
.sb-post .sb-post-title{font-family:var(--serif); font-size:20px; line-height:1.3; color:var(--ink); margin:0 0 14px;}
.sb-post-title a:hover{color:var(--gold-deep);}
.sb-post .sb-post-excerpt{font-size:14.5px; color:var(--ink2); line-height:1.65; margin:0 0 20px;}
.sb-post-foot{margin-top:auto; display:flex; align-items:center; justify-content:space-between; padding-top:14px; border-top:1px solid var(--line);}
.sb-post-date{font-size:12.5px; color:var(--ink3); font-weight:600;}

/* lead (feature) card */
.sb-blog-lead-wrap{margin-bottom:30px;}
.sb-post-lead{flex-direction:row; align-items:stretch;}
.sb-post-lead .sb-post-img{height:auto; min-height:340px; flex:0 0 54%;}
.sb-post-lead .sb-post-body{padding:34px 38px; justify-content:center;}
.sb-post-lead .sb-post-title{font-size:32px; line-height:1.15; margin-bottom:14px;}
.sb-post-lead .sb-post-excerpt{font-size:16px; margin-bottom:22px;}
.sb-post-lead .sb-post-meta{font-size:13px; margin-bottom:16px;}

/* grid */
.sb-blog-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:26px;}

/* embedded inside another page (e.g. the homepage "Learn before you buy"
   section) — keep the tokens + card styles, but drop the page paper background
   so it inherits the host section's surface. */
.sb-blog--embed{background:transparent;}

/* pagination */
.sb-blog-pagination{margin:44px 0 8px; display:flex; justify-content:center;}
.sb-blog-pagination ul{list-style:none; display:flex; gap:8px; padding:0; margin:0;}
.sb-blog-pagination a,.sb-blog-pagination span{display:inline-flex; align-items:center; justify-content:center;
  min-width:42px; height:42px; padding:0 14px; border-radius:8px; border:1px solid var(--line2);
  background:var(--surface); font-weight:700; font-size:14px; color:var(--ink2);}
.sb-blog-pagination a:hover{border-color:var(--gold); color:var(--gold-deep);}
.sb-blog-pagination .current{background:var(--ink); border-color:var(--ink); color:#fff;}

.sb-blog-empty{text-align:center; padding:60px 20px; color:var(--ink2);}
.sb-blog-empty p{margin-bottom:18px; font-size:16px;}

/* ============================ CLOSING CTA ============================== */
.sb-blog-cta{background:var(--ink); margin-top:56px; color:#fff;}
/* flex-centered column so alignment doesn't depend on margins the h2/p reset strips */
.sb-blog-cta-inner{max-width:760px; margin:0 auto; padding:76px 40px 80px; text-align:center;
  display:flex; flex-direction:column; align-items:center;}
.sb-blog-cta .sb-kicker{margin:0 0 18px;}
.sb-blog-cta .sb-blog-cta-title{font-family:var(--serif); font-size:38px; line-height:1.14; margin:0 0 16px;}
.sb-blog-cta .sb-blog-cta-sub{color:rgba(255,255,255,.72); font-size:16px; line-height:1.65; max-width:46ch; margin:0 0 32px;}
.sb-blog-cta-btns{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}

/* ================================================================= */
/* ============================ ARTICLE ============================ */
/* ================================================================= */
.sb-article-head{background:var(--surface); border-bottom:1px solid var(--line);}
/* header content matches the hero image width below it (1000px content = 1048 − 2×24 padding) */
.sb-article-head-inner{max-width:1048px; margin:0 auto; padding:28px 24px 34px;}
.sb-article-head .sb-breadcrumb{margin-bottom:26px;}
.sb-article-meta{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--ink3); font-weight:600; margin-bottom:16px;}
.sb-article-title{font-family:var(--serif); font-size:42px; line-height:1.14; letter-spacing:.005em; color:var(--ink);}
.sb-article-byline{display:flex; align-items:center; gap:12px; margin-top:24px;}
.sb-avatar{width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,var(--gold) 0%,var(--gold-deep) 100%);
  color:#fff; font-family:var(--serif); font-size:20px; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;}
.sb-byline-txt{display:flex; flex-direction:column; line-height:1.35;}
.sb-byline-txt b{font-size:14.5px; color:var(--ink); font-weight:700;}
.sb-byline-txt span{font-size:13px; color:var(--ink3);}

.sb-article-hero{max-width:1000px; margin:36px auto 0; height:460px; border-radius:16px;
  background:var(--gold-soft) center/cover no-repeat; box-shadow:0 18px 44px rgba(31,28,20,.12);}
@media (max-width:1040px){ .sb-article-hero{margin:28px 24px 0; border-radius:12px; height:auto; aspect-ratio:16/9;} }

.sb-article-body{max-width:760px; margin:0 auto; padding:44px 24px 8px;}

/* article typography */
.sb-article-content{font-size:18px; line-height:1.8; color:var(--sb-ink-soft);}
.sb-article-content > *:first-child{margin-top:0;}
.sb-article-content p{margin:0 0 24px;}
.sb-article-content h2{font-family:var(--serif); font-size:29px; line-height:1.22; color:var(--ink); margin:44px 0 16px;}
.sb-article-content h3{font-family:var(--serif); font-size:23px; line-height:1.25; color:var(--ink); margin:36px 0 14px;}
.sb-article-content h4{font-size:18px; font-weight:800; color:var(--ink); margin:28px 0 10px; letter-spacing:.01em;}
.sb-article-content a{color:var(--teal-deep); text-decoration:underline; text-underline-offset:2px; font-weight:600;}
.sb-article-content a:hover{color:var(--gold-deep);}
.sb-article-content ul,.sb-article-content ol{margin:0 0 24px; padding-left:26px;}
.sb-article-content li{margin-bottom:10px;}
.sb-article-content ul li::marker{color:var(--gold);}
.sb-article-content blockquote{margin:32px 0; padding:6px 0 6px 24px; border-left:3px solid var(--gold);
  font-family:var(--serif); font-size:22px; line-height:1.5; color:var(--ink); font-style:normal;}
.sb-article-content img{max-width:100%; height:auto; border-radius:12px; margin:14px 0;}
.sb-article-content figure{margin:28px 0;}
.sb-article-content figcaption{font-size:13.5px; color:var(--ink3); text-align:center; margin-top:8px;}
.sb-article-content table{width:100%; border-collapse:collapse; margin:24px 0; font-size:16px;}
.sb-article-content th,.sb-article-content td{border:1px solid var(--line); padding:11px 14px; text-align:left;}
.sb-article-content th{background:var(--gold-soft); font-weight:800; color:var(--ink);}
.sb-article-content code{background:var(--surface); border:1px solid var(--line); border-radius:5px; padding:2px 6px; font-size:15px;}
.sb-article-content hr{border:none; border-top:1px solid var(--line); margin:36px 0;}
.sb-article-pagelinks{margin-top:22px; font-weight:700; color:var(--ink2);}

/* share */
.sb-article-share{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:40px 0 8px; padding-top:26px; border-top:1px solid var(--line);}
.sb-share-label{font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--ink3); margin-right:4px;}
.sb-share-btn{font-size:13px; font-weight:700; color:var(--ink2); background:var(--surface); border:1px solid var(--line2);
  padding:8px 16px; border-radius:8px; transition:all .15s;}
.sb-share-btn:hover{border-color:var(--teal); color:var(--teal-deep); background:var(--teal-soft);}

/* author box */
.sb-article-author{display:flex; gap:18px; align-items:flex-start; margin:40px 0 8px; padding:26px;
  background:var(--surface); border:1px solid var(--line); border-radius:14px;}
.sb-avatar-lg{width:60px; height:60px; font-size:26px;}
.sb-article-author .sb-kicker{margin-bottom:6px;}
.sb-article-author h4{font-family:var(--serif); font-size:21px; color:var(--ink); margin-bottom:8px;}
.sb-article-author p{font-size:14.5px; color:var(--ink2); line-height:1.6;}

/* related */
.sb-article-related{margin-top:20px; padding:52px 0 72px; border-top:1px solid var(--line); background:var(--bg);}
.sb-related-inner{max-width:1200px; margin:0 auto; padding:0 40px;}
.sb-related-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:26px;}
.sb-related-title{font-family:var(--serif); font-size:30px; color:var(--ink);}

/* ============================ RESPONSIVE ============================== */
@media (max-width:980px){
  .sb-blog-grid{grid-template-columns:repeat(2, minmax(0,1fr)); gap:22px;}
  .sb-post-lead{flex-direction:column;}
  .sb-post-lead .sb-post-img{flex:none; min-height:0; height:280px;}
  .sb-post-lead .sb-post-body{padding:26px;}
  .sb-post-lead .sb-post-title{font-size:27px;}
  .sb-blog-h1{font-size:38px;}
  .sb-article-title{font-size:34px;}
  .sb-article-hero{height:auto; aspect-ratio:16/9;}
}
@media (max-width:620px){
  .sb-blog-head-inner,.sb-blog-wrap{padding-left:20px; padding-right:20px;}
  .sb-blog-cta-inner,.sb-related-inner{padding-left:20px; padding-right:20px;}
  .sb-article-head-inner,.sb-article-body{padding-left:18px; padding-right:18px;}
  .sb-blog-grid{grid-template-columns:1fr;}
  .sb-blog-h1{font-size:31px;}
  .sb-blog-cta-title{font-size:29px;}
  .sb-article-title{font-size:28px;}
  .sb-article-content{font-size:17px;}
  .sb-article-content h2{font-size:25px;}
  .sb-post-lead .sb-post-title{font-size:24px;}
  .sb-related-head{flex-direction:column; gap:8px;}
}