/* ============================================================
   desktop.css — адаптация под десктоп.

   Подключается ПОСЛЕ остальных css, так что любые правила
   здесь имеют преимущество в каскаде. Все правила обёрнуты
   в @media — на мобилке не применяются, mobile CSS не тронут.

   Брейкпоинты:
   — 768px : tablet — мягкие подкрутки
   — 1024px: desktop — главные изменения (двухколоночные раскладки)
   — 1280px: large — расширяем контейнер, увеличиваем типографику
   ============================================================ */

/* ──────────────────────────────────────────
   ≥768px — Tablet
   ────────────────────────────────────────── */

@media (min-width: 768px) {
  :root {
    --page-padding-x: 40px;
  }

  /* Чуть крупнее body */
  body {
    font-size: 18px;
  }

  /* Hero — крупнее и с большим воздухом */
  .hero__heading { font-size: 56px; }
  .hero__subtitle { font-size: 18px; }
}

/* ──────────────────────────────────────────
   ≥1024px — Desktop
   ────────────────────────────────────────── */

@media (min-width: 1024px) {

  :root {
    --page-padding-x: 48px;
  }

  /* Контейнер шире */
  .page {
    max-width: 960px;
  }

  /* ───── Sticky header ───── */
  .site-header__inner {
    max-width: 960px;
    padding-left: 48px;
    padding-right: 48px;
  }
  .site-header__name { font-size: 13px; letter-spacing: 0.32em; }

  /* ───── Hero ───── */
  .hero {
    gap: var(--s-6);
  }
  .hero__media {
    /* Картинка занимает ~55vh — показывает больше фигуры (меньше обрезается).
       На стартовом экране остаётся только заголовок "Радикально. Эффективно. Не для всех."
       Подзаголовок и CTA уходят под скролл — это OK по задумке. */
    max-height: 55vh;
    aspect-ratio: 16 / 10;
  }
  .hero__heading { font-size: 64px; line-height: 1.05; }
  .hero__subtitle { font-size: 19px; max-width: 640px; }
  .hero__cta { width: auto; min-width: 280px; align-self: flex-start; }

  /* ───── Philosophy ───── */
  .philosophy { gap: var(--s-6); }
  .philosophy__heading { font-size: 56px; }
  .philosophy__body p { font-size: 19px; }
  .philosophy__accent { font-size: 36px; max-width: 60%; }
  .philosophy__cta {
    width: auto;
    min-width: 280px;
    align-self: center;             /* «Начать» по центру */
  }

  /* ───── Services — карточки последовательно (вертикальный стек),
       но КАЖДАЯ КАРТОЧКА на десктопе горизонтальная: слева заголовок+картинка,
       справа описание+список+CTA ───── */
  .services__heading { font-size: 56px; }
  .services__card-title { font-size: 40px; }
  .services__card-eyebrow { font-size: 22px; }
  .services__card-list-eyebrow { font-size: 22px; }

  .services__option {
    width: 100%;          /* как и все блоки — полная ширина page */
  }

  /* Карточка — двухколоночный grid.
     Шапка (заголовок + тег) на всю ширину карточки,
     ниже — слева eyebrow + media, справа body + list + cta.
     Body начинается на уровне media, как в Figma. */
  .services__card {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) 1.3fr;
    grid-template-areas:
      "head    head"
      "eyebrow ."
      "media   body"
      "media   list"
      "media   cta";
    column-gap: var(--s-7);
    row-gap: var(--s-4);
    align-items: start;
    padding: var(--s-7) var(--s-6) var(--s-6);
  }

  .services__card-head    { grid-area: head; margin: 0; align-items: center; }
  .services__card-eyebrow { grid-area: eyebrow; margin: 0; }
  .services__card-media   { grid-area: media; margin: 0; }
  .services__card-body    { grid-area: body; margin: 0; }
  .services__card-list    { grid-area: list; margin: 0; }
  .services__cta {
    grid-area: cta;
    width: auto;
    justify-self: start;
    align-self: center;        /* посередине между списком и низом карточки */
    min-width: 240px;
  }

  /* Заголовок не должен переноситься на 2 строки */
  .services__card-title {
    white-space: nowrap;
  }

  /* ───── Testimonials — 3 в ряд, ВСЕ КАРТОЧКИ ОДНОЙ ВЫСОТЫ ───── */
  .testimonials__heading { font-size: 56px; }
  .testimonials__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-6);
    align-items: stretch;            /* все карточки тянутся до высоты самой длинной */
  }
  /* Внутри каждой карточки делитель + meta прижимаются к низу,
     чтобы при разной длине quote-текста подписи всегда сидели внизу */
  .testimonial {
    height: 100%;
  }
  .testimonial__divider {
    margin-top: auto;
  }
  .testimonials__cta { width: auto; min-width: 320px; align-self: center; margin: 0 auto; display: inline-flex; }
  .testimonial__quote { font-size: 16px; }
  .testimonial__author { font-size: 18px; }

  /* ───── Audience ───── */
  .audience__heading { font-size: 56px; }
  .audience__subtitle { font-size: 19px; }
  .audience .checkbox__text { font-size: 21px; }
  .audience__cta {
    width: auto;
    min-width: 320px;
    align-self: center;             /* CTA по центру блока */
  }

  /* ───── Bio — фото side-by-side ───── */
  .bio__heading { font-size: 56px; }
  .bio__photos {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-7);
    margin: var(--s-5) 0;
  }
  /* Стрелка между фото скрывается — фото теперь в ряд, стрелка не нужна */
  .bio__photo-arrow { display: none; }
  .bio__body p { font-size: 19px; }
  .bio__accent { font-size: 36px; max-width: 70%; }
  .bio__cta {
    width: auto;
    min-width: 320px;
    align-self: center;             /* CTA по центру */
  }

  /* ───── Manifesto ───── */
  .manifesto { gap: var(--s-6); }
  .manifesto__heading { font-size: 56px; }
  .manifesto__body p { font-size: 19px; }
  .manifesto__accent { font-size: 36px; max-width: 60%; }
  .manifesto__cta {
    width: auto;
    min-width: 320px;
    align-self: center;             /* CTA по центру */
  }
  /* Рука: на десктопе ограничиваем размер.
     На мобилке рука 120vw — на 1024+ это огромный блок и футер уезжает далеко.
     Делаем её контейнерной, max-width разумный. */
  .manifesto__hand-wrap {
    width: 100%;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    margin-top: var(--s-4);
  }

  /* ───── Form ───── */
  .form {
    max-width: 720px;
    margin: 0;                      /* по левому краю, как остальные блоки */
    padding-left: 0;
    padding-right: 0;
  }
  .form__heading { font-size: 56px; }
  .form__subtitle { font-size: 19px; }
  .form__step {
    padding: var(--s-6) var(--s-5);
  }
  .form__input,
  .form__textarea {
    font-size: 17px;
    padding: var(--s-4);
  }
  .form__step-hint, .form__step-subtitle { font-size: 18px; }
  .form .checkbox__text { font-size: 17px; }

  /* ───── Footer ───── */
  .site-footer {
    padding: var(--s-7) var(--page-padding-x);
  }
  .site-footer__link { font-size: 14px; }
  .site-footer__copyright { font-size: 14px; }

  /* ───── Heading bumps (sections that need consistent treatment) ───── */
  /* Все section-headings одного размера для иерархии */
}

/* ──────────────────────────────────────────
   ≥1280px — Large desktop
   ────────────────────────────────────────── */

@media (min-width: 1280px) {

  .page {
    max-width: 1100px;
  }

  .site-header__inner {
    max-width: 1100px;
  }

  /* Hero ещё крупнее */
  .hero__heading { font-size: 72px; }
  .hero__subtitle { font-size: 20px; }

  /* Services 2-column */
  .services__card-title { font-size: 44px; }

  /* Testimonials остаются 3 колонки */

  /* Form шире */
  .form { max-width: 760px; }
}