/* Layout of the guides index: grids, widths and vertical rhythm. Same reason as the home page:
   the design system ships no page layout. */

/* --mesh-height is the extension point the design system exposes; the layer's default is
   height:100% and it would tint the whole page. Relative and not fixed: should the layer overshoot
   the hero's height, the mesh's overflow:hidden cuts it before the mask fades it. */
.guides-hero { --mesh-height: calc(100% - 48px); }

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

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

.guides-hero__body {
  padding-top: 64px;
  padding-bottom: 64px;
}

/* The width is capped here and not on the .qf-container: that one carries margin:0 auto and the
   block would end up centred instead of left-aligned. */
.guides-hero__copy {
  max-width: 680px;
  display: grid;
  gap: 18px;
}

.guides-hero__title { text-wrap: pretty; }

.guides-hero__note { color: var(--text-secondary); }

.guides-band__body {
  display: grid;
  gap: var(--space-lg);
}

.guides-band__eyebrow { color: var(--text-muted); }

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

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

.guides-cta {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--space-lg);
}

.guides-cta__lead { max-width: 560px; }