/* ============================================================================
   contests-public-v2.css — плиточный рендер акций (Этап 4).
   Scoped строго под .contests-page / .contests-grid / .cc-card / .cc-modal.
   Тема-aware через токены дизайн-системы (--ds-*): dark = дефолт, light переопределяет.
   RWD: резиновый Grid + clamp(); брейкпоинты через @container (ширина самой страницы).
   ============================================================================ */

.contests-page{
  --cc-radius:var(--ds-r-18,18px);
  --cc-gap:clamp(12px, 2.4vw, 18px);
  --cc-pad:clamp(12px, 2vw, 16px);
  --cc-purple:#8b5cf6;
  --cc-purple-bg:rgba(139,92,246,.12);
  --cc-purple-bd:rgba(139,92,246,.34);
  /* «-ink» = семантика КАК ТЕКСТ. Dark-first: яркие токены читаемы на тёмном.
     В светлой теме те же цвета текстом тонут на белом → затемнённые варианты ниже. */
  --cc-ok-ink:var(--ds-ok);
  --cc-warn-ink:var(--ds-warn);
  --cc-purple-ink:var(--cc-purple);
  /* Разделитель meta + danger + цвета статус-чипов (dark по умолчанию) */
  --cc-line:var(--ds-panel-bd);
  --cc-danger:#ff6b70;
  --cc-st-ok-fg:var(--ds-ok);      --cc-st-ok-bg:var(--ds-ok-bg);       --cc-st-ok-bd:var(--ds-ok-bd);
  --cc-st-warn-fg:var(--ds-warn);  --cc-st-warn-bg:var(--ds-warn-bg);   --cc-st-warn-bd:var(--ds-warn-bd);
  --cc-st-fin-fg:#ff6b70;          --cc-st-fin-bg:rgba(220,65,72,.16);  --cc-st-fin-bd:rgba(220,65,72,.36);
  --cc-st-part-fg:#a98bff;         --cc-st-part-bg:var(--cc-purple-bg); --cc-st-part-bd:var(--cc-purple-bd);
  container-type:inline-size;
  container-name:contests;
  width:100%;
  max-width:none;            /* 4.1: без искусственного центрального кэпа — вся ширина main */
  min-width:0;
  margin:0;
  padding:clamp(12px,1.4vw,20px) 8px 32px;  /* 4.4: боковой отступ 8px (+ shell 12px = 20px), как full-width */
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  gap:var(--cc-gap);
}
/* Светлая тема: затемнённая семантика-как-текст (контраст ≥ AA на белом) + пастельные чипы. */
:root[data-theme="light"] .contests-page{
  --cc-ok-ink:#1a8f52;
  --cc-warn-ink:#a8730a;
  --cc-purple-ink:#6d3fd4;
  --cc-line:rgba(16,22,32,.10);
  --cc-danger:#dc4148;
  --cc-st-ok-fg:#258c43;   --cc-st-ok-bg:#e7f8eb;   --cc-st-ok-bd:rgba(37,140,67,.16);
  --cc-st-warn-fg:#b56b00; --cc-st-warn-bg:#fff1d6; --cc-st-warn-bd:rgba(181,107,0,.18);
  --cc-st-fin-fg:#dc4148;  --cc-st-fin-bg:#ffe9ea;  --cc-st-fin-bd:rgba(220,65,72,.16);
  --cc-st-part-fg:#7047d7; --cc-st-part-bg:#f0e9ff; --cc-st-part-bd:rgba(112,71,215,.16);
}

