/* ============================================================
   CYCLES-V2.CSS — стили только для страницы "Циклы под задачу"
   (cycles.html). Токены — в tokens.css, общая обвязка (база документа,
   шапка, бегущая строка, FAQ, зеленый CTA, футер) — в smelost.css.
   Значения сверены с живым референсом дизайнера
   (_design-handoff-cycles/, ТЗ-редизайн-главной.md, раздел 13).
   ============================================================ */

/* Контейнеры секций страницы. Контейнеры общих секций — в smelost.css. */
.cy-hero__inner,
.cy-how__inner,
.cy-cycles__inner {
  max-width: 1120px;
  margin: 0 auto;
  position: relative;
}

/* ============================================================
   ХИРО
   ============================================================ */
.cy-hero {
  position: relative;
  overflow: hidden;
  background: var(--bg);
  padding: 84px 32px 92px;
}
.cy-hero__label {
  background: var(--c-ink);
  color: var(--c-paper);
  font-size: 14px;
  transform: rotate(-1.5deg);
}
.cy-hero__title {
  font-family: var(--font-display);
  font-weight: var(--fw-ultra);
  font-size: clamp(52px, 7.4vw, 96px);
  line-height: .96;
  letter-spacing: -.03em;
  margin: 26px 0 0;
  max-width: 13ch;
}
.cy-hero__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 26px;
}
.cy-hero__lead { font-size: 20px; font-weight: var(--fw-bold); }
.cy-hero__badge {
  background: var(--c-lilac);
  color: var(--c-ink);
  font-size: 14px;
  font-weight: var(--fw-bold);
  transform: rotate(1.5deg);
}
.cy-hero__hand {
  font-family: var(--font-hand);
  font-size: 30px;
  color: var(--c-purple);
  transform: rotate(-2deg);
  display: inline-block;
  margin-top: 14px;
}
.cy-hero__text {
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--c-ink-70);
  max-width: 58ch;
  margin: 18px 0 0;
}
.cy-hero__ctas {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 36px;
}
.cy-hero__link {
  font-weight: var(--fw-bold);
  font-size: 15px;
  color: var(--c-ink-70);
  border-bottom: 2px solid var(--c-pink);
  padding-bottom: 2px;
}

/* ============================================================
   КАК УСТРОЕНО (четыре карточки на фоне мов)
   ============================================================ */
.cy-how {
  background: var(--c-mauve);
  padding: 84px 32px;
}
.cy-how__heading {
  font-family: var(--font-display);
  font-weight: var(--fw-ultra);
  font-size: clamp(38px, 4.6vw, 58px);
  line-height: 1;
  letter-spacing: -.02em;
  margin: 0;
  color: var(--c-ink);
}
.cy-how__hand {
  font-family: var(--font-hand);
  font-size: 26px;
  color: var(--c-white);
  transform: rotate(-2deg);
  display: inline-block;
  margin-top: 12px;
}
.cy-how__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 38px;
}
.cy-how-card {
  background: var(--c-white);
  border-radius: 26px;
  box-shadow: var(--sh-2);
  padding: 28px 26px;
  /* Сам поворот задается здесь, а :nth-child ниже только подставляет угол в
     переменную. Если писать transform прямо в :nth-child, он весит столько же,
     сколько .settle:hover, и — стоя в файле ниже — отменяет ховер: карточка
     перестает выпрямляться под курсором (тот же прием уже в home.css). */
  transform: rotate(var(--card-rot, 0deg));
}
/* Фирменная "кривизна": у каждой карточки свой наклон (ТЗ, раздел 3 —
   вариации через :nth-child, а не инлайн-стилем на элементе). */
.cy-how-card:nth-child(1) { --card-rot: -1deg; }
.cy-how-card:nth-child(2) { --card-rot: .8deg; }
.cy-how-card:nth-child(3) { --card-rot: -.7deg; }
.cy-how-card:nth-child(4) { --card-rot: .6deg; }

