/* Prilixor — blog listing and article styles.
   =========================================================================
   prilixor.css is compiled by Tailwind from the page set, so a utility that
   no page already uses has no rule. Everything the blog needs beyond that
   inventory lives here as plain CSS: the article measure, the long-form
   prose typography (the article body comes out of the editor as bare
   <h2>/<p>/<ul>, which no utility can reach), and the table of contents.

   Tokens are the ones from input.css — no new colours are introduced.
   Only loaded on the blog listing and on a single post.
   ========================================================================= */

/* ── article + sidebar ──────────────────────────────────────────────────── */

.bl-grid {
  display: grid;
  gap: 40px;
}

/* A grid item's automatic minimum size is its min-content width, and a <pre>
   of code has a very wide one — without this the track grows past the
   viewport and the whole page scrolls sideways on a phone. */
.bl-grid>* {
  min-width: 0;
}

@media (min-width:1024px) {
  .bl-grid {
    /* The measure caps the text at 690px, so a plain 1fr track leaves a dead
       band between the article and the sidebar. Cap the track instead and
       push the two apart. */
    grid-template-columns: minmax(0, 690px) 268px;
    justify-content: space-between;
    gap: 70px;
  }
}

/* The reading measure. ~68 characters at 16.5px, which is where long-form
   text stops making the eye track back across too much white. */
.bl-prose {
  max-width: min(900px, 100%);
  font-size: 16.5px;
  line-height: 30px;
  color: rgba(6, 42, 34, .78);
}

/* The article runs as one centred column, with no sidebar beside it. */
.bl-prose-center {
  margin-inline: auto;
}

.bl-prose>*+* {
  margin-top: 26px;
}

.bl-prose h2 {
  font-family: 'Sora', sans-serif;
  font-size: 30px;
  line-height: 38px;
  letter-spacing: -.035em;
  color: #0c2a23;
  margin-top: 54px;
  scroll-margin-top: 110px;
}

.bl-prose h3 {
  font-family: 'Sora', sans-serif;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -.025em;
  color: #05241d;
  margin-top: 38px;
  scroll-margin-top: 110px;
}

.bl-prose h2+p,
.bl-prose h3+p {
  margin-top: 14px;
}

.bl-prose strong {
  font-weight: 600;
  color: #0c2a23;
}

.bl-prose a {
  color: #0b7a5c;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(11, 122, 92, .4);
  transition: text-decoration-color .2s;
}

.bl-prose a:hover {
  text-decoration-color: #0b7a5c;
}

/* ── lists ──────────────────────────────────────────────────────────────────
   The editor emits bare <ul>/<ol>/<li>, so the markers are drawn here. Both
   kinds share one indent so a page mixing them stays on a single left edge,
   and both nest. */

.bl-prose ul,
.bl-prose ol {
  padding-left: 0;
  list-style: none;
}

.bl-prose li {
  position: relative;
  padding-left: 34px;
  margin-top: 12px;
}

.bl-prose li>ul,
.bl-prose li>ol {
  margin-top: 12px;
}

/* Bulleted: mint dot, optically centred on the first line. */
.bl-prose ul>li::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 11px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #35d6a4;
}

/* A nested bullet reads as a ring so the levels are distinguishable. */
.bl-prose ul ul>li::before {
  background: transparent;
  box-shadow: inset 0 0 0 2px #35d6a4;
}

/* Numbered: mint badge, matching the ✓ chips used elsewhere in the design. */
.bl-prose ol {
  counter-reset: bl;
}

.bl-prose ol>li {
  counter-increment: bl;
}

.bl-prose ol>li::before {
  content: counter(bl);
  position: absolute;
  left: 0;
  top: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(53, 214, 164, .18);
  font-family: 'Sora', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
  color: #0b7a5c;
}

/* Second level numbers as a, b, c — a second ring of digits is unreadable. */
.bl-prose ol ol>li::before {
  content: counter(bl, lower-alpha);
}

.bl-prose blockquote {
  margin-top: 40px;
  padding: 4px 0 4px 30px;
  border-left: 2px solid #35d6a4;
  font-family: 'Sora', sans-serif;
  font-size: 21px;
  line-height: 34px;
  letter-spacing: -.02em;
  color: #0c2a23;
}

.bl-prose blockquote cite {
  display: block;
  margin-top: 14px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13.3px;
  font-style: normal;
  color: rgba(6, 42, 34, .62);
}

.bl-prose figure {
  margin-top: 40px;
}

.bl-prose img {
  display: block;
  width: 100%;
  border-radius: 18px;
  border: 1px solid rgba(6, 42, 34, .10);
}

.bl-prose figcaption {
  margin-top: 12px;
  font-size: 12.6px;
  line-height: 20px;
  color: rgba(6, 42, 34, .62);
}

