/* Три способа показать ленту. Переключаются кнопкой в шапке; выбор запоминается.

   Общее у всех трёх: выгода названа словами и подана суммой в рублях, а не только
   процентом. «−17 %» читается как угодно — скидка, налог, падение цены; «дешевле рынка
   на 400 000 ₽» читается одним способом и не требует счёта в уме. */

/* ── Общее для карточек ────────────────────────────────────────────── */

.карточка { animation: всплытие .38s both ease-out; animation-delay: var(--пауза, 0ms); }
@keyframes всплытие { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .карточка { animation: none; } }

.кадр { position: relative; background: #1b1f1b; overflow: hidden; }
.кадр img { width: 100%; height: 100%; object-fit: cover; display: block;
            transition: transform .6s cubic-bezier(.2,.7,.3,1); }
.карточка:hover .кадр img { transform: scale(1.05); }
.кадр--нет { display: grid; place-items: center; width: 100%; height: 100%;
             font: 600 2.2rem "Bitter", serif; color: #363d35; }
.износ { position: absolute; left: 8px; top: 8px; max-width: calc(100% - 16px);
         font: 600 .7rem/1 "IBM Plex Sans", sans-serif; color: #2a1206;
         background: var(--дорого); padding: 5px 8px; border-radius: 999px; }

.сумма { font: 600 1.26rem/1 "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; }
.титул { margin: 0; font: 600 .98rem/1.25 "Bitter", Georgia, serif; }
.строка { margin: 0; font-size: .8rem; color: var(--тусклый); font-variant-numeric: tabular-nums; }
.строка--тише { color: #6b726a; font-size: .74rem; }

/* ── Вид «плитки»: полоса выгоды под снимком ───────────────────────── */

.лента--плитки { display: grid; gap: 12px;
                 grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.лента--плитки .карточка { display: flex; flex-direction: column; overflow: hidden;
  background: var(--плита); border: 1px solid var(--кромка); border-radius: var(--радиус);
  transition: transform .18s, border-color .18s; }
.лента--плитки .карточка:hover { transform: translateY(-2px); border-color: #3d453c; }
.лента--плитки .кадр { aspect-ratio: 4/3; }
.лента--плитки .данные { padding: 12px; display: flex; flex-direction: column; gap: 4px; }

.полоса { display: flex; align-items: center; justify-content: space-between; gap: 8px;
          padding: 9px 12px; font: 600 .82rem/1.15 "IBM Plex Sans", sans-serif; }
.полоса--выгода { background: var(--выгода); color: #06240f; }
.полоса--дорого { background: #2a2019; color: var(--дорого); }
.полоса--ровно  { background: #1e221e; color: var(--тусклый); }
.полоса--нет    { background: #1a1d1a; color: #6f766e; font-weight: 500; font-size: .76rem; }
.полоса small { font-weight: 500; opacity: .8; font-family: "IBM Plex Mono", monospace; }

/* ── Вид «список»: снимок слева, плашка выгоды рядом с ценой ───────── */

.лента--список { list-style: none; margin: 0; padding: 0;
                 display: flex; flex-direction: column; gap: 8px; }
.лента--список .карточка { display: grid; grid-template-columns: 132px minmax(0, 1fr);
  gap: 12px; background: var(--плита); border: 1px solid var(--кромка);
  border-radius: var(--радиус); overflow: hidden; transition: border-color .16s, transform .16s; }
.лента--список .карточка:hover { border-color: #3a423a; transform: translateY(-1px); }
/* ‼ В списке снимок ТЯНЕТСЯ на всю высоту строки, а не держит пропорцию 4:3.
   С фиксированной пропорцией он оказывался ниже строки, и под ним оставалась тёмная
   полоса — карточка выглядела недоверстанной. Ширина колонки задана сеткой, высоту
   диктует текст справа; снимок просто заполняет то, что ему отвели. */
.лента--список .кадр { height: 100%; min-height: 96px; }
.лента--список .карточка--выгода { border-left: 4px solid var(--выгода); }
.лента--список .карточка--дорого { border-left: 4px solid #3a2a20; }
.лента--список .данные { padding-block: 11px; padding-right: 12px;
                          display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.верхняя { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }

.плашка { display: inline-flex; align-items: baseline; gap: 5px; border-radius: 6px;
          padding: 3px 8px; font: 600 .78rem/1.2 "IBM Plex Sans", sans-serif; white-space: nowrap; }
.плашка--выгода { background: var(--выгода); color: #06240f; }
.плашка--дорого { background: #2b211a; color: var(--дорого); }
.плашка--ровно  { background: #1f231f; color: var(--тусклый); }
.плашка--нет    { background: transparent; color: #6c736b; font-weight: 500; padding-inline: 0; }
.плашка small { font-weight: 500; opacity: .85; }

/* ── Вид «крупно»: экономия рублями и видимая шкала ────────────────── */

.лента--крупно { display: grid; gap: 12px;
                 grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); }
.лента--крупно .карточка { display: flex; flex-direction: column; background: var(--плита);
  border: 1px solid var(--кромка); border-radius: 14px; overflow: hidden;
  transition: transform .18s, border-color .18s; }
.лента--крупно .карточка:hover { transform: translateY(-2px); border-color: #3e463d; }
.лента--крупно .кадр { aspect-ratio: 16/10; }
.лента--крупно .данные { padding: 12px 13px 13px; display: flex; flex-direction: column;
                          gap: 6px; flex: 1; }

.экономия { margin-top: 2px; padding: 9px 11px; border-radius: 9px;
            background: var(--выгода-тьма); border: 1px solid #1c4a31; }
.экономия--дорого { background: #2a1f18; border-color: #46301f; }
.экономия--ровно  { background: #1d211d; border-color: var(--кромка); }
.экономия--нет    { background: transparent; border: 1px dashed #2d322c; }
.экономия__крупно { font: 600 1.06rem/1.15 "IBM Plex Sans", sans-serif; color: var(--выгода); }
.экономия--дорого .экономия__крупно { color: var(--дорого); }
.экономия--ровно .экономия__крупно,
.экономия--нет .экономия__крупно { color: var(--тусклый); font-size: .88rem; font-weight: 500; }
.экономия__мелко { margin-top: 3px; font: 500 .73rem "IBM Plex Mono", monospace; color: #7e857d; }

.шкала { margin-top: 8px; }
.шкала__путь { position: relative; height: 6px; border-radius: 3px;
               background: linear-gradient(90deg, #1c4a31 0%, #2b302a 50%, #46301f 100%); }
.шкала__центр { position: absolute; left: 50%; top: -3px; width: 1px; height: 12px; background: #5a615a; }
.шкала__бегунок { position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%;
                  transform: translate(-50%, -50%); background: var(--выгода);
                  border: 2px solid var(--плита); box-shadow: 0 0 0 1px rgba(53,208,127,.5); }
.шкала__бегунок--дорого { background: var(--дорого); box-shadow: 0 0 0 1px rgba(232,132,90,.5); }
.шкала__бегунок--ровно { background: #8b928a; box-shadow: none; }
.шкала__подписи { display: flex; justify-content: space-between; margin-top: 5px;
                  font: 500 .68rem "IBM Plex Mono", monospace; color: #6e756d; }
.оговорка { margin: 6px 0 0; font-size: .73rem; color: var(--дорого); line-height: 1.4; }

@media (max-width: 560px) {
  .лента--плитки { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .лента--плитки .сумма { font-size: 1.02rem; }
  .лента--плитки .титул { font-size: .86rem; }
  .лента--плитки .строка { font-size: .72rem; }
  .полоса { padding: 8px 10px; font-size: .74rem; }
  .полоса small { display: none; }
  .лента--список .карточка { grid-template-columns: 108px minmax(0, 1fr); gap: 10px; }
  .лента--крупно { grid-template-columns: 1fr; }
  .лента--крупно .кадр { aspect-ratio: 16/9; }
}