/* Blog — the article and index pages under /blog and /he/blog.
   Supplements /style.css, the same way privacy-policy/policy.css does. Pages are
   baked by sync-blog.js; this file is hand-written. Logical properties only, so the
   Hebrew pages mirror without a second stylesheet. */

/* ── article ─────────────────────────────────────────────────────────────── */
.post { max-inline-size: 70ch; margin-inline: auto; }

.post-head { padding-block-end: 28px; border-block-end: 1px solid var(--line); margin-block-end: 36px; }
.post-head .overline a { color: inherit; text-decoration: none; }
.post-head .overline a:hover { color: var(--ink); }
.post-head h1 {
  font-size: clamp(1.8rem, 1.3rem + 2.2vw, 2.7rem);
  font-weight: 700; letter-spacing: -0.022em; line-height: 1.12;
  margin-block: 14px 16px; text-wrap: balance;
}
.post-meta {
  display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline;
  font-size: 0.9rem; color: var(--ink-soft); margin: 0;
}
.post-meta a { color: var(--ink); font-weight: 600; }
/* The other language, as its code: "he" / "en" — the house's mono micro-label. */
.post-meta .post-lang { font-family: var(--font-mono); font-size: 0.85em; letter-spacing: 0.04em; }

.post-body { font-size: 1.0625rem; line-height: 1.7; color: var(--ink); }
.post-body > * + * { margin-block-start: 1.05em; }
.post-body h2 {
  font-size: clamp(1.3rem, 1.15rem + 0.7vw, 1.6rem); letter-spacing: -0.015em; line-height: 1.2;
  margin-block-start: 2.2em; padding-block-start: 0.9em; border-block-start: 1px solid var(--line);
}
.post-body h3 { font-size: 1.2rem; letter-spacing: -0.01em; line-height: 1.25; margin-block-start: 1.8em; }
.post-body h4 { font-size: 1.05rem; margin-block-start: 1.6em; }
.post-body h2 + *, .post-body h3 + *, .post-body h4 + * { margin-block-start: 0.6em; }
/* A link to a section must not land under the sticky header. */
.post-body :is(h2, h3, h4) { scroll-margin-block-start: 88px; text-wrap: balance; }
.post-body a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.post-body a:hover { text-decoration-thickness: 2px; }
.post-body ul, .post-body ol { padding-inline-start: 1.4em; }
.post-body li + li { margin-block-start: 0.35em; }
.post-body li > ul, .post-body li > ol { margin-block-start: 0.35em; }
.post-body blockquote {
  margin-inline: 0; padding-inline-start: 18px; border-inline-start: 3px solid var(--line-strong);
  color: var(--ink-soft);
}
.post-body hr { border: 0; border-block-start: 1px solid var(--line); margin-block: 2.4em; }
.post-body strong { font-weight: 650; }

/* Code reads left to right in every language — the Hebrew pages included. */
.post-body code, .post-body pre { font-family: var(--font-mono); direction: ltr; unicode-bidi: isolate; }
.post-body :not(pre) > code {
  font-size: 0.88em; background: var(--surface); border: 1px solid var(--line);
  border-radius: 6px; padding: 0.08em 0.36em; overflow-wrap: anywhere;
}
.post-body pre {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card);
  padding: 16px 18px; overflow-x: auto; text-align: left;
  font-size: 0.82rem; line-height: 1.6; -webkit-overflow-scrolling: touch;
}
.post-body pre code { font-size: inherit; }

/* A wide table scrolls inside its box on a phone instead of widening the page. */
.post-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.post-table table { border-collapse: collapse; inline-size: 100%; font-size: 0.95rem; }
.post-table th, .post-table td {
  text-align: start; vertical-align: top; padding: 10px 12px; border-block-end: 1px solid var(--line);
}
.post-table th { font-weight: 600; border-block-end-color: var(--line-strong); }
.post-table td { font-variant-numeric: tabular-nums; }
/* A name in a table cell stays whole ("android-track", not "androi-d-track");
   the wrapper scrolls if that makes the table wider than the phone. */
.post-table code { white-space: nowrap; overflow-wrap: normal; }

/* The tool the post is about — one box at the end, not an advert in the text. */
.post-tool {
  margin-block-start: 48px; padding: 22px 24px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card);
}
.post-tool p { margin: 0; color: var(--ink-soft); font-size: 0.97rem; }
.post-tool p + p { margin-block-start: 8px; }
.post-tool .post-tool-name {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  color: var(--ink); font-size: 1.15rem; font-weight: 700; margin-block-start: 10px;
}
.post-tool .post-tool-name .chip { align-self: center; }
[dir="rtl"] .post-tool .post-tool-name { justify-content: flex-end; }
.post-tool a { color: var(--ink); font-weight: 600; }
.post-tool .go { font-family: var(--font-mono); color: var(--ink-soft); }

/* ── index ───────────────────────────────────────────────────────────────── */
.page-hero .overline a { color: inherit; }
.post-list { list-style: none; padding: 0; margin: 0; border-block-start: 1px solid var(--line); }
.post-row { border-block-end: 1px solid var(--line); }
.post-row > a {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: clamp(14px, 3vw, 28px); padding-block: clamp(20px, 3vw, 30px);
  text-decoration: none; color: inherit;
}
.post-row-num { font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-soft); }
.post-row-text { display: flex; flex-direction: column; gap: 6px; min-inline-size: 0; }
.post-row-title { font-size: clamp(1.1rem, 1rem + 0.8vw, 1.45rem); font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; text-wrap: balance; }
.post-row-desc { color: var(--ink-soft); font-size: 0.95rem; max-inline-size: 70ch; }
.post-row-date { font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-soft); }
.post-row a:hover .featured-go { color: var(--accent); }
.post-row a:hover .post-row-title { text-decoration: underline; text-underline-offset: 3px; }
[dir="rtl"] .featured-go { transform: scaleX(-1); display: inline-block; }

@media (max-width: 599px) {
  .post-row > a { grid-template-columns: 1fr auto; }
  .post-row-num { display: none; }
  .post-body { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .post-row a:hover .post-row-title { text-decoration: none; }
}