/* Article body typography for clanky.mojenovaprace.cz (#754).
   Self-contained on purpose: apps/internal's editor preview (an iframe) links this
   file from {BLOG_BASE_URL}/assets/article.css and wraps the rendered body in
   <div class="article-body">, so it may not rely on anything from /css/app.css.
   Changing this file changes the preview too.
   Brand Book: Inter only, palette colors only, flat surfaces - no shadows or gradients. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

.article-body{
  --article-green:#16A34A;
  --article-green-dark:#15803D;
  --article-green-tint:#F0FDF4;
  --article-navy:#272D3B;
  --article-muted:rgba(39,45,59,.66);
  --article-line:rgba(39,45,59,.10);

  display:flow-root; /* contains floated images */
  margin-top:24px;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:16px;
  line-height:1.75;
  color:var(--article-navy);
}

.article-body > :first-child{margin-top:0}

.article-body h2,.article-body h3,.article-body h4{
  margin:36px 0 0;
  font-weight:700;
  line-height:1.25;
  letter-spacing:-.02em;
}
.article-body h2{font-size:22px;font-weight:800}
.article-body h3{font-size:18px}
.article-body h4{font-size:16px}

.article-body p,
.article-body ul,
.article-body ol,
.article-body blockquote,
.article-body pre,
.article-body table{margin:16px 0 0}

.article-body ul,.article-body ol{padding-left:24px}
.article-body li+li{margin-top:6px}
.article-body li > ul,.article-body li > ol{margin-top:6px}

.article-body a{color:var(--article-green);text-decoration:underline;text-underline-offset:2px}
.article-body a:hover{color:var(--article-green-dark)}

.article-body strong{font-weight:700}
.article-body em{font-style:italic}

/* flow-root keeps backgrounds and borders from running under a floated image. */
.article-body blockquote{
  display:flow-root;
  padding:12px 20px;
  border-left:4px solid var(--article-green);
  border-radius:0 10px 10px 0;
  background:var(--article-green-tint);
}
.article-body blockquote > :first-child{margin-top:0}

.article-body code{
  padding:1px 6px;border-radius:6px;
  background:var(--article-green-tint);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em;
}
.article-body pre{
  display:flow-root;
  padding:16px;border-radius:10px;overflow-x:auto;
  background:var(--article-green-tint);
}
.article-body pre code{padding:0;background:none}

.article-body hr{display:flow-root;margin:32px 0 0;border:0;border-top:1px solid var(--article-line)}

.article-body table{width:100%;border-collapse:collapse;font-size:15px}
.article-body th,.article-body td{padding:8px 12px;border:1px solid var(--article-line);text-align:left;vertical-align:top}
.article-body th{font-weight:600;background:var(--article-green-tint)}

.article-body img{display:block;max-width:100%;height:auto}

/* ── Images: ![alt](image:42){.vlevo|.vpravo|.stred|.naplno} ─────────── */

.article-body figure{margin:0}
.article-body figure img{width:100%;border-radius:10px}
.article-body figcaption{margin-top:6px;font-size:13px;line-height:1.5;color:var(--article-muted)}

.article-body .img-vlevo{float:left;width:45%;margin:6px 24px 16px 0}
.article-body .img-vpravo{float:right;width:45%;margin:6px 0 16px 24px}
.article-body .img-stred{clear:both;max-width:640px;margin:24px auto 0}
.article-body .img-naplno{clear:both;width:100%;margin:24px 0 0}

@media (max-width:639px){
  .article-body .img-vlevo,
  .article-body .img-vpravo{float:none;width:100%;margin:24px 0 0}
}