@use 'sprucecss/scss/spruce' as *;

.event-cards {
  @include layout-grid('m', 16rem);
}

.event-card {
  @include a11y-card-link('.event-card__link', true);
  background-color: color('surface');
  border: config('border-width-base', $display) solid color('border');
  border-radius: radius('lg');
  overflow: hidden;
  @include transition($property: 'box-shadow, translate');

  &:hover {
    box-shadow: shadow('md');
    translate: 0 -2px;
  }

  &:focus-within {
    outline: 2px solid color('focus-ring');
    outline-offset: 2px;
  }

  &__image {
    aspect-ratio: 16 / 9;
    inline-size: 100%;
    object-fit: cover;
  }

  &__body {
    display: flex;
    gap: spacer('s');
    padding: spacer('m');
  }

  &__date {
    align-items: center;
    background-color: color-alpha('primary', 0.1);
    border-radius: radius('md');
    color: color('primary');
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    inline-size: 3.5rem;
    line-height: 1.1;
    padding-block: spacer('xs');
  }

  &__day {
    font-family: config('font-family-heading', $typography);
    font-size: font-size('h4');
    font-weight: 800;
  }

  &__month {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
  }

  &__content {
    @include layout-stack('xxs');

    .badge {
      justify-self: start;
    }
  }

  &__title {
    font-size: font-size('h5');
  }

  &__link {
    color: color('heading');
    text-decoration: none;

    &:focus {
      outline: none;
    }
  }

  &__meta {
    color: color('muted');
    font-size: config('font-size-sm', $typography);
  }
}

<div class="event-cards">
    <article class="event-card">
        <img class="event-card__image" src="https://images.unsplash.com/photo-1540575467063-178a50c2df87?auto=format&fit=crop&w=640&q=70" alt="" width="640" height="360" loading="lazy">
        <div class="event-card__body">
            <time class="event-card__date" datetime="2026-11-14T18:00"><span class="event-card__day">14</span><span class="event-card__month">Nov</span></time>
            <div class="event-card__content">
                <span class="badge badge--primary">Meetup</span>
                <h3 class="event-card__title"><a class="event-card__link" href="#">Design Systems Meetup</a></h3>
                <p class="event-card__meta">Lisbon & online · 18:00</p>
            </div>
        </div>
    </article>
    <article class="event-card">
        <img class="event-card__image" src="https://images.unsplash.com/photo-1515187029135-18ee286d815b?auto=format&fit=crop&w=640&q=70" alt="" width="640" height="360" loading="lazy">
        <div class="event-card__body">
            <time class="event-card__date" datetime="2026-12-03T10:00"><span class="event-card__day">03</span><span class="event-card__month">Dec</span></time>
            <div class="event-card__content">
                <span class="badge badge--primary">Workshop</span>
                <h3 class="event-card__title"><a class="event-card__link" href="#">Modern CSS Workshop</a></h3>
                <p class="event-card__meta">Berlin · 10:00–16:00</p>
            </div>
        </div>
    </article>
    <article class="event-card">
        <img class="event-card__image" src="https://images.unsplash.com/photo-1505373877841-8d25f7d46678?auto=format&fit=crop&w=640&q=70" alt="" width="640" height="360" loading="lazy">
        <div class="event-card__body">
            <time class="event-card__date" datetime="2027-01-21T17:00"><span class="event-card__day">21</span><span class="event-card__month">Jan</span></time>
            <div class="event-card__content">
                <span class="badge badge--primary">Livestream</span>
                <h3 class="event-card__title"><a class="event-card__link" href="#">Spruce CSS 3.1 Launch</a></h3>
                <p class="event-card__meta">Online · 17:00 CET</p>
            </div>
        </div>
    </article>
</div>