/* Guide template (T50; mapping pages 30 to 32). Tokens only, phones first.
   The header reuses the Compact hero (css/blocks/hero.css); sections are the library blocks.
   Prototype (article): "On this page" in columns 1 to 3, sticky 110 px from the top on desktop, a Boyd Blue keyline
   above it, 13 px bold label, 15 px entries with hairlines; the sections in columns 5 to 12. */

/* "On this page" + sections. On phones and tablets the list sits above the sections as a normal list. */
.guide__article {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-10) var(--gutter);
  align-items: start;
  padding-block: var(--section-space) 0;
}

.guide__contents {
  border-top: var(--border-width) solid var(--color-accent-line);
  padding-top: var(--space-4);
}
.guide__contents-title {
  margin: 0;
  padding-bottom: var(--space-3);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-label);
  letter-spacing: 0;
  color: var(--c-blue-600);   /* small blue text uses the darker step (A2) */
}
.guide__contents-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.guide__contents-item {
  margin: 0;
  border-bottom: var(--border-width) solid var(--color-hairline);
}
.guide__contents-link {
  display: block;
  min-height: 44px;            /* touch target */
  padding: var(--space-3) 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body-tight);
  color: var(--color-text);
  text-decoration: none;
}
.guide__contents-link:hover { color: var(--color-link-hover); text-decoration: underline; }
.guide__contents-link:focus-visible { outline-offset: -2px; }

/* Sections inside the article column: the column already has the page gutter, so the blocks' own
   containers drop theirs, and the first section starts at the top of the column. */
.guide__body { min-width: 0; }
.guide__body .container {
  max-width: none;
  padding-inline: 0;
}
.guide__body > .section:first-child { padding-top: 0; }

@media (min-width: 1024px) {
  .guide__article {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--space-10) var(--gutter);
  }
  .guide__contents {
    grid-column: 1 / span 3;
    position: sticky;
    top: 110px;               /* clears the floating header pill, as in the prototype */
  }
  .guide__body { grid-column: 5 / span 8; }
}

/* The header is a Compact hero written by this template (not a block), so the site header still adds its spacer
   for pages that don't start with a hero. The hero already makes room for the floating pill: drop the spacer. */
body:has(.guide__header) .site-nav-spacer { display: none; }