/* Blog styles, layered on /landing.css (loaded first: reuses the design tokens,
   .wrap, .btn, footer). Article + card layout for the static Stiip blog. */

body.blog{ padding-top:14px; }

/* --- top nav: centred logo + language switcher ------------------------------- */
.blog-nav{ display:flex; align-items:center; justify-content:space-between; gap:14px;
           padding:6px 0 22px; flex-wrap:wrap; }
.blog-logo{ display:inline-flex; text-decoration:none; }
.blog-logo .box{ width:84px; height:72px; border-radius:0 0 12px 12px; background:var(--accent);
                 display:flex; align-items:center; justify-content:center; box-shadow:0 10px 26px rgba(87,40,180,.5); }
.blog-logo .box img{ width:58%; height:auto; display:block; }

.lang-switch{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13px; }
.lang-switch .ls-label{ color:var(--muted); text-transform:uppercase; letter-spacing:.12em; font-size:11px; font-weight:700; }
.lang-switch a, .lang-switch .ls-cur{ text-decoration:none; padding:4px 9px; border-radius:999px; border:1px solid var(--line); }
.lang-switch a{ color:var(--muted); transition:color .15s, border-color .15s; }
.lang-switch a:hover{ color:var(--text); border-color:var(--accent-2); }
.lang-switch .ls-cur{ color:var(--text); background:var(--card); border-color:var(--accent-2); }

.blog-back{ display:inline-block; margin:0 0 18px; color:var(--muted); text-decoration:none; font-weight:600; }
.blog-back:hover{ color:var(--text); }

/* --- article ----------------------------------------------------------------- */
.post{ max-width:720px; margin:0 auto; }
.post h1{ font-size:clamp(30px,5vw,50px); line-height:1.04; letter-spacing:.005em; text-transform:uppercase;
          font-weight:800; margin:6px 0 14px; }
.post-meta{ color:var(--muted); font-size:14px; margin:0 0 22px; }
.post-hero{ width:100%; height:auto; border-radius:16px; border:1px solid var(--line); margin:0 0 26px; display:block; }

/* Body text: a comfortable ~68ch measure, generous rhythm. */
.post-body{ max-width:68ch; font-size:17px; line-height:1.72; color:var(--text); }
.post-body > *:first-child{ margin-top:0; }
.post-body h2{ font-size:clamp(22px,3.2vw,30px); line-height:1.12; text-transform:uppercase; letter-spacing:.01em;
               margin:2em 0 .5em; }
.post-body h3{ font-size:clamp(19px,2.4vw,23px); margin:1.6em 0 .4em; }
.post-body p{ margin:0 0 1.15em; }
.post-body a{ color:var(--energy); text-decoration:underline; text-underline-offset:2px; }
.post-body a:hover{ color:var(--text); }
.post-body ul, .post-body ol{ margin:0 0 1.15em; padding-left:1.4em; }
.post-body li{ margin:.3em 0; }
.post-body li::marker{ color:var(--accent-2); }
.post-body strong{ color:#fff; }
.post-body img{ max-width:100%; height:auto; border-radius:12px; border:1px solid var(--line); margin:1.2em 0; }
.post-body blockquote{ margin:1.4em 0; padding:.4em 1.1em; border-left:3px solid var(--accent-2);
                       color:var(--muted); background:rgba(139,92,246,.06); border-radius:0 10px 10px 0; }
.post-body code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.9em;
                 background:var(--card); border:1px solid var(--line); border-radius:6px; padding:.1em .4em; }
.post-body pre{ overflow-x:auto; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 16px; }
.post-body pre code{ background:none; border:0; padding:0; }
.post-body hr{ border:0; border-top:1px solid var(--line); margin:2em 0; }
.post-body table{ width:100%; border-collapse:collapse; margin:1.2em 0; display:block; overflow-x:auto; }
.post-body th, .post-body td{ border:1px solid var(--line); padding:8px 12px; text-align:left; }

/* --- index hero + post cards ------------------------------------------------- */
.blog-hero{ text-align:center; padding:22px 0 34px; }
.blog-hero h1{ font-size:clamp(34px,6vw,60px); text-transform:uppercase; font-weight:800; letter-spacing:.01em; margin:0 0 12px; }
.blog-hero .lead{ color:var(--muted); font-size:clamp(16px,2vw,19px); max-width:620px; margin:0 auto; }

.post-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:20px; margin:8px 0 40px; }
.post-card{ display:flex; flex-direction:column; text-decoration:none; color:inherit; background:var(--card);
            border:1px solid var(--line); border-radius:18px; overflow:hidden;
            transition:transform .12s, border-color .15s, box-shadow .15s; }
.post-card:hover{ transform:translateY(-3px); border-color:var(--accent-2); box-shadow:0 14px 34px rgba(0,0,0,.35); }
.card-thumb{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; border-bottom:1px solid var(--line); }
.card-body{ padding:18px 20px 20px; display:flex; flex-direction:column; gap:8px; flex:1; }
.card-body h2{ font-size:22px; line-height:1.12; text-transform:uppercase; letter-spacing:.01em; margin:0; }
.card-desc{ color:var(--muted); font-size:15px; line-height:1.5; margin:0; flex:1; }
.card-meta{ color:var(--muted); font-size:12.5px; margin:0; }
.card-more{ color:var(--energy); font-weight:700; font-size:14px; text-transform:uppercase; letter-spacing:.03em; }

/* --- CTA band ---------------------------------------------------------------- */
.blog-cta{ text-align:center; margin:34px 0 8px; padding:34px 22px; border-radius:20px;
           background:linear-gradient(135deg,rgba(87,40,180,.5),rgba(45,212,191,.14)); border:1px solid var(--line); }
.blog-cta h2{ font-size:clamp(24px,3.6vw,34px); text-transform:uppercase; margin:0 0 18px; }

@media (max-width:560px){
  .blog-nav{ padding-bottom:16px; }
  .post-body{ font-size:16px; }
}