/* blog.css — LexiNest blog design system (matches landing page).
   Tokens mirror the live app: warm-cream surfaces, teal brand scale, Inter. */

:root{
  --surface:#F5F0E8; --surface-card:#FDFAF6; --surface-hover:#E8E2D6; --surface-border:#D5CEC3;
  --b50:#edf6f4; --b100:#d2ecea; --b200:#a5d9d4; --b300:#6ec0b9; --b400:#43a49e;
  --b500:#2e8a84; --b600:#24706b; --b700:#1c5a56; --b800:#164544; --b900:#103231;
  --ink:#103231; --ink-55:rgba(16,50,49,.55); --ink-40:rgba(16,50,49,.40);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:'Inter',system-ui,sans-serif;background:var(--surface);color:var(--ink);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}

.wrap{max-width:1120px;margin:0 auto;padding:0 24px;}
.wrap-narrow{max-width:920px;margin:0 auto;padding:0 24px;}

/* ── nav ─────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:40;background:rgba(245,240,232,.85);backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;letter-spacing:-.02em;color:var(--b600);}
.brand svg{border-radius:9px;}
.nav-links{display:flex;align-items:center;gap:22px;}
.nav-links a{font-size:14.5px;font-weight:600;color:var(--ink-55);transition:color .15s;}
.nav-links a:hover,.nav-links a.active{color:var(--b700);}
.btn-pill{font-size:14px;font-weight:700;color:#fff;background:var(--b600);padding:10px 18px;border-radius:999px;
  transition:background .15s,transform .15s;white-space:nowrap;}
.btn-pill:hover{background:var(--b700);}
.lang-mini{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;color:var(--b700);
  border:1px solid var(--surface-border);background:var(--surface-card);padding:7px 11px;border-radius:999px;}

/* ── shared bits ─────────────────────────────────────── */
.eyebrow{font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--b500);}
.cover{position:relative;overflow:hidden;border-radius:20px;background:#1c5a56;isolation:isolate;}
.cover .motif{position:absolute;right:-14px;bottom:-26px;color:#fff;opacity:.16;z-index:0;}
.cover .cat{position:absolute;left:16px;top:16px;z-index:2;font-size:12px;font-weight:800;letter-spacing:.04em;
  color:#fff;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);
  padding:5px 11px;border-radius:999px;backdrop-filter:blur(4px);}
.cover .ttl{position:absolute;left:18px;right:18px;bottom:16px;z-index:2;color:#fff;font-weight:800;
  letter-spacing:-.02em;line-height:1.05;}
/* category gradients (on-brand, varied) */
.g-method{background:linear-gradient(135deg,#2f938c,#1c5a56 70%);}
.g-science{background:linear-gradient(135deg,#3a6db0,#1f3f6e 72%);}
.g-polish{background:linear-gradient(135deg,#1f8a5b,#0f5a3a 72%);}
.g-german{background:linear-gradient(135deg,#b0823a,#6e4f1f 72%);}
.g-spanish{background:linear-gradient(135deg,#c2683f,#7a3a22 72%);}
.g-levels{background:linear-gradient(135deg,#7b5bb0,#3f2e6e 72%);}

.card{background:var(--surface-card);border:1px solid var(--surface-border);border-radius:20px;
  transition:transform .18s,box-shadow .18s,border-color .18s;}
.card:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(24,60,57,.12);border-color:var(--b200);}

.meta{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-40);font-weight:600;}
.dot{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.5;}

/* ── footer ──────────────────────────────────────────── */
.foot{background:var(--b900);color:var(--b100);}
.foot a{color:rgba(210,236,234,.9);}
.foot a:hover{color:#fff;}
.foot h4{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:rgba(110,192,185,.7);margin:0 0 14px;}

/* ── article prose ───────────────────────────────────── */
.prose{font-size:18.5px;line-height:1.75;color:#243b39;}
.prose > p{margin:0 0 24px;}
.prose .lead{font-size:22px;line-height:1.6;color:var(--b800);font-weight:500;margin-bottom:28px;}
.prose h2{font-size:30px;font-weight:800;letter-spacing:-.02em;color:var(--b900);margin:48px 0 16px;line-height:1.15;scroll-margin-top:90px;}
.prose h3{font-size:22px;font-weight:800;letter-spacing:-.01em;color:var(--b900);margin:34px 0 12px;}
.prose ul,.prose ol{margin:0 0 24px;padding-left:24px;}
.prose li{margin:0 0 10px;}
.prose strong{color:var(--b900);font-weight:700;}
.prose a.link{color:var(--b600);font-weight:600;border-bottom:2px solid var(--b200);transition:border-color .15s;}
.prose a.link:hover{border-color:var(--b500);}
.prose blockquote{margin:34px 0;padding:6px 0 6px 26px;border-left:4px solid var(--b400);
  font-size:24px;line-height:1.45;font-weight:600;color:var(--b800);letter-spacing:-.01em;}
.prose figure{margin:32px 0;}
.prose hr{border:none;border-top:1px solid var(--surface-border);margin:40px 0;}

.callout{background:var(--b50);border:1px solid var(--b100);border-radius:18px;padding:24px 26px;margin:34px 0;}
.callout h4{margin:0 0 12px;font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--b600);}
.callout ul{margin:0;padding-left:20px;}
.callout li{margin:0 0 8px;font-size:16.5px;color:#243b39;}

.tbl{width:100%;border-collapse:collapse;margin:30px 0;font-size:16px;}
.tbl th,.tbl td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--surface-border);}
.tbl th{font-weight:800;color:var(--b900);font-size:13px;text-transform:uppercase;letter-spacing:.04em;}
.tbl tr:last-child td{border-bottom:none;}

/* inline app CTA inside article */
.inline-cta{background:linear-gradient(135deg,#2f938c,#1f6e69 60%,#16524e);color:#fff;border-radius:22px;
  padding:30px 32px;margin:40px 0;}
.inline-cta h3{margin:0 0 8px;font-size:23px;font-weight:800;letter-spacing:-.02em;color:#fff;}
.inline-cta p{margin:0 0 18px;color:rgba(237,246,244,.85);font-size:16px;line-height:1.6;}
.inline-cta a{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--b700);font-weight:800;
  font-size:15px;padding:13px 22px;border-radius:14px;}

/* table of contents */
.toc{position:sticky;top:96px;}
.toc .lbl{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-40);margin-bottom:14px;}
.toc a{display:block;font-size:14px;color:var(--ink-55);padding:6px 0 6px 14px;border-left:2px solid var(--surface-border);
  font-weight:600;transition:color .15s,border-color .15s;}
.toc a:hover,.toc a.on{color:var(--b700);border-color:var(--b500);}

.tag{display:inline-flex;align-items:center;font-size:12.5px;font-weight:700;color:var(--b700);
  background:var(--surface-card);border:1px solid var(--surface-border);padding:6px 13px;border-radius:999px;
  transition:border-color .15s,color .15s;}
.tag:hover{border-color:var(--b400);}
.tag.on{background:var(--b600);border-color:var(--b500);color:#fff;}
/* category-filter chips are <button>s — reset UA styling so they match span.tag */
button.tag{font:inherit;cursor:pointer;line-height:1;}
button.tag:focus-visible{outline:2px solid var(--b500);outline-offset:2px;}

@media (max-width:860px){
  .nav-links{display:none;}
  .prose{font-size:17.5px;}
  .prose .lead{font-size:20px;}
  .prose h2{font-size:26px;}
  .prose blockquote{font-size:21px;}
}

/* ── responsive layout grids ─────────────────────────── */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.feat{display:grid;grid-template-columns:1.15fr 1fr;gap:0;overflow:hidden;align-items:stretch;}
.body-grid{display:grid;grid-template-columns:220px 1fr;gap:48px;align-items:start;}
.news{display:grid;grid-template-columns:1.3fr 1fr;gap:24px;align-items:center;}
.foot-grid{display:grid;grid-template-columns:1.4fr 2fr;gap:36px;}
.foot-cols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:28px;}

@media (max-width:980px){
  .grid-3{grid-template-columns:1fr 1fr;}
  .body-grid{grid-template-columns:1fr;gap:0;}
  .toc{display:none;}
}
@media (max-width:680px){
  .grid-3{grid-template-columns:1fr;}
  .feat{grid-template-columns:1fr;}
  .feat .cover{min-height:200px !important;}
  .news{grid-template-columns:1fr;}
  .news a{justify-self:start;}
  .foot-grid{grid-template-columns:1fr;gap:28px;}
  .wrap,.wrap-narrow{padding:0 18px;}
}
@media (max-width:440px){
  .foot-cols{grid-template-columns:1fr 1fr;gap:20px;}
}