.cy-how-card--ink { background: var(--c-ink); color: var(--c-paper); }
.cy-how-card--ink .cy-how-card__text { color: rgba(247, 241, 230, .75); }

.cy-how-card__icon { font-size: 32px; }
.cy-how-card__icon--pink   { color: var(--c-pink); }
.cy-how-card__icon--blue   { color: var(--c-blue); }
.cy-how-card__icon--tomato { color: var(--c-tomato); }
.cy-how-card__icon--lime   { color: var(--c-lime); }

.cy-how-card__title {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: 20px;
  line-height: 1.15;
  margin-top: 14px;
}
.cy-how-card__text {
  font-size: 15px;
  line-height: 1.55;
  color: var(--c-ink-70);
  margin: 10px 0 0;
}

/* ============================================================
   ТРИ ЦИКЛА
   ============================================================ */
.cy-cycles {
  background: var(--bg);
  padding: 88px 32px;
}
.cy-cycles__eyebrow {
  font-weight: var(--fw-bold);
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-purple);
}
.cy-cycles__heading-row {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.cy-cycles__heading {
  font-family: var(--font-display);
  font-weight: var(--fw-ultra);
  font-size: clamp(38px, 4.6vw, 58px);
  line-height: 1;
  letter-spacing: -.02em;
  margin: 0;
}
.cy-cycles__hand {
  font-family: var(--font-hand);
  font-size: 27px;
  color: var(--c-pink);
  transform: rotate(-3deg);
  display: inline-block;
  padding-bottom: 6px;
}
.cy-cycles__list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 38px;
}

/* --- карточка цикла: одна анатомия, цвет задается модификатором --- */
.cy-cycle {
  background: var(--c-white);
  border-radius: 28px;
  box-shadow: var(--sh-2);
  padding: 32px 34px;
  position: relative;
  transform: rotate(var(--card-rot, 0deg)); /* угол — в переменной, см. .cy-how-card выше */
}
.cy-cycle:nth-child(1) { --card-rot: -.35deg; }
.cy-cycle:nth-child(2) { --card-rot: .35deg; }
.cy-cycle:nth-child(3) { --card-rot: -.3deg; }

/* --acc — акцентный цвет цикла, --tint — фон чипсов-симптомов,
   --badge-fg — текст на капсуле (на розовой читается чернилами, на
   синей и зеленой — белым). */
