/* CES FOR YOU — витрина: выбор версии лендинга.
   Одна задача: показать три страницы и дать открыть любую.
   Объясняет картинка, а не абзац, поэтому текста здесь ровно
   столько, сколько нужно, чтобы отличить версии друг от друга.

   Файл только добавляет. Ни один селектор ces-tokens.css и
   ces-landing.css здесь не переопределяется.
   Подключать после ces-landing.css. */

/* Витрину открывают на большом экране и показывают целиком:
   композиция стоит по центру окна, а не липнет к верхней кромке. */
.pick-page {
  min-height: 100vh;
  display: grid;
  align-content: center;
  padding-block: var(--sp-10);
}

/* ── Шапка ───────────────────────────────────────────────── */

.pick-head {
  margin-bottom: var(--sp-9);
  display: grid;
  justify-items: center;
  gap: var(--sp-6);
  text-align: center;
}

.pick-head__mark {
  display: block;
  color: var(--blue);
  line-height: 0;
}

.pick-head__mark svg { height: var(--h-logo-lg); width: auto; }

/* ── Три превью ──────────────────────────────────────────── */

.picks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-card);
}

/* Колонка, а не блок: карточки в ряду растягиваются по самой
   высокой, и постер внутри должен забирать весь остаток высоты —
   иначе у версии с длинным заголовком он выше, чем у соседей, и
   подписи под ними встают на разных уровнях. */
.pick {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
  padding: var(--sp-3);
  text-decoration: none;
  transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}

.pick:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-panel);
}

/* Постер вместо снимка: три версии отличаются не картинкой, а тем,
   что обещает заголовок. Он и вынесен на обложку — крупно, тем же
   светлым начертанием, что и в самом герое. */
.pick__poster {
  flex: 1;
  display: grid;
  align-content: center;
  min-height: 300px;
  padding: var(--sp-9);
  border-radius: var(--r-tile);
  background-color: var(--bg-base);
  background-image:
    radial-gradient(340px 220px at 22% 0%, rgb(197 214 242), rgba(197, 214, 242, 0) 70%),
    radial-gradient(300px 220px at 100% 10%, rgb(214 229 241), rgba(214, 229, 241, 0) 68%),
    radial-gradient(300px 220px at -8% 100%, rgb(246 214 193), rgba(246, 214, 193, 0) 68%),
    radial-gradient(300px 220px at 108% 100%, rgb(208 168 232), rgba(208, 168, 232, 0) 66%),
    linear-gradient(180deg, var(--bg-base), var(--bg-mid) 55%, var(--bg-base));
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.pick__poster b {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 30px;
  line-height: 1.08;
  letter-spacing: -.03em;
  color: var(--ink);
  text-wrap: balance;
}

.pick__poster span {
  margin-top: var(--sp-5);
  font-size: 14px;
  font-weight: 600;
  color: var(--cap);
}

.pick__bar {
  margin-top: auto;
  display: grid;
  gap: var(--sp-1);
  padding: var(--sp-6) var(--sp-4) var(--sp-4);
}

.pick__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -.01em;
  color: var(--ink);
}

/* Место под две строки резервируется всегда: иначе более короткая
   подпись поднимает свой постер, и три обложки снова разъезжаются. */
.pick__gist {
  min-height: calc(2 * 1.45em);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--text);
}

@media (prefers-reduced-motion: reduce) {
  .pick { transition: none; }
  .pick:hover { transform: none; }
}

/* ── Узкие экраны ────────────────────────────────────────────
   Ниже 900 три колонки делают превью нечитаемым — там ценник
   в герое перестаёт различаться, а он и есть смысл витрины. */

@media (max-width: 900px) {
  .picks { grid-template-columns: 1fr; }
  .pick-page { min-height: 0; padding-block: var(--sp-9); }
}