/* Общие для всех секций примитивы.

   Шапка секции повторяется одинаково в «О проекте», «Питомцы», «Команда»,
   «Обратная связь» и «Соцсети»: слева надзаголовок с чертой и крупный
   Playfair-заголовок, справа — вводный абзац. */

.section {
  position: relative;
  padding-inline: var(--pad-header); /* 96 */
}

.section__head {
  display: grid;
  grid-template-columns: 54.625rem 47.375rem; /* 874 / 758 */
}

.section__eyebrow-row {
  display: flex;
  align-items: center;
  gap: 2rem; /* 32 */
}

.section__eyebrow {
  font-weight: 500;
  font-size: 1.25rem; /* 20 */
  line-height: 1.5rem; /* 24 */
  text-transform: uppercase;
  color: var(--c-accent);
  white-space: nowrap;
}

.section__rule {
  width: 13.75rem; /* 220 */
  height: 0.125rem; /* 2 */
  background: var(--c-accent);
  border: 0;
  margin: 0;
  flex-shrink: 0;
}

.section__title {
  margin-top: 1.5rem; /* 24 */
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 3.5rem; /* 56 */
  line-height: 4rem; /* 64 */
  letter-spacing: 0.0054em; /* 0.3px при кегле 56 */
  color: var(--c-text);
}

/* Часть заголовка, набранная бирюзовым курсивом */
.section__title em {
  font-style: italic;
  color: var(--c-brand);
}

.section__lead {
  margin-top: 6.5rem; /* 104 */
  font-size: 1.75rem; /* 28 */
  line-height: 2.25rem; /* 36 */
  color: var(--c-ink);
}

/* Карточка со скруглением и оранжевой обводкой — база для «О проекте» */
.card {
  position: relative;
  border: 1px solid var(--c-accent);
  border-radius: var(--r-lg); /* 24 */
  background: var(--c-surface);
}

@media (max-width: 1199px) {
  .section {
    padding-inline: 2rem;
  }

  .section__head {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .section__title {
    font-size: clamp(1.75rem, 5.5vw, 2.75rem);
    line-height: 1.15;
  }

  .section__rule {
    width: 6rem;
  }

  .section__lead {
    margin-top: 0;
    font-size: 1.0625rem;
    line-height: 1.5;
  }
}

/* Вертикальный ритм из макета: между секциями 160 px, перед подвалом 120. */
main > .section,
main > .hero {
  margin-top: 10rem; /* 160 */
}

main > .hero {
  margin-top: 0;
}

@media (max-width: 1199px) {
  main > .section,
  main > .hero {
    margin-top: 4rem;
  }

  main > .hero {
    margin-top: 0;
  }
}

/* Простая текстовая страница (политика обработки ПДн) */
.legal {
  max-width: 56rem;
  padding-block: 5rem;
  font-size: 1.25rem;
  line-height: 1.6;
}

.legal p {
  margin-top: 1.5rem;
}

.legal a {
  color: var(--c-accent);
  text-decoration: underline;
}