/* ============================================================
   SAKKARY MACHINERY — the blog
   Rides on tokens.css + main.css. Loads no sections.css, so the
   few pieces it borrows from there (the Ad Holic credit) are
   restated at the bottom rather than dragging in 30 KB of home
   page rules for four lines of style.

   These pages ship no JavaScript, so nothing here may depend on a
   class that JS adds.
   ============================================================ */

.blog-body { background: var(--bg); color: var(--fg); }

/* The header is fixed. The offset belongs inside the first band, not
   on <main>: padding <main> would leave a white strip the height of
   the header sitting above the dark opening band. */
.blog-body main > .section:first-child,
.blog-body main > .post > .section:first-child {
  padding-block-start: calc(var(--section-y) + var(--header-h));
}

/* The header, burger and drawer are main.css's, unmodified — the same
   markup, the same classes, the same breakpoints. Nothing about the
   chrome is restated here, which is the only way the two stay identical
   as the site changes.

   .skip likewise comes from main.css.

   The language control is a pair of links rather than buttons, because
   switching language on a blog page is a different URL, not a CSS
   toggle. main.css carries the [aria-current="true"] active state and
   the explicit box that anchors need, so nothing is overridden here
   either. */

/* No local heading scale. Headings use .h-display / .h-section from
   main.css, so the blog inherits the RTL corrections those carry:
   --lh-tight relaxes from 0.94 to 1.14 and --tr-display drops to 0
   in Arabic. Hand-set line-heights here clipped Arabic descenders. */
/* .sec-head and .dot are restated from sections.css, which these pages
   do not load — pulling in 30 KB of home-page rules for twelve lines
   would cost more than it saves. Keep the two in step if either moves. */
.sec-head {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: var(--s-5) var(--s-8);
  align-items: end;
  margin-bottom: var(--s-7);
}
@media (max-width: 900px) { .sec-head { grid-template-columns: 1fr; align-items: start; } }
.dot { color: var(--fg-3); margin-inline: .35em; }

.blog-hero .sec-head { margin-bottom: 0; }
.blog-hero .lede { margin-top: 0; }

/* ---------- category filter ---------- */
.blog-cats {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  padding-block-end: var(--s-6);
  border-bottom: 1px solid var(--line);
}
.tagl {
  padding: 7px var(--s-4);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-2);
  transition: color var(--dur-2) var(--ease-cut), border-color var(--dur-2) var(--ease-cut);
}
.tagl:hover { color: var(--fg); border-color: var(--fg-3); }
.tagl.is-on { color: var(--accent-on); background: var(--accent-fill); border-color: var(--accent-fill); }
/* 37px tall is a comfortable chip for a cursor and a miss for a thumb.
   Only the touch case grows — the desktop row stays as drawn. The 8px
   flex gap already separates them, so height is the whole fix. */
@media (pointer: coarse) {
  .tagl { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ---------- the grid ---------- */
.blog-list { padding-block-start: var(--s-7); }
.blog-empty { color: var(--fg-3); padding-block: var(--s-8); text-align: center; }

.pgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: var(--s-6);
}

.pcard { min-width: 0; }
.pcard__link {
  display: flex; flex-direction: column; height: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  overflow: hidden;
  background: var(--surface);
  transition: border-color var(--dur-2) var(--ease-cut), transform var(--dur-2) var(--ease-cut);
}
.pcard__link:hover { border-color: var(--fg-3); transform: translateY(-2px); }
.pcard__media { aspect-ratio: 16 / 9; background: var(--surface-2); overflow: hidden; }
.pcard__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--dur-4) var(--ease-cut);
}
.pcard__link:hover .pcard__media img { transform: scale(1.03); }
.pcard__body { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); flex: 1; }
.pcard__meta { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.pcard__cat { color: var(--accent); }
.pcard__t {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tr-display);
  /* +0.18 over --lh-tight: card titles wrap to 2-3 lines where a
     display heading rarely does, and 0.94 collides in Arabic */
  line-height: calc(var(--lh-tight) + 0.18);
}
.pcard__x { margin: 0; color: var(--fg-2); font-size: var(--fs-sm); line-height: 1.55; }

