/* ============================================================
   blocks.css — стили блоков сайта (новая структура)
   Подключается после tokens / base / components.
   ============================================================ */

/* Общий заголовок секции (на тёмном фоне) */
.section-h {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--h1-section-size);   /* 36px */
  line-height: var(--h1-section-lh);
  color: var(--card);
}
@media (min-width: 700px) { .section-h { font-size: 44px; } }


/* ──────────────────────────────────────────
   01 · Hero
   ────────────────────────────────────────── */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  margin-top: calc(-1 * var(--page-padding-top));
  padding-top: 0;
  padding-bottom: var(--s-6);
}

/* Тёмная подложка под Hero, фейдит в прозрачность */
.hero::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0; bottom: 0;
  left: 50%;
  margin-left: -50vw;
  width: 100vw;
  background: linear-gradient(180deg,
    #0c0613 0%, #0c0613 70%, rgba(12,6,19,0.6) 88%, transparent 100%);
}

.hero__media {
  width: calc(100% + 2 * var(--page-padding-x));
  margin-left: calc(-1 * var(--page-padding-x));
  margin-right: calc(-1 * var(--page-padding-x));
  aspect-ratio: 2 / 3; /* точно под пропорции фото — без обрезки */
  overflow: hidden;
  background: #0c0613;
  margin-bottom: var(--s-3);
}
.hero__illustration {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}

/* Заголовок-предложение */
.hero__heading {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.25;
  color: var(--card);
}
.hero__heading em {
  font-style: italic;
  font-weight: 500;
  color: var(--lilac);
}

.hero__subtitle {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: var(--body-lh);
  color: var(--on-dark);
}

@media (min-width: 700px) {
  .hero__heading { font-size: 34px; }
}
@media (min-width: 1024px) {
  .hero__heading { font-size: 38px; }
}


/* ──────────────────────────────────────────
   02 · Расписание
   ────────────────────────────────────────── */

.schedule {
  padding-top: var(--s-6);
  padding-bottom: var(--s-6);
}
.schedule__card {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.schedule__eyebrow {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 20px;
  color: var(--accent);
}
.schedule__list {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: var(--s-2);
}
.schedule__list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-2) 0;
  border-bottom: 0.5px solid rgba(94, 58, 120, 0.2);
}
.schedule__list li:last-child { border-bottom: none; }
.schedule__city {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  color: var(--ink);
}
.schedule__date {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink-2);
}
.schedule__note {
  margin: 0;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
}
.schedule__cta { width: 100%; }


/* ──────────────────────────────────────────
   03 · Блок узнавания
   ────────────────────────────────────────── */

.recognition {
  padding-top: var(--s-8);
  padding-bottom: var(--s-8);
}
.recognition__body {
  display: flex; flex-direction: column; gap: var(--s-4);
}
.recognition__body p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.55;
  color: var(--on-dark);
}
.recognition__punch {
  font-family: var(--font-display) !important;
  font-style: italic;
  font-size: 24px !important;
  color: var(--accent-2) !important;
  margin-top: var(--s-2) !important;
}
@media (min-width: 700px) {
  .recognition__punch { font-size: 30px !important; }
}


/* ──────────────────────────────────────────
   04 · Для кого
   ────────────────────────────────────────── */

.audience {
  display: flex; flex-direction: column; gap: var(--s-5);
  padding-top: var(--s-8); padding-bottom: var(--s-8);
}
.audience__heading {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--h1-section-size);
  line-height: var(--h1-section-lh);
  color: var(--card);
}
.audience__body { display: flex; flex-direction: column; gap: var(--s-4); }
.audience__body p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.55;
  color: var(--on-dark);
}
.audience__punch {
  font-family: var(--font-display) !important;
  font-style: italic;
  font-size: 24px !important;
  color: var(--accent-2) !important;
  margin-top: var(--s-2) !important;
}
@media (min-width: 700px) {
  .audience__heading { font-size: 44px; }
  .audience__punch { font-size: 30px !important; }
}


/* ──────────────────────────────────────────
   05 · Механизм + цитата
   ────────────────────────────────────────── */

.mechanism {
  display: flex; flex-direction: column; gap: var(--s-6);
  padding-top: var(--s-8); padding-bottom: var(--s-8);
}
.mechanism__heading {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--h1-section-size);
  line-height: var(--h1-section-lh);
  color: var(--card);
}
.mechanism__body { display: flex; flex-direction: column; gap: var(--s-4); }
.mechanism__body p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.55;
  color: var(--on-dark);
}
.mechanism__quote {
  display: flex; flex-direction: column; gap: var(--s-2);
}
.mechanism__quote-text {
  margin: 0;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink-2);
}
.mechanism__quote-author {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  color: var(--ink);
}
@media (min-width: 700px) { .mechanism__heading { font-size: 44px; } }


