/* Раздел Price. Значения — из макета Figma (файл AIO, фрейм Pricing 5701:16873):
   контент-колонка 912px, карточки по 448px, отступ между ними 16px.

   Шрифты макета — TT Bluescreens Pro VF и DatCub (пиксельные капсулы) — в
   репозитории отсутствуют, поэтому используются гротески сайта: Craftwork
   Grotesk для крупного текста и Inter для остального (как на остальных
   страницах). Когда появятся woff2 — достаточно подменить переменные ниже. */

.price-page {
  background-color: #000;

  --price-font-display: var(--third-family);
  --price-font-text: var(--second-family);
  --price-font-pixel: var(--second-family);

  --price-surface: #0b0b0b;
  --price-border: #292929;
  --price-row-bg: #141414;
  --price-row-border: #272727;
  --price-blue: #313ffe;
  --price-lime: #e6f355;
  --price-text: #f4f5fd;
}

.price {
  position: relative;
  overflow: hidden;
  /* сверху 60px по макету + высота шапки сайта, которой во фрейме нет.
     Снизу в полтора раза больше макетного: со 120px карточки жались к
     скруглённой кромке подвала, с 240px разрыв читался как пустая полоса. */
  padding: 140px 32px 180px;
  background-color: #000;
}

.price__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 56px;
  width: 100%;
  max-width: 912px;
  margin: 0 auto;
}

/* ── Шапка раздела ───────────────────────────────────────────────── */

.price-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  text-align: center;
}

.price-hero__title {
  font-family: var(--price-font-display);
  /* В макете 96px шрифтом TT Bluescreens Pro VF. Craftwork Grotesk шире: на 96px
     строка «Full infrastructure.» не влезает в колонку 912px и рвётся, поэтому
     94px — максимум без переноса. С родным шрифтом можно вернуть 96px. */
  font-size: 94px;
  font-weight: 700;
  line-height: 96px;
  letter-spacing: -1.88px;
  color: #fff;
}

.price-hero__text {
  width: 448px;
  max-width: 100%;
  font-family: var(--price-font-text);
  font-size: 16px;
  line-height: 20px;
  /* разрядка 0.8px была подобрана под капс; для строчных она разваливает строку */
  letter-spacing: 0;
  color: var(--price-text);
}

/* Капсула-ярлык: PRICING / CORE PLAN / FOR TEAMS / −20% */
.price-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  padding: 4px 8px;
  border-radius: 999px;
  background-color: var(--price-border);
  font-family: var(--price-font-pixel);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 1.44px;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}

/* в карточках капсула прижата влево и по содержимому — как в макете
   (в шапке раздела она по центру, там своя флекс-колонка) */
.price-card .price-badge {
  justify-self: start;
  align-self: start;
}

/* На синей карточке синяя капсула растворилась бы в фоне — она жёлтая,
   как и главная кнопка тарифа. */
.price-badge--core {
  background-color: var(--price-lime);
  color: #000;
}

.price-badge--accent {
  background-color: var(--price-lime);
  color: #000;
}

/* ── Переключатель периода ───────────────────────────────────────── */

.price-switch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px;
  border-radius: 200px;
  border: 1px solid var(--price-row-bg);
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
}

.price-switch__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  background-color: transparent;
  font-family: var(--price-font-text);
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #fff;
  opacity: 0.5;
  cursor: pointer;
  transition: background-color 0.3s ease-in, border-color 0.3s ease-in, opacity 0.3s ease-in;

  &:hover {
    opacity: 1;
  }

  &.is-active {
    background-color: var(--price-row-bg);
    border-color: var(--price-row-border);
    opacity: 1;
  }
}

/* ── Карточки ────────────────────────────────────────────────────── */

/* Пять общих строк на обе карточки: бейдж, заголовок+описание, цена, кнопки,
   остальное. Карточки — subgrid, поэтому «$499» и «Custom», «Add meta» и
   «Book a demo call» стоят на одном уровне независимо от длины текста. */
.price-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(5, auto);
  column-gap: 16px;
  row-gap: 32px;
}

.price-card {
  grid-row: span 5;
  display: grid;
  grid-template-rows: subgrid;
  min-width: 0;
  padding: 24px;
  border: 1px solid var(--price-border);
  border-radius: 32px;
  background-color: var(--price-surface);
}

/* Карточка основного тарифа залита фирменным синим целиком. В макете здесь
   был радиальный градиент, гаснущий к чёрному, — от него отказались в пользу
   плашки: на сплошном фоне карточка читается как единый блок и заметнее
   отделяется от Enterprise, который остаётся чёрным. */
.price-card--core {
  background-color: var(--price-blue);
  border-color: var(--price-blue);
}

.price-card__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-self: start;
}

