/* =============================================================
   Страница «Информация» — каркас: герой, секции, призыв.
   Устроена как главная: голубой фон с героем, белые секции —
   скруглённые .white-block (base.css) поверх него.
   ============================================================= */

/* Голубой фон на всю страницу, включая полосу под шапкой, — как на главной,
   где шапка лежит поверх героя. Скругления .white-block видны на нём же. */
body:has(.info-page) {
  background: var(--color-why-card-bg);
}

/* --- Герой --- */

/* Снизу запас под наезд следующего .white-block (margin-top: −30px) */
.info-intro {
  padding: 50px 0 110px;
}

/* Контур логотипа слева вверху — как .hero__watermark на главной. У предков
   нет позиционирования, поэтому знак отсчитывается от верха страницы и уходит
   под шапку, как там. z-index −1 — под текстом героя, но над фоном страницы. */
.info-intro__watermark {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 188px;
  height: 396px;
  pointer-events: none;
}

.info-intro__inner {
  display: flex;
  align-items: center;
  gap: 60px;
}

.info-intro__text {
  flex: 1 1 0;
  min-width: 0;
}

.info-intro__title {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary-dark);
  line-height: var(--line-height-tight);
  margin: 0 0 24px;
}

.info-intro__desc {
  font-size: var(--font-size-base);
  color: var(--color-primary);
  line-height: var(--line-height-base);
  margin: 0 0 16px;
}

.info-intro__desc:last-child {
  margin-bottom: 0;
}

.info-intro__image {
  flex: 0 1 520px;
  min-width: 0;
  height: auto;
}

/* --- Секции --- */

.info-section {
  padding: 80px 0 100px;
}

.info-section__title {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary-dark);
  line-height: 1.2; /* заголовок про документы в две строки — с базовым 1.4 строки расползались */
  margin: 0 0 40px;
}

/* Подзаголовок части раздела — размером как «Связаться с нами» на «Контактах» */
.info-section__subtitle {
  font-size: 1.75rem; /* 28px */
  font-weight: var(--font-weight-bold);
  color: var(--color-primary-dark);
  margin: 60px 0 24px;
}

.info-section__title + .info-section__subtitle,
.info-section__subtitle:first-child {
  margin-top: 0;
}

/* Вводный абзац сразу под заголовком раздела */
.info-section__lead {
  max-width: 900px;
  margin: -16px 0 40px;
  font-size: var(--font-size-base);
  color: var(--color-primary);
  line-height: var(--line-height-base);
}

/* «Что получает Заказчик» — список с галочками в две колонки */
.info-section__benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 40px;
}

/* --- Призыв в конце страницы — как кнопка под «Услугами» --- */

.info-cta {
  margin-top: 80px;
  text-align: center;
}

.info-cta__title {
  font-size: 2rem; /* 32px */
  font-weight: var(--font-weight-bold);
  color: var(--color-primary-dark);
  margin: 0 0 12px;
}

.info-cta__text {
  font-size: var(--font-size-base);
  color: var(--color-primary);
  margin: 0 0 32px;
}

/* === Планшет === */
@media (max-width: 1023px) {
  .info-intro__inner {
    gap: 30px;
  }

  .info-intro__image {
    flex-basis: 340px;
  }

  .info-section__benefits {
    grid-template-columns: 1fr;
  }
}

/* === Mobile === */
@media (max-width: 767px) {
  /* Как на главной: на телефоне шапка — сплошная белая полоса, голубой
     начинается под ней. Знака в герое здесь нет, так что фон можно
     перенести на обёртку страницы. */
  body:has(.info-page) {
    background: var(--color-bg);
  }

  .info-page {
    background: var(--color-why-card-bg);
  }

  .info-intro {
    padding: 20px 0 50px;
  }

  .info-intro__watermark {
    display: none;
  }

  .info-intro__inner {
    flex-direction: column;
    align-items: stretch;
  }

  .info-intro__image {
    flex-basis: auto;
    align-self: center;
    width: 100%;
    max-width: 335px;
  }

  .info-intro__title,
  .info-section__title {
    font-size: 2rem; /* 32px */
    margin-bottom: 24px;
  }

  .info-intro__desc {
    font-size: 0.75rem; /* 12px — как описание героя на главной */
  }

  .info-section {
    padding: 50px 0 60px;
  }

  .info-section__subtitle {
    font-size: 1.25rem; /* 20px */
    margin: 40px 0 16px;
  }

  .info-section__lead {
    margin: -8px 0 24px;
    font-size: 0.875rem; /* 14px */
  }

  .info-cta {
    margin-top: 50px;
  }

  .info-cta__title {
    font-size: 1.5rem; /* 24px */
  }

  .info-cta__text {
    font-size: 0.875rem; /* 14px */
  }

  .info-cta .btn {
    width: 100%;
  }
}