/* ---------- pagination ---------- */
.pager {
  display: flex; align-items: center; justify-content: center; gap: var(--s-5);
  padding-block-start: var(--s-8);
}
.pager__n { color: var(--fg-3); }

/* Square arrow buttons, the same 50px as the search button. The one
   icon serves both directions: "newer" is the arrow turned round, and
   in Arabic both turn again, because reading right to left the next
   page is to the left. */
.pager__b { width: 50px; padding: 0; }
.pager__b .btn__ico { width: 18px; height: 18px; }
.pager__b--prev .btn__ico { transform: scaleX(-1); }
.pager__b--next:hover .btn__ico { transform: translateX(3px); }
.pager__b--prev:hover .btn__ico { transform: scaleX(-1) translateX(3px); }
:root[dir="rtl"] .pager__b--next .btn__ico { transform: scaleX(-1); }
:root[dir="rtl"] .pager__b--prev .btn__ico { transform: none; }
:root[dir="rtl"] .pager__b--next:hover .btn__ico { transform: scaleX(-1) translateX(3px); }
:root[dir="rtl"] .pager__b--prev:hover .btn__ico { transform: translateX(3px); }
/* the end of the range: kept in place, visibly unavailable */
.pager__b.is-off { opacity: .35; pointer-events: none; }

/* ---------- a post ---------- */
/* The article opens on graphite, the way the home page opens on the
   hero band. Body copy then sits on white — the same alternation the
   rest of the site runs on. */
.post__head .eyebrow { margin-bottom: var(--s-4); }
.post__head .eyebrow a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Breadcrumb links render 17px tall — real navigation, not a link
   inside a sentence, so the inline-link exemption does not cover them.
   Padding on an inline element grows the hit box and moves nothing. */
@media (pointer: coarse) { .post__head .eyebrow a { padding-block: 14px; } }
.post__t { margin: 0; max-width: 20ch; }
@media (min-width: 900px) { .post__t { max-width: 24ch; } }
.post__sub { margin-top: var(--s-5); display: flex; gap: var(--s-3); align-items: center; color: var(--fg-3); }

/* ---------- one column for the whole article ----------
   Every block used to derive its own width from --maxw-text (66ch),
   and `ch` resolves against the element's own font-size — so the same
   declaration computed to 824px on .post__body (18px text) and 745px
   on .post__cta (16px), while the cover sat at its own 880px and the
   headline ran the full page width.

   Measured on the live page at 1280, the four content edges landed at
   56 / 248 / 276 / 316px. Four different left edges down one article,
   on a site whose entire design language is a strict grid.

   An absolute value computes the same everywhere. 660px also fixes the
   measure: the body was running 79 characters a line where 60–75 is
   the comfortable range — 66ch was never 66 characters, because `ch`
   is the width of "0", which is wider than the average lowercase
   letter it was standing in for. */
:root { --post-col: 660px; }

.post__head .wrap,
.post__cover,
.post__body,
.post__cta { max-width: calc(var(--post-col) + 2 * var(--gutter)); }

.post__cover { margin: 0 auto var(--s-8); }
/* The markup declares width="1600" height="900", so the box is held at
   16:9 here too and the image is cropped into it. Without this, a 4:3
   photo uploaded from the editor loads into a 16:9 reservation and then
   pushes the whole article down — a layout shift on the largest element
   on the page, which is exactly what Core Web Vitals measures. */
.post__cover img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--r-2);
  border: 1px solid var(--line);
}

/* ---------- article body ----------
   Everything below .rich styles output the editor produced. The
   sanitiser guarantees the tag set, so this list is exhaustive:
   anything not here cannot reach the page. */
/* --maxw-text is the measure the home page's .lede already uses (66ch),
   so article copy lines up with the rest of the site instead of being
   a second, slightly different reading width. */
