/* 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);
}

/* The day, set large, for the agenda below */
.event-card__day {
  display: none;
}

/* ── The style's event list (data-look-event-list) ────────────────────────
   grid     flyers side by side (above)
   posters  fewer, larger flyers with their titles in the heading face
   list     one event per row: a small flyer beside its title and date
   agenda   one event per row, led by its day; no flyers */
.event-list {
  --auto-grid-min: 14rem;
}

[data-look-event-list="posters"] {
  .event-list {
    --auto-grid-min: 19rem;
    --auto-grid-space: var(--space-m-l);
  }

  .event-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: calc(var(--font-display-tracking) + var(--heading-case-tracking, 0em));
    line-height: var(--leading-tight);
    text-transform: var(--heading-case, none);
  }
}

[data-look-event-list="list"],
[data-look-event-list="agenda"] {
  .event-list {
    --auto-grid-min: 100%;
    --auto-grid-space: var(--space-xs);
  }

  .event-card {
    align-items: center;
    background: var(--color-surface-1);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-card);
    flex-direction: row;
    gap: var(--space-s);
    margin-block-end: 0;
    padding: var(--space-xs);
  }

  .event-card__title {
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-size-adjust: var(--font-display-adjust);
    font-weight: var(--font-display-weight);
    letter-spacing: calc(var(--font-display-tracking) + var(--heading-case-tracking, 0em));
    line-height: var(--leading-tight);
    text-transform: var(--heading-case, none);
  }
}

[data-look-event-list="list"] {
  .event-card__media {
    flex: none;
    inline-size: clamp(4.5rem, 18vw, 7rem);
  }

  .event-card__poster {
    border-radius: var(--radius-m);
    box-shadow: none;
  }

  /* The corner marks need the room of a full flyer */
  .event-card__badges {
    display: none;
  }
}

[data-look-event-list="agenda"] {
  .event-card__media {
    display: none;
  }

  .event-card__day {
    align-items: center;
    border-inline-end: var(--border-width) solid var(--color-subtle);
    display: flex;
    flex: none;
    flex-direction: column;
    inline-size: 4.5rem;
    line-height: var(--leading-flat);
    padding-inline-end: var(--space-s);
  }

  .event-card__day-number {
    color: var(--color-accent-text);
    font-family: var(--font-display);
    font-size: var(--step-4);
    font-weight: var(--font-display-weight);
    font-variant-numeric: tabular-nums;
  }

  .event-card__day-month {
    color: var(--color-muted);
    font-size: var(--step--1);
    font-weight: var(--weight-semibold);
  }
}