/* ──────────────────────────────────────────
   06 · Форматы работы
   ────────────────────────────────────────── */

.formats {
  display: flex; flex-direction: column; gap: var(--s-6);
  padding-top: var(--s-8); padding-bottom: var(--s-8);
}
.formats__heading {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--h1-section-size);
  line-height: var(--h1-section-lh);
  color: var(--card);
}
.format {
  display: flex; flex-direction: column; gap: var(--s-2);
}
.format__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
}
.format__title {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-medium);
  font-size: 30px;
  line-height: 1.1;
  color: var(--bg-2);
}
.format__meta {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 17px;
  color: var(--accent);
}
.format__text {
  margin: var(--s-2) 0 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-2);
}
@media (min-width: 700px) { .formats__heading { font-size: 44px; } }


/* ──────────────────────────────────────────
   07 · Что входит в сессию
   ────────────────────────────────────────── */

.included {
  display: flex; flex-direction: column; gap: var(--s-6);
  padding-top: var(--s-8); padding-bottom: var(--s-8);
}
.included__heading {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--h1-section-size);
  line-height: var(--h1-section-lh);
  color: var(--card);
}
.included__list {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: var(--s-5);
}
.included__list li {
  display: flex; flex-direction: column; gap: var(--s-1);
  padding-left: var(--s-4);
  border-left: 2px solid var(--gold);
}
.included__item-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.25;
  color: var(--card);
}
.included__list li p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--on-dark);
}
@media (min-width: 700px) { .included__heading { font-size: 44px; } }


/* ──────────────────────────────────────────
   08 · Цены
   ────────────────────────────────────────── */

.pricing {
  display: flex; flex-direction: column; gap: var(--s-5);
  padding-top: var(--s-8); padding-bottom: var(--s-8);
}
.pricing__heading {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--h1-section-size);
  line-height: var(--h1-section-lh);
  color: var(--card);
}
.pricing__card { display: flex; flex-direction: column; gap: var(--s-4); }
.pricing__list {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: var(--s-2);
}
.pricing__list li {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-3); padding: var(--s-2) 0;
  border-bottom: 0.5px solid rgba(94, 58, 120, 0.2);
}
.pricing__list li:last-child { border-bottom: none; }
.pricing__place {
  font-family: var(--font-display);
  font-weight: 600; font-size: 19px; color: var(--ink);
}
.pricing__amount {
  font-family: var(--font-display);
  font-weight: 600; font-size: 22px; color: var(--bg-2);
}
.pricing__single {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 40px;
  line-height: 1.1;
  color: var(--bg-2);
}
.pricing__single .pricing__per {
  font-weight: 400;
  font-size: 18px;
  color: var(--ink-2);
}
.pricing__per {
  font-family: var(--font-body);
  font-weight: 400; font-size: 14px; color: var(--ink-2);
}
.pricing__note {
  margin: 0;
  font-family: var(--font-body);
  font-style: italic; font-size: 15px;
  color: var(--ink-2);
}
.pricing__cta { width: 100%; }
@media (min-width: 700px) { .pricing__heading { font-size: 44px; } }


/* ──────────────────────────────────────────
   09 · Отзывы — цитаты + видео
   ────────────────────────────────────────── */

.testimonials {
  display: flex; flex-direction: column; gap: var(--s-6);
  padding-top: var(--s-8); padding-bottom: var(--s-8);
}
.testimonials__heading {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--h1-section-size);
  line-height: var(--h1-section-lh);
  color: var(--card);
}
.testimonials__list {
  display: flex; flex-direction: column; gap: var(--s-5);
}

/* Текстовая цитата */
.quote { display: flex; flex-direction: column; gap: var(--s-2); }
.quote__text {
  margin: 0;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-2);
}
.quote__author {
  margin: var(--s-2) 0 0;
  font-family: var(--font-display);
  font-weight: 600; font-size: 17px; color: var(--ink);
}

/* Большая кавычка-акцент (общая) */
.testimonial__quote-mark {
  display: block;
  margin: 0 0 calc(-1 * var(--s-3)) 0;
  font-family: var(--font-display);
  font-style: italic; font-weight: var(--fw-medium);
  font-size: 56px; line-height: 1;
  color: var(--accent);
  user-select: none;
}
.testimonial__divider {
  height: 1px; border: none; margin: var(--s-2) 0 0;
  background: var(--gold); opacity: 0.4;
}

