/**
 * The event card, in the one place its proportions are decided.
 *
 * The same markup is rendered by nine different views - the home sections,
 * search results, the city/country/category listings, a profile's events, the
 * "related events" rails on an event page and the organizer dashboard - so the
 * card's look used to have to be changed in nine places and never quite matched
 * in all of them. Anything about the card that is not page-specific belongs
 * here, keyed off the .event-card marker the markup carries.
 *
 * Loaded after css/styles.css and css/responsive.css on purpose: both still
 * carry the older, taller sizing for .card, .tab-content .card and .user-id.
 * Matching their specificity (hence .card.event-card rather than .event-card)
 * and sitting later in the cascade is what settles it, with no !important.
 */

/* A shorter banner: the old 294x250 box pushed the details below the fold on a
   phone and made a row of cards read as a row of posters. */
.card.event-card .cardImg {
    height: auto;
    width: 100%;
    min-width: 0;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

/* The avatar sat 20px in from an 80px box, which read as an oversized badge. */
.card.event-card .profile-link-image {
    width: 60px;
    height: 60px;
}

.card.event-card .profile-link-image .user-id {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    top: 12px;
    right: 12px;
}

.card.event-card .card-body {
    padding: 12px 14px 0;
}

/* Two lines, then an ellipsis - titles were running to three and shunting the
   details of one card out of line with its neighbours. The display has to be
   -webkit-box for the clamp to apply at all; .card-body h4 sets inline-flex,
   under which the text would be cut off without the "...". */
.card.event-card .card-body h4 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    max-height: 2.7em;
}

/* The details stack instead of sharing one row, so a long city name has a line
   to itself and never collides with the date. */
.card.event-card .card-bottom {
    flex-direction: column;
    padding: 8px 14px 14px;
    gap: 0;
}

.card.event-card .card-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.card.event-card .card-meta-location,
.card.event-card .card-meta-line {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    font-size: 13px;
    color: #52525b;
    white-space: nowrap;
}

/* The ellipsis needs a block to live on - a flex container clips instead. */
.card.event-card .card-meta-text,
.card.event-card .card-meta-line > span {
    font-size: inherit;
    color: inherit;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card.event-card .card-meta-dot {
    flex: 0 0 auto;
    color: #a1a1aa;
}

/* Only the location keeps an icon; the calendar and ticket icons crowded the
   row and the date and price read perfectly well as plain text. */
.card.event-card .card-meta .card-icon {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    top: 0;
}