/* assets/css/components/sidebar-block-event-promo.css
 * @layer components — Sidebar block: Event promo card
 *
 * Compact event card for the sidebar slot system. White card surface,
 * tight type, single CTA. Used inside .vimta-sidebar (vertical desktop,
 * horizontal scroll rail mobile) and reused in the footer strip.
 * ════════════════════════════════════════════════════════════════════ */

@layer components {

  .vimta-event-promo {
    display: flex;
    flex-direction: column;
    gap: var(--stack-gap);
    padding: var(--card-padding-compact);
    background: var(--card-bg);
    border: var(--card-border);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    block-size: 100%;
  }

  .vimta-event-promo__eyebrow {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--text-accent);
    line-height: var(--leading-none);
  }

  .vimta-event-promo__date {
    display: flex;
    align-items: baseline;
    gap: var(--space-xs);
  }

  .vimta-event-promo__date-day {
    font-family: var(--font-heading);
    font-size: var(--heading-l);
    font-weight: var(--weight-bold);
    line-height: var(--leading-none);
    color: var(--primary);
  }

  .vimta-event-promo__date-month {
    font-size: var(--text-s);
    font-weight: var(--weight-semibold);
    color: var(--text-muted);
  }

  .vimta-event-promo__title {
    font-family: var(--font-heading);
    font-size: var(--heading-xs);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    color: var(--text-main);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .vimta-event-promo__title a {
    color: inherit;
    text-decoration: none;
  }

  .vimta-event-promo__title a:hover,
  .vimta-event-promo__title a:focus-visible {
    color: var(--primary);
  }

  .vimta-event-promo__location {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    font-size: var(--text-s);
    color: var(--text-body);
    min-inline-size: 0;
  }

  .vimta-event-promo__location .icon-meta {
    flex-shrink: 0;
    inline-size: 1em;
    block-size: 1em;
    color: var(--text-accent);
  }

  .vimta-event-promo__location > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* CTA pushed to bottom so cards in the mobile rail align cleanly */
  .vimta-event-promo__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    margin-block-start: auto;
    align-self: flex-start;
    font-size: var(--text-s);
    font-weight: var(--weight-semibold);
    color: var(--primary);
    text-decoration: none;
  }

  .vimta-event-promo__cta:hover,
  .vimta-event-promo__cta:focus-visible {
    color: var(--primary-hover);
  }

  .vimta-event-promo__cta:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
    border-radius: var(--radius-s);
  }

  .vimta-event-promo__cta .icon-meta {
    inline-size: 1em;
    block-size: 1em;
  }

}