@layer components {

  .card-event {
    container-name: card card-event;
    container-type: inline-size;
  }

  .card-event--featured .card-event__media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: var(--primary-dark);
  }

  .card-event__image {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
  }

  .card-event__media-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to top,
      color-mix(in oklch, var(--primary-ultra-dark) 65%, transparent) 0%,
      color-mix(in oklch, var(--primary-ultra-dark) 25%, transparent) 30%,
      transparent 60%
    );
    pointer-events: none;
  }

  .card-event__media--fallback {
    background:
      radial-gradient(
        ellipse 60% 70% at 25% 35%,
        color-mix(in oklch, var(--secondary) 28%, transparent) 0%,
        transparent 60%
      ),
      radial-gradient(
        ellipse 50% 50% at 80% 70%,
        color-mix(in oklch, var(--primary) 40%, transparent) 0%,
        transparent 60%
      ),
      linear-gradient(
        135deg,
        var(--primary-dark)        0%,
        var(--primary-ultra-dark)  100%
      );
  }

  .card-event__date-pill {
    position: absolute;
    inset-block-start: var(--space-m);
    inset-inline-start: var(--space-m);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3xs);
    min-inline-size: 3.25rem;
    padding-block: var(--space-xs) var(--space-2xs);
    padding-inline: var(--space-s);
    background-color: var(--white);
    border-radius: var(--radius-m);
    box-shadow: var(--card-shadow);
    z-index: 2;
  }

  .card-event__date-pill-day {
    font-family: var(--font-heading);
    font-size: var(--heading-s);
    font-weight: var(--weight-bold);
    line-height: var(--leading-none);
    letter-spacing: var(--tracking-tight);
    color: var(--text-main);
  }

  .card-event__date-pill-month {
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-caps);
    color: var(--text-muted);
    line-height: var(--leading-none);
  }

  .card-event__speakers-overlay {
    position: absolute;
    inset-block-end: var(--space-m);
    inset-inline-start: var(--space-m);
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding-block: var(--space-2xs);
    padding-inline: var(--space-2xs) var(--space-m);
    background-color: color-mix(in oklch, var(--primary-ultra-dark) 60%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: var(--radius-full);
    z-index: 2;
  }

  .card-event__speakers-count {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--text-on-dark);
    white-space: nowrap;
  }

  .card-event__avatars {
    display: inline-flex;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .card-event__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 1.75rem;
    block-size: 1.75rem;
    border-radius: var(--radius-full);
    background-color: var(--surface-tinted);
    border: 2px solid var(--white);
    overflow: hidden;
    flex-shrink: 0;
    color: var(--text-muted);
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
  }

  .card-event__avatar + .card-event__avatar {
    margin-inline-start: calc(var(--space-2xs) * -1);
  }

  .card-event__avatar-img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
  }

  .card-event__avatars--small .card-event__avatar {
    inline-size: 1.5rem;
    block-size: 1.5rem;
  }

  .card-event__chip--overlay {
    position: absolute;
    inset-block-start: var(--space-m);
    inset-inline-end: var(--space-m);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    padding-block: var(--space-2xs);
    padding-inline: var(--space-s);
    border-radius: var(--radius-full);
    background-color: color-mix(in oklch, var(--white) 12%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid color-mix(in oklch, var(--white) 22%, transparent);
    font-size: var(--text-label);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    color: var(--text-on-dark);
    z-index: 2;
  }

  .card-event__chip--overlay .icon-ui {
    inline-size: 1em;
    block-size: 1em;
  }

  .card-event--featured .card-event__body {
    display: flex;
    flex-direction: column;
    gap: var(--stack-gap);
    padding: var(--card-padding);
  }

  .card-event__eyebrow {
    font-size: var(--text-overline);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-overline);
    text-transform: uppercase;
    color: var(--text-accent);
    margin: 0;
  }

  .card-event--featured .card-event__title {
    font-size: var(--heading-block);
    line-height: var(--leading-snug);
    margin: 0;
  }

  .card-event__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    font-size: var(--text-s);
    color: var(--text-muted);
    margin: 0;
  }

  .card-event__meta .icon-ui {
    inline-size: 1em;
    block-size: 1em;
    flex-shrink: 0;
    margin-inline-end: var(--space-3xs);
  }

  .card-event__meta-sep {
    color: var(--border-default);
  }

  .card-event--featured .card-event__cta {
    inline-size: 100%;
    justify-content: center;
    margin-block-start: auto;
    position: relative;
    z-index: 2;
  }

  .card-event--row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-m);
    align-items: center;
    padding: var(--space-s);
  }

  .card-event__date-square {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3xs);
    inline-size: 4rem;
    block-size: 4rem;
    border-radius: var(--radius-m);
    flex-shrink: 0;
    color: var(--text-on-dark);
  }

  .card-event__date-square-day {
    font-family: var(--font-heading);
    font-size: var(--heading-s);
    font-weight: var(--weight-bold);
    line-height: var(--leading-none);
    letter-spacing: var(--tracking-tight);
    color: inherit;
  }

  .card-event__date-square-month {
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-caps);
    color: color-mix(in oklch, currentColor 75%, transparent);
    line-height: var(--leading-none);
  }

  .card-event--tone-primary .card-event__date-square {
    background-color: var(--primary);
  }

  .card-event--tone-primary-dark .card-event__date-square {
    background-color: var(--primary-dark);
  }

  .card-event--tone-secondary .card-event__date-square {
    background-color: var(--secondary);
  }

  .card-event__row-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    min-inline-size: 0;
  }

  .card-event__row-meta {
    font-size: var(--text-s);
    color: var(--text-accent);
    font-weight: var(--weight-semibold);
    margin: 0;
  }

  .card-event__row-title {
    font-family: var(--font-heading);
    font-size: var(--text-m);
    font-weight: var(--weight-bold);
    line-height: var(--leading-snug);
    color: var(--text-main);
    margin: 0;
  }

  .card-event__row-title a {
    color: inherit;
    text-decoration: none;
  }

  .card-event__row-speakers {
    display: inline-flex;
    align-items: center;
    gap: var(--space-s);
    margin-block-start: var(--space-3xs);
  }

  .card-event__row-count {
    font-size: var(--text-xs);
    color: var(--text-muted);
  }

  .card-event__row-arrow {
    inline-size: 1.25rem;
    block-size: 1.25rem;
    color: var(--text-muted);
    flex-shrink: 0;
  }

  .card-event--row:hover .card-event__row-arrow,
  .card-event--row:focus-within .card-event__row-arrow {
    color: var(--text-accent);
  }

  .card-event--completed .card-event__image {
    filter: grayscale(0.2);
  }

  .card-event--cancelled {
    opacity: 0.7;
  }

  .card-event--cancelled .card-event__image {
    filter: grayscale(0.7);
  }

  @media (max-width: 48em) {
    .card-event--featured .card-event__media {
      aspect-ratio: 4 / 3;
    }
  }

  @container card (width < 22rem) {
    .card-event--featured .card-event__date-pill {
      inset-block-start: var(--space-s);
      inset-inline-start: var(--space-s);
      min-inline-size: 2.75rem;
      padding-block: var(--space-2xs);
      padding-inline: var(--space-xs);
    }

    .card-event--featured .card-event__date-pill-day {
      font-size: var(--heading-xs);
    }

    .card-event--featured .card-event__speakers-overlay {
      inset-block-end: var(--space-s);
      inset-inline-start: var(--space-s);
    }

    .card-event--featured .card-event__chip--overlay {
      inset-block-start: var(--space-s);
      inset-inline-end: var(--space-s);
    }
  }

} /* end @layer components */