/* =========================================================
   prep.css
   "What to know before your hunt".

   Two lists side by side on a desktop, stacked on a phone, with a note under
   both. Nothing here introduces a value: every colour, space and step comes
   from colors.css, because this section has no reason to look like a
   different site from the one around it.
   ========================================================= */

.prep-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  margin-top: var(--space-lg);
}

.prep-block h3 {
  font-size: var(--step-0);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-secondary);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border-primary);
  margin-bottom: var(--space-md);
}

/* The two lists are wildly uneven, and always will be: what to expect runs to
   nine lines and what to bring to three or four. The note sits at the foot of
   the shorter column rather than under both, which fills the gap the short
   list leaves and puts the licence wording next to the licence item instead of
   a screen away from it. Stacked on a phone the reading order is unchanged. */
.prep-block { display: flex; flex-direction: column; }
.prep-block .prep-note { margin-top: auto; }

/* The marker is a rule rather than a bullet: these are things to check off
   before a morning start, and a checklist is what they are. */
.prep-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.prep-list li {
  position: relative;
  padding-left: 26px;
  padding-block: 7px;
  font-size: var(--step--1);
  line-height: 1.65;
  color: var(--text-secondary);
}
.prep-list li + li {
  border-top: 1px solid var(--border-secondary);
}
.prep-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 1.05em;
  width: 12px;
  height: 2px;
  background: var(--brand);
}

.prep-note {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  margin-bottom: 0;
  border-top: 1px solid var(--border-primary);
  font-size: var(--step--1);
  line-height: 1.7;
  color: var(--text-muted);
  max-width: var(--maxw-prose);
}
.prep-note a {
  color: var(--brand);
}
.prep-note a:hover {
  color: var(--brand-hover);
}

@media (max-width: 760px) {
  .prep-split { grid-template-columns: 1fr; }
}