/* ==========================================================================
   Gizmoll · Карточка тендера в ленте · tender-card.css · v7
   Путь: /css/tender-card.css
   Подключать ОДИН раз в <head> шаблонов страниц доски объявлений:
   <link type="text/css" rel="stylesheet" href="/css/tender-card.css?v=7" />
   Скриптом НЕ подключается.
   ========================================================================== */

.tc-wrap{
  container-type:inline-size;
  position:relative;
  width:100%;
}

/* ============================ КАРТОЧКА ============================ */
.tc-card{
  --tc-cat:#67838b;
  --st-fg:#6b7a83; --st-bg:#f4f6f7; --st-bd:#e2e7ea;
  --tc-photo:250px;   /* ширина фото; оно квадратное, высота равна ширине */

  position:relative;
  display:block;
  width:100%;
  background:#fff;
  border:1px solid #e9ecef;
  border-radius:18px;
  color:#141b1f;
  text-decoration:none;
  overflow:hidden;
  font-family:"Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.tc-card,.tc-card *,.tc-card *::before,.tc-card *::after{box-sizing:border-box}
.tc-card:hover{border-color:#dfe4e8;box-shadow:0 12px 28px -16px rgba(20,27,31,.24);text-decoration:none}
.tc-card:focus-visible{outline:2px solid #029cf2;outline-offset:2px}

/* «чёлка» — верхний бордер цветом категории */
.tc-card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;z-index:4;
  background:var(--tc-cat);opacity:.55;transition:opacity .3s ease;
}
.tc-card:hover::before{opacity:1}

/* палитра статусов */
.tc-card[data-status="open"]     {--st-fg:#0a8f4f;--st-bg:#f0f9f3;--st-bd:#d3ecdc}
.tc-card[data-status="kp"]       {--st-fg:#0a72ab;--st-bg:#eff7fd;--st-bd:#d2e7f7}
.tc-card[data-status="winner"]   {--st-fg:#6d3fae;--st-bg:#f6f2fc;--st-bd:#e3d7f5}
.tc-card[data-status="done"]     {--st-fg:#6b7a83;--st-bg:#f4f6f7;--st-bd:#e2e7ea}
.tc-card[data-status="cancelled"]{--st-fg:#a83a3a;--st-bg:#fdf2f2;--st-bd:#f0d4d4}
.tc-card[data-status="hidden"]   {--st-fg:#6b7a83;--st-bg:#f4f6f7;--st-bd:#e2e7ea}

/* ============================ СЕТКА ============================ */
.tc-body{
  display:grid;
  grid-template-columns:var(--tc-photo) minmax(0,1fr);
  gap:14px;
  padding:14px 16px 12px;
}
.tc-card.tc-nophoto .tc-body{grid-template-columns:minmax(0,1fr)}

/* ============================ ФОТО ============================ */
.tc-photo{
  position:relative;
  align-self:start;   /* НЕ тянем на всю высоту — иначе фото становится узкой полосой */
  width:100%;
  aspect-ratio:1/1;   /* квадрат: высота равна ширине колонки */
  border-radius:12px;overflow:hidden;background:#e8ecee;
}
.tc-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* ВНИЗУ ФОТО, левый угол: сначала дата размещения, правее — просмотры (гр.4).
   Правый нижний угол — счётчик фото. */
.tc-pbl{position:absolute;left:7px;bottom:7px;z-index:3;display:flex;gap:5px;align-items:center}
.tc-pbadge{
  display:inline-flex;align-items:center;gap:5px;
  height:21px;padding:0 8px;border-radius:999px;
  background:rgba(16,23,27,.64);color:#fff;
  font-size:10.5px;font-weight:700;line-height:1;
  backdrop-filter:blur(3px);white-space:nowrap;
}
.tc-pbadge i{font-size:10px;line-height:1}
.tc-cnt{position:absolute;right:7px;bottom:7px;z-index:3}
/* дата на фото: фон красит скрипт («Сегодня» зелёный / «Вчера» / дата серая),
   тень — чтобы читалось и на светлом снимке */
.tc-pdate{box-shadow:0 1px 5px rgba(0,0,0,.28)}

/* ============================ КОНТЕНТ ============================ */
.tc-main{min-width:0;display:flex;flex-direction:column}

/* --- 1. ВРЕМЯ РАЗМЕЩЕНИЯ ---
   Две точки вывода: на фото (левый нижний угол, левее просмотров) и строкой
   в тексте. Класс tc-hasphoto ставится шаблоном, когда фото действительно
   выведено, — тогда строка в тексте прячется и дата остаётся одна. */
.tc-card.tc-hasphoto .tc-daterow{display:none}
.tc-daterow{margin-bottom:9px}
.tc-wrap.tc-hasmod .tc-daterow{padding-right:36px}
.tc-when{
  display:inline-block;
  padding:1px 5px 0 5px;
  border-radius:999px;
  background:#667381;color:#fff;
  font-size:12px;line-height:1.5;
  white-space:nowrap;
}
.tc-when i{font-size:11px;margin-right:2px}
/* просмотры в строке даты (карточки без фото) — справа от времени размещения */
.tc-when-reads{margin-left:6px;background:#7b8894}

/* --- 2. ЗАГОЛОВОК --- */
.tc-title{
  margin:0;font-size:24.5px;line-height:1.32;font-weight:800;letter-spacing:-.015em;
  color:#1a2b34;text-transform:none;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  transition:color .3s ease;
}
.tc-card:hover .tc-title{color:#1d6fa5}
.tc-card.tc-seen .tc-title{color:#7d8b93;font-weight:700}
.tc-card.tc-seen:hover .tc-title{color:#5f7378}
.tc-title .break-gm{white-space:normal}

/* --- 3. НОМЕР ТЕНДЕРА --- */
.tc-numline{margin-top:4px;font-size:11.5px;color:#8a9ca3;font-weight:600;letter-spacing:.01em}

/* --- 4. КАТЕГОРИЯ --- */
.tc-cat{
  display:flex;align-items:center;gap:6px;margin-top:5px;
  font-size:12.5px;line-height:1.4;font-weight:600;color:#48565e;
}
.tc-cat i{font-size:12px;color:#8a9ca3;flex:none}
.tc-cat:empty{display:none}

/* --- 5. ТИП ПОМЕЩЕНИЯ · ГОРОД --- */
.tc-sub{
  margin:4px 0 0;font-size:12.5px;line-height:1.45;color:#48565e;
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
}
.tc-sub > * + *::before{content:"·";margin-right:6px;color:#ccd4d9;font-weight:400}
.tc-sub > span:empty{display:none}
.tc-seenmark{display:none;align-items:center;gap:4px;font-size:11px;color:#7c8b94;font-weight:600}
.tc-card.tc-seen .tc-seenmark{display:inline-flex}
.tc-seenmark i{font-size:10px}

/* --- 5b. АДРЕС: голубоватый, с иконкой, под tc-sub ---
   Координаты из $OTHER2$ вырезает скрипт, в DOM остаётся только адрес. */
.tc-addr{
  display:flex;align-items:baseline;gap:6px;
  margin:5px 0 0;min-width:0;
  font-size:12.5px;line-height:1.4;color:#59869c;font-weight:600;
}
.tc-addr[hidden]{display:none}
.tc-addr-ico{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:15px;height:15px;align-self:center;color:#7fb2cc;font-size:12px;
}
.tc-addr-ico i{line-height:1}
.tc-addr-t{min-width:0}

/* с фото: текстовая колонка узкая — адрес в одну строку с многоточием */
.tc-card.tc-hasphoto .tc-addr{font-size:12px;margin-top:4px}
.tc-card.tc-hasphoto .tc-addr-t{
  display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* без фото: колонка широкая, адрес можно в две строки */
.tc-card.tc-nophoto .tc-addr{font-size:13px}

/* --- 6. ФАКТЫ-ЧИПЫ: одинаковые, без hover-перекраски --- */
.tc-facts{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.tc-facts:empty{display:none}
.tc-fact{
  display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;
  border-radius:8px;background:#f4f6f8;border:1px solid #e8ecef;
  font-size:12px;color:#48565e;white-space:nowrap;
}
.tc-fact b{font-weight:700;color:#26333b}
.tc-fact i{font-size:11px;color:#8a9ca3}
.tc-fact svg{width:12px;height:12px;fill:none;stroke:#9aa7ae;stroke-width:2;flex:none}
.tc-fact-quiet{background:#f6f8f9;border-color:#e9ecef;color:#7c8b94;font-weight:700}
.tc-fact-quiet i{color:#8a9ca3}

/* ---- список условий: подпись + значение, выровнены по колонкам ---- */
.tc-conds{
  display:grid;
  grid-template-columns:max-content minmax(0,1fr);
  gap:3px 11px;
  margin-top:9px;
}
.tc-conds:empty{display:none}
/* display:contents — подпись и значение становятся элементами общей сетки,
   поэтому все значения выстраиваются в одну колонку */
.tc-cond.tc-fill.tc-ready{display:contents}
.tc-cond-l{
  font-size:12.5px;line-height:1.45;font-weight:600;color:#8a9ca3;
  white-space:nowrap;
}
.tc-cond-v{
  font-size:12.5px;line-height:1.45;font-weight:600;color:#3d4c55;
  min-width:0;overflow-wrap:break-word;
  display:flex;align-items:flex-start;gap:6px;
}

/* ---- РАСКРЫВАЮЩИЙСЯ БЛОК ПАРАМЕТРОВ ----
   Внутри — чипы (площадь, срок) и список условий: ровно то, что стояло
   от «кв.м» до «Закупает материал». По умолчанию блок РАСКРЫТ, поэтому
   без скрипта ничего не теряется. На узкой карточке скрипт его сворачивает,
   чтобы карточка влезала в экран телефона.
   Плавность — через grid-template-rows: 1fr -> 0fr: высота содержимого
   не измеряется скриптом и не хардкодится, анимация работает при любом
   числе строк и при любом переносе. */
.tc-params{margin-top:9px}
.tc-params-t{
  display:inline-flex;align-items:center;gap:7px;
  height:28px;padding:0 11px;margin:0;
  border-radius:8px;background:#f4f6f8;border:1px solid #e8ecef;cursor:pointer;
  font-family:inherit;font-size:12px;font-weight:700;line-height:1;color:#48565e;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease;
}
.tc-params-t:hover{background:#eef2f5;border-color:#dfe5e9;color:#26333b}
.tc-params-t:focus-visible{outline:2px solid #029cf2;outline-offset:2px}
.tc-params-l{white-space:nowrap}
.tc-params-c{margin-left:auto;display:inline-flex;align-items:center}
.tc-params-t i{font-size:10px;color:#8a9ca3}
.tc-params-n{
  min-width:17px;height:17px;padding:0 4px;border-radius:999px;
  background:#e3e9ed;color:#5b6b74;font-size:10.5px;font-weight:800;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;flex:none;
}
.tc-params-b{display:grid;grid-template-rows:1fr;transition:grid-template-rows .3s ease}
.tc-params-b > .tc-params-i{overflow:hidden;min-height:0}
.tc-params.tc-collapsed .tc-params-b{grid-template-rows:0fr}
.tc-params .tc-facts,.tc-params .tc-conds{margin-top:8px}

/* значок i — как на странице тендера */
.tc-info{
  flex:none;margin-top:2px;
  font-size:12px;line-height:1;color:#9aa7ae;cursor:pointer;
  transition:color .2s ease;
}
.tc-info:hover,.tc-info:focus-visible{color:#029cf2}
.tc-info:focus-visible{outline:2px solid #029cf2;outline-offset:2px;border-radius:50%}

/* всплывашка с пояснениями — одна на страницу, создаёт скрипт */
.tc-pop{
  position:fixed;z-index:9999;width:290px;max-width:calc(100vw - 24px);
  padding:14px 15px;background:#fff;border:1px solid #e6eaee;border-radius:14px;
  box-shadow:0 18px 44px -18px rgba(20,27,31,.42);
  opacity:0;pointer-events:none;transition:opacity .18s ease;
  font-family:"Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  text-align:left;
}
.tc-pop.tc-open{opacity:1;pointer-events:auto}
.tc-pop-t{
  margin:0 0 10px;font-size:13px;font-weight:800;color:#1a2b34;line-height:1.3;
  padding-right:22px;
}
.tc-pop-x{
  position:absolute;top:9px;right:9px;width:24px;height:24px;padding:0;
  border:0;border-radius:7px;background:#f2f5f7;color:#7c8b94;cursor:pointer;
  font-size:15px;line-height:1;display:flex;align-items:center;justify-content:center;
  transition:background-color .2s ease,color .2s ease;
}
.tc-pop-x:hover{background:#e6ebee;color:#26333b}
.tc-pop-i{padding:7px 9px;border-radius:9px;margin:0 -4px}
.tc-pop-i + .tc-pop-i{margin-top:2px}
.tc-pop-i.tc-cur{background:#eff7fd}
.tc-pop-n{font-size:12.5px;font-weight:800;color:#26333b;line-height:1.35}
.tc-pop-i.tc-cur .tc-pop-n{color:#0a72ab}
.tc-pop-d{margin-top:2px;font-size:11.5px;font-weight:400;color:#5c6b73;line-height:1.5}

.tc-fill{display:none}
.tc-fill.tc-ready{display:inline-flex}
.tc-sub .tc-fill.tc-ready{display:inline}

/* --- 7. СТАТУС ТЕНДЕРА ---
   Отдельный блок, но шрифт заметно меньше заголовка:
   иерархия «заголовок → статус» должна читаться однозначно */
/* ---- РЯД: СТАТУС + ПРОГРЕСС-БАР ПО 50% ----
   Модификатор задаёт шаблон: tc-mid-2 — оба блока, tc-mid-1 — только статус.
   На узком экране колонки схлопываются, блоки встают друг под друга. */
.tc-mid{display:grid;gap:10px;align-items:stretch;padding:0 16px 11px}
.tc-mid-1{grid-template-columns:minmax(0,1fr)}
.tc-mid-2{grid-template-columns:repeat(2,minmax(0,1fr))}

.tc-status{
  margin-top:0;padding:8px 11px;border-radius:12px;min-width:0;
  background:var(--st-bg);border:1px solid var(--st-bd);
  display:flex;align-items:flex-start;gap:9px;
}
.tc-sdot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--st-fg);margin-top:4px}
.tc-card[data-status="open"] .tc-sdot{animation:tcPulse 2.2s ease-in-out infinite}
@keyframes tcPulse{0%,100%{opacity:1}50%{opacity:.3}}
@media (prefers-reduced-motion:reduce){.tc-card[data-status="open"] .tc-sdot{animation:none}}

.tc-stxt{min-width:0;flex:1}
.tc-smain{
  font-size:12.5px;line-height:1.4;font-weight:700;color:var(--st-fg);
  overflow-wrap:break-word;
}
.tc-smain .tc-until{font-weight:600;opacity:.75}
.tc-smain .tc-date{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;opacity:.95}
.tc-sres{
  display:flex;align-items:center;gap:6px;
  font-size:12.5px;line-height:1.4;font-weight:700;color:var(--st-fg);
}
.tc-sres i{font-size:12px}
.tc-ssub{margin-top:1px;font-size:11px;color:#7c8b94;font-weight:600}

/* Отсчёт до дедлайна — пилюля в блоке статуса, видна всё время подачи
   (формат: «осталось 2 д 4 ч», в последние сутки — почасово). */
.tc-cd{
  display:none;margin-top:6px;
  padding:2px 8px;border-radius:8px;
  background:#eafaf1;border:1px solid #a8e6c1;color:#1e7e46;
  font-size:11px;line-height:1.6;font-weight:800;
  font-variant-numeric:tabular-nums;letter-spacing:.01em;
}
.tc-cd.tc-on{display:inline-block}
.tc-cd i{font-size:10px;margin-right:4px}
.tc-cd.tc-cd-warn{background:#fff9e6;border-color:#ffe0a3;color:#9a6700}
.tc-cd.tc-cd-hot{background:#fff5f5;border-color:#f5c6c6;color:#c0392b}

/* --- 8. ПРОГРЕСС-БАР ---
   Дизайн в стиле карточки, без цветного левого бордера.
   Иконки — Font Awesome, как в вашем скрипте; тексты и пороги не изменены. */
/* Блок виден по умолчанию: два блока на десктопе не должны зависеть от JS.
   Скрывается только классом tc-off (нет лимита или слоты заняты). */
.tc-progress{
  display:block;margin-top:0;padding:8px 11px;min-width:0;
  background:#f8fafb;border:1px solid #edf1f3;border-radius:12px;
}
.tc-progress.tc-off{display:none}
.tc-progress.tc-on{display:block}
.tc-progress-head{display:flex;align-items:center;margin-bottom:6px}
.tc-progress-count{font-size:12.5px;font-weight:700;color:#1e293b;line-height:1.25;margin:0}
.tc-progress-track{height:6px;border-radius:999px;background:#e6ebee;overflow:hidden}
.tc-progress-bar{
  height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,#10B981,#34D399);
  transition:width .5s ease;
}

/* ============================ ПОДВАЛ: цена + кнопка ============================ */
.tc-foot{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  border-top:1px solid #f1f3f5;background:#fcfdfd;padding:10px 16px;
  transition:background-color .3s ease;
}
.tc-card:hover .tc-foot{background:#f9fbfc}
.tc-card[data-status="done"] .tc-foot,
.tc-card[data-status="cancelled"] .tc-foot,
.tc-card[data-status="hidden"] .tc-foot{background:#f7f9fa}

.tc-money{min-width:0}
.tc-mval{
  font-size:21px;line-height:1.14;font-weight:800;letter-spacing:-.03em;color:#12212a;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.tc-mval .output-field{font-size:13px;font-weight:700;color:#7c8b94;letter-spacing:0}
.tc-mval.tc-talk{font-size:15.5px;color:#7c8b94;font-weight:700;letter-spacing:-.01em;white-space:normal}
.tc-msub{margin-top:2px;font-size:11.5px;color:#48565e;line-height:1.35}
.tc-msub b{color:#0a7f6b;font-weight:700}
.tc-msub:empty{display:none}

.tc-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:none;
  height:42px;padding:0 22px;border-radius:999px;
  background:#029cf2;border:0;color:#fff !important;
  font-size:13.5px;font-weight:700;line-height:1;text-decoration:none;
  white-space:nowrap;cursor:pointer;transition:background-color .24s ease;
}
.tc-btn:hover{background:#0288d2;color:#fff !important;text-decoration:none}
.tc-btn i{font-size:12px}
.tc-btn-ghost{
  background:transparent;color:#029cf2 !important;border:1.5px solid #c3e2f7;
  transition:background-color .24s ease,border-color .24s ease,color .24s ease;
}
.tc-btn-ghost:hover{background:#f0f8fd;border-color:#029cf2;color:#0288d2 !important}
.tc-btn-sm{height:36px;padding:0 18px;font-size:12.5px}

/* завершённые и отменённые приглушены, данные на месте */
.tc-card[data-status="done"],
.tc-card[data-status="cancelled"],
.tc-card[data-status="hidden"]{background:#fcfdfd}
.tc-card[data-status="done"] .tc-title,
.tc-card[data-status="cancelled"] .tc-title,
.tc-card[data-status="hidden"] .tc-title{color:#5a6a73}
.tc-card[data-status="done"]:hover .tc-title,
.tc-card[data-status="cancelled"]:hover .tc-title{color:#3f5560}
.tc-card[data-status="cancelled"]{border-color:#f0dcdc}
.tc-card[data-status="hidden"]{opacity:.72}
.tc-card[data-status="done"]::before,
.tc-card[data-status="cancelled"]::before,
.tc-card[data-status="hidden"]::before{opacity:.28}

/* ============================ АДМИНКА: три точки ============================
   Системная панель uCoz спрятана, но остаётся в DOM — из неё берутся
   настоящие ссылки и обработчики, включая hash удаления */
.tc-modsys{
  position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.tc-modbtn{
  position:absolute;top:9px;right:9px;z-index:6;
  width:30px;height:30px;padding:0;border:0;border-radius:99px;cursor:pointer;
  background:rgba(255,255,255,.94);
  display:none;align-items:center;justify-content:center;
  color:#2d3e50;font-size:14px;line-height:1;backdrop-filter:blur(4px);
  transition:background-color .22s ease,color .22s ease;
}
.tc-wrap.tc-hasmod .tc-modbtn{display:flex}
.tc-modbtn:hover,.tc-modbtn.tc-open{background:#f5f5f5;color:#2d3e50}

/* всплывающее меню — одно на страницу, создаёт скрипт */
.tc-menu{
  position:fixed;z-index:9999;min-width:220px;padding:6px;
  background:#fff;border:1px solid #e6eaee;border-radius:14px;
  box-shadow:0 18px 44px -18px rgba(20,27,31,.42);
  opacity:0;pointer-events:none;transition:opacity .18s ease;
  font-family:"Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
.tc-menu.tc-open{opacity:1;pointer-events:auto}
.tc-menu-t{
  padding:7px 10px 8px;font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:#8a9ca3;font-weight:800;border-bottom:1px solid #f1f3f5;margin-bottom:5px;
}
.tc-menu-i{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:9px 10px;border:0;border-radius:10px;background:none;cursor:pointer;
  font:inherit;font-size:13.5px;font-weight:600;color:#26333b;text-align:left;
  text-decoration:none;transition:background-color .18s ease,color .18s ease;
}
.tc-menu-i:hover{background:#f2f6f9;color:#0288d2;text-decoration:none}
.tc-menu-i i{width:17px;font-size:14px;text-align:center;color:#7c8b94;flex:none;
  transition:color .18s ease}
.tc-menu-i svg{width:17px;height:17px;flex:none;color:#7c8b94;transition:color .18s ease}
.tc-menu-i:hover i,.tc-menu-i:hover svg{color:#029cf2}
.tc-menu-i.tc-danger{color:#b83a3a}
.tc-menu-i.tc-danger:hover{background:#fdf3f3;color:#a02c2c}
.tc-menu-i.tc-danger i,.tc-menu-i.tc-danger svg{color:#cf6a6a}
.tc-menu-i.tc-danger:hover i,.tc-menu-i.tc-danger:hover svg{color:#b83a3a}
.tc-menu-sep{height:1px;background:#f1f3f5;margin:5px 4px}

/* ============================ АДАПТИВ ============================
   По ширине КАРТОЧКИ, а не вьюпорта: карточка живёт в колонке ~600px
   при вьюпорте 1400px, поэтому @media измеряет не то. */
@container (max-width:520px){
  /* фото сверху, full-bleed — без боковых отступов и скругления */
  .tc-body{grid-template-columns:minmax(0,1fr);gap:0;padding:0}
  .tc-photo{
    order:-1;width:100%;align-self:auto;
    aspect-ratio:4/3;max-height:240px;border-radius:0;
  }
  /* СТАТУС + ПРОГРЕСС-БАР — ОДИН компактный блок, а не два отдельных.
     Подложку, рамку и скругление берёт на себя .tc-mid (цвет подложки —
     от статуса, var(--st-bg) наследуется с карточки), у вложенных блоков
     свои фон/рамка/отступы снимаются, между ними остаётся тонкая линия.
     Когда прогресс-бара нет, блок выглядит как обычный статус. */
  .tc-mid.tc-mid-1,.tc-mid.tc-mid-2{grid-template-columns:minmax(0,1fr);gap:0}
  .tc-mid{
    margin:0 13px 10px;padding:8px 11px;
    background:var(--st-bg);border:1px solid var(--st-bd);border-radius:12px;
  }
  .tc-mid .tc-status{background:none;border:0;border-radius:0;padding:0}
  .tc-mid .tc-progress{
    background:none;border:0;border-radius:0;
    margin-top:8px;padding:8px 0 0;border-top:1px solid var(--st-bd);
  }
  .tc-mid .tc-progress-track{background:rgba(20,27,31,.1)}

  .tc-main{padding:11px 13px 10px}
  .tc-params{margin-top:8px}
  .tc-params-t{width:100%;height:32px;padding:0 12px;font-size:12.5px}
  /* кнопка три точки теперь поверх фото — отступ у строки даты не нужен */
  .tc-wrap.tc-hasmod .tc-daterow{padding-right:0}
  .tc-daterow{margin-bottom:8px}
  /* заголовок крупнее и с полным переносом — не обрезаем на 2 строках */
  .tc-title{
    font-size:18.5px;line-height:1.34;
    display:block;-webkit-line-clamp:unset;overflow:visible;
    overflow-wrap:break-word;word-break:normal;hyphens:auto;
  }
  .tc-fact{height:27px;font-size:12.5px;padding:0 10px}
  .tc-conds{gap:4px 10px}
  .tc-cond-l,.tc-cond-v{font-size:13px}
  .tc-smain,.tc-sres{font-size:13.5px}
  .tc-cd{font-size:12px}

  /* подвал колонкой: цена своей строкой, кнопка во всю ширину */
  .tc-foot{flex-direction:column;align-items:stretch;gap:9px;padding:10px 13px}
  .tc-money{width:100%}
  .tc-btn{width:100%;height:44px}
  .tc-mval{font-size:22px}
  .tc-mval.tc-talk{font-size:16.5px}
}

@container (max-width:400px){
  .tc-main{padding:10px 12px 9px}
  .tc-title{font-size:18.5px;line-height:1.36}
  .tc-cat{font-size:13.5px}
  .tc-sub{font-size:13.5px}
  .tc-addr{font-size:13px}
  .tc-card.tc-hasphoto .tc-addr{font-size:12.5px}
  .tc-smain,.tc-sres{font-size:13px}
  .tc-mval{font-size:21px}
  .tc-mval.tc-talk{font-size:16px}
  .tc-foot{padding:10px 12px;gap:9px}
  .tc-numline{font-size:12.5px}
  .tc-cond-l,.tc-cond-v{font-size:13.5px}
  .tc-ssub{font-size:12px}
  .tc-msub{font-size:12.5px}
  .tc-progress-count{font-size:13px}
  .tc-photo{max-height:210px}
  .tc-mid{margin:0 12px 9px;padding:8px 10px}
}

@container (max-width:340px){
  .tc-title{font-size:18px}
  .tc-fact{height:26px;font-size:12px;padding:0 9px}
  .tc-conds{display:flex;flex-direction:column;gap:4px}
  .tc-cond.tc-fill.tc-ready{display:flex;flex-wrap:wrap;gap:0 5px;align-items:baseline}
  .tc-cond-l{white-space:normal}
  .tc-cond-l::after{content:":"}
  .tc-smain,.tc-sres{font-size:12.5px}
  .tc-photo{max-height:180px}
  .tc-btn{padding:0 14px}
}