/* ==========================================================================
   Страницы планеров: /treker-privychek, /finansovyj-treker, /treker-zadach,
   /nedelnyj-planer (собирает tools/product-pages.js).

   Свои блоки — с префиксом plan: .pHero уже занят героем страницы партнёров
   (site.css, max-width: 14ch у заголовка), и совпавшие имена ломали вёрстку
   на компьютере (26.09.2026). Шапка, карточка с ценой (.prodCard), вопросы,
   финал и подвал — классы главной. Цвета, радиусы, тени и отступы — её
   токены, тёмная тема приходит вместе с ними.
   ========================================================================== */

/* --- Крошки ------------------------------------------------------------- */
.crumbs { margin-bottom: 18px; font-size: var(--fs-small); line-height: 1.4; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.crumbs li { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-3); }
.crumbs li + li::before { content: "/"; color: var(--line-strong); }
.crumbs a { color: var(--ink-2); transition: color 200ms; }
.crumbs a:hover { color: var(--brand); }

/* --- Герой: крошки, заголовок, карточка с ценой ------------------------- */
section.planHero { padding: 24px 0 0; }
.planHero__title { margin-top: 14px; }
.planHero .prodCard { margin-top: 24px; }
/* Описание в карточке — рядом с ценой: это и есть «что ты покупаешь». */
.planHero .prodCard__desc { margin-top: 0; }

/* Коротко о формате: три факта под описанием. */
.planChips { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; }
.planChips li {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--surface-3);
  font-size: 13px;
  color: var(--ink-2);
}

.planHero__note { margin-top: 12px; }

/* --- Общая секция ------------------------------------------------------ */
.planSec { padding-top: var(--sec-gap); }
.planSec__title { margin-top: 12px; max-width: 22ch; text-wrap: balance; }

/* --- Карточки: что умеет / почему таблица ------------------------------ */
.planCards {
  display: grid;
  gap: 12px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.planCard {
  padding: 20px;
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--sh-card);
}
.planCard__title { font-size: 17px; }
.planCard__text { margin-top: 6px; }

/* --- Скриншоты: на телефоне картинка, под ней подпись ------------------- */
.planShots { display: grid; gap: 16px; margin-top: 24px; }
.planShot {
  display: grid;
  /* Колонка — по ширине карточки: без minmax(0, …) она раздувается до
     натуральной ширины скриншота (1282px), и картинка вылезает из карточки. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "img" "cap";
  margin: 0;
  padding: 12px;
  border-radius: 24px;
  background: var(--surface);
  box-shadow: var(--sh-card);
}
/* Скриншоты таблиц — на белом, как рендеры в карточках: стыка не видно. */
.planShot picture { grid-area: img; display: block; border-radius: 14px; overflow: hidden; background: #FFFFFF; }
.planShot__img { display: block; width: 100%; height: auto; }
.planShot figcaption {
  grid-area: cap;
  padding: 14px 8px 4px;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}
.planShot figcaption b { display: block; margin-bottom: 2px; color: var(--ink); font-weight: 600; }

/* --- Как вести: вступление и шаги с номерами --------------------------- */
.planGuide {
  padding: 24px 20px;
  border-radius: 24px;
  background: var(--surface);
  box-shadow: var(--sh-card);
}
.planGuide__lead { margin-top: 12px; max-width: 52ch; }
.planGuide__steps { margin: 8px 0 0; padding: 0; list-style: none; counter-reset: guide; }
.planGuide__step {
  position: relative;
  margin-top: 16px;
  padding: 16px 0 0 40px;
  border-top: 1px solid var(--line);
  counter-increment: guide;
}
.planGuide__step::before {
  content: counter(guide, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 16px;
  font-size: 17px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--brand);
}
.planGuide__title { font-size: 17px; }
.planGuide__text { margin-top: 6px; }

/* --- Соседние планеры -------------------------------------------------- */
.planMore { display: grid; gap: 12px; margin: 24px 0 0; padding: 0; list-style: none; }
.planMore__card {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  height: 100%;
  padding: 10px 16px 10px 10px;
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--sh-card);
  color: var(--ink);
  transition: transform 120ms var(--e-out), box-shadow 200ms;
}
.planMore__card:active { transform: scale(.985); }
.planMore__card picture { display: block; border-radius: 12px; overflow: hidden; background: #FFFFFF; }
.planMore__img { display: block; width: 96px; height: 72px; object-fit: cover; }
.planMore__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.planMore__name { font-size: 16px; font-weight: 600; line-height: 1.3; }
.planMore__desc { font-size: 14px; line-height: 1.45; color: var(--ink-2); }
/* Набор — тем же акцентом, что кнопка «цена в наборе» в карточке. */
.planMore__card--bundle { background: var(--brand-07); box-shadow: none; border: 1px solid var(--brand-18); }
.planMore__card--bundle .planMore__img { object-fit: contain; }

/* --- Финал: покупка и набор рядом -------------------------------------- */
.planFinal__btns { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.planFinal__btns .final__cta { margin-top: 0; }

/* --- ≥768 ------------------------------------------------------------- */
@media (min-width: 768px) {
  section.planHero { padding-top: 48px; }
  /* Заголовок в две ровные строки: «Трекер привычек / в Google Таблицах». */
  .planHero__title { max-width: 18ch; }
  .planHero .prodCard { margin-top: 40px; }

  .planCards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
  .planCard { padding: 28px; border-radius: 24px; }
  .planCard__title { font-size: var(--fs-h3); }
  .planCard__text { margin-top: 8px; }

  .planShots { gap: 24px; margin-top: 40px; }
  .planShot { padding: 16px; }
  .planShot figcaption { padding: 16px 8px 4px; }

  .planGuide { padding: 48px; }
  .planGuide__lead { margin-top: 16px; }
  .planGuide__steps { margin-top: 16px; }
  .planGuide__step { margin-top: 24px; padding: 24px 0 0 64px; }
  .planGuide__step::before { top: 24px; font-size: 24px; }
  .planGuide__title { font-size: var(--fs-h3); }

  .planMore { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
  .planMore__card { grid-template-columns: 128px minmax(0, 1fr); gap: 18px; padding: 12px 20px 12px 12px; }
  .planMore__img { width: 128px; height: 96px; }
  .planMore__card:hover { transform: translateY(-2px); box-shadow: var(--sh-raised); }
  .planMore__card--bundle:hover { box-shadow: none; border-color: var(--brand); }

  .planFinal__btns { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  /* От 768 финал — тёмная полоса во всю ширину: отступ до неё даёт последняя секция. */
  .planSec--end { padding-bottom: var(--sec-gap); }

  /* Вопросы от 768 — белая секция во всю ширину: отделяем её от карточек выше.
     На телефоне отступ сверху у .faq свой. Заголовок длиннее, чем «Частые
     вопросы» главной (там max-width: 10ch), — даём ему две строки. */
  .planFaq { margin-top: var(--sec-gap); }
  .planFaq .faq__title { max-width: 16ch; }
}

/* --- ≥1024: раскладка для компьютера ----------------------------------- */
@media (min-width: 1024px) {
  /* Карточка героя: блок покупки слева, рендер справа и в край карточки.
     Ноутбук на рендере сам уходит за правый край — в углу карточки это
     читается как задумано, а не как обрезка. Если текст выше картинки,
     она обрезается справа, где и так «за краем». */
  .planHero .prodCard {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 0;
    padding: 0;
    overflow: hidden;
  }
  .planHero .prodCard__shot { order: 2; align-self: stretch; height: 100%; border-radius: 0; }
  .planHero .prodCard__img { object-position: left center; }
  .planHero .prodCard__body { justify-content: center; gap: 24px; padding: 40px; }
  .planHero .prodCard__actions { justify-content: flex-start; }

  /* Заголовки секций — шире: иначе «Почему таблица, а / не…» ломается в три строки. */
  .planSec__title { max-width: 34ch; }

  .planCards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .planCards--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Скриншоты: подпись слева, картинка справа — вместо полос во всю ширину. */
  .planShot {
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
    grid-template-areas: "cap img";
    align-items: center;
    gap: 32px;
    padding: 20px;
  }
  .planShot figcaption { padding: 8px 0 8px 12px; align-self: center; }
  .planShot figcaption b { margin-bottom: 8px; font-size: var(--fs-h3); letter-spacing: -0.015em; }

  /* Как вести: вступление слева и остаётся на экране, шаги — справа одной колонкой. */
  .planGuide {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 64px;
    align-items: start;
    padding: 56px;
  }
  .planGuide__intro { position: sticky; top: 120px; }
  /* Первый шаг — вровень с вступлением: без черты и отступа сверху. */
  .planGuide__steps { margin-top: 0; }
  .planGuide__step:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
  .planGuide__step:first-child::before { top: 0; }
}

/* --- ≥1280 ------------------------------------------------------------ */
@media (min-width: 1280px) {
  .planHero .prodCard__body { padding: 48px 56px; }
  /* Колонка заголовка вопросов шире — длинный заголовок в две строки. */
  .planFaq .faq__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

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