/*
 * Секции страницы «Стандартный курс» (шаблон page-standard-course).
 * Грузится после base.css. Опирается на общие токены и примитивы
 * (.hero-*, .sec-head, .eyebrow, .cond-*, .method-grid, .cd-steps,
 * .final-*, .faq-*, .btn-*). Здесь — только то, что уникально для
 * этой страницы: сетка параметров курса, чек-лист «что входит»,
 * механика стоимости/скидок. Префикс — sc-*.
 *
 * @package easy-peasy
 */

/* ===========================================================================
   Ритм фонов на сингле курса. Условные секции (params/pricing/faq) появляются
   только у «Стандартного курса»; чтобы чередование plain/alt было идеальным и
   у стандартного, и у базового курса (где эти секции скрыты), закрепляем фон
   за идентичностью секции, а не за её позицией. Итог по потоку:
   hero · params(alt) · includes(plain) · method(alt) · path(plain) ·
   conditions(alt) · pricing(plain) · faq(alt) · lead-final(plain).
   Секция параметров (#format) в базе class="section" (plain) — на сингле
   поднимаем её до alt-полосы. pricing (#pricing) и faq (#faq) уже дают нужный
   фон (plain и section--alt соответственно), их не трогаем.
   =========================================================================== */
.section#format{background:var(--surface-2)}

/* ===========================================================================
   2 · Параметры курса — «спец-бар» из 5 фактов (ключевой блок референса).
   Хайрлайн-разделители через gap:1px на line-фоне: корректны при любой
   раскладке (1 / 2 / 5 колонок) без ручного управления границами.
   =========================================================================== */
.sc-facts{
  display:grid;grid-template-columns:1fr;gap:1px;
  background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-xl);box-shadow:var(--sh-md);overflow:hidden
}
.sc-fact{
  background:var(--surface);display:flex;flex-direction:column;gap:10px;
  padding:clamp(20px,2.6vw,26px)
}
.sc-fact-ic{
  width:46px;height:46px;border-radius:var(--r-md);display:grid;place-items:center;
  background:color-mix(in srgb,var(--primary) 12%,transparent);color:var(--primary)
}
.sc-fact-ic svg{width:23px;height:23px}
.sc-fact-label{font-size:.8rem;font-weight:600;line-height:1.3;color:var(--text-muted)}
.sc-fact-val{
  font-family:var(--font-head);font-weight:800;line-height:1.08;color:var(--text);
  font-size:clamp(1.35rem,1.12rem + .95vw,1.72rem);font-variant-numeric:tabular-nums
}
.sc-fact-note{font-size:.82rem;line-height:1.4;color:var(--text-muted)}
/* На 2 колонках нечётный последний факт растягивается на всю ширину —
   без «пустой» line-ячейки в сетке. */
@media(min-width:520px){
  .sc-facts{grid-template-columns:1fr 1fr}
  .sc-fact:last-child{grid-column:1 / -1}
}
@media(min-width:1024px){
  .sc-facts{grid-template-columns:repeat(5,1fr)}
  .sc-fact:last-child{grid-column:auto}
  .sc-fact{gap:12px}
  /* Кегль значения привязан к раскладке, а не только к вьюпорту: в 5 колонках
     на карточку остаётся ~145px (1024) — ~180px (1440) текста, и «взрослый»
     базовый кегль рвёт длинные значения («3 раза в неделю по 120 минут»)
     на 4–5 строк, ломая ровный ритм спец-бара. Здесь берём шкалу мельче —
     иерархия «лейбл .8rem → значение → нота .82rem» сохраняется. */
  .sc-fact-val{font-size:clamp(1.15rem, .62rem + .82vw, 1.42rem)}
}

/* ===========================================================================
   4 · Что входит — чек-лист карточками с зелёными галочками.
   =========================================================================== */
.sc-includes{display:grid;grid-template-columns:1fr;gap:12px;max-width:1000px;margin-inline:auto}
.sc-inc{
  display:flex;gap:13px;align-items:flex-start;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);padding:16px 18px;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease
}
.sc-inc:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:color-mix(in srgb,var(--green) 34%,var(--line))}
.sc-inc-check{
  flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  margin-top:1px;background:color-mix(in srgb,var(--green) 15%,transparent);color:var(--green)
}
.sc-inc-check svg{width:17px;height:17px}
.sc-inc p{font-size:.94rem;line-height:1.5;color:var(--text)}
.sc-inc p b{font-weight:800}
@media(min-width:760px){
  .sc-includes{grid-template-columns:1fr 1fr;gap:14px 22px}
}

