/* ============================================================================
   page-221.css — Blog category page (Itemid 221) pixel-perfect overlay
   Scope: body.item-221 — loaded via filemtime cache-busting URL in index.php
   All fixes scoped here; shared template.css / darkmode.css are READ-ONLY.
   Axes: light/dark × desktop (≥761px) / responsive (≤760px / ≤560px)
   ============================================================================ */

/* ── Page-level custom properties ────────────────────────────────────────── */
body.item-221 {
  --blog-lime-tint:      rgba(163, 230, 53, 0.059);
  --blog-lime-pill-bg:   rgba(163, 230, 53, 0.082);
  --blog-lime-pill-bd:   rgba(163, 230, 53, 0.251);
  --blog-mast-end:       var(--elevated);
}

html.t4-dark body.item-221 {
  --blog-mast-end:       var(--chrome-elevated);
}


/* ============================================================================
   MASTHEAD — hx-blogmast
   ============================================================================ */

/* Gradient background (preserves grid pattern from hx-grid-bg) */
body.item-221 .hx-blogmast {
  padding-block: 66px 58px !important;
  background-color: var(--blog-mast-end) !important;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    radial-gradient(
      ellipse 140% 130% at 50% 0%,
      var(--blog-lime-tint) 0%,
      var(--blog-mast-end) 55%
    ) !important;
  background-size: 30px 30px, 30px 30px, 100% 100% !important;
}

body.item-221 .hx-blogmast .hx-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

/* Eyebrow → lime pill with dot */
body.item-221 .hx-blogmast .hx-eyebrow {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  width: fit-content;
  padding: 5px 12px !important;
  border-radius: 100px !important;
  background: var(--blog-lime-pill-bg) !important;
  border: 1px solid var(--blog-lime-pill-bd) !important;
  font-family: "JetBrains Mono", monospace !important;
  font-size: 11.5px !important;
  font-weight: 400 !important;
  letter-spacing: 1.5px !important;
  color: var(--primary) !important;
  text-transform: uppercase !important;
  margin-bottom: 0 !important;        /* gap on parent handles spacing */
}

body.item-221 .hx-blogmast .hx-eyebrow::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
  flex-shrink: 0;
}

body.item-221 .hx-blogmast__title {
  font-size: 46px !important;
  font-weight: 700 !important;
  letter-spacing: -1.3px !important;
  line-height: 1.08 !important;
  margin: 0 !important;
  max-width: 820px;
}

body.item-221 .hx-blogmast__desc {
  margin-top: 0 !important;          /* gap on parent container handles spacing */
  font-size: 17px !important;
  line-height: 1.55 !important;
  max-width: 560px;
}

body.item-221 .hx-blogmast__desc p {
  margin: 0;
}


/* ============================================================================
   BLOG SECTION — hx-blog-section
   ============================================================================ */

body.item-221 .hx-blog-section {
  padding-block: 72px !important;    /* design: 72px (shared .hx-section = 80px) */
}

/* Dark: elevated chrome surface for the ledger area */
html.t4-dark body.item-221 .hx-blog-section {
  background: var(--chrome-elevated) !important;
}

/* Dark row hover: slight white overlay (elevated in dark is darker than chrome-elevated) */
html.t4-dark body.item-221 .hx-blogrow:hover {
  background: rgba(255, 255, 255, 0.04) !important;
}


/* ============================================================================
   BLOG GRID — hx-blog
   ============================================================================ */

body.item-221 .hx-blog {
  gap: 40px !important;              /* .pen gap=40 (was 48) */
}


/* ============================================================================
   TOPICS RAIL — hx-blog-rail
   ============================================================================ */

body.item-221 .hx-rail-title {
  font-size: 12px !important;        /* design: 12px (was 11px) */
  font-weight: 400 !important;       /* design: 400  (was 600) */
  letter-spacing: 1px !important;    /* design: 1px  (was 1.5px) */
}

body.item-221 .hx-railitem {
  font-size: 14.5px !important;
  font-weight: 400 !important;
  color: var(--muted) !important;    /* design: inactive = --muted (was --text) */
}

body.item-221 .hx-railitem:hover {
  color: var(--heading) !important;
}

body.item-221 .hx-railitem.is-active {
  color: var(--primary) !important;
  background: var(--blog-lime-pill-bg) !important;
  border-color: transparent !important;
}

/* Hide article counts (design shows no counts; CSS covers the "All posts" count
   which is always rendered regardless of show_cat_num_articles param) */
body.item-221 .hx-railcount {
  display: none !important;
}


/* ============================================================================
   BLOG ROWS — counter + typography + colour fixes
   ============================================================================ */

body.item-221 .hx-bloglist {
  counter-reset: blog-row;
}

body.item-221 .hx-blogrow {
  padding: 26px 0 !important;        /* design: 0 horizontal (was 10px) */
  counter-increment: blog-row;
}

/* Date column: hide the real date; replace with decimal-leading-zero counter */
body.item-221 .hx-blogdate {
  justify-content: flex-start;
}

