/* Layout of a guide: a single reading column, with no sidebar. */

/* A relative height and not a fixed one: a guide's title can take one or two lines, and with a fixed
   value the layer overshot the hero's height — the mesh's overflow:hidden cut it dead before the mask
   faded it. The 48px of padding are reclaimed with the negative margin, so the mesh gains room to die
   without moving the content below. */
.guide-hero {
  --mesh-height: calc(100% - 48px);
  padding-bottom: 48px;
  margin-bottom: -48px;
}

.guide-hero .qf-mesh__layer {
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
  mask-image: linear-gradient(to bottom, #000 70%, transparent);
}

.guide-hero__nav { padding-top: var(--space-lg); }

.guide-hero__body {
  padding-top: 56px;
  padding-bottom: 56px;
}

.guide-hero__copy {
  max-width: 720px;
  display: grid;
  gap: var(--space-md);
}

.guide-hero__eyebrow { color: var(--text-muted); }
.guide-hero__title { text-wrap: pretty; }

/* 760px is the reading measure the design system uses in qf-shell__content. */
.guide-page__body {
  max-width: 760px;
  margin-inline: auto;
  padding-top: 56px;
  padding-bottom: 96px;
  display: grid;
  gap: 48px;
}

/* The direct answer at the very top, set apart by weight rather than by a box. */
.guide-answer {
  margin: 0;
  color: var(--text-body);
}

.guide-block {
  display: grid;
  gap: var(--space-lg);
}

.guide-block__title { margin: 0; }

.guide-block__lead {
  margin: 0;
  color: var(--text-secondary);
}

/* Multi-line notes: .qf-list's gap is meant for single-line items. */
.guide-notes { gap: var(--space-md); }

.guide-related {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-lg);
}

.guide-related__card {
  display: grid;
  align-content: start;
  gap: var(--space-sm);
  height: 100%;
  text-decoration: none;
}

.guide-cta {
  grid-auto-flow: column;
  justify-content: start;
  gap: var(--space-md);
}

@media (max-width: 560px) {
  .guide-cta { grid-auto-flow: row; }
}

/* The design system pushes __copy to the right through __tabs/__endpoint's margin-left:auto.
   These blocks carry neither of those, so the push goes here. */
.guide-block .qf-codeblock__copy { margin-left: auto; }