/* ---------- Media slot ---------- */
/* Generic slot: swap contents for a photo/avatar/logo on other directory pages. */
.listing-card-media {
    flex: 0 0 76px;
    background: linear-gradient(165deg, var(--bg-4), var(--bg-3));
    border-right: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem .5rem;
    text-align: center;
}

/* Date-tile variant, used for events */
.listing-card-media.date-tile .month {
    font-family: var(--font-display);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--brand-1);
    text-transform: uppercase;
}

.listing-card-media.date-tile .day {
    font-family: var(--font-display);
    font-size: 1.65rem;
    font-weight: 700;
    color: var(--heading);
    line-height: 1.1;
}

.listing-card-media.date-tile .weekday {
    font-size: .68rem;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.listing-card-media.date-tile.urgent .day { color: var(--brand-orange); }

/* Photo/avatar variant, for businesses or people */
.listing-card-media.photo {
    padding: 0;
    flex-basis: 96px;
}
.listing-card-media.photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------- Body ---------- */
.listing-card-body {
    flex: 1;
    padding: 1rem 1.1rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.listing-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.listing-tag {
    font-size: .72rem;
    font-weight: 700;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-faint);
    border-radius: 999px;
    padding: .18rem .6rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60%;
}

.listing-badge {
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .03em;
    border-radius: 999px;
    padding: .2rem .55rem;
    flex-shrink: 0;
    text-transform: uppercase;
}

.listing-badge.green  { background: rgba(16, 185, 129, 0.15); color: var(--brand-green); }
.listing-badge.orange { background: rgba(245, 158, 12, 0.15); color: var(--brand-orange); }
.listing-badge.purple { background: rgba(168, 85, 247, 0.15); color: var(--brand-purple); }
.listing-badge.red    { background: rgba(244, 63, 94, 0.15); color: var(--brand-red); }

.listing-title {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
}

.listing-title a { color: var(--heading); text-decoration: none; }
.listing-title a:hover { color: var(--brand-1); }

.listing-meta {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    font-size: .82rem;
    color: var(--text-primary);
}

.listing-meta span { display: flex; align-items: center; gap: .4rem; }
.listing-meta span.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.listing-meta i { color: var(--brand-4); font-size: .9rem; width: 1rem; text-align: center; }

.listing-footer {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: .3rem;
    border-top: 1px dashed var(--border-faint);
    font-size: .74rem;
    color: var(--text-primary);
}

.listing-flag {
    color: var(--brand-red);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: .3rem;
}
.listing-flag i { font-size: .7rem; }

.card.is-cancelled {
    opacity: 0.6;
}

/* Grayscales the date tile specifically, since its color/urgency styling
   (e.g. .urgent) would otherwise still draw the eye on a cancelled event. */
.date-tile.is-cancelled {
    filter: grayscale(1);
}