/**
 * Listing card title presentation.
 *
 * This stylesheet is intentionally isolated from card layout and application
 * logic. It applies to regular listings, auctions and the recently viewed
 * carousel because all of them use the shared item-card__title contract.
 */
.item-card__title {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    max-height: calc(1.4em * 2) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: normal !important;
}

/* The legacy carousel rule has higher specificity and used three lines. */
.slider-item .item-card__title,
.slider-item .recently-viewed__title {
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    max-height: calc(1.4em * 2) !important;
}

/* Mobile website: preserve the M3 card typography while enforcing two lines.
 * The existing mobile stylesheet contains !important declarations, therefore
 * the clamp-related declarations also intentionally use !important here. */
@media (max-width: 1023px) {
    .item-card__title {
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
        max-height: calc(1.3em * 2) !important;
        white-space: normal !important;
    }

    .item-card--small .item-card__title,
    .profile-listings .item-card__title {
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
        max-height: calc(1.3em * 2) !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: normal !important;
    }

    .slider-item .item-card__title,
    .slider-item .recently-viewed__title {
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
        max-height: calc(1.3em * 2) !important;
        white-space: normal !important;
    }
}