/* Видео-карточка */
.testimonial { display: flex; flex-direction: column; gap: var(--s-3); }
.testimonial__media {
  position: relative; width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-field);
  overflow: hidden; background: var(--ink);
}
.testimonial__video {
  width: 100%; height: 100%; display: block;
  object-fit: contain; background: var(--ink);
}
.testimonial__author {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600; font-size: 18px; color: var(--ink);
}

.testimonials__cta { width: 100%; }
@media (min-width: 700px) { .testimonials__heading { font-size: 44px; } }


/* ──────────────────────────────────────────
   10 · FAQ
   ────────────────────────────────────────── */

.faq {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding-top: var(--s-8); padding-bottom: var(--s-8);
}
.faq__heading {
  margin: 0 0 var(--s-3);
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--h1-section-size);
  line-height: var(--h1-section-lh);
  color: var(--card);
}
.faq__item {
  border-top: 0.5px solid rgba(224, 191, 240, 0.2);
}
.faq__item:last-child {
  border-bottom: 0.5px solid rgba(224, 191, 240, 0.2);
}
.faq__q {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-4) 0;
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: 19px;
  line-height: 1.3;
  color: var(--card);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "+";
  flex-shrink: 0;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 22px;
  line-height: 1;
  color: var(--lilac);
  transition: transform var(--t-fast) var(--easing);
}
.faq__item[open] .faq__q::after {
  content: "×";
}
.faq__a {
  margin: 0;
  padding: 0 0 var(--s-4);
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--on-dark);
  max-width: 90%;
}
@media (min-width: 700px) {
  .faq__heading { font-size: 44px; }
  .faq__q { font-size: 21px; }
}


/* ──────────────────────────────────────────
   11 · Форма-заявка (одна, без шагов)
   ────────────────────────────────────────── */

.form {
  display: flex; flex-direction: column; gap: var(--s-5);
  padding-top: var(--s-8); padding-bottom: var(--s-8);
}
.form__heading {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--h1-section-size);
  line-height: var(--h1-section-lh);
  color: var(--card);
}
.form__subtitle {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: var(--body-lh);
  color: var(--on-dark-mid);
}

.form__single {
  display: flex; flex-direction: column; gap: var(--s-4);
}
.form__single[hidden] { display: none; }

.form__field { display: flex; flex-direction: column; gap: var(--s-2); }
.form__label {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--on-dark-mid);
}
.form__required { color: var(--accent); margin-left: 2px; }

.form__input,
.form__textarea {
  width: 100%;
  padding: var(--s-3);
  border: 0.5px solid rgba(224, 191, 240, 0.3);
  border-radius: var(--r-field);
  background: rgba(28, 14, 44, 0.4);
  color: var(--card);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.4;
  transition: border-color var(--t-fast) var(--easing);
}
.form__input::placeholder,
.form__textarea::placeholder { color: var(--on-dark-faint); }
.form__input:focus,
.form__textarea:focus { outline: none; border-color: var(--accent); }
.form__textarea { resize: vertical; min-height: 110px; }

.form__submit {
  width: 100%;
  margin-top: var(--s-2);
}

/* Экран подтверждения */
.form__success {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: var(--s-4);
  padding: var(--s-7) var(--s-5);
  border: 1px dashed rgba(224, 191, 240, 0.4);
  border-radius: var(--r-field);
}
.form__success[hidden] { display: none; }
.form__success-icon { color: var(--card); margin-bottom: var(--s-2); }
.form__success-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: 28px; line-height: 1.1; color: var(--card);
}
.form__success-body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--body-size); line-height: var(--body-lh);
  color: var(--on-dark-mid); max-width: 360px;
}
.form__success-cta { margin-top: var(--s-3); width: 100%; }

@media (min-width: 700px) {
  .form__heading { font-size: 44px; }
  .form__success-title { font-size: 32px; }
}


/* ──────────────────────────────────────────
   12 · Финальный блок
   ────────────────────────────────────────── */

.final {
  display: flex; flex-direction: column; gap: var(--s-4);
  padding-top: var(--s-8); padding-bottom: var(--s-9);
  text-align: center;
  align-items: center;
}
.final__heading {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--h1-section-size);
  line-height: var(--h1-section-lh);
  color: var(--card);
}
.final__text {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--body-size); line-height: var(--body-lh);
  color: var(--on-dark-mid);
}
.final__cta { min-width: 280px; margin-top: var(--s-2); }
@media (min-width: 700px) { .final__heading { font-size: 44px; } }


