/* Experiences page: page-scoped rules, linked after css/style.css.
   The cards rendered from data/experiences.json sit on one pastel field
   (#list is .field--mint) and are laid out here as an editorial index:
   hairline rows, the group title in its own column on desktop, and no
   per-card colour. The renderer still adds a pastel-* class to each card;
   this sheet ignores it so the page reads as one field, not a patchwork.
   No new class names: everything targets documented classes inside #list. */

/* Without JS, or while the list has not rendered (fetch failed, file://),
   the chips would do nothing, so they stay hidden until cards exist. */
html:not(.js) #list .chips { display: none; }
#list:not(:has(.card)) .chips { display: none; }

/* The hero already ends in space; the field starts closer to its heading. */
#list.section { padding-top: clamp(40px, 5vw, 72px); }

#list .cards-group + .cards-group { margin-top: clamp(40px, 5vw, 64px); }
#list .cards-group__title { margin-bottom: 12px; }

#list .cards { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--line-strong); }
#list .card {
  background: transparent;
  border-radius: 0;
  border-bottom: 1px solid var(--line);
  padding: 20px 0 14px;
  gap: 6px;
}
/* The group heading already names the category. */
#list .card__label { display: none; }
/* The next group's rule closes the list, so the last row needs none. */
#list .card:last-child { border-bottom: 0; }
#list .card p { max-width: 62ch; }
#list .card a.more { margin: 2px 0 0; align-self: flex-start; }
/* A card's photo from the staff system (js/main.js 8b; none today): a 3:2
   frame at most 360px wide above the card's text, in the text column. The
   shared .card__media bleeds to a pastel card's edges; this index has none. */
#list .card__media { margin: 4px 0 6px; width: 100%; max-width: 360px; border-radius: var(--radius); }

/* Tablet: title beside the copy. */
@media (min-width: 561px) {
  #list .card {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    column-gap: clamp(20px, 3vw, 40px);
    align-items: start;
  }
  #list .card > * { grid-column: 2; }
  #list .card > .card__title { grid-column: 1; grid-row: 1 / span 3; }
}

/* Desktop: group title in its own column, the link in a fixed column so
   the copy lines up down the whole list. */
@media (min-width: 861px) {
  #list .cards-group {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
    column-gap: clamp(24px, 3vw, 48px);
    align-items: start;
  }
  #list .cards-group__title { margin: 0; padding-top: 18px; }
  #list .card {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr) 10.5rem;
    padding: 22px 0 22px;
  }
  #list .card > .card__title { grid-row: 1 / span 2; }
  #list .card > a.more { grid-column: 3; grid-row: 1 / span 2; justify-self: end; margin: -11px 0 0; }
}