/* Card: a raised surface for one piece of content.
   data-variant  inset  a quieter tile inside a card (ticket options, chips)
   --card-space  inner padding, a space token */
.card {
  background: var(--card-bg, var(--color-surface-1));
  border-radius: var(--card-radius, var(--radius-xl));
  box-shadow: var(--card-shadow, var(--shadow-card));
  padding: var(--card-space, var(--space-s-m));
}

.card[data-variant="inset"] {
  --card-bg: var(--color-surface-2);
  --card-radius: var(--radius-l);
  --card-shadow: none;
  --card-space: var(--space-s);
}

/* The title a card opens with, in the heading face on any page; space it
   from the content with .flow on the card.
   data-size  large  a page section (event page: Tickets, About, Line-up) */
.card__title {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-size-adjust: var(--font-display-adjust);
  font-weight: var(--font-display-weight);
  letter-spacing: var(--font-display-tracking);
  line-height: var(--leading-tight);
}

.card__title[data-size="large"] {
  font-size: var(--step-3);
}

/* A rule between the parts of one card */
.card__divider {
  border-top: var(--border-width) solid var(--color-subtle);
  margin-block: var(--space-s);
}

/* A part of the card set off by a rule above it */
.card__section {
  border-block-start: var(--border-width) solid var(--color-subtle);
  padding-block-start: var(--space-s);
}