/* ── Фильтры (единственный заголовок «Акции» — в закреплённой полосе shell) ── */
.contests-page__header{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:clamp(8px, 1.6vw, 14px);
  width:100%;
  min-width:0;
}
.contests-filters{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  min-width:0;
}
.contests-filter{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:36px;
  height:36px;
  padding:6px 14px;
  border-radius:var(--ds-r-pill,999px);
  border:1px solid var(--ds-btn-bd);
  background:var(--ds-btn-bg);
  color:var(--ds-btn-fg);
  font-size:12px;
  line-height:1;
  font-weight:500;
  cursor:pointer;
  transition:background var(--ds-dur,.15s), color var(--ds-dur,.15s), border-color var(--ds-dur,.15s);
}
.contests-filter:hover{ background:var(--ds-btn-bg-hover); color:var(--ds-btn-fg-hover); border-color:var(--ds-btn-bd-hover); }
.contests-filter.is-active{
  background:var(--ds-btn-bg-active);
  color:var(--ds-btn-fg-active);
  border-color:var(--ds-btn-bd-active);
}
.contests-filter:focus-visible{ outline:none; box-shadow:var(--ds-focus-ring); }
.contests-filter__count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:20px;
  height:20px;
  padding:0 6px;
  border-radius:999px;
  background:rgba(127,127,127,.18);
  font-size:11px;
  font-weight:600;
  line-height:1;
}
.contests-filter.is-active .contests-filter__count{ background:rgba(245,135,46,.22); }

/* ── Сетка плиток ── */
.contests-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
  align-items:stretch;
  min-width:0;
}
.cc-card[hidden]{ display:none !important; }

/* ── Карточка ── горизонтальная, широкая (референс): медиа ~40%, инфо ~60% ── */
.cc-card{
  display:grid;
  grid-template-columns:minmax(250px, 40%) minmax(0, 1fr);
  min-height:426px;              /* 4.4: сохраняем прежнюю высоту (~426), кнопки компактнее */
  height:100%;
  overflow:hidden;
  border-radius:var(--cc-radius);
  border:1px solid var(--ds-panel-bd);
  background:var(--ds-panel);
  box-shadow:var(--ds-shadow-1);
  min-width:0;
}
.cc-card--participating{ border-color:var(--cc-purple-bd); }
/* Ф5 5Б.15 §8: временная подсветка акции при переходе из поста ленты (?highlight=<id>).
   Оранжевое кольцо с мягким пульсом, затухает за ~4с (класс снимается в JS). scroll-margin —
   чтобы scrollIntoView(center) не прятал карточку под липкую шапку. */
