@layer components {
  /* ============================================
     Event Card — date-grouped item feed
     ============================================
     Generic component for date-grouped lists.
     Used for upcoming events on home and index.

     Structure:
       .event-card
         .event-card__divider
         .event-card__group
           .event-card__date
           .event-card__items
             .event-card__item  (link)
     ============================================ */

  .event-card {
    display: flex;
    flex-direction: column;
  }

  /* ── Date + items row ── */
  .event-card__group {
    display: flex;
    gap: 2ch;
  }

  /* ── Date column (left anchor) ── */
  .event-card__date {
    width: 5ch;
    flex-shrink: 0;
    text-align: center;
    padding-top: 0.625rem;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .event-card__weekday {
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.2;
  }

  .event-card__day-number {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    line-height: 1.15;
    color: var(--color-text);
  }

  .event-card__month {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    line-height: 1.2;
  }

  /* ── Items column ── */
  .event-card__items {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
  }

  /* ── Single item (clickable link) ── */
  .event-card__item {
    display: flex;
    align-items: stretch;
    gap: 0.75rem;
    padding: 0.25rem;
    border-radius: 0.5rem;
    text-decoration: none;
    color: var(--color-text);
  }

  .event-card__item:hover {
    background-color: var(--color-border-highlight);
  }

  /* ── Vertical accent bar ── */
  .event-card__bar {
    width: 4px;
    border-radius: 2px;
    background-color: var(--color-primary);
    flex-shrink: 0;
  }

  .event-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
  }

  /* ── Item name row (name + optional badge) ── */
  .event-card__header {
    display: flex;
    align-items: center;
  }

  .event-card__name {
    flex: 1;
    font-size: var(--text-md);
    font-weight: 500;
    line-height: 1.3;
    margin-bottom: 0.125rem;
  }

  .event-card__badge {
    flex-shrink: 0;
    font-size: var(--text-md);
    align-self: flex-start;
  }

  /* ── Meta line (time, author) ── */
  .event-card__meta {
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--color-text-muted);
  }

  /* ── Location pill ── */
  .event-card__location {
    display: flex;
    align-items: center;
    gap: 0.5ch;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    background-color: var(--color-border-highlight);
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    align-self: flex-start;
    margin-top: 0.25rem;
  }

  .event-card__item:hover .event-card__location {
    background-color: color-mix(in oklch, var(--color-border-highlight), var(--color-text) 10%);
  }

  /* ── Divider between date groups ── */
  .event-card__divider {
    border-bottom: 1px solid var(--color-border);
    margin: 0.375rem 0 0.375rem calc(5ch + 2ch);
  }

  /* ── Empty state ── */
  .event-card__empty {
    padding: 0.625rem 0.75rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
  }

  /* ── Events preview footer ── */
  .events-preview__footer {
    display: flex;
    justify-content: center;
    padding-top: 1rem;
  }
}