body.item-221 .hx-blogdate__d,
body.item-221 .hx-blogdate__m {
  display: none !important;
}

body.item-221 .hx-blogdate::before {
  content: counter(blog-row, decimal-leading-zero);
  font-family: "Space Grotesk", sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--muted);
}

body.item-221 .hx-blogtitle {
  font-size: 21px !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
}

body.item-221 .hx-blogexcerpt {
  font-size: 14.5px !important;
}

body.item-221 .hx-blogcat {
  display: block;
  margin: 0 0 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--primary);
}

body.item-221 .hx-blogauthor,
body.item-221 .hx-blogdatetxt {
  color: var(--muted) !important;
}

body.item-221 .hx-blogread {
  color: var(--primary) !important;
}


/* ============================================================================
   LEDGER HEADER — "All articles"  +  "// NN posts · newest first"  + rule
   (.pen yjeFF header row)
   ============================================================================ */

body.item-221 .hx-bloglist__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

body.item-221 .hx-bloglist__title {
  font-family: "Space Grotesk", sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.2px;
  color: var(--heading);
}

body.item-221 .hx-bloglist__count {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
  white-space: nowrap;
}

/* First row's top border is redundant under the header rule → drop it */
body.item-221 .hx-bloglist__head + .hx-blogrow {
  border-top: none !important;
}


/* ============================================================================
   TOPICS STRIP — full-width browse bar under the masthead (.pen LwWN8)
   ============================================================================ */

body.item-221 .hx-blogtopics {
  background: var(--elevated);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

html.t4-dark body.item-221 .hx-blogtopics {
  background: var(--chrome-elevated);   /* #161B18 (design $elevated) */
}

body.item-221 .hx-blogtopics .hx-container {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-block: 13px;
  overflow-x: auto;
  scrollbar-width: none;
}

body.item-221 .hx-blogtopics .hx-container::-webkit-scrollbar { display: none; }

body.item-221 .hx-blogtopics__lbl {
  flex: none;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--primary);
}

body.item-221 .hx-blogtopics__list {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
}

body.item-221 .hx-blogtopics__list li + li::before {
  content: "\2022";
  margin-right: 20px;
  color: var(--primary);
}

body.item-221 .hx-blogtopics__list li {
  display: inline-flex;
  align-items: center;
}

body.item-221 .hx-blogtopics__chip {
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  font-weight: 400;
  color: var(--text);
  text-decoration: none;
  transition: color 0.15s;
}

body.item-221 .hx-blogtopics__chip:hover {
  color: var(--heading);
}

body.item-221 .hx-blogtopics__chip.is-active {
  color: var(--primary);
}


/* ============================================================================
   FEATURED READ — "(01) Featured read"  +  big horizontal card (.pen MJQdO)
   ============================================================================ */

body.item-221 .hx-feat-section {
  padding-block: 72px !important;
  /* .pen Featured Wrapper sits on the PAGE bg (#0A0D0C dark / #FBFCFA light);
     only the ledger below is the elevated (#161B18) surface. */
}

/* Head row: "(01) Featured read"  ·  "EDITOR'S PICK" + a top rule */
body.item-221 .hx-feat-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-top: 28px;
  margin-bottom: 24px;
  border-top: 1px solid var(--border);
}

body.item-221 .hx-feat-head__l {
  font-family: "Space Grotesk", sans-serif;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--heading);
}

body.item-221 .hx-feat-num {
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--primary);
}

body.item-221 .hx-feat-head__r {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
}

/* MICRO-INTERACTION: CARD gesture (3a) — neutral border → primary border +
   2px lift + soft shadow on hover/focus; whole card is the <a>. */
body.item-221 .hx-featcard {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  transition: border-color .15s ease, transform .2s ease, box-shadow .2s ease;
}

body.item-221 .hx-featcard:hover,
body.item-221 .hx-featcard:focus-visible {
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px -12px color-mix(in srgb, var(--primary) 40%, transparent);
  outline: none;
}

body.item-221 .hx-featcard__media {
  flex: none;
  width: 480px;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px;
  background: var(--elevated);
  background-size: cover;
  background-position: center;
}

html.t4-dark body.item-221 .hx-featcard__media {
  background-color: #161B18;
}

body.item-221 .hx-featcard__sigil { color: var(--primary); }
body.item-221 .hx-featcard__sigil svg { width: 30px; height: 30px; display: block; }

body.item-221 .hx-featcard__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: 36px;
}

body.item-221 .hx-featcard__cat {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--primary);
}

body.item-221 .hx-featcard__title {
  font-family: "Space Grotesk", sans-serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.21;
  letter-spacing: -0.5px;
  color: var(--heading);
  transition: color .15s ease;
}

/* LINK gesture (3c) on the title, driven by the card's hover/focus */
body.item-221 .hx-featcard:hover .hx-featcard__title,
body.item-221 .hx-featcard:focus-visible .hx-featcard__title { color: var(--primary); }

body.item-221 .hx-featcard__excerpt {
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--text);
  max-width: 560px;
}

