/* Event card: an event in the shop's grid — its flyer lifting on hover, the
   minimum age and a sold-out mark on the corners, the title and date below.
   The title sits close under its own flyer and well apart from the next
   one, so it is clear which flyer it belongs to (on a phone they stack). */
.event-card {
  border-radius: var(--radius-l);
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  margin-block-end: var(--space-m);
  text-decoration: none;

  &:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--space-3xs);
  }
}

.event-card__media {
  position: relative;
}

.event-card__poster {
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-card);
  inline-size: 100%;
  transition:
    translate var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .event-card:hover .event-card__poster {
    box-shadow: var(--shadow-card), var(--shadow-raised);
    translate: 0 calc(-1 * var(--space-3xs));
  }
}

.event-card__badges {
  inset: var(--space-2xs) var(--space-2xs) auto;
  position: absolute;
}

/* A chip that reads on any flyer */
.event-card__badge {
  --chip-bg: oklch(0 0 0 / 0.6);
  --chip-fg: white;
}

.event-card__badge[data-tone="danger"] {
  --chip-bg: var(--color-red);
}

.event-card__title {
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: var(--weight-semibold);
  letter-spacing: normal;
  line-height: var(--leading-snug);
}

.event-card__date {
  color: var(--color-muted);
  font-size: var(--step--1);
}