/* ============================================================
   article.css - long-form content pages only.

   Loaded in addition to style.css by project pages and by the
   Vectra documentation set: any page whose main column is an
   <article class="article">.

   1  Sidebar navigation chrome (breadcrumb, brand, nav, repository)
   2  Article typography (headings, code, tables, quotes, figures)
   3  Article pagination
   4  Media figures (hero, diagram, image pair)
   5  Case grid and case cards
   6  Tags, callouts, spec tables
   7  Responsive - all breakpoints for the rules above
   ============================================================ */

/* Vectra */

.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  width: 100%;
  max-width: var(--shell-max-width);
  margin-right: auto;
  margin-bottom: var(--space-xl);
  margin-left: auto;
  color: var(--color-text-soft);
  font-size: var(--font-size-meta);
}

.breadcrumb a {
  color: var(--color-text-muted);
}

.sidebar-brand {
  display: block;
  margin-bottom: 14px;
  color: var(--color-text);
  font-size: var(--font-size-subtitle);
  font-weight: 700;
  line-height: 1.2;
}

.sidebar-brand span {
  display: block;
  margin-top: 2px;
  color: var(--color-text-soft);
  font-size: var(--font-size-small);
  font-weight: 500;
}

.page-sidebar ul,
.page-toc ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-sidebar li,
.page-toc li {
  margin: 0;
}

.page-sidebar li + li {
  margin-top: 2px;
}

.page-sidebar nav a {
  display: block;
  padding: 5px 8px;
  border-left: 2px solid transparent;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-meta);
  line-height: 1.32;
}

.page-sidebar nav a:hover {
  color: var(--color-link-hover);
  background: var(--color-surface-subtle);
}

.page-sidebar nav a[aria-current="page"] {
  border-left-color: var(--color-link);
  color: var(--color-text);
  background: var(--color-surface);
  font-weight: 600;
}

.sidebar-repository {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border-soft);
  font-size: var(--font-size-small);
}

.sidebar-nav-title {
  margin-bottom: var(--space-sm);
  color: var(--color-text);
  font-size: var(--font-size-small);
  font-weight: 700;
}

.page-toc li + li {
  margin-top: var(--space-sm);
}

.page-toc a {
  display: block;
  color: var(--color-text-soft);
  font-size: var(--font-size-small);
  line-height: 1.28;
}

.article > h1:first-child {
  margin-top: 0;
  padding-top: 0;
}

.article h1,
.article h2,
.article h3,
.article h4 {
  scroll-margin-top: var(--anchor-scroll-margin);
}

.article h2 {
  margin-top: 30px;
}

.article h3 {
  margin-top: 22px;
}

.article h4 {
  margin: 18px 0 var(--space-sm);
  font-size: var(--font-size-base);
  line-height: var(--line-height-heading);
}

.article pre {
  max-width: 100%;
  margin: var(--space-md) 0 18px;
  padding: 13px 15px;
  overflow-x: auto;
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-md);
  background: var(--color-code-bg);
  color: var(--color-text);
  font-size: var(--font-size-meta);
  line-height: 1.5;
  tab-size: 2;
}

.article code {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.9em;
}

.article :not(pre) > code {
  padding: 0.12em 0.32em;
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
}

.article blockquote {
  margin: 16px 0;
  padding: 2px 0 2px 15px;
  border-left: 3px solid var(--color-border);
  color: var(--color-text-muted);
}

.article blockquote > :last-child {
  margin-bottom: 0;
}

.article hr {
  margin: 30px 0;
  border: 0;
  border-top: 1px solid var(--color-border-soft);
}

.article img {
  max-width: 100%;
  height: auto;
}

.article .vectra-preview-page {
  width: 45%;
  border-radius: var(--radius-lg);
}

.article table {
  display: block;
  width: 100%;
  margin: 16px 0 20px;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: var(--font-size-meta);
}

.article th,
.article td {
  padding: 8px 10px;
  border: 1px solid var(--color-border-soft);
  text-align: left;
  vertical-align: top;
}

.article th {
  background: var(--color-surface);
  font-weight: 600;
}

.article-pagination {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  margin-top: 38px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border-soft);
}

.article-pagination a {
  padding: 11px 12px;
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-subtle);
  line-height: 1.3;
}

.article-pagination a:hover {
  border-color: var(--color-card-hover-border);
  background: var(--color-card-hover-bg);
}

.article-pagination a span {
  display: block;
  margin-bottom: 3px;
  color: var(--color-text-soft);
  font-size: var(--font-size-small);
}

/* With both links the grid fills itself; with only one, keep each on its
   own side rather than letting a lone Next fall into the left column. */
.article-pagination-prev {
  grid-column: 1;
}

.article-pagination-next {
  grid-column: 2;
  text-align: right;
}

/* Media figures ---------------------------------------------------- */

/* Every media figure on an article page is numbered in reading order. */
.article {
  counter-reset: figure;
}

/* Conference-paper rhythm: a figure sits closer to its own caption than to
   the text around it, and the caption is set to the width of a figure rather
   than to the width of the column, so the two read as one block. */
.media-figure {
  counter-increment: figure;
  margin: var(--space-lg) 0 var(--space-xl);
}

/* Figures are rounded the way an editorial image is: a soft corner, no
   frame and no shadow. A clip inside a card keeps square corners, because
   the card around it already carries the radius. */
.media-figure video,
.media-figure img,
.case-card video {
  display: block;
  width: 100%;
  height: auto;
}