/* нижний блок карточки: списки и «View all» */
.price-card__rest {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* в Enterprise он прижат к низу — как в макете */
.price-card__rest--end {
  justify-content: flex-end;
}

.price-card__title {
  font-family: var(--price-font-display);
  font-size: 32px;
  font-weight: 600;
  line-height: 40px;
  letter-spacing: -0.64px;
  color: #fff;
}

.price-card__description {
  font-family: var(--price-font-text);
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 0;
  color: var(--price-text);
}

.price-card__price {
  display: flex;
  align-items: flex-end;
  align-self: start;
}

/* Кегль один для обеих карточек: сумма была 56px, словесная цена 40px, и на
   одной линии они смотрелись разнокалиберно. 48px — середина между ними,
   интерлиньяж тоже общий, поэтому базовые линии текста совпадают. */
.price-card__value {
  font-family: var(--price-font-display);
  font-size: 48px;
  font-weight: 700;
  line-height: 56px;
  letter-spacing: -0.96px;
  white-space: nowrap;
  color: #fff;
}

.price-card__period {
  padding-bottom: 7px;
  font-family: var(--price-font-display);
  font-size: 20px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -0.4px;
  color: #fff;
}

/* ── Ряды-кнопки (Add meta / Try it for free / Book a demo / View all) ── */

.price-card__actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--price-row-border);
  border-radius: 999px;
  background-color: var(--price-row-bg);
  font-family: var(--price-font-text);
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
  transition: border-color 0.3s ease-in, background-color 0.3s ease-in;

  &:hover:not(:disabled) {
    border-color: #3d3d3d;
  }

  &:disabled {
    cursor: default;
  }
}

/* Главная кнопка тарифа. Синей она была на тёмном фоне; на синей карточке
   её место занял фирменный жёлтый — так CTA остаётся самым заметным
   элементом блока. Наведение отрабатывает прозрачностью, как у жёлтых
   кнопок в остальной вёрстке (.btn--primary в main.css). */
.price-row--accent {
  justify-content: center;
  border-color: var(--price-lime);
  background-color: var(--price-lime);
  color: #000;
  transition: opacity 0.3s ease-in, border-color 0.3s ease-in,
    background-color 0.3s ease-in;

  &:hover {
    border-color: var(--price-lime);
    background-color: var(--price-lime);
    opacity: 0.9;
  }
}

.price-row__icon {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
}

.price-row__icon--caret {
  transition: transform 0.3s ease-in;
}

.price-card.is-open .price-row__icon--caret {
  transform: rotate(180deg);
}

/* доп-опция: включённая подсвечивается, плюс поворачивается в крестик */
.price-row__icon--plus {
  transition: transform 0.3s ease-in;
}

/* второй селектор — чтобы подсветка не терялась под курсором */
.price-addon__trigger.is-active,
.price-addon__trigger.is-active:hover:not(:disabled) {
  border-color: var(--price-blue);
}

.price-addon__trigger.is-active .price-row__icon--plus {
  transform: rotate(45deg);
}

/* ── Списки фич ──────────────────────────────────────────────────── */

.price-card__list-title {
  font-family: var(--price-font-text);
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 0;
  color: var(--price-text);
}

/* «Дополнительно вы получаете:» вставало на 8px ниже первого пункта списка
   Tracker: у него своя коробка строки, а список в соседней карточке начинается
   сразу. Подтягиваем заголовок на эти 8px, чтобы обе фразы читались с одной
   линии. Блок прижат к низу (--end), поэтому отступ двигает только сам
   заголовок — плюсы под ним остаются на месте. */
.price-card--enterprise .price-card__list-title {
  /* сдвиг, а не отступ: блок прижат к низу, и margin у первого элемента
     позицию не меняет — её задаёт нижняя кромка */
  position: relative;
  top: -8px;
}

.price-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.price-list__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--price-font-text);
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 0;
  color: var(--price-text);
}

.price-list__icon {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
}

/* В карточке основного тарифа галочки убраны — список читается ровным
   столбцом с выключкой по левому краю. Вместе с иконкой схлопывается и
   отступ между ней и текстом, поэтому строки сдвигаются влево сами.
   Плюсы в Enterprise остаются: правило адресное. */
.price-card--core .price-list__icon {
  display: none;
}

/* скрытая часть списка — раскрывается по «View all» */
.price-list--extra {
  overflow: hidden;
  max-height: 0;
  gap: 0;
  transition: max-height 0.4s ease, gap 0.4s ease;
}

.price-card.is-open .price-list--extra {
  max-height: 1200px;
  gap: 16px;
}

.price-card__more {
  margin-top: auto;
}

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

@media (max-width: 900px) {
  /* на узком экране карточки идут одна под другой — общие строки не нужны */
  .price-cards {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    row-gap: 16px;
  }

  .price-card {
    grid-row: auto;
    grid-template-rows: none;
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

  .price-hero__title {
    font-size: 56px;
    line-height: 56px;
    letter-spacing: -1.12px;
  }
}

@media (max-width: 600px) {
  .price {
    /* Шапка закреплена сверху и занимает 76px вместе с отступом от края.
       С прежними 40px она наезжала на первую строку заголовка. */
    padding: 116px 16px 80px;
  }

  .price__inner {
    gap: 40px;
  }

  .price-hero {
    gap: 24px;
  }

  .price-hero__title {
    font-size: 40px;
    line-height: 42px;
    letter-spacing: -0.8px;
  }

  .price-card__title {
    font-size: 28px;
    line-height: 34px;
  }

  /* на узком экране кегль тоже общий для суммы и словесной цены */
  .price-card__value {
    font-size: 36px;
    line-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .price-list--extra,
  .price-row__icon--plus,
  .price-row__icon--caret {
    transition: none;
  }
}