/* ==========================================================================
   program.css — программа и тарифы

   Главное отличие от первой версии: три таба и одна кнопка вместо трёх
   кнопок оплаты подряд. Человек выбирает вариант, а не сравнивает
   похожие CTA.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Табы тарифов
   -------------------------------------------------------------------------- */

.program__tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
  margin-bottom: var(--gutter);
}

.program__tab {
  /* Пилюли одинаковой ширины: разная делала бы «БАЗУ» визуально мельче
     остальных только из-за длины слова. */
  width: 100%;
  padding-block: 16px;
}

.program__tab .tag {
  margin-left: 4px;
}

/* --------------------------------------------------------------------------
   Панель тарифа
   -------------------------------------------------------------------------- */

.program__panel[hidden] {
  display: none;
}

.program__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  gap: var(--pad-card);
  align-items: start;
}

.program__subtitle {
  margin-bottom: 16px;
}

.program__subtitle:not(:first-child) {
  margin-top: var(--gap);
}

.program__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.program__list li {
  position: relative;
  padding-left: 28px;
  color: var(--text-gray);
  font-size: var(--fs-lead);
  line-height: var(--lh-text);
}

/* Маркер-точка вместо галочки: это описание, а не чек-лист входящего. */
.program__list li::before {
  content: '';
  position: absolute;
  left: 8px;
  /* Половина высоты строки минус половина точки — маркер садится
     на первую строку, а не на середину всего абзаца. */
  top: calc(var(--fs-lead) * var(--lh-text) / 2 - 3px);
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background-color: var(--primary300);
}

/* --------------------------------------------------------------------------
   Модули-аккордеоны
   -------------------------------------------------------------------------- */

.program__modules {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.program__module {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-btn);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}

.program__module:hover {
  border-color: var(--primary300);
}

.program__module-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 16px 20px;
  text-align: left;
  color: var(--text-color);
}

.program__module-title {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.program__module-name {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
}

.program__module-meta {
  color: var(--text-gray);
  font-size: var(--fs-small);
}

/* Отступы именно на тексте, а не на .collapse__inner — см. предупреждение
   в animations.css: padding на обёртке не даёт ей схлопнуться в ноль. */
.program__module-text {
  padding: 0 20px 16px;
  color: var(--text-gray);
  font-size: var(--fs-small);
  line-height: 1.4;
}

.program__module-text b {
  color: var(--text-color);
  font-weight: var(--fw-bold);
}

/* Разбор модуля по урокам. Отступы — на самом списке, а не на
   .collapse__inner: см. предупреждение в animations.css. */
.program__lessons {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0 20px 16px;
}

.program__lesson-name {
  color: var(--text-color);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  line-height: 1.3;
}

.program__lesson-text {
  color: var(--text-gray);
  font-size: var(--fs-small);
  line-height: 1.4;
}

/* Отступ только когда у урока есть заголовок: в бонусном модуле часть
   пунктов состоит из одного абзаца, и лишние 4px там сбивали бы шаг списка. */
.program__lesson-name + .program__lesson-text {
  margin-top: 4px;
}

/* Домашки и бонусы — вехи между уроками, а не уроки. Капсулой, чтобы
   в длинном списке было видно ритм: где смотришь, а где уже делаешь. */
.program__lesson--mark {
  /* Метка прижата влево и по высоте контента: li — флекс-элемент колонки
     и без этого растянулся бы во всю ширину. */
  display: flex;
  align-items: center;
}

/* --------------------------------------------------------------------------
   Блок с ценой
   -------------------------------------------------------------------------- */

.program__aside {
  position: sticky;
  /* Отступ от залипшей шапки. */
  top: 96px;
}

.program__price-box {
  padding: var(--gap);
  border-radius: var(--radius-header);
  background-color: var(--main-bg);
  transition: background-color var(--dur) var(--ease);
}

.program__price-label {
  color: var(--text-gray);
  font-size: var(--fs-small);
}

.program__price {
  margin: 8px 0 20px;
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: 1;
  white-space: nowrap;
}

.program__price--combo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
}

.program__price-old {
  color: var(--text-gray);
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
}

.program__price-new {
  color: var(--text-color);
}

.program__price-note {
  margin: -8px 0 20px;
  color: var(--text-gray);
  font-size: var(--fs-small);
  line-height: 1.4;
}

.program__perks {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}

.program__perk {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--fs-small);
  line-height: 1.3;
}

.program__perk .badge__icon {
  /* Иконка выравнивается по первой строке текста, а не по центру
     всего пункта — иначе у двухстрочных она уезжает вниз. */
  margin-top: 1px;
}

/* --------------------------------------------------------------------------
   Адаптив
   -------------------------------------------------------------------------- */

@media (max-width: 1280px) {
  .program__layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  }
}

@media (max-width: 1024px) {
  /* Именно minmax(0, 1fr), а не 1fr: у 1fr минимум равен min-content,
     и любой неразрывный элемент внутри распирает колонку шире экрана. */
  .program__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  /* В одну колонку блок с ценой уже не «липнет» — он просто идёт
     после описания, и sticky только мешал бы прокрутке. */
  .program__aside {
    position: static;
  }
}

@media (max-width: 768px) {
  /* Три пилюли в ряд на телефоне дают по одному слову в строке
     и разъезжаются по высоте. */
  .program__tabs {
    grid-template-columns: 1fr;
  }

  .program__module-head {
    padding: 14px 16px;
  }

  .program__module-text,
  .program__lessons {
    padding: 0 16px 14px;
  }
}