/* Product release pages (templates/release.html). Builds on the blog post styles in site.css and adds the contents rail. */

.is-release {
  --release-ink: #041a18;
  --release-muted: rgba(4, 26, 24, 0.7);
  --release-line: rgba(4, 26, 24, 0.12);
  --release-accent: #fe25ff;
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- Layout: the article sits exactly where it does on blog posts ---------- */

/* Blog posts use a 130px Go back column and centre the article in the space to its right. The padding stands in for
   that column and the two flexible columns centre the article in the rest. The rail reaches back over the padding and
   fills the space left of the article, keeping 48px clear of it. */
.release-grid {
  display: grid;
  grid-template-columns: minmax(158px, 1fr) minmax(0, 678px) minmax(0, 1fr);
  align-items: start;
  padding-left: 130px;
}
.release-article { width: 100%; margin: 0; }

.release-rail {
  width: calc(100% + 130px - 48px);
  max-width: 355px;
  margin-left: -130px;
  position: sticky;
  top: 24px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 56px;
}

/* ---------- Contents ---------- */

.release-toc { width: 100%; max-width: 300px; }
.release-toc summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--release-line);
  list-style: none;
  cursor: pointer;
}
.release-toc summary::-webkit-details-marker { display: none; }
.release-toc .eyebrow { font-size: 12px; line-height: 1; }
.release-toc-chev { display: flex; width: 10px; height: 6px; transition: transform 160ms ease; }
.release-toc details[open] .release-toc-chev { transform: rotate(180deg); }

.release-toc-list { list-style: none; margin: 0; padding: 12px 0 0; display: flex; flex-direction: column; gap: 2px; }
.release-toc a { text-decoration: none; }
.release-toc-item {
  display: grid;
  grid-template-columns: 7px 18px minmax(0, 1fr);
  align-items: baseline;
  column-gap: 8px;
  padding: 7px 0;
  font-size: 15px;
  line-height: 21px;
  letter-spacing: -0.15px;
}
.release-toc-mark { width: 7px; height: 7px; align-self: center; }
.release-toc-num { font-variant-numeric: tabular-nums; color: var(--release-muted); }
.release-toc-title { color: var(--release-muted); transition: color 0.3s ease; }
.release-toc a:hover .release-toc-title { color: var(--release-ink); }

.release-toc-sub { list-style: none; margin: 0 0 8px; padding: 0 0 0 33px; display: none; flex-direction: column; }
.release-toc-subitem { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 14px; line-height: 20px; letter-spacing: -0.14px; }
.release-toc-bar { width: 1px; height: 14px; background: var(--release-line); }

.release-toc .is-active > .release-toc-item .release-toc-mark { background: var(--release-accent); }
.release-toc .is-active > .release-toc-item .release-toc-title { color: var(--release-ink); font-weight: 500; }
.release-toc .is-active > .release-toc-sub { display: flex; }
.release-toc-subitem.is-active .release-toc-title { color: var(--release-ink); }
.release-toc-subitem.is-active .release-toc-bar { background: var(--release-accent); }

/* ---------- Header ---------- */

.release-subtitle { margin: 4px 0 0; font-size: 22px; line-height: 30px; letter-spacing: -0.22px; color: var(--release-muted); }

/* ---------- Body ---------- */

.release-section { scroll-margin-top: 24px; }
.release-section + .release-section { margin-top: 56px; padding-top: 56px; border-top: 1px solid var(--release-line); }
.release-section-head { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 24px; }
.release-section-num { font-size: 12px; line-height: 1; color: var(--release-muted); }
.release-body h2 { margin: 0; font-size: 28px; line-height: 36px; font-weight: 500; letter-spacing: -0.28px; }
.release-section-subtitle { display: block; color: var(--release-muted); }
.release-body h3 { margin: 40px 0 12px; font-size: 20px; line-height: 28px; font-weight: 500; letter-spacing: -0.2px; scroll-margin-top: 24px; }
.release-section-head + h3 { margin-top: 32px; }

.release-body a { text-underline-offset: 2px; }
.release-publication { display: inline-flex; align-items: center; gap: 6px; margin-top: -8px; font-size: 16px; line-height: 24px; letter-spacing: -0.16px; }
.release-body ul { padding-left: 24px; margin: 0 0 16px; }
.release-body li { margin: 0 0 10px; padding-left: 4px; }
.release-body sub, .release-body sup { font-size: 0.7em; line-height: 0; }

.release-body .release-figure { max-width: none; margin: 32px 0; display: flex; flex-direction: column; gap: 12px; }
.release-body .release-figure img,
.release-figure video { display: block; width: 100%; height: auto; margin: 0; }
/* The clips are MP4s with a white background, which cannot be transparent; multiply blends the white into the page. */
.release-figure video { mix-blend-mode: multiply; }
/* live figures */
.release-figure .iq-embed { margin: 0; }
.release-body .release-figure:has(.iq-embed) { margin: 48px 0 40px; gap: 16px; }
.release-figure figcaption, .release-figcaption { margin: 0; text-align: left; font-size: 14px; line-height: 21px; letter-spacing: -0.14px; color: var(--release-muted); }
.release-figure figcaption p, .release-figcaption p { font-size: inherit; line-height: inherit; letter-spacing: inherit; margin: 0; }
.release-figure figcaption strong, .release-figcaption strong { font-weight: 500; color: var(--release-ink); }

/* ---------- Narrower screens ---------- */

/* Rail stacks above the article, as the Go back button does on blog posts. */
@media screen and (max-width: 991px) {
  .release-grid { grid-template-columns: minmax(0, 1fr); row-gap: 56px; padding-left: 0; }
  .release-rail { width: auto; max-width: none; margin-left: 0; position: static; max-height: none; overflow: visible; gap: 40px; }
  .release-toc { max-width: none; }
}

@media screen and (max-width: 767px) {
  .release-body h2 { font-size: 24px; line-height: 32px; }
  .release-subtitle { font-size: 20px; line-height: 28px; }
}