/* ============================================================
   METHODS.CSS — стили только для страницы "Как я работаю"
   (methods.html). Токены — в tokens.css, общая обвязка (база документа,
   шапка, футер, стикеры, кнопки) — в smelost.css.
   Вид один в один с макетом дизайнера; вынесено из inline-стилей в классы.
   ============================================================ */

/* Пастельные фоны карточек-методов. Живут здесь: на других страницах
   не используются (те же тинты объявлены локально в education.css). */
:root {
  --tint-pink:   #FFE4F2;
  --tint-blue:   #E5EDFD;
  --tint-purple: #EDE8FE;
}

/* Контейнер контента страницы (у общих секций контейнер — в smelost.css). */
.m-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 40px 20px;
}

/* ============================================================
   HERO
   ============================================================ */
.m-hero { position: relative; margin-bottom: 44px; }

/* Стикер-маскот в правом верхнем углу hero. .stkr (позиционирование
   absolute + анимация) — в smelost.css, здесь только координаты и наклон. */
.vf-stkr--m-hero { top: -18px; right: 0; --stkr-r: -8deg; }

.m-eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-purple);
  margin-bottom: 16px;
}
.m-hero-h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 78px;
  line-height: .94;
  letter-spacing: -.03em;
  margin: 0 0 22px;
  max-width: 16ch;
  padding-right: 128px;
  /* Длинные русские слова в крупном шрифте не должны уезжать за край на
     узких телефонах: перенос по слогам (lang=ru) + break-word как гарантия. */
  overflow-wrap: break-word;
  hyphens: auto;
}
.m-lead {
  font-size: 20px;
  line-height: 1.6;
  color: var(--c-ink-70);
  max-width: 60ch;
  margin: 0 0 28px;
}

/* Чипы-якоря к методам */
.m-chips { display: flex; gap: 12px; flex-wrap: wrap; }
.m-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 15px;
  color: var(--c-ink);
  padding: 11px 18px;
  border-radius: 999px;
  transition: transform .16s var(--ease-bounce, ease);
}
.m-chip:hover { transform: translateY(-3px) rotate(-2deg); }
.m-chip__dot { width: 10px; height: 10px; border-radius: 3px; transform: rotate(12deg); }
.m-chip--emdr { background: var(--tint-pink); }
.m-chip--ifs  { background: var(--tint-blue); }
.m-chip--dbt  { background: var(--tint-purple); }
.m-chip--emdr .m-chip__dot { background: var(--c-pink); }
.m-chip--ifs  .m-chip__dot { background: var(--c-blue); }
.m-chip--dbt  .m-chip__dot { background: var(--c-purple); }

/* ============================================================
   СЕКЦИЯ-МЕТОД (карточка)
   ============================================================ */
.m-method {
  position: relative;
  border-radius: 36px;
  padding: 48px 52px;
  margin-bottom: 34px;
  overflow: hidden;
  scroll-margin-top: 90px; /* чтобы якорь не уезжал под липкую шапку */
}
.m-method--emdr { background: var(--tint-pink); }
.m-method--ifs  { background: var(--tint-blue); }
.m-method--dbt  { background: var(--tint-purple); margin-bottom: 44px; }

.m-method__head {
  display: flex;
  align-items: baseline;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.m-num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 80px;
  line-height: .8;
}
.m-method--emdr .m-num { color: var(--c-pink); }
.m-method--ifs  .m-num { color: var(--c-blue); }
.m-method--dbt  .m-num { color: var(--c-purple); }
.m-abbr {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 56px;
  letter-spacing: -.02em;
  color: var(--c-ink);
}
.m-sub {
  font-style: italic;
  font-size: 16px;
  color: var(--c-ink-70);
  margin: 0 0 24px;
  max-width: 62ch;
}
.m-p {
  font-size: 18px;
  line-height: 1.65;
  color: var(--c-ink);
  margin: 0 0 16px;
  max-width: 64ch;
}
.m-p--gap   { margin-bottom: 26px; }
.m-p--gap-l { margin-bottom: 28px; }

