/* MAPA.UA blog — общий стиль статей и лендинга.
   Палитра наследована из index.html (graphite / situation-room). */
:root{
  --bg:#1a1d24; --surface:#232730; --surface-2:#2c313c; --border:#3d4453;
  --green:#4ade80; --red:#ef4444; --amber:#fbbf24; --cyan:#38bdf8;
  --text:#e5e7eb; --muted:#94a3b8;
  --font:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --maxw:760px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--text); font-family:var(--font);
  line-height:1.7; font-size:17px; -webkit-font-smoothing:antialiased;
}
a{color:var(--cyan); text-decoration:none}
a:hover{text-decoration:underline}

/* header / nav */
.site-header{
  border-bottom:1px solid var(--border); background:var(--surface);
  position:sticky; top:0; z-index:10;
}
.site-header .wrap{
  max-width:var(--maxw); margin:0 auto; padding:12px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand{font-weight:700; color:var(--text); letter-spacing:1px; font-size:18px}
.brand b{color:var(--green)}
.nav-cta{
  background:var(--green); color:#0b0e13; padding:7px 14px; border-radius:6px;
  font-weight:700; font-size:14px; white-space:nowrap;
}
.nav-cta:hover{text-decoration:none; filter:brightness(1.08)}

/* layout */
main{max-width:var(--maxw); margin:0 auto; padding:28px 20px 64px}
.breadcrumb{font-size:13px; color:var(--muted); margin-bottom:18px}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--cyan)}

article h1, .blog-title{
  font-size:30px; line-height:1.25; margin:6px 0 14px; color:#fff; font-weight:700;
}
.article-meta{font-size:13px; color:var(--muted); margin-bottom:24px}
.lede{font-size:19px; color:var(--text); margin:0 0 26px; padding-left:14px;
  border-left:3px solid var(--green)}

article h2{
  font-size:22px; margin:34px 0 12px; color:#fff; font-weight:700;
  border-bottom:1px solid var(--border); padding-bottom:6px;
}
article h3{font-size:18px; margin:22px 0 8px; color:var(--amber)}
article p{margin:0 0 16px}
article ul, article ol{margin:0 0 18px 22px}
article li{margin:6px 0}
article strong{color:#fff}
article table{
  width:100%; border-collapse:collapse; margin:0 0 20px; font-size:15px;
}
article th, article td{border:1px solid var(--border); padding:8px 10px; text-align:left}
article th{background:var(--surface-2); color:#fff}

/* CTA card inside article */
.cta-card{
  background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--green);
  border-radius:8px; padding:18px 20px; margin:30px 0;
}
.cta-card h3{color:#fff; margin:0 0 6px}
.cta-card .nav-cta{display:inline-block; margin-top:10px}

/* FAQ */
.faq details{
  background:var(--surface); border:1px solid var(--border); border-radius:8px;
  padding:0 16px; margin:10px 0;
}
.faq summary{cursor:pointer; padding:14px 0; font-weight:700; color:#fff; list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:'+ '; color:var(--green)}
.faq details[open] summary::before{content:'– '}
.faq details[open] summary{border-bottom:1px solid var(--border)}
.faq details p{padding:14px 0}

/* related */
.related{margin-top:42px; border-top:1px solid var(--border); padding-top:22px}
.related h2{font-size:18px; border:0; margin-bottom:12px}
.related ul{list-style:none; margin:0}
.related li{margin:8px 0}

/* blog index grid */
.blog-hero{margin-bottom:30px}
.blog-hero p{color:var(--muted); font-size:17px}
.cluster-title{font-size:20px; color:var(--amber); margin:34px 0 14px}
.card-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.card{
  display:block; background:var(--surface); border:1px solid var(--border);
  border-radius:8px; padding:16px 18px; transition:border-color .15s, transform .15s;
}
.card:hover{border-color:var(--green); text-decoration:none; transform:translateY(-2px)}
.card .ctag{font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:1px}
.card h3{font-size:16px; color:#fff; margin:6px 0 4px; line-height:1.35}
.card p{font-size:14px; color:var(--muted); margin:0}

footer.site-footer{
  border-top:1px solid var(--border); color:var(--muted); font-size:13px;
  text-align:center; padding:24px 20px;
}
footer.site-footer a{color:var(--muted)}

@media(max-width:640px){
  body{font-size:16px}
  .card-grid{grid-template-columns:1fr}
  article h1, .blog-title{font-size:25px}
}