/* ===== Adventures — one long shy card per adventure =====
   Each entry is its own full-width card using the shared component (see
   css/components/card.css) and the same .card--shy flee behaviour as Work and
   Blog. Was briefly a single card wrapping a list; split back out so every
   adventure is its own object you can push around.
   Real biography data lives in index.html. */

.adventures__list {
  display: grid;
  /* roomier than --sp-2: cards flee up to ~60px, and a tight gap makes
     neighbours overlap the moment the cursor gets close */
  gap: var(--sp-3);
  max-width: 52rem;
  margin-inline: auto;          /* centered in the section */
}

/* --long: a wide, short card — one line of biography rather than a tile. */
.card--long .card__body {
  padding: var(--sp-3) var(--sp-4);
}

.adventure {
  display: grid;
  grid-template-columns: 1.4fr 1fr auto;
  gap: var(--space-8);
  align-items: baseline;
}
.adventure__role {
  font-size: var(--fs-300);
  line-height: var(--leading-normal);
  color: var(--c-ink);
}
.adventure__place {
  font-size: var(--fs-200);
  line-height: var(--leading-normal);
  color: var(--c-ink-soft);
}
.adventure__years {
  font-size: var(--fs-200);
  color: var(--c-ink-soft);
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Phone: the role gets the full width of the card and the two secondary bits
   (place, years) share the line below it. Previously the role sat next to the
   years and had ~152px to work with, which broke the longer titles across
   three and four lines; on its own row it has nearly twice that, so they fit
   on one at a size that's only slightly reduced.

   The horizontal padding comes in from --sp-4 to --sp-2 for the same reason —
   64px of side padding on a 327px card is a third of the line. Together the
   two changes are what let the longest entry ("Bachelor of Design and
   Printing Technologies") sit on a single line at .875rem — measured, that's
   the largest size it fits at; type size alone, in the old narrow column,
   would have had to go under 9px. */
@media (max-width: 720px) {
  .card--long .card__body { padding: var(--sp-3) var(--sp-2); }
  .adventure {
    grid-template-columns: 1fr auto;
    gap: var(--space-1) var(--space-6);
  }
  .adventure__role  { grid-column: 1 / -1; font-size: var(--text-sm); }
  .adventure__place { grid-column: 1; font-size: var(--text-xs); }
  .adventure__years { grid-column: 2; font-size: var(--text-xs); }
}