.bl-prose hr {
  margin-top: 44px;
  border: 0;
  border-top: 1px solid rgba(6, 42, 34, .12);
}

/* Code keeps the dark surface used everywhere else for emphasis. */
.bl-prose pre {
  margin-top: 30px;
  overflow-x: auto;
  border-radius: 16px;
  background: #061f19;
  padding: 22px 24px;
  font-size: 13.2px;
  line-height: 23px;
  color: #cdeade;
}

.bl-prose :not(pre)>code {
  border-radius: 5px;
  background: #e4f1ea;
  padding: 2px 6px;
  font-size: .88em;
  color: #0b7a5c;
}

/* ── callout / takeaways ────────────────────────────────────────────────── */

.bl-callout {
  margin-top: 36px;
  border-radius: 18px;
  border: 1px solid rgba(53, 214, 164, .30);
  background: linear-gradient(150deg, rgba(53, 214, 164, .09) 0%, rgba(53, 214, 164, .02) 100%);
  padding: 24px 26px;
}

.bl-callout p {
  margin-top: 0;
  font-size: 15px;
  line-height: 27px;
}

.bl-callout>strong {
  display: block;
  margin-bottom: 8px;
  font-size: 11.7px;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: #0b7a5c;
}

/* ── table of contents ──────────────────────────────────────────────────── */

.bl-toc a {
  display: block;
  border-left: 2px solid rgba(6, 42, 34, .12);
  padding: 8px 0 8px 16px;
  font-size: 13.4px;
  line-height: 21px;
  color: rgba(6, 42, 34, .66);
  transition: color .2s, border-color .2s;
}

.bl-toc a:hover {
  color: #0b7a5c;
  border-color: rgba(11, 122, 92, .5);
}

.bl-toc a[aria-current="true"] {
  color: #0b7a5c;
  border-color: #35d6a4;
}

/* ── search suggestions ─────────────────────────────────────────────────────
   The list under the blog search field. Everything in it is drawn from
   published posts at request time, so a post added today is offered today. */

/* Positioning context for the list, and the hook the script uses to tell a
   click inside the search apart from one that should dismiss it. */
.bl-search {
  position: relative;
}

.bl-suggest {
  position: absolute;
  z-index: 40;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  max-height: 380px;
  overflow-y: auto;
  border: 1px solid rgba(6, 42, 34, .12);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(6, 42, 34, .14);
  padding: 8px;
}

.bl-suggest-item {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  border-radius: 13px;
  padding: 11px 14px;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.bl-suggest-item:hover,
.bl-suggest-item[aria-selected="true"] {
  background: rgba(53, 214, 164, .12);
}

.bl-suggest-item[aria-selected="true"] {
  outline: 2px solid rgba(11, 122, 92, .35);
  outline-offset: -2px;
}

.bl-suggest-title {
  display: block;
  font-family: 'Sora', sans-serif;
  font-size: 14.5px;
  line-height: 1.4;
  letter-spacing: -.015em;
  color: #05241d;
}

/* The part of the title that matched what was typed. */
.bl-suggest-title mark {
  background: rgba(53, 214, 164, .3);
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
}

.bl-suggest-meta {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #0b7a5c;
}

.bl-suggest-meta span {
  color: rgba(6, 42, 34, .58);
}

.bl-suggest-all {
  display: block;
  border-top: 1px solid rgba(6, 42, 34, .1);
  margin-top: 6px;
  padding: 12px 14px 6px;
  font-size: 13px;
  color: #0b7a5c;
  text-decoration: none;
}

.bl-suggest-all:hover {
  color: #0c2a23;
}

.bl-suggest-empty {
  padding: 14px;
  font-size: 13.5px;
  color: rgba(6, 42, 34, .62);
}

/* ── reading progress ───────────────────────────────────────────────────── */

.bl-progress {
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: var(--grad-btn);
}

/* ── featured card artwork ──────────────────────────────────────────────── */

/* Fixed band while the card is stacked; full height once it splits into two
   columns, so the artwork tracks whichever side is taller. */
.bl-feature-media {
  height: 300px;
}

@media (min-width:1024px) {
  .bl-feature-media {
    height: 100%;
  }
}

/* ── card body ──────────────────────────────────────────────────────────── */

/* Cards stretch to the tallest in the row, but the body below the artwork
   does not grow with them, so `mt-auto` on the byline has no slack to work
   with and the bylines sit at different heights across a row. */
.bl-card-body {
  flex: 1 1 auto;
}

/* ── card title clamp ───────────────────────────────────────────────────── */

/* line-clamp is not in the compiled utilities, and card titles have to stay
   on a common baseline or the grid rows go ragged. */
.bl-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bl-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (prefers-reduced-motion:reduce) {
  .bl-progress {
    transition: none !important;
  }
}