/* Цитата-выноска */
.m-quote {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: rgba(255, 255, 255, .62);
  border-radius: 22px;
  padding: 22px 26px;
  margin-bottom: 30px;
  max-width: 70ch;
}
.m-quote--center { align-items: center; padding: 20px 26px; margin-bottom: 24px; max-width: 60ch; }
.m-quote--plain  { margin-bottom: 0; max-width: none; }
.m-quote__icon { font-size: 30px; flex: none; margin-top: 2px; }
.m-quote--center .m-quote__icon { margin-top: 0; }
.m-method--emdr .m-quote__icon { color: var(--c-pink); }
.m-method--ifs  .m-quote__icon { color: var(--c-blue); }
.m-method--dbt  .m-quote__icon { color: var(--c-purple); }
.m-quote__text {
  font-family: var(--font-hand);
  font-size: 26px;
  line-height: 1.3;
  color: var(--c-ink);
  margin: 0;
}
.m-quote--center .m-quote__text { line-height: 1.25; }

/* Видео-слот (EMDR) */
.m-video {
  position: relative;
  aspect-ratio: 16 / 9;
  max-width: 720px;
  border-radius: 20px;
  background: var(--c-ink);
  overflow: hidden;
  margin-bottom: 32px;
}
.m-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Две колонки */
.m-two { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.m-two--tight { margin-bottom: 8px; }
.m-two__center { display: flex; align-items: center; }

.m-col-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  margin-bottom: 14px;
}
.m-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.m-list li { display: flex; gap: 10px; font-size: 16px; line-height: 1.45; color: var(--c-ink); }
.m-list__icon { font-size: 20px; flex: none; }
.m-method--emdr .m-list__icon { color: var(--c-pink); }
.m-method--ifs  .m-list__icon { color: var(--c-blue); }
.m-method--dbt  .m-list__icon { color: var(--c-purple); }
.m-how { font-size: 16px; line-height: 1.6; color: var(--c-ink); margin: 0; }
.m-note {
  font-size: 14px;
  font-style: italic;
  color: var(--c-ink-70);
  margin: 26px 0 0;
  max-width: 66ch;
}

/* Четыре модуля навыков (DBT) */
.m-modules {
  background: rgba(255, 255, 255, .62);
  border-radius: 22px;
  padding: 26px 30px;
  margin-bottom: 30px;
}
.m-modules__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  margin-bottom: 18px;
}
.m-modules-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 32px; }
.m-module { display: flex; gap: 12px; }
.m-module__num {
  font-family: var(--font-display);
  font-weight: 900;
  color: var(--c-purple);
  font-size: 22px;
  line-height: 1;
  flex: none;
}
.m-module p { margin: 0; font-size: 16px; line-height: 1.5; }

/* ============================================================
   ФИНАЛ
   ============================================================ */
.m-closing { text-align: center; padding: 40px 20px 60px; }
.m-closing__inner { max-width: 80ch; margin: 0 auto 32px; }
.m-closing__quote {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 44px;
  line-height: 1.14;
  letter-spacing: -.02em;
  color: var(--c-ink);
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* ============================================================
   АДАПТИВ
   ============================================================ */
@media (max-width: 1040px) {
  .m-hero-h1 { padding-right: 0; }
  .vf-stkr--m-hero { display: none; }
}
@media (max-width: 760px) {
  .m-hero-h1 { font-size: 52px; }
  .m-num { font-size: 64px; }
  .m-abbr { font-size: 44px; }
  .m-closing__quote { font-size: 34px; }
  .m-two, .m-modules-grid { grid-template-columns: 1fr; }
  .m-method { padding: 30px 22px; }
  .m-main { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 420px) {
  .m-hero-h1 { font-size: 40px; }
  .m-abbr { font-size: 36px; }
  .m-num { font-size: 52px; }
  /* На узком экране 44px-цитата уезжает за край. Уменьшаем и выключаем
     автоперенос: при таком кегле он рвал цитату по слогам 3-4 раза подряд
     ("ко-торыми", "же-лаемую") и она читалась рвано. На 26px все слова
     помещаются целиком, break-word из базового правила остается страховкой. */
  .m-closing__quote { font-size: 26px; hyphens: manual; }
  .m-chips { flex-direction: column; align-items: stretch; }
  .m-method { padding: 26px 18px; }
}
/* Самые узкие телефоны (320px): у кнопки дизайн-системы текст не переносится
   (white-space: nowrap), и "К форматам и записи" не влезает. Ужимаем кнопку. */
@media (max-width: 360px) {
  .m-closing .btn--lg { padding: 14px 18px; font-size: 15px; }
}