/* Article side columns (MB-123; Views/article.cshtml, partials site/article-contents and site/article-related). Loaded only
   on an article with Contents list or Related column on. Master's plain look in the site's tokens; a site restyles the
   classes (FuelChief's look is its own site CSS). Mobile first: one column, the related card under the main column; two
   columns from 992 px only when the related column shows. The related items grow to 1.05x when pointed at, 0.3 s ease,
   as the source site (R-74; not autoplay, so the same under reduced motion). The contents list's fade is data-reveal
   (css/motion.css). No overflow clipping on the card, so focus rings and grown items stay whole. */

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-12);
  align-items: start;
}
.article-layout__main { min-width: 0; }
/* One left and right edge for the main column (UX MB-123 U1; the source measures one box for every part): sections pad
   their content by --page-gutter, text sections don't, so plain sections drop it here. A coloured section keeps it inside
   its own colour box, whose edges are the column's. */
.article-layout__main .band--plain { --page-gutter: 0px; }
@media (min-width: 992px) {
  .article-layout--with-related { grid-template-columns: minmax(0, 1fr) minmax(0, 18rem); }
}

/* Contents list ("Inside this article"): a plain list of links to the section headings below it. */
.article-contents { margin: var(--space-8) 0; }
.article-contents__heading {
  margin: 0 0 var(--space-3);
  color: var(--color-heading);
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
}
.article-contents__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.article-contents__item { margin: 0 0 var(--space-2); }
.article-contents__link { color: var(--color-link); transition: all 0.3s ease; }
.article-contents__link:active { color: var(--color-link-hover); }

/* Related column: a light card with the heading and up to 5 items, divided by hairlines. */
.article-related {
  padding: var(--space-4) var(--space-6);
  background: var(--color-surface-quiet);
  border: var(--border-width) solid var(--color-hairline);
  border-radius: var(--radius-sm);
}
.article-related__heading {
  margin: var(--space-2) 0 0;
  color: var(--color-heading);
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
}
.article-related__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.article-related__entry { margin: 0; }
.article-related__entry + .article-related__entry { border-top: var(--border-width) solid var(--color-hairline); }
.article-related__item {
  display: block;
  padding: var(--space-6) 0;
  color: var(--color-text);
  text-decoration: none;
  transition: all 0.3s ease;
}
.article-related__item:hover { transform: scale(1.05); }
.article-related__title {
  margin: 0;
  color: var(--color-heading);
  font-size: var(--fs-h4);
  line-height: var(--lh-heading);
}
.article-related__text {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}