/* فایل: blog.css | نسخه: 1.0.0 | استایل مجله آموزشی کیدوپلان */
:root{
  --accent:#3aa0ff;
  --accent2:#7cd6c4;
  --accent3:#ffd166;
  --bg1:#eaf7ff;
  --bg2:#f3fffb;
  --card:#ffffff;
  --ink:#22303f;
  --sub:#5c7183;
  --good:#3fb984;
  --radius:20px;
  --shadow:0 10px 30px rgba(20,60,90,.10);
  --font-display:'Lalezar','Vazirmatn',sans-serif;
  --font-body:'Vazirmatn','Segoe UI',Tahoma,sans-serif;
  --content-w:760px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font-body);
  background:linear-gradient(180deg,var(--bg1),var(--bg2) 340px,#f6faff 340px);
  color:var(--ink);
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent);text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%;display:block;}

/* ---------- top bar ---------- */
.blog-topbar{
  max-width:1040px;margin:0 auto;padding:22px 20px 8px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.blog-brand{display:flex;align-items:center;gap:10px;}
.blog-brand .logo{width:38px;height:38px;border-radius:12px;flex:0 0 auto;
  background:radial-gradient(circle at 32% 28%,#8fd6ff,var(--accent) 55%,#235fb8 100%);
  box-shadow:inset 0 2px 4px rgba(255,255,255,.6), inset 0 -6px 10px rgba(0,20,60,.18);
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:17px;}
.blog-brand b{font-family:var(--font-display);font-size:19px;letter-spacing:.3px;}
.blog-brand span{display:block;font-size:11px;color:var(--sub);margin-top:1px;}
.blog-cta{
  background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;
  padding:11px 20px;border-radius:14px;font-weight:800;font-size:13.5px;
  box-shadow:0 10px 22px rgba(58,160,255,.28);white-space:nowrap;
}
.blog-cta:hover{text-decoration:none;filter:brightness(1.04);}

/* ---------- breadcrumb ---------- */
.crumbs{max-width:1040px;margin:6px auto 0;padding:0 20px;font-size:12.5px;color:var(--sub);}
.crumbs a{color:var(--sub);}
.crumbs a:hover{color:var(--accent);}
.crumbs .sep{margin:0 6px;opacity:.6;}
.crumbs .current{color:var(--ink);font-weight:700;}

/* ---------- hub hero ---------- */
.hub-hero{max-width:1040px;margin:18px auto 0;padding:0 20px;}
.hub-hero-card{
  background:var(--card);border-radius:28px;box-shadow:var(--shadow);
  overflow:hidden;display:grid;grid-template-columns:1.1fr 1fr;align-items:center;
}
.hub-hero-txt{padding:38px 40px;}
.hub-hero-txt h1{font-family:var(--font-display);font-size:30px;margin:0 0 12px;font-weight:400;color:var(--ink);}
.hub-hero-txt p{margin:0;color:var(--sub);font-size:14.5px;line-height:1.9;}
.hub-hero-img{padding:0;}
.hub-hero-img img{width:100%;height:auto;display:block;}

/* ---------- article grid ---------- */
.article-grid{
  max-width:1040px;margin:34px auto 60px;padding:0 20px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;
}
.article-card{
  background:var(--card);border-radius:22px;overflow:hidden;box-shadow:var(--shadow);
  display:flex;flex-direction:column;transition:transform .18s ease, box-shadow .18s ease;
}
.article-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(20,60,90,.16);text-decoration:none;}
.article-card .thumb{aspect-ratio:16/9;overflow:hidden;background:var(--bg1);}
.article-card .thumb img{width:100%;height:100%;object-fit:cover;}
.article-card .body{padding:20px 22px 24px;flex:1;display:flex;flex-direction:column;}
.article-card .cat{
  align-self:flex-start;background:var(--bg1);color:var(--accent);font-size:11px;font-weight:800;
  padding:4px 11px;border-radius:10px;margin-bottom:10px;
}
.article-card h2{font-family:var(--font-display);font-weight:400;font-size:18px;margin:0 0 8px;color:var(--ink);line-height:1.6;}
.article-card p{color:var(--sub);font-size:13px;margin:0 0 14px;line-height:1.85;flex:1;}
.article-card .meta{font-size:11.5px;color:var(--sub);display:flex;align-items:center;gap:8px;}
.article-card .readmore{font-size:12.5px;font-weight:800;color:var(--accent);margin-top:10px;}

/* ---------- footer ---------- */
.blog-footer{
  max-width:1040px;margin:0 auto;padding:26px 20px 40px;text-align:center;
  color:var(--sub);font-size:12px;border-top:1px solid #e2edf5;
}
.blog-footer a{color:var(--accent);}

/* ================= single article ================= */
.article-wrap{max-width:var(--content-w);margin:0 auto;padding:0 20px 60px;}
.article-header{padding-top:6px;}
.article-header .cat{
  display:inline-block;background:var(--bg1);color:var(--accent);font-size:11.5px;font-weight:800;
  padding:5px 13px;border-radius:10px;margin-bottom:16px;
}
.article-header h1{font-family:var(--font-display);font-weight:400;font-size:29px;line-height:1.55;margin:0 0 14px;color:var(--ink);}
.article-header .sub{color:var(--sub);font-size:15px;line-height:1.9;margin:0 0 18px;}
.article-meta{display:flex;align-items:center;gap:14px;font-size:12.5px;color:var(--sub);margin-bottom:24px;flex-wrap:wrap;}
.article-meta .dot{width:4px;height:4px;border-radius:50%;background:var(--sub);opacity:.5;}
.article-hero{border-radius:24px;overflow:hidden;box-shadow:var(--shadow);margin-bottom:32px;}
.article-hero img{width:100%;height:auto;}

.article-body{font-size:15.5px;color:#38495a;}
.article-body h2{
  font-family:var(--font-display);font-weight:400;font-size:21px;color:var(--ink);
  margin:38px 0 14px;padding-inline-start:14px;border-inline-start:4px solid var(--accent);
}
.article-body h3{font-size:16.5px;font-weight:800;color:var(--ink);margin:26px 0 10px;}
.article-body p{margin:0 0 16px;}
.article-body ul,.article-body ol{margin:0 0 18px;padding-inline-start:22px;}
.article-body li{margin-bottom:8px;}
.article-body strong{color:var(--ink);}
.article-body .callout{
  background:var(--bg1);border-radius:16px;padding:18px 20px;margin:22px 0;
  font-size:14px;color:var(--ink);border-inline-start:4px solid var(--accent2);
}
.article-body .callout b{display:block;margin-bottom:4px;color:var(--accent);}
.article-body .tip-list{background:var(--bg2);border-radius:16px;padding:20px 22px;margin:20px 0;}
.article-body table{width:100%;border-collapse:collapse;margin:20px 0;font-size:13.5px;}
.article-body th,.article-body td{padding:10px 12px;border-bottom:1px solid #e2edf5;text-align:right;}
.article-body th{color:var(--sub);font-weight:800;font-size:12.5px;}
.article-body blockquote{
  margin:22px 0;padding:16px 20px;background:#fff8ea;border-inline-start:4px solid var(--accent3);
  border-radius:14px;font-size:14.5px;color:#6b5424;
}

.app-promo{
  margin:44px 0;background:linear-gradient(135deg,var(--accent),var(--accent2));border-radius:24px;
  padding:30px 32px;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  box-shadow:0 16px 34px rgba(58,160,255,.28);
}
.app-promo .txt h3{font-family:var(--font-display);font-weight:400;font-size:19px;margin:0 0 6px;}
.app-promo .txt p{margin:0;font-size:13px;opacity:.92;max-width:420px;line-height:1.8;}
.app-promo .btn{background:#fff;color:var(--accent);font-weight:800;font-size:13.5px;padding:12px 22px;border-radius:13px;white-space:nowrap;}
.app-promo .btn:hover{text-decoration:none;filter:brightness(.98);}

.author-box{
  display:flex;align-items:center;gap:14px;margin:40px 0 0;padding:20px 22px;
  background:var(--card);border-radius:18px;box-shadow:var(--shadow);
}
.author-box .av{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:16px;flex:0 0 auto;}
.author-box .name{font-weight:800;font-size:13.5px;color:var(--ink);}
.author-box .role{font-size:12px;color:var(--sub);margin-top:2px;}

.related{max-width:var(--content-w);margin:44px auto 0;padding:0 20px;}
.related h2{font-family:var(--font-display);font-weight:400;font-size:19px;margin:0 0 16px;color:var(--ink);}
.related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;}
.related-grid a{
  background:var(--card);border-radius:16px;padding:16px 18px;box-shadow:var(--shadow);
  font-size:13px;font-weight:700;color:var(--ink);display:block;line-height:1.7;
}
.related-grid a:hover{text-decoration:none;color:var(--accent);}

@media (max-width:760px){
  .hub-hero-card{grid-template-columns:1fr;}
  .hub-hero-img{order:-1;}
  .hub-hero-txt{padding:26px 24px;}
  .hub-hero-txt h1{font-size:24px;}
  .article-header h1{font-size:23px;}
  .app-promo{padding:24px;}
}