/* ==========================================================================
   Pointer Section
   Block: .pointer / .pointer-section
   --------------------------------------------------------------------------
   A list of points, each with a tick or a cross, beside an optional panel.
   The list is a list and the panel is a panel: with this file absent the band
   still reads in order, points first, panel after.
   ========================================================================== */

.pointer-section {
  background-color: var(--color-background);
}

.pointer-section--soft {
  background-color: var(--color-background-sunken);
}

.pointer-section--dark {
  background-image: var(--gradient-ink);
}

/* ----------------------------------------------------------- The layout */

.pointer__layout {
  display: grid;
  gap: var(--space-2x-large);
  align-items: start;
}

@media (width >= 62rem) {
  .pointer__layout {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: var(--space-3x-large);
  }

  .pointer__layout--even {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* The panel changes sides by moving in the grid, never in the markup, so
     the list is still read first whatever side it is drawn on. */
  .pointer__layout--panel-first .pointer__main {
    order: 2;
  }

  .pointer__layout--panel-first .pointer__panel {
    order: 1;
  }

  .pointer__layout--sticky .pointer__panel {
    position: sticky;
    inset-block-start: calc(var(--header-height) + var(--space-large));
  }
}

.pointer__body {
  margin-block-start: var(--space-large);
}

.pointer__link {
  margin-block-start: var(--space-large);
}

/* ------------------------------------------------------------- The list */

.pointer-list {
  display: grid;
  gap: var(--space-x-small);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Anything above the list gets a gap; a list that opens the column does not,
   so it lines up with the panel beside it. */
.pointer__header + .pointer-list,
.pointer__body + .pointer-list {
  margin-block-start: var(--space-large);
}

.pointer-list--two-column {
  gap: var(--space-x-small) var(--space-large);
}

@media (width >= 40rem) {
  .pointer-list--two-column {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.pointer-list__item {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  gap: var(--space-2x-small);
  align-items: start;
  color: var(--color-text-muted);
}

/* A list with no markers keeps its text in the same column as a list that has
   them, so two bands on one page line up. */
.pointer-list--plain .pointer-list__item {
  grid-template-columns: minmax(0, 1fr);
}

.pointer-list__icon {
  width: 1.25rem;
  height: 1.25rem;
  margin-block-start: 0.3125rem;
  color: var(--color-success);
}

.pointer-list--cross .pointer-list__icon {
  color: var(--color-error);
}

.pointer-list__text > :first-child {
  margin-block-start: 0;
}

.pointer-list__text > :last-child {
  margin-block-end: 0;
}

/* The opening phrase of a point, set on its own line as a label. */
.pointer-list__text strong {
  color: var(--color-text-strong);
}

/* ------------------------------------------------------------ The panel */

.pointer__panel {
  display: grid;
  gap: var(--space-small);
  padding: var(--space-large);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-large);
  background-color: var(--color-background-raised);
}

.pointer__panel--soft {
  background-color: var(--color-background-sunken);
}

.pointer__panel-title {
  font-size: var(--font-size-heading-3);
}

.pointer__panel-link {
  margin-block-start: var(--space-2x-small);
}

/* The tick and the cross are the two colours that have to change on the dark
   variant: both read as almost black against the ink gradient. */
.pointer-section--dark .pointer-list__icon {
  color: var(--color-success-bright);
}

.pointer-section--dark .pointer-list--cross .pointer-list__icon {
  color: var(--color-error-bright);
}