/*
 * Event/post card — kept in its own file per the design doc: this pattern is
 * explicitly flagged as "still under visual discussion", so it stays
 * editable in isolation from the settled product-card patterns.
 */

.event-card {
    display: block;
    width: 220px;
    background: var(--surface-1);
    box-shadow: var(--shadow-elevation);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

@media (min-width: 640px) { .event-card { width: 260px; } }

.event-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-2); }
.event-card__media img { width: 100%; height: 100%; object-fit: cover; filter: var(--image-filter); }

.event-card__date {
    position: absolute;
    top: var(--sp2);
    left: var(--sp2);
    padding: 3px 8px;
    background: var(--fg-primary);
    color: var(--bg);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: var(--radius-pill);
}

.event-card__body { padding: var(--sp4); }

.event-card__title {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 15px;
    color: var(--fg-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.event-card__excerpt {
    margin-top: var(--sp2);
    font-size: 13px;
    color: var(--fg-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* All-posts grid variant of the same card (posts.php) */
.posts-grid .event-card { width: 100%; }