body.item-221 .hx-featcard__meta {
  margin-top: 4px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--muted);
}


/* ============================================================================
   RESPONSIVE — ≤991.98px (tablet, .pen dBklT): stack the featured card so the
   480px media panel can't crush the body, and drop the Topics rail (the
   TopicsStrip already serves topic nav). Ledger rows stay 3-col until ≤760.
   ============================================================================ */

@media (max-width: 991.98px) {
  body.item-221 .hx-featcard {
    flex-direction: column !important;
  }
  body.item-221 .hx-featcard__media {
    width: 100% !important;
    min-height: 170px !important;
  }
  body.item-221 .hx-blog-rail {
    display: none !important;
  }
  /* rail gone → ledger spans full width (avoid an empty 210px grid column) */
  body.item-221 .hx-blog {
    grid-template-columns: 1fr !important;
  }
}


/* ============================================================================
   RESPONSIVE — ≤860px breakpoint (title scale-down only)
   ============================================================================ */

@media (max-width: 860px) {
  body.item-221 .hx-blogmast__title {
    font-size: 38px !important;
    letter-spacing: -1.1px !important;
  }
}


/* ============================================================================
   RESPONSIVE — ≤760px (mobile layout)
   ============================================================================ */

@media (max-width: 760px) {
  body.item-221 .hx-blogmast {
    padding-block: 40px 36px !important;
  }

  /* Hide the whole Topics RAIL at mobile — the full-width TopicsStrip under the
     masthead already serves topic navigation (.pen mobile a3OE5 has no rail). */
  body.item-221 .hx-blog-rail {
    display: none !important;
  }

  body.item-221 .hx-blogmast .hx-container {
    gap: 14px;
  }

  body.item-221 .hx-blogmast__title {
    font-size: 32px !important;
    letter-spacing: -1px !important;
  }

  body.item-221 .hx-blogmast__desc {
    font-size: 15px !important;
  }

  body.item-221 .hx-blog-section {
    padding-block: 48px !important;
  }

  body.item-221 .hx-bloglist > .hx-blogrow:first-child {
    border-top: none !important;
  }

  body.item-221 .hx-blogrow {
    border-top: none !important;
    border-bottom: 1px solid var(--border) !important;
    /* number left, main top-right, meta below main (.pen mobile a3OE5) */
    grid-template-columns: 32px 1fr !important;
    grid-template-areas: "num main" ". meta" !important;
    column-gap: 16px !important;
    row-gap: 8px !important;
    align-items: start !important;
  }

  body.item-221 .hx-blogdate { grid-area: num; }
  body.item-221 .hx-blogmain { grid-area: main; }
  body.item-221 .hx-blogmeta { grid-area: meta; }

  body.item-221 .hx-blogdate::before {
    color: var(--primary) !important;
  }

  /* Meta inline (author · date · readtime) below the title (.pen mobile) —
     !important display beats the shared ≤560 `.hx-blogrow>div:last-child{display:none}` */
  body.item-221 .hx-blogrow > .hx-blogmeta {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: wrap;
    gap: 0 !important;
    text-align: left !important;
    font-size: 11.5px !important;
  }

  body.item-221 .hx-blogauthor::after,
  body.item-221 .hx-blogdatetxt::after {
    content: " \00b7 ";
    white-space: pre;
    color: var(--muted);
  }

  body.item-221 .hx-bloglist__head {
    flex-wrap: wrap;
    gap: 4px;
  }

  body.item-221 .hx-featcard {
    flex-direction: column !important;
  }

  body.item-221 .hx-featcard__media {
    width: 100% !important;
    min-height: 150px !important;
  }

  body.item-221 .hx-featcard__body {
    padding: 24px 20px !important;
    gap: 10px !important;
  }

  body.item-221 .hx-featcard__title { font-size: 22px !important; }

  /* Featured head: drop the big "Featured read" head label on mobile (.pen hides it) */
  body.item-221 .hx-feat-head { display: none !important; }

  body.item-221 .hx-feat-section { padding-block: 36px 0 !important; }
}


/* ============================================================================
   RESPONSIVE — ≤620px (standard hx-section padding override; already in shared
   CSS but restated here so blog-section stays at 40px not 56px at small screens)
   ============================================================================ */

@media (max-width: 620px) {
  body.item-221 .hx-blog-section {
    padding-block: 40px !important;
  }
  /* Masthead: keep ≤760px values (40/36 + 32px title) — no further reduction */
}

/* P58 — kill the T4 .t4-main-body 48px top padding so the masthead sits flush to
   the header (gap=0), matching every other page's overlay treatment. */
body.item-221 .t4-main-body { padding-top: 0 !important; }


/* ============================================================================
   MICRO-INTERACTIONS — reduced-motion guard (build-docs/micro-interactions.md §4)
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  body.item-221 .hx-featcard,
  body.item-221 .hx-featcard * {
    transition-duration: .01ms !important;
  }
  body.item-221 .hx-featcard:hover,
  body.item-221 .hx-featcard:focus-visible {
    transform: none;
  }
}