.media-figure video,
.media-figure img {
  border-radius: var(--radius-lg);
}

.media-figure figcaption {
  max-width: 560px;
  margin-top: var(--space-xs);
  margin-right: auto;
  margin-left: auto;
  color: var(--color-text-soft);
  font-size: var(--font-size-meta);
  line-height: var(--line-height-body);
}

.media-figure figcaption::before {
  content: "Figure " counter(figure) ". ";
  font-weight: 600;
  color: var(--color-text);
}

.media-figure figcaption strong {
  color: var(--color-text-muted);
  font-weight: 600;
}

/* A hero figure may bleed slightly wider than the reading column. */
.media-figure--hero {
  margin-top: var(--space-md);
}

/* Diagrams carry their own ground and their own margin, cropped to the
   drawing. Nothing is added here: a figure is whatever size it needs to
   be, and no two of them have to match. */

/* Paired stills ---------------------------------------------------- */

.media-figure--pair .media-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  align-items: center;
  justify-items: center;
}

.media-figure--pair .media-pair > img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

/* Case grid: every clip visible at once, playing muted in a loop ---- */

.case-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xl);
  margin: var(--space-xl) 0;
}

.case-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-subtle);
  overflow: hidden;
}

.case-card video {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  border-bottom: 1px solid var(--color-card-border);
  border-radius: 0;
  background: #22262f;
}

.case-card-body {
  padding: var(--space-md) var(--space-lg) var(--space-lg);
}

.case-card h3 {
  margin: 0 0 var(--space-xs);
  font-size: var(--font-size-h3);
  line-height: 1.24;
}

.case-card p {
  margin: var(--space-sm) 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-meta);
  line-height: var(--line-height-body);
}

/* Badges ----------------------------------------------------------- */

/* Callouts --------------------------------------------------------- */

.callout {
  margin: var(--space-xl) 0;
  padding: var(--space-lg) var(--space-xl);
  border: 1px solid var(--color-card-border);
  border-left: 3px solid var(--color-border);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--color-surface-subtle);
}

.callout > :first-child {
  margin-top: 0;
}

.callout > :last-child {
  margin-bottom: 0;
}

.callout-title {
  margin: 0 0 var(--space-sm);
  color: var(--color-block-title);
  font-size: var(--font-size-meta);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.callout--flag {
  border-left-color: var(--color-highlight-border);
}

.callout--flag .callout-title {
  color: var(--color-highlight-text);
}

/* Spec table ------------------------------------------------------- */

.spec-table td:first-child {
  width: 38%;
  color: var(--color-text-soft);
}

.spec-table td:last-child {
  font-variant-numeric: tabular-nums;
}


/* Interactive demo block (multi-arm rearrangement) ------------------ */

.demo {
  margin: var(--space-xl) 0;
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-subtle);
}

.demo-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-lg);
  margin-bottom: var(--space-md);
  font-size: var(--font-size-meta);
}

.demo-controls label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.demo-controls input[type="range"] {
  width: 110px;
}

.demo-controls select,
.demo-controls button {
  font: inherit;
  color: var(--color-text);
  padding: 3px 10px;
  border: 1px solid var(--color-card-border);
  border-radius: 6px;
  background: var(--color-surface);
}

.demo-controls button:hover {
  border-color: var(--color-link);
  color: var(--color-link);
}

.demo-stage {
  display: grid;
  grid-template-columns: minmax(0, 560fr) minmax(0, 300fr);
  gap: var(--space-md);
}

.demo canvas {
  display: block;
  width: 100%;
  height: auto;
  background: var(--color-surface);
}

.demo-gantt {
  margin-top: var(--space-md);
}

.demo-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-xl);
  margin: var(--space-md) 0 0;
}

.demo-metrics div {
  margin: 0;
}

.demo-metrics dt {
  font-size: var(--font-size-meta);
  color: var(--color-text-soft);
}

.demo-metrics dd {
  margin: 0;
  font-weight: 600;
}

.demo-note {
  margin: var(--space-sm) 0 0;
  font-size: var(--font-size-meta);
  color: var(--color-text-soft);
}

.article .references {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-card-border);
}

.article .reference-list {
  padding-left: 1.4em;
  font-size: var(--font-size-meta);
}

.article .reference-list li + li {
  margin-top: var(--space-sm);
}

/* 7 - Responsive
   ============================================================ */

/* Responsive Layout */

/* Doc pages: preserve the 880px reading column as the side rails collapse. */
@media (max-width: 1419px) {
  .breadcrumb {
    max-width: 1088px;
  }
}

@media (max-width: 1219px) {
  .breadcrumb {
    max-width: var(--article-max-width);
  }

  .breadcrumb {
    margin-bottom: 1rem;
  }

  .sidebar-brand span {
    display: inline;
    margin-left: 4px;
  }

  .page-sidebar nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
  }

  .page-sidebar li + li {
    margin-top: 0;
  }

  .page-sidebar nav a {
    padding: 3px 0;
    border-left: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
  }

  .page-sidebar nav a[aria-current="page"] {
    border-bottom-color: var(--color-link);
    background: transparent;
  }

  .sidebar-repository {
    margin: 11px 0 0;
    padding-top: 10px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .media-figure--pair .media-pair {
    grid-template-columns: minmax(0, 1fr);
  }

  .case-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-lg);
  }

  .demo-stage {
    grid-template-columns: minmax(0, 1fr);
  }

  .callout {
    padding: var(--space-md) var(--space-lg);
  }
}