/* The event card: a white surface on the tinted page, sheet left, text right. The
   card fills its list cell, so the cards of a row are equally tall. */
.event-card {
    box-sizing: border-box;
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    height: 100%;
    padding: var(--space-3) var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: var(--color-bg);
    box-shadow: var(--shadow);
    color: var(--color-text);
}

/* Only the linked card reacts to hover: a card that leads nowhere must not look
   clickable. Hover = stronger shadow and a blue edge, nothing moves. */
.event-card-link {
    text-decoration: none;
    transition: box-shadow var(--transition), border-color var(--transition);
}

.event-card-link:hover {
    border-color: var(--color-brand);
    box-shadow: var(--shadow-hover);
    color: var(--color-text);
}

.event-details {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;   /* lets a long title wrap instead of widening the card */
}

.event-title {
    color: var(--color-brand);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
}

/* Time and place: icon and text on one quiet line each. The icon belongs to Icon's
   own scope, so it is reached through ::deep. */
.event-meta {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-text-soft);
    font-size: 0.9rem;
}

.event-meta ::deep .icon {
    color: var(--color-accent-dark);
}

.event-note {
    margin-top: var(--space-1);
    font-size: 0.95rem;
}

/* In the linked card (home embed) the note is only a teaser: cut after two lines,
   so a long note does not stretch the card next to short ones. The full note is
   on the events page. */
.event-card-link .event-note {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.event-ics {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    align-self: flex-start;
    margin-top: var(--space-2);
    font-size: 0.9rem;
    font-weight: 600;
}