/* Blog. Shared by the index and every post. Colours and spacing come from the same
   custom properties styles.css defines, so a change there flows through here. */

.post {
  padding: 70px clamp(22px, 8vw, 130px) 90px;
  background: var(--white);
}

.post-head {
  max-width: 760px;
  margin: 0 auto 46px;
}

.post-head h1 {
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  line-height: 1.06;
  margin-bottom: 18px;
}

.post-head .lede {
  font-size: 1.16rem;
  color: var(--muted);
  max-width: 660px;
}

/* The date and reading time line. Deliberately plain: no invented author bylines,
   because there is no named author to attribute these to. */
.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-bottom: 26px;
  color: var(--muted);
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Prose. Roughly 68 characters per line is the readable range, so the body is
   narrower than the head block it sits in. */
.post-body {
  max-width: 720px;
  margin: 0 auto;
}

.post-body h2 {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.12;
  margin: 52px 0 16px;
}

.post-body h3 {
  font-size: 1.2rem;
  margin: 34px 0 12px;
}

.post-body p,
.post-body li {
  color: var(--ink-soft);
  font-size: 1.06rem;
  line-height: 1.7;
}

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

.post-body ul,
.post-body ol {
  margin: 0 0 22px;
  padding-left: 22px;
}

.post-body li { margin-bottom: 10px; }

.post-body strong { color: var(--ink); }

.post-body a {
  color: #0a8d88;
  text-decoration: none;
  border-bottom: 1px solid var(--electric);
}

.post-body code {
  font: .9em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--paper);
  padding: 2px 6px;
}

.post-body blockquote {
  margin: 30px 0;
  padding: 4px 0 4px 24px;
  border-left: 3px solid var(--electric);
  color: var(--muted);
}

.post-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 26px;
  font-size: .95rem;
}

.post-body th,
.post-body td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.post-body th {
  font: 600 .78rem 'Space Grotesk', sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* A note that is part of the argument rather than an aside, used for the places where
   the honest answer is "it depends" or "this is an estimate". */
.post-note {
  margin: 0 0 26px;
  padding: 20px 24px;
  background: var(--paper);
  border-left: 3px solid var(--electric);
}

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

.post-cta {
  max-width: 720px;
  margin: 60px auto 0;
  padding: 34px 36px;
  background: var(--ink);
  color: #fff;
}

.post-cta h2 {
  font-size: 1.5rem;
  margin: 0 0 12px;
  color: #fff;
}

.post-cta p {
  color: #c9d6d7;
  margin: 0 0 22px;
  font-size: 1rem;
}

.post-cta .button-dark {
  background: var(--electric);
  color: var(--ink);
}

/* Blog index. */
.blog-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 820px;
}

.blog-list li {
  border-bottom: 1px solid var(--line);
  padding: 30px 0;
}

.blog-list a {
  text-decoration: none;
  color: var(--ink);
}

.blog-list h2 {
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  margin: 0 0 10px;
}

.blog-list a:hover h2 { color: #0a8d88; }

.blog-list p {
  color: var(--muted);
  margin: 0 0 10px;
  max-width: 660px;
}

.blog-list .post-meta { margin-bottom: 12px; }

/* Inline figure carrying an animated demo. The play/pause behaviour is the shared one
   in gif-player.js; only the styling is local. It deliberately does not reuse
   .demo-player or .ecom-demo-player, because those are defined in home.css and
   for-ecom.css, which a post does not load — a post borrowing them would have to pull
   in a page stylesheet for four rules.

   The figure sits outside .post-body: the prose column is capped at 720px for
   readability, but a screen recording of an interface needs more width than that
   before its labels are legible. */
.post-figure {
  max-width: 1000px;
  margin: 30px auto 46px;
}

.post-figure-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: var(--ink);
  border-radius: 12px 12px 0 0;
}

.post-figure-bar span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
}

.post-figure-bar em {
  margin-left: 10px;
  font: 500 .72rem 'Space Grotesk', sans-serif;
  font-style: normal;
  letter-spacing: .04em;
  color: #8ea4a8;
}

/* line-height:0 keeps the frame tight around the image, and the canvas that holds the
   frozen frame occupies exactly the same box, so pausing never shifts the layout. */
.post-figure-frame {
  position: relative;
  line-height: 0;
  background: var(--ink);
  border-radius: 0 0 12px 12px;
  overflow: hidden;
}

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

.post-figure-toggle {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 0;
  background: rgba(21, 37, 43, .8);
  color: #fff;
  font-size: .85rem;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.post-figure-toggle:hover {
  background: var(--electric);
  color: var(--ink);
}

.post-figure figcaption {
  margin-top: 12px;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.5;
}

/* The figure is a direct child of .post, which keeps the generous side padding these
   pages use. Below the prose column's width there is nothing to gain from the extra
   gutter, so it is reclaimed for the image. */
/* Placeholder slots, awaiting artwork that has not been produced yet. Deliberately
   visible rather than invisible: an empty slot that renders as nothing is a slot
   nobody remembers to fill, and the whole point of these is to be found.

   To fill one in, either replace the whole <figure class="post-media-slot"> with a
   finished <figure class="post-figure"><img …><figcaption>…</figcaption></figure>, or
   simply swap the inner <span>/<p> for an <img> — the slot frames a real image the
   same way, so filling one never needs a stylesheet change. Match the slot's stated
   ratio and there is no layout shift when the artwork lands.

   These are notes to ourselves, not prose: keep the labels out of the twelve target
   keywords. They are visible on a live page until replaced. */
.post-media-slot {
  max-width: 1000px;
  margin: 34px auto 46px;
}

.post-media-slot-body {
  display: grid;
  place-content: center;
  gap: 10px;
  aspect-ratio: 16 / 9;
  padding: 34px 30px;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: 14px;
  background: var(--paper);
}

.post-media-slot-body span {
  font: 700 .68rem 'Space Grotesk', sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #168d87;
}

.post-media-slot-body p {
  margin: 0;
  max-width: 540px;
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.5;
}

/* A 4:3 slot, for screenshots that are naturally squarer than a diagram. */
.post-media-slot-body[data-ratio="4:3"] { aspect-ratio: 4 / 3; }

/* A real image dropped into a slot needs no restyling. */
.post-media-slot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
}

.post-media-slot figcaption {
  margin-top: 10px;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.5;
}

/* On a phone a fixed ratio fights the text, so the box sizes to its own content and
   keeps a sensible floor. */
@media (max-width: 850px) {
  .post-figure { margin: 26px auto 36px; }
  .post-media-slot { margin: 26px auto 36px; }
  .post-media-slot-body { aspect-ratio: auto; min-height: 230px; }
}