/* .post__body's width is set with the rest of the article column above. */

.rich { font-size: var(--fs-lg); line-height: 1.72; color: var(--fg); }
/* The element resets below (.rich p, .rich ul, .rich figure …) each
   clear the browser's default margins, and every one of them is more
   specific than a rule built from the universal selector — so the
   flow-spacing rule lost the cascade to them and consecutive
   paragraphs sat flush against each other, with no gap at all.
   Repeating the class is what wins it back. */
.rich.rich > * + * { margin-block-start: var(--s-5); }
.rich p { margin: 0; }
/* Doubled to match the flow rule above: a heading opens a new section
   and needs more air over it than the gap between two paragraphs, and
   at equal specificity the flow rule would flatten the two to the
   same. */
.rich.rich h2, .rich.rich h3, .rich.rich h4 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--tr-display);
  line-height: 1.15;
  margin-block-start: var(--s-8);
  margin-block-end: 0;
}
.rich h2 { font-size: var(--fs-2xl); font-weight: 700; }
.rich h3 { font-size: var(--fs-xl); font-weight: 700; }
.rich h4 { font-size: var(--fs-lg); font-weight: 600; letter-spacing: .04em; }
.rich a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.rich a:hover { color: var(--fg); }
.rich strong, .rich b { font-weight: 600; }
.rich ul, .rich ol { margin: 0; padding-inline-start: var(--s-6); display: grid; gap: var(--s-2); }
.rich li { padding-inline-start: var(--s-2); }
.rich ul li::marker { color: var(--accent); }
.rich ol li::marker { color: var(--accent); font-family: var(--font-mono); font-size: .9em; }
.rich blockquote {
  margin: 0;
  padding: var(--s-4) var(--s-5);
  border-inline-start: 3px solid var(--accent-bright);
  background: var(--surface-2);
  color: var(--fg-2);
  font-size: var(--fs-base);
}
.rich blockquote p + p { margin-block-start: var(--s-3); }
.rich img {
  max-width: 100%; height: auto; display: block;
  border-radius: var(--r-2);
  border: 1px solid var(--line);
}
.rich figure { margin: 0; }
.rich figcaption {
  margin-block-start: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--fg-3);
}
.rich hr { border: 0; border-top: 1px solid var(--line); margin-block: var(--s-7); }
.rich code {
  font-family: var(--font-mono); font-size: .88em;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-1); padding: 1px 5px;
}
.rich pre {
  margin: 0; padding: var(--s-4);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-2);
  overflow-x: auto;
}
.rich pre code { background: none; border: 0; padding: 0; }
/* a wide table must scroll itself, never the page */
.rich table {
  width: 100%; border-collapse: collapse;
  font-size: var(--fs-sm); display: block; overflow-x: auto;
}
.rich th, .rich td { padding: var(--s-3) var(--s-4); border: 1px solid var(--line); text-align: start; }
.rich th { background: var(--surface-2); font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; }

/* ---------- post footer CTA ---------- */
.post__cta {
  margin-block-start: var(--s-8);
  padding-block-start: var(--s-6);
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5);
}
.post__ctat { margin: 0; flex: 1 1 260px; font-size: var(--fs-lg); color: var(--fg-2); }

/* ---------- read next ---------- */
.blog-rel__h { margin: 0 0 var(--s-6); }

/* ---------- 404 ---------- */
.blog-404__cta { margin-top: var(--s-6); }

/* ---------- footer ----------
   Nothing here any more. These pages used to render a slim footer of
   their own (.blog-foot) with its own copy of the Ad Holic credit;
   they now render the same footer the home page does, and every rule
   it needs lives in main.css, which every page loads. Two definitions
   of one footer became one. */

@media (max-width: 760px) {
  /* band padding now comes from .section / --section-y, same as the
     home page — nothing to override here but the reading size */
  .rich { font-size: var(--fs-base); }
  .post__t { max-width: none; }
}