/* ──────────────────────────────────────────
   Footer — чёрный прямоугольник
   ────────────────────────────────────────── */

.site-footer {
  background: #000;
  padding: var(--s-6) var(--page-padding-x);
}
.site-footer__content {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--s-3); text-align: center;
  max-width: 720px; margin: 0 auto;
}
.site-footer__links { display: flex; gap: var(--s-7); }
.site-footer__link {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: 13px; letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--card); text-decoration: none;
  transition: color var(--t-fast) var(--easing);
}
.site-footer__link:hover { color: var(--accent-2); }
.site-footer__copyright {
  margin: 0;
  font-family: var(--font-body);
  font-size: 13px; color: var(--on-dark-faint);
  letter-spacing: 0.05em;
}


/* ============================================================
   ПРАВКИ КЛИЕНТА — цветовая схема + переносы
   ============================================================ */

/* Заголовки секций — оранжевые */
.audience__heading,
.mechanism__heading,
.formats__heading,
.included__heading,
.pricing__heading,
.testimonials__heading,
.faq__heading,
.form__heading { color: var(--accent); }

/* Body на тёмном фоне остаётся белым (базовые правила).
   Лавандовыми делаем только акценты и заголовки пунктов «Что входит». */

/* Тэглайн над расписанием — стиль как hero-абзац «это не массаж» */
.tagline {
  padding-top: var(--s-3);
  padding-bottom: var(--s-5);
}
.tagline__text {
  margin: 0;
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1.25;
  color: var(--card);
  text-wrap: wrap;
}
.tagline__lead {
  font-style: italic;
  color: var(--accent);
}
@media (min-width: 700px)  { .tagline__text { font-size: 32px; } }
@media (min-width: 1024px) { .tagline__text { font-size: 36px; } }

.tagline__sub {
  margin: var(--s-2) 0 0;
  font-size: 16px;
  line-height: 1.4;
  color: var(--card);
  opacity: 0.75;
}
@media (min-width: 700px)  { .tagline__sub { font-size: 18px; } }

/* «Что входит в сессию» — заголовок пункта лавандовый, описание белое */
.included__item-title { color: var(--lilac); }
.included__list li p { color: var(--on-dark); }

/* Форма: серый текст (подзаголовок, лейблы) → белый.
   Плейсхолдеры внутри полей остаются серыми (не трогаем). */
.form__subtitle,
.form__label { color: var(--on-dark); }

/* Курсивные акценты — лавандовые + заполняют строку до конца */
.recognition__punch,
.audience__punch { color: var(--lilac) !important; text-wrap: wrap; }

/* Hero — «Феникс-Практика» крупно жёлтым, ниже — утверждение с тире на всю ширину */
.hero__heading { text-wrap: wrap; }
.hero__brand {
  display: block;
  color: var(--gold);
  font-style: normal;
  font-weight: 600;
  font-size: 40px;            /* крупнее текста, но влезает в одну строку на мобайле */
  line-height: 1.05;
  white-space: nowrap;        /* без переноса «Феникс-Практика» */
  margin-bottom: var(--s-3);
  text-wrap: wrap;
}
.hero__statement {
  display: block;
  font-size: 26px;
  line-height: 1.25;
  color: var(--card);
  text-wrap: wrap;
}
.hero__statement em { font-style: italic; font-weight: 500; color: var(--lilac); }

/* Подзаголовок «Кости, связки, лимфа» — тот же шрифт и размер, что и абзац-утверждение */
.hero__subtitle {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1.25;
  color: var(--card);
  text-wrap: wrap;
}

@media (min-width: 700px) {
  .hero__brand { font-size: 64px; }
  .hero__statement,
  .hero__subtitle { font-size: 32px; }
}
@media (min-width: 1024px) {
  .hero__brand { font-size: 76px; }
  .hero__statement,
  .hero__subtitle { font-size: 36px; }
}

/* FAQ: заголовок оранжевый (выше), вопрос лавандовый, ответ белый */
.faq__q { color: var(--lilac); }
.faq__a { color: var(--on-dark); }

/* Фото Романа в блоках «Как это работает» и «Отзывы» */
.mechanism__photo {
  margin-top: var(--s-4);
}
.testimonials__photo {
  margin-bottom: var(--s-4);
}
.mechanism__photo img,
.testimonials__photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-field);
}
@media (min-width: 700px) {
  .mechanism__photo,
  .testimonials__photo { max-width: 420px; }
}