/* ===========================================================================
   Blog post (/blog/<slug>).

   Figma: "Mezzi Design System" node 65850-7337.

   The page is one column down to the hero image, then a two-column reading
   layout: a sticky rail carrying the table of contents and the consultation
   card, and the article body itself.

   The body markup is IMPORTED, not hand-authored — tools/import-blog.mjs
   converts a Webflow rich-text field into it. So everything under
   `.post-body` is styled by element rather than by class: the importer is
   not free to invent a class for every paragraph, and a post published
   tomorrow must pick up these rules without anyone touching this file.
   =========================================================================== */

/* ==========================================================================
   Masthead — meta line, headline, standfirst, hero image
   ========================================================================== */

.post-head {
  padding: 160px var(--mz-gutter) 0;
}

.post-head-inner {
  max-width: 1320px;
  margin: 0 auto;
}

.post-meta {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: -0.16px;
  color: var(--mz-text-quiet);
  margin-bottom: 32px;
}

/* The separator is decorative punctuation between two independent facts.
   Marked aria-hidden in the markup so it is not read as content. */
.post-meta-sep {
  padding: 0 6px;
}

.post-headline {
  font-family: var(--mz-font-serif);
  font-weight: 400;
  font-size: 56px;
  line-height: 0.95;
  letter-spacing: -1.12px;
  color: var(--mz-white);
  max-width: 800px;
}

.post-standfirst {
  margin-top: 24px;
  max-width: 640px;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.18px;
  color: var(--mz-text-secondary);
}

.post-hero {
  margin-top: 64px;
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.post-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ==========================================================================
   Two-column reading layout
   ========================================================================== */

.post-layout {
  padding: 80px var(--mz-gutter) 120px;
}

.post-layout-inner {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 0 150px;
  align-items: start;
}

/* --- Sticky rail ---------------------------------------------------------- */

/* `top` clears the fixed header plus the promo banner above it. Both are in
   the normal flow of chrome.css, so this is the one place their combined
   height has to be restated as a number. */
.post-rail {
  position: sticky;
  top: 140px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.post-toc-title,
.post-consult-title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.16px;
  color: var(--mz-white);
}

.post-toc-list {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.post-toc-list a {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: -0.14px;
  color: var(--mz-text-secondary);
  text-decoration: none;
  transition: color var(--mz-transition);
}

.post-toc-list a:hover {
  color: var(--mz-white);
}

/* Set by js/pages/blog-post.js on the entry whose section is on screen. The
   colour is the only cue, so it is also mirrored to aria-current in the JS. */
.post-toc-list a.is-active {
  color: var(--mz-lilac);
}

/* --- Consultation card ---------------------------------------------------- */

.post-consult-body {
  margin-top: 12px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.12px;
  color: var(--mz-text-quiet);
}

.post-consult .mz-btn {
  margin-top: 20px;
  width: 100%;
  justify-content: center;
}

/* ==========================================================================
   Article body — imported markup, styled by element
   ========================================================================== */

.post-body {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.2px;
  color: var(--mz-text-secondary);
}

.post-body > *:first-child {
  margin-top: 0;
}

.post-body p {
  margin: 0 0 24px;
}

.post-body h2 {
  font-size: 32px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.32px;
  color: var(--mz-white);
  margin: 56px 0 24px;
}

.post-body h3 {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.24px;
  color: var(--mz-white);
  margin: 40px 0 16px;
}

.post-body h4 {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.2px;
  color: var(--mz-white);
  margin: 32px 0 12px;
}

.post-body strong {
  font-weight: 600;
  color: var(--mz-white);
}

.post-body a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--mz-transition);
}

.post-body a:hover {
  color: var(--mz-white);
}

/* Lists. `list-style: none` plus a drawn marker, because the design's bullet
   is a mid-height dot set in the margin rather than the browser's disc; the
   markup keeps role="list" so Safari does not drop list semantics when the
   marker is removed. */
.post-body ul,
.post-body ol {
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.post-body li {
  position: relative;
  padding-left: 28px;
}

.post-body ul > li::before {
  content: "·";
  position: absolute;
  left: 8px;
  top: -0.15em;
  font-size: 1.4em;
  line-height: inherit;
  color: var(--mz-text-quiet);
}

.post-body ol {
  counter-reset: post-ol;
}

.post-body ol > li {
  counter-increment: post-ol;
}

.post-body ol > li::before {
  content: counter(post-ol) ".";
  position: absolute;
  left: 0;
  color: var(--mz-text-quiet);
}

.post-body blockquote {
  margin: 40px 0;
  padding: 4px 0 4px 24px;
  border-left: 1px solid var(--mz-rule);
  color: var(--mz-text-secondary);
}

.post-body blockquote p:last-child {
  margin-bottom: 0;
}

/* The attribution under a pull quote. Not italic — <cite>'s default — because
   the quotation above it is not italic either, and the pair reads as two
   voices rather than one aside. */
.post-body blockquote cite {
  display: block;
  margin-top: 16px;
  font-size: 16px;
  font-style: normal;
  line-height: 1.4;
  color: var(--mz-text-quiet);
}

.post-body hr {
  margin: 48px 0;
  border: 0;
  border-top: 1px solid var(--mz-rule-soft);
}

/* --- Figures and embeds --------------------------------------------------- */

.post-figure {
  margin: 40px 0;
}

.post-figure img {
  width: 100%;
  height: auto;
  display: block;
}

.post-figure figcaption {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--mz-text-quiet);
}

/* Video embeds arrive as a bare <iframe> with no dimensions. The wrapper owns
   the aspect ratio so the page does not reflow when the frame loads. */
.post-embed {
  margin: 40px 0;
}

.post-embed-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--mz-wash);
}

.post-embed-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.post-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 32px 0;
  font-size: 16px;
}

.post-body th,
.post-body td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--mz-rule-soft);
}

.post-body th {
  font-weight: 600;
  color: var(--mz-white);
}

/* A table is the one element that cannot be made to fit a narrow column, so
   it scrolls inside its own box rather than widening the page. */
.post-table-scroll {
  overflow-x: auto;
}

/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 1023px) {
  .post-head {
    padding: 120px var(--mz-gutter-mobile) 0;
  }

  .post-headline {
    font-size: 36px;
    letter-spacing: -0.72px;
  }

  .post-standfirst {
    font-size: 16px;
    margin-top: 20px;
  }

  .post-hero {
    margin-top: 40px;
    aspect-ratio: 3 / 2;
  }

  .post-layout {
    padding: 40px var(--mz-gutter-mobile) 80px;
  }

  .post-layout-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  /* The rail stops being a column and its two halves go to opposite ends of
     the page: the contents list belongs above the article it indexes, the
     consultation card below it, where it reads as the closing call to action.
     `display: contents` promotes both to grid items so `order` can separate
     them — sticking the pair to the top would pin a block of links over the
     text the reader is scrolling. */
  .post-rail {
    display: contents;
  }

  .post-toc { order: 1; }
  .post-body { order: 2; }
  .post-consult { order: 3; }

  .post-body {
    font-size: 16px;
  }

  .post-body h2 {
    font-size: 26px;
    margin: 40px 0 16px;
  }

  .post-body h3 {
    font-size: 20px;
    margin: 32px 0 12px;
  }
}