/* Блок «Похожие лоты» на /item (2023/view/lot/similar_item.twig), вариант «Витрина».
   Классы sim_ — чтобы не пересекаться со style.css / card_lot*.css на /item.
   Значения — из 2023/web/css/lot.css (карточка на главной), он на /item не подключён.
   <p> внутри не используем: на /item действует `#lot_card.NewDis p { font-size: 13px }`. */

.sim_lots {
    container-type: inline-size;
    font-family: var(--font-family);
    color: var(--color-dark);
    margin: 30px 0 0;
}
.sim_lots_head {
    margin: 0 0 16px;
}
.sim_lots_title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-dark);
    margin: 0;
}

/* колонок 4, 2 или 1 — без ряда 3+1 из 4 лотов; пороги по ширине блока:
   4 колонки от 4 × 190 + 3 × 16 = 808 (уже 190 не влезает «Осталось 14 дней»), 2 — от 2 × 150 + 10 = 310 */
.sim_grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}
/* диапазонами, не max-width: N-1 — при масштабе блок бывает дробным (807,27) и выпадал бы из обоих правил */
@container (width < 808px) {
    .sim_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (width < 309px) {
    .sim_grid { grid-template-columns: minmax(0, 1fr); }
}
/* карточка уже ~213 px (4 колонки) или ~230 px (2 колонки) — одна, самая срочная плашка;
   сервер ставит их по срочности */
@container (808px <= width < 899px) {
    .sim_dates .sim_date:nth-child(n+2) { display: none; }
}
@container (width < 470px) {
    .sim_dates .sim_date:nth-child(n+2) { display: none; }
}

.sim_card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #FFFFFF;
    border: 1px solid #F2F4F8;
    border-radius: 10px;
    box-shadow: 0 0 34px 0 #F6F6FE;
    transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
}
.sim_card:hover {
    border-color: #E4E7EF;
    box-shadow: 0 4px 24px 0 rgba(31, 31, 31, .07);
}
/* у карточки нет overflow: hidden — иначе обрежется модалка групп избранного */
.sim_card > .lot {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    margin: 0;
}

.sim_photo {
    display: block;
    position: relative;
    z-index: 1;               /* своя плоскость: у .slider_image-wrapper отрицательный z-index */
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border-radius: 9px 9px 0 0;
    background: #d8e0e7;
    cursor: pointer;
}
.sim_photo .slider_image,
.sim_photo .slider_image-wrapper {
    border-radius: 0;
}
.sim_photo .photo_cap {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background: #F8F9FC;
}
.sim_photo .photo_cap img {
    width: 56px;
    opacity: .6;
}

/* звёздочка — вне .sim_photo: клик по фото уводит на лот */
.sim_act {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 5;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(0, 0, 0, .45);
    color: rgba(255, 255, 255, .85);
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 150ms ease-in-out, color 150ms ease-in-out;
}
.sim_act:hover { background: rgba(0, 0, 0, .6); color: #fff; }
.sim_act.active { color: var(--color-orange); }
/* модалку групп LotMenu кладёт внутрь .lot; #lot_card — чтобы перебить медиаправила lotMenuModals.css,
   сторону (.sim_menu_left) выбирает similarLots.js по месту карточки на экране */
#lot_card .sim_card .lot_menu_modal.visible {
    top: 44px;
    bottom: auto;
    right: 8px;
    left: auto;
    z-index: 6;
}
#lot_card .sim_card.sim_menu_left .lot_menu_modal.visible {
    right: auto;
    left: 8px;
}

.sim_body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px 14px;
    flex: 1;
    min-width: 0;
}

.sim_num_row {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    overflow: hidden;
    min-width: 0;
}
.sim_num {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-gray);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.sim_num:hover { color: var(--color-blue); text-decoration: underline; }
/* «Лот N» всегда по правому краю; длинный номер торгов режется многоточием */
.sim_lot_n {
    flex: none;
    font-size: 13px;
    color: #9B9B9B;
    margin-left: auto;
    padding-left: 8px;
}

.sim_shop_title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    font-size: 15px;
    line-height: 20px;
    font-weight: 500;
    color: var(--color-dark);
    text-decoration: none;
    overflow-wrap: anywhere;
}
.sim_shop_title:hover { color: var(--color-blue); }

/* цена прижата к низу — карточки ряда выровнены */
.sim_prices {
    margin-top: auto;
    white-space: nowrap;
}
.sim_cur_label {
    font-size: 11px;
    line-height: 14px;
    color: var(--color-gray);
    margin-bottom: 1px;
}
.sim_cur {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
}
.sim_cur img { flex: none; }

/* сроки — тёмные чипы на фото */
.sim_ph_chips {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 46px;
    z-index: 4;
    pointer-events: none;
}
.sim_dates {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}
.sim_date {
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    max-width: 100%;
    box-sizing: border-box;
    height: 22px;
    line-height: 22px;
    padding: 0 8px;
    border-radius: 8px;
    background: rgba(0, 0, 0, .55);
    color: rgba(255, 255, 255, .95);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}
.sim_date > * { flex: none; }
.sim_date > .sim_date_t { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sim_date i { margin-left: -3px; margin-right: 4px; color: #fff; }
.sim_date > img { margin-right: 5px; }
.sim_date.fired,
.sim_date.green { color: #fff; }
.sim_date.green > .dot {
    width: 8px; height: 8px; border-radius: 4px;
    background-color: #78bf47;
    margin: 0 7px 0 -1px;
}
.sim_date .line {
    background-color: rgba(255, 255, 255, .35);
    width: 1px;
    height: 16px;
    margin: 0 6px;
}
.sim_date .small b { font-weight: 600; font-size: 11px; }

.sim_meta {
    border-top: 1px solid #edeae9;
    padding: 9px 16px;
    font-size: 12px;
    line-height: 17px;
    color: var(--color-gray);
    min-width: 0;
}
.sim_loc {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    overflow: hidden;
}
.sim_loc img { width: 10px; flex: none; }
.sim_loc span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* узкий экран — «тесный» режим прототипа */
@media (max-width: 600px) {
    .sim_grid { gap: 10px; }
    .sim_body { padding: 10px 12px 12px; }
    .sim_meta { padding: 8px 12px; }
    .sim_shop_title { font-size: 14px; line-height: 18px; }
    .sim_date { padding: 0 8px; font-size: 11px; }
}