.cc-card{ scroll-margin:88px; }
.cc-card--highlight{ animation:ccCardHighlight 4s ease-out 1; }
@keyframes ccCardHighlight{
  0%,55%{ box-shadow:0 0 0 3px var(--ds-link-brand,#f5751a), 0 12px 34px rgba(245,117,26,.30); }
  100%  { box-shadow:0 0 0 0 rgba(245,117,26,0), var(--ds-shadow-1); }
}

/* Медиа — на всю высоту карточки */
.cc-card__media{
  position:relative;
  overflow:hidden;
  background:var(--ds-panel-2);
  min-width:0;
  height:100%;
}
/* Картинка вне потока — не диктует высоту карточки (её задаёт тело, ~426px). */
.cc-card__picture{ position:absolute; inset:0; width:100%; height:100%; }
.cc-card__image{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
/* Ф5 5Б.15.1 §11-13: state-картинки (недоступна/завершена) — ГОТОВЫЙ дизайн с логотипом внизу.
   cover+center срезал НИЗ (название пропадало); contain делал картинку узкой (боковые поля).
   Решение: cover (заполняет слот целиком, без полей) + привязка к НИЗУ (object-position bottom) —
   нижнее «clike.ru» видно, обрезается только пустой верх. Обычная обложка (--normal) = cover:center. */
.cc-card__media--unavailable .cc-card__image,
.cc-card__media--finished .cc-card__image{ object-fit:cover; object-position:center bottom; }
.cc-card__image--placeholder{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  /* Тёмный графит + мягкое оранжевое свечение (без серого слова CLIKE). */
  background:
    radial-gradient(120% 90% at 50% 20%, rgba(245,135,46,.22), transparent 60%),
    linear-gradient(160deg, #1c1d21, #0e0f12);
}
.cc-card__ph-logo{
  width:min(62%, 170px);
  height:auto;
  opacity:.96;
  filter:drop-shadow(0 4px 14px rgba(245,135,46,.25));
}
/* 4.5: заготовленные картинки состояний уже оформлены — grayscale/saturate НЕ применяем. */

.cc-card__featured{
  position:absolute;
  top:8px; left:8px;
  display:inline-flex;
  align-items:center;
  gap:3px;
  padding:3px 8px;
  border-radius:999px;
  background:var(--ds-brand-2);
  color:#1c1206;
  font-size:11px;
  font-weight:700;
  box-shadow:0 2px 8px rgba(0,0,0,.2);
}
.cc-card__featured svg{ width:12px; height:12px; }

/* Контент — единый каркас; кнопка прижата вниз, блоки держат высоту */
.cc-card__body{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:var(--cc-pad);
  min-width:0;
  min-height:100%;
}
.contest-status{
  display:inline-flex;
  align-items:center;
  gap:5px;
  align-self:flex-start;
  max-width:100%;
  min-height:26px;
  padding:3px 11px 3px 8px;
  border-radius:999px;
  font-size:11.5px;
  font-weight:600;
  line-height:1.2;
  border:1px solid transparent;
  white-space:normal;
  box-sizing:border-box;
}
.contest-status__icon{ flex:0 0 auto; width:13px; height:13px; }
.contest-status--available{ color:var(--cc-st-ok-fg); background:var(--cc-st-ok-bg); border-color:var(--cc-st-ok-bd); }
.contest-status--unavailable{ color:var(--cc-st-warn-fg); background:var(--cc-st-warn-bg); border-color:var(--cc-st-warn-bd); }
.contest-status--participating{ color:var(--cc-st-part-fg); background:var(--cc-st-part-bg); border-color:var(--cc-st-part-bd); }
.contest-status--finished{ color:var(--cc-st-fin-fg); background:var(--cc-st-fin-bg); border-color:var(--cc-st-fin-bd); }

.cc-card__title{
  margin:0;
  min-height:44px;
  font-size:clamp(15px, 2.2vw, 17px);
  font-weight:650;
  line-height:1.25;
  color:var(--ds-ink);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.cc-card__desc{
  margin:0;
  min-height:36px;
  font-size:13px;
  line-height:1.4;
  color:var(--ds-muted);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.cc-card__desc--muted{ color:var(--ds-muted-2); font-style:italic; }
/* Мета — организатор ┃ что нужно для участия (§10: ~38% / ~62%, тонкий разделитель) */
.cc-card__meta{
  display:grid;
  grid-template-columns:minmax(118px, 0.82fr) 1px minmax(0, 1.4fr);
  align-items:stretch;
  gap:12px;
  min-height:60px;
  padding:8px 0;
  border-top:1px solid var(--cc-line);
  border-bottom:1px solid var(--cc-line);
  min-width:0;
}
.cc-card__meta-divider{ width:1px; height:100%; min-height:42px; background:var(--cc-line); align-self:center; }
.cc-card__meta-item{ min-width:0; display:flex; flex-direction:column; gap:3px; justify-content:center; }
.cc-card__meta-label{ font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--ds-muted-2); }
.cc-card__req{
  font-size:12.5px; color:var(--ds-ink); font-weight:500; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
/* Организатор: официальный квадратный знак + текст clike.ru (clike оранж, .ru тема-адаптивный) */
.cc-organizer{ display:flex; align-items:center; gap:9px; min-width:0; }
.cc-organizer__logo{ flex:0 0 auto; width:28px; height:28px; border-radius:8px; object-fit:cover; }
.cc-organizer__text{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.cc-organizer__name{ font-size:13px; font-weight:700; letter-spacing:-.01em; line-height:1; color:var(--ds-ink); white-space:nowrap; }
.cc-brand-orange{ color:var(--ds-link-brand); }
.cc-organizer__tld{ color:var(--ds-ink); }

/* Блок-заголовки (условия) */
.cc-card__block{ display:flex; flex-direction:column; gap:4px; }
.cc-card__block-title{ font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--ds-muted-2); }

/* Условия — фиксированная высота на 3 строки */
.contest-conditions{ display:flex; flex-direction:column; gap:4px; }
.contest-condition{
  display:flex;
  align-items:flex-start;
  gap:6px;
  min-height:18px;
  font-size:12px;
  line-height:1.35;
  color:var(--ds-ink);
}
.contest-condition--placeholder{ min-height:18px; }
.contest-condition__icon{
  flex:0 0 auto;
  width:15px; height:15px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  font-size:10px;
  font-weight:700;
  margin-top:1px;
}
.contest-condition.is-ok .contest-condition__icon{ background:var(--ds-ok-bg); color:var(--ds-ok); }
.contest-condition.is-unmet .contest-condition__icon{ background:var(--ds-warn-bg); color:var(--cc-warn-ink); }
.contest-condition.is-unmet .contest-condition__text{ color:var(--cc-warn-ink); }
.contest-condition.is-none{ color:var(--ds-muted); }
.contest-condition.is-none .contest-condition__icon{ color:var(--ds-muted-2); }
.contest-condition__text{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ── Нижняя функциональная зона — три раскладки эталона ── */
.cc-card__booking{ margin-top:auto; display:flex; flex-direction:column; gap:4px; }
/* available / participating: строка состояния справа + [места | кнопка] */
.cc-card__booking--active .cc-card__state-note{ justify-content:flex-end; text-align:right; }
.cc-card__booking-row{
  display:grid;
  grid-template-columns:minmax(105px, 0.72fr) minmax(180px, 1.55fr);
  align-items:end;
  gap:12px;
}
/* unavailable: строка состояния слева + одна широкая кнопка */
.cc-card__booking--wide .cc-card__state-note{ justify-content:flex-start; text-align:left; }
/* finished: [дата | кнопка] в одну строку, без прогресса */
.cc-card__finished-row{
  display:grid;
  grid-template-columns:minmax(120px, 0.82fr) minmax(160px, 1.2fr);
  align-items:center;
  gap:12px;
}
.cc-card__finished-date{ color:var(--cc-danger); font-size:12px; font-weight:700; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Места + прогресс */
.cc-card__places{ min-width:0; display:flex; flex-direction:column; gap:5px; }
.cc-card__places-head{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.cc-card__places-label{ font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:var(--ds-muted-2); font-weight:600; }
.cc-card__places-value{ font-size:13px; font-weight:600; color:var(--ds-ink); white-space:nowrap; }
.cc-card__progress{ height:6px; border-radius:999px; background:rgba(127,127,127,.18); overflow:hidden; }
.cc-card__progress--empty{ background:rgba(127,127,127,.10); }
.cc-card__progress-fill{ display:block; height:100%; border-radius:999px; background:var(--ds-brand-2); transition:width var(--ds-dur,.15s); }
.cc-card__places.is-finished .cc-card__progress-fill{ background:var(--ds-muted-2); }

/* Строка состояния — фикс. высота, иконка+текст, БЕЗ бейджа/номеров */
.cc-card__state-note{
  min-width:0;
  min-height:18px;
  display:flex;
  align-items:center;
  gap:5px;
  font-size:11.5px;
  font-weight:700;
  line-height:1.2;
}
.cc-card__note-icon{ flex:0 0 auto; width:13px; height:13px; }
.cc-card__note-text{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cc-card__state-note--available{ color:var(--cc-st-ok-fg); }
.cc-card__state-note--unavailable{ color:var(--cc-st-warn-fg); }
.cc-card__state-note--participating{ color:var(--cc-st-part-fg); }
.cc-card__state-note--finished{ color:var(--cc-danger); }

/* Кнопка — компактная (§5), одинаковой высоты, во всю ширину своей колонки */
.cc-card__action-wrap{ min-width:0; }
.cc-card__action{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  width:100%;
  min-height:38px;
  padding:7px 14px;
  box-sizing:border-box;
  border-radius:10px;
  border:1px solid transparent;
  font-size:12px;
  font-weight:600;
  line-height:1;
  cursor:pointer;
  text-decoration:none;
  transition:filter var(--ds-dur,.15s), background var(--ds-dur,.15s), opacity var(--ds-dur,.15s);
}
.cc-card__action-icon{ flex:0 0 auto; width:15px; height:15px; }
.cc-card__action:focus-visible{ outline:none; box-shadow:var(--ds-focus-ring); }
.cc-card__action--primary{
  background:var(--ds-brand-grad);
  color:#fff;
  box-shadow:0 4px 14px rgba(245,135,46,.28);
}
.cc-card__action--primary:hover{ filter:brightness(1.05); }
.cc-card__action--go{
  background:var(--ds-btn-bg-active);
  color:var(--ds-btn-fg-active);
  border-color:var(--ds-btn-bd-active);
}
.cc-card__action--go:hover{ filter:brightness(1.06); }
.cc-card__action--ghost{
  background:var(--cc-purple-bg);
  color:var(--cc-purple-ink);
  border-color:var(--cc-purple-bd);
}
.cc-card__action--disabled{
  background:var(--ds-btn-bg);
  color:var(--ds-muted-2);
  border-color:var(--ds-btn-bd);
  cursor:not-allowed;
  opacity:.9;
}
.cc-card__action.is-busy{ opacity:.6; pointer-events:none; }

/* ── Правовая строка под сеткой ── */
.contests-legal{
  margin:6px auto 0;
  max-width:720px;
  text-align:center;
  font-size:12px;
  line-height:1.5;
  color:var(--ds-muted);
}
.contests-legal__link{ color:var(--ds-link); text-decoration:none; }
.contests-legal__link:hover{ text-decoration:underline; }

/* ── Пустое состояние ── */
.contests-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  text-align:center;
  padding:clamp(28px, 6vw, 56px) 16px;
  border-radius:var(--cc-radius);
  border:1px dashed var(--ds-panel-bd);
  background:var(--ds-panel-soft);
}
.contests-empty[hidden]{ display:none; }
.contests-empty__title{ margin:0; font-size:16px; font-weight:600; color:var(--ds-ink); }
.contests-empty__text{ margin:0; font-size:13px; color:var(--ds-muted); max-width:440px; }

/* ── Модалка выбора стикера ── */
.cc-modal{
  position:fixed;
  inset:0;
  z-index:var(--ds-z-modal,500);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  padding-bottom:calc(16px + env(safe-area-inset-bottom));
}
.cc-modal[hidden]{ display:none; }
.cc-modal__scrim{ position:absolute; inset:0; background:var(--ds-scrim-strong,rgba(0,0,0,.5)); }
.cc-modal__dialog{
  position:relative;
  width:min(460px, 100%);
  max-height:min(84vh, 640px);
  display:flex;
  flex-direction:column;
  border-radius:var(--ds-r-16,16px);
  border:1px solid var(--ds-panel-bd);
  background:var(--ds-panel);
  box-shadow:var(--ds-shadow-2);
  overflow:hidden;
}
.cc-modal__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:14px 16px;
  border-bottom:1px solid var(--ds-panel-bd);
}
.cc-modal__title{ margin:0; font-size:15px; font-weight:650; color:var(--ds-ink); }
.cc-modal__close{
  flex:0 0 auto;
  width:40px; height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid var(--ds-btn-bd);
  background:var(--ds-btn-bg);
  color:var(--ds-btn-fg);
  font-size:18px;
  cursor:pointer;
}
.cc-modal__close:hover{ background:var(--ds-btn-bg-hover); color:var(--ds-btn-fg-hover); }
.cc-modal__close:focus-visible{ outline:none; box-shadow:var(--ds-focus-ring); }
.cc-modal__list{
  padding:12px;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.cc-choice{
  display:grid;
  grid-template-columns:56px minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  padding:10px;
  border-radius:var(--ds-r-12,12px);
  border:1px solid var(--ds-panel-bd);
  background:var(--ds-panel-2);
}
.cc-choice__img{
  width:56px; height:56px;
  border-radius:10px;
  object-fit:cover;
  background:var(--ds-panel-3);
}
.cc-choice__img--empty{ display:flex; align-items:center; justify-content:center; color:var(--ds-muted-2); font-size:11px; }
.cc-choice__info{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.cc-choice__name{ font-size:13px; font-weight:600; color:var(--ds-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cc-choice__collection{ font-size:11.5px; color:var(--ds-muted); }
.cc-choice__stats{ font-size:11.5px; color:var(--ds-muted); }
.cc-choice__badge{
  display:inline-block;
  padding:1px 7px;
  border-radius:999px;
  background:var(--ds-brand-2);
  color:#1c1206;
  font-size:10.5px;
  font-weight:700;
  margin-left:6px;
}
.cc-choice__pick{
  flex:0 0 auto;
  min-height:40px;
  padding:0 16px;
  border-radius:999px;
  border:1px solid var(--ds-btn-bd-active);
  background:var(--ds-btn-bg-active);
  color:var(--ds-btn-fg-active);
  font-size:12.5px;
  font-weight:600;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
}
.cc-choice__pick:hover{ filter:brightness(1.06); }
.cc-choice__pick:focus-visible{ outline:none; box-shadow:var(--ds-focus-ring); }

/* ============================================================================
   RWD — @container (ширина .contests-page). 2 плитки → 1; горизонталь → стек.
   ============================================================================ */
/* 2 плитки в ряд, пока две полноценные помещаются; ниже — одна колонка (горизонтальная карта). */
@container contests (max-width: 880px){
  .contests-grid{ grid-template-columns:minmax(0, 1fr); }
}
/* Карта в стек (фото сверху) — по ВЬЮПОРТУ ≤900px, СИНХРОННО с <picture media="(max-width:900px)">.
   Раньше стек шёл через @container (≤560): при боковом меню Layout 2.0 это соответствует ~768px
   вьюпорта, а <picture> (только viewport) переключался на 600 → на планшете широкий слот получал
   вертикальную картинку. Теперь единый порог: ≤900 = стек + горизонтальная картинка (gorizontal_*),
   >900 = фото слева + вертикальная (verlikal_*). Десктоп (>900) по высоте не меняется. */
@media (max-width: 900px){
  .contests-page .cc-card{ grid-template-columns:1fr; min-height:0; }
  .contests-page .cc-card__media{ min-height:0; height:auto; aspect-ratio:16/9; }
  .contests-page .cc-card__picture{ height:100%; }
  .contests-page .cc-card__image{ min-height:0; height:100%; }
  .contests-page .cc-card__image--placeholder{ min-height:0; aspect-ratio:16/9; }
  .contests-page .cc-card__body{ min-height:0; }
}
@container contests (max-width: 460px){
  .cc-card__meta{ grid-template-columns:1fr; gap:8px; min-height:0; }
  .cc-card__meta-divider{ display:none; }
  /* Нижняя зона в стек: места/дата сверху, кнопка во всю ширину снизу */
  .cc-card__booking-row{ grid-template-columns:1fr; gap:8px; }
  .cc-card__finished-row{ grid-template-columns:1fr; gap:8px; }
  .cc-card__booking--active .cc-card__state-note{ justify-content:flex-start; text-align:left; }
  .cc-card__action{ min-height:40px; }
}
@container contests (max-width: 420px){
  .contests-filters{ width:100%; }
}

/* Фолбэк для браузеров без container queries — сетка 2→1 по вьюпорту.
   Стек карты уже на @media (max-width:900px) выше (не container) → отдельный фолбэк не нужен. */
@supports not (container-type: inline-size){
  @media (max-width: 880px){ .contests-grid{ grid-template-columns:minmax(0,1fr); } }
}

@media (prefers-reduced-motion: reduce){
  .cc-card__progress-fill, .cc-card__action, .contests-filter{ transition:none; }
}