/* Главная страница. Токены и общие компоненты — base.css и components.css; здесь только то, что нужно главной.
   Правила файла те же: цвета из токенов, px из шкалы, радиус 0, теней нет, один уровень класса. */

/* --- Первый экран. Жёлтая панель героя — единственная заливка accent в окне просмотра, поэтому главная кнопка
   героя заливается ink с текстом paper (решение по своду: схема C и «одна заливка accent» вместе). --- */

.button--ink {
  background: var(--ink);
  color: var(--paper);
}

.hero__action .button {
  padding-inline: var(--space-32);
}

/* На узком экране первый экран собирается колонкой без панели: шапка занимает много места, а H1, лид и кнопка
   должны поместиться над нижней панелью с телефоном. */
@media (max-width: 40em) {
  .hero {
    min-height: 0;
  }

  .hero__panel {
    display: none;
  }

  .hero__text {
    justify-content: flex-start;
    padding-block: var(--space-24);
  }
}

/* Самые узкие экраны (320): слово «автоматизацию» с предлогом не помещается в строку при 36px. */
@media (max-width: 22.5em) {
  .hero__text h1 {
    font-size: 2rem;
  }
}

/* Низкий экран (320×568): чуть плотнее, чтобы микрострока под кнопкой не ушла под нижнюю панель. */
@media (max-width: 40em) and (max-height: 37.5em) {
  .hero__text {
    gap: var(--space-16);
    padding-top: var(--space-16);
  }
}

/* --- Заголовок секции с лидом. --- */

.section-head {
  display: grid;
  gap: var(--space-16);
  margin-bottom: var(--space-48);
}

.section-head h2 {
  max-width: 20ch;
}

.more {
  margin-top: var(--space-24);
}

.more a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
}

/* --- Блок партнёрств и опыта: текстом на тёмной полосе, без логотипов и ссылок на каталоги. --- */

.partners {
  padding-block: var(--space-64);
}

.partners__label {
  margin-bottom: var(--space-24);
  color: var(--paper-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.partners__list {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line-on-ink);
  list-style: none;
}

.partners__item {
  padding-block: var(--space-24);
  border-bottom: 1px solid var(--line-on-ink);
  font-size: clamp(1.25rem, 3vw, 2rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* --- «Работаю лично»: заголовок слева, текст справа. --- */

@media (min-width: 64em) {
  .split {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: var(--space-32);
  }
}

.split > .prose {
  margin-top: var(--space-24);
}

@media (min-width: 64em) {
  .split > .prose {
    margin-top: 0;
  }
}