/* ===========================================================================
   6 · Стоимость и скидки — механика оффера (без сумм).
   sc-price — стабильный якорь под вывод цены будущим хуком (developer);
   при пустой цене скрыт (hidden) и не влияет на вёрстку.
   =========================================================================== */
.sc-pricing-intro{
  max-width:64ch;margin:0 auto 4px;text-align:center;
  font-size:var(--fs-body-lg);line-height:1.62;color:var(--text-muted)
}
/* Якорь цены: developer подставит разметку суммы (eps_standard_price()).
   Пока пусто → hidden; когда заполнен — центрированный слот над карточками. */
.sc-price{display:flex;justify-content:center;margin-top:24px}
.sc-price[hidden]{display:none}

.sc-plans{display:grid;grid-template-columns:1fr;gap:16px;margin-top:32px}
@media(min-width:640px){.sc-plans{grid-template-columns:repeat(3,1fr);gap:18px}}
.sc-plan{
  position:relative;display:flex;flex-direction:column;gap:12px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--sh-sm);padding:clamp(22px,2.6vw,28px);
  transition:transform .2s ease,box-shadow .2s ease
}
.sc-plan:hover{transform:translateY(-5px);box-shadow:var(--sh-lg)}
/* Шапка карточки: название плана + пилюля скидки/базовости */
.sc-plan-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.sc-plan-title{font-family:var(--font-head);font-weight:800;font-size:1.14rem;line-height:1.25;color:var(--text)}
.sc-plan-badge{
  display:inline-flex;align-items:center;line-height:1;
  font-family:var(--font-head);font-weight:800;font-size:.82rem;letter-spacing:.01em;
  padding:4px 10px;border-radius:var(--r-pill);font-variant-numeric:tabular-nums
}
.sc-plan-badge.is-base{background:var(--surface-2);color:var(--text-muted)}
.sc-plan-badge.is-save{background:color-mix(in srgb,var(--green) 15%,transparent);color:var(--green)}
.sc-plan-badge.is-best{background:var(--grad-brand);color:var(--on-primary);box-shadow:var(--sh-brand)}
/* Блок цены: крупная сумма + мелкая строка «за час» */
.sc-plan-cost{display:flex;flex-direction:column;gap:3px}
.sc-plan-price{display:flex;align-items:baseline;gap:6px}
.sc-plan-sum{
  font-family:var(--font-head);font-weight:800;line-height:1;letter-spacing:-.01em;
  font-size:clamp(2rem,1.5rem + 1.9vw,2.55rem);color:var(--text);font-variant-numeric:tabular-nums
}
.sc-plan-cur{font-family:var(--font-head);font-weight:700;font-size:1rem;color:var(--text-muted)}
.sc-plan-perlesson{font-size:.84rem;line-height:1.3;color:var(--text-muted);font-variant-numeric:tabular-nums}
.sc-plan-perlesson b{font-weight:700;color:var(--text)}
.sc-plan-text{font-size:.92rem;line-height:1.58;color:var(--text-muted)}
.sc-plan-text b{font-weight:700;color:var(--text)}
/* Флагман — «−20%»: акцентная рамка, мягкая заливка, лента «лучшая выгода» */
.sc-plan.is-feature{
  border:1.5px solid color-mix(in srgb,var(--primary) 40%,var(--line));
  background:linear-gradient(160deg,color-mix(in srgb,var(--primary) 9%,var(--surface)),var(--surface));
  box-shadow:var(--sh-md)
}
.sc-plan.is-feature .sc-plan-sum{color:var(--primary)}
.sc-plan-ribbon{
  position:absolute;top:0;right:clamp(16px,4vw,24px);transform:translateY(-50%);
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-head);font-weight:700;font-size:.68rem;letter-spacing:.03em;
  text-transform:uppercase;color:var(--on-primary);background:var(--grad-brand);
  padding:6px 13px;border-radius:var(--r-pill);box-shadow:var(--sh-brand);z-index:2
}
.sc-plan-ribbon svg{width:13px;height:13px}

.sc-pricing-cta{display:flex;justify-content:center;margin-top:32px}
.sc-pricing-cta .btn{max-width:100%;white-space:normal;text-wrap:balance}
@media(max-width:479.98px){.sc-pricing-cta .btn{width:100%;justify-content:center}}

@media(prefers-reduced-motion:reduce){
  .sc-inc,.sc-plan{transition:none}
}