.cy-cycle--pink  { --acc: var(--c-pink);  --tint: #FFE4F2; --badge-fg: var(--c-ink); }
.cy-cycle--blue  { --acc: var(--c-blue);  --tint: #E5EDFD; --badge-fg: var(--c-white); }
.cy-cycle--green { --acc: var(--c-green); --tint: #EEF6CC; --badge-fg: var(--c-white); }

.cy-cycle__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 28px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.cy-cycle__head-main { max-width: 58ch; }
.cy-cycle__badge {
  background: var(--acc);
  color: var(--badge-fg);
  font-size: 13px;
  font-weight: var(--fw-bold);
  margin-bottom: 14px;
}
.cy-cycle__title {
  font-family: var(--font-display);
  font-weight: var(--fw-ultra);
  font-size: clamp(28px, 3vw, 38px);
  letter-spacing: -.02em;
  margin: 0 0 8px;
  color: var(--acc);
}
.cy-cycle__lead {
  font-size: 19px;
  font-weight: var(--fw-semi);
  line-height: 1.45;
  margin: 0;
}
.cy-cycle__price-box { text-align: right; flex: none; }
.cy-cycle__price {
  font-family: var(--font-display);
  font-weight: var(--fw-ultra);
  font-size: 34px;
  color: var(--acc);
  line-height: 1;
}
.cy-cycle__price-note { font-size: 13.5px; color: var(--c-ink-70); margin-top: 5px; }
.cy-cycle__price-old { font-size: 13px; color: var(--c-ink-45); text-decoration: line-through; }

.cy-cycle__chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.cy-cycle__chip {
  font-family: var(--font-hand);
  font-size: 21px;
  padding: 4px 14px;
  border-radius: var(--r-pill);
  background: var(--tint);
}
.cy-cycle__chip:nth-child(1) { transform: rotate(-1deg); }
.cy-cycle__chip:nth-child(2) { transform: rotate(.8deg); }
.cy-cycle__chip:nth-child(3) { transform: rotate(-.6deg); }

.cy-cycle__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  padding-top: 18px;
  border-top: 1.5px solid var(--c-ink-12);
}
.cy-cycle__col-label {
  font-weight: var(--fw-bold);
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 6px;
  color: var(--acc);
}
.cy-cycle__col-label--green  { color: var(--c-green); }
.cy-cycle__col-label--tomato { color: var(--c-tomato); }
.cy-cycle__col-label--yellow { color: var(--c-yellow); }
.cy-cycle__col-text { font-size: 15px; line-height: 1.55; color: var(--c-ink-70); }
.cy-cycle__btn-wrap { margin-top: 22px; }

/* ============================================================
   FAQ — компонент общий (smelost.css), у страницы свой отступ:
   блок идет вплотную за карточками циклов, второй раз отбивать
   его сверху не нужно.
   ============================================================ */
.cy-faq { padding: 0 32px 88px; }

/* ============================================================
   ПОЗИЦИИ СТИКЕРОВ (ТЗ, раздел 3: .stkr + модификатор на каждый)
   ============================================================ */
.vf-stkr--cy-hero-fire     { top: -26px; right: 36px; --stkr-r: 8deg; }
.vf-stkr--cy-hero-asterisk { bottom: -30px; left: -18px; opacity: .9; --stkr-r: 14deg; }
.vf-stkr--cy-star          { top: -22px; right: 26px; --stkr-r: 12deg; }
.vf-stkr--cy-sparkle       { top: -24px; right: 30px; --stkr-r: -9deg; }
.vf-stkr--cy-cta-fire      { top: -40px; left: -10px; --stkr-r: -8deg; }

/* ============================================================
   АДАПТИВ
   ============================================================ */
@media (max-width: 768px) {
  /* Заголовок хиро на узком экране: длинное слово "задачу" при 52px
     упиралось в край (та же правка, что на главной). */
  .cy-hero__title { font-size: clamp(36px, 10vw, 52px); }

  /* Розовый астериск висит на нижнем крае хиро. На широком экране он падает на
     угол кнопки (так и в макете), но на узком ссылка "Не уверена, что влезет?"
     переносится под кнопку — и стикер ложится прямо на текст. Отбиваем низ,
     чтобы стикеру хватило своего места под ссылкой. */
  .cy-hero__inner { padding-bottom: 84px; }

  /* Карточке цикла на телефоне нужны поля поменьше: при 34px по бокам
     на 375px тексту остается слишком узкая колонка. */
  .cy-cycle { padding: 26px 22px; }

  /* Однословные названия ("Прокрастинация", "Предназначение") при 28px шире
     колонки карточки. Колонка — flex-элемент с min-width:auto, то есть сжаться
     уже своего самого длинного слова не может: слово вылезало за белую карточку
     на фон, а край экрана срезал ему хвост (на 375px — 23px, на 320px — 78px).
     Тянуть за собой описание оно тоже успевало. Уменьшаем заголовок вместе с
     шириной экрана — тот же прием, что у .cy-hero__title выше. Потолок 28px
     совпадает с базовым размером, чтобы на границе 768px не было скачка. */
  .cy-cycle__title { font-size: clamp(17px, 5.4vw, 28px); }

  /* Цена уезжает под заголовок (перенос флексом) — прижимать ее вправо
     на своей строке незачем, читается как оторванная. */
  .cy-cycle__price-box { text-align: left; }
}