/* ===================================================================
   О нас (/about/)

   В теле страницы — только текст, набранный обычными блоками. Ни цветов,
   ни колонок редактор не задаёт: раскладку и раскраску целиком делает тема.

   | абзац (первый)         | лид в средней колонке
   | абзац (второй и далее) | текст под лидом, узкой колонкой
   | заглавное изображение  | фото справа (Feature image, не блок тела)
   | первый заголовок H2    | заголовок тёмной полосы «Поддержите…»
   | абзац после него       | текст тёмной полосы
   | кнопочная карточка     | кнопка «Поддержать» в правой половине полосы
   | второй заголовок H2    | «Контакты» слева
   | маркированный список   | строки «подпись — адрес почты»

   Порядок и состав блоков значимы: полоса — это «первый H2 + следующий за ним
   абзац + кнопка», контакты — «второй H2 + список». Лишний абзац между
   полосой и «Контактами» тема сочтёт частью полосы.

   Сетка — 305px | шесть равных колонок | 305px, зазор 25px. Такой набор
   даёт разом все три раскладки боя: крайние колонки ровно по 305px (заголовок
   и фото), середина — 580px (текст), а середина сетки приходится ровно
   на границу четвёртой и пятой колонок, потому что набор симметричен, —
   отсюда половины тёмной полосы. Строки расставляет автоматика грида:
   элемент с явно заданной колонкой встаёт в текущую строку, если та колонка
   свободна.

   order расставлен явно у всех элементов темы и у блоков полосы. Он решает
   две задачи: кнопка должна попасть в одну строку с заголовком полосы (для
   этого идёт в обходе раньше следующего за ней абзаца), а блок соцсетей —
   встать над списком почт, хотя в разметке он идёт после него.
   =================================================================== */
.about-page {
  padding-top: 10px;
}
@media (max-width: 991px) {
  .about-page {
    padding-top: 8px;
  }
}

.about-page__grid {
  display: grid;
  grid-template-columns: 305px repeat(6, minmax(0, 1fr)) 305px;
  /* Первые две строки заданы явно: фото занимает их обе, и без гибкой второй
     строки лишняя высота снимка распределилась бы поровну между ними —
     от этого второй абзац уезжал вниз. */
  grid-template-rows: auto 1fr;
  column-gap: 25px;
  align-items: start;
}
.about-page__grid > * {
  min-width: 0;
}

.about-page__title {
  grid-column: 1;
  grid-row: 1;
  order: -10;
  margin: 0;
}

.about-page__photo {
  grid-column: 8;
  grid-row: 1 / span 2;
  order: 10;
  margin: 0;
}
.about-page__photo img {
  display: block;
  width: 100%;
}

/* Вступление: первый абзац крупнее, остальные — узкой колонкой */
.about-page__grid > p {
  grid-column: 2 / 8;
  margin: 0;
}
.about-page__grid > p:first-of-type {
  font-size: 22px;
  line-height: 30px;
  letter-spacing: -0.66px;
}
@media (max-width: 991px) {
  .about-page__grid > p:first-of-type {
    font-size: 20px;
    line-height: 28px;
    letter-spacing: -0.6px;
  }
}
.about-page__grid > p + p {
  margin-top: 25px;
  max-width: 305px;
}
@media (max-width: 991px) {
  .about-page__grid > p + p {
    max-width: 100%;
    margin-top: 16px;
  }
}

/* --- Тёмная полоса поддержки ---
   Полосу собирают три обычных блока: заголовок и кнопка стоят в одной строке
   грида (левая и правая половины), текст — в следующей, во всю ширину.
   Подложку каждый из них красит сам, поэтому важно, чтобы между ними
   не было вертикального зазора (row-gap у грида нулевой) и чтобы блоки
   растягивались на всю высоту своей строки (align-self: stretch).

   Вылет за пределы контейнера — приём с отрицательными полями. Проценты
   в полях и отступах считаются от ширины грид-области, поэтому у половинных
   блоков формула через 100%, а у блока во всю ширину — через 50%.
   Вторым слагаемым в отступ входит ограничение строки: на бою колонка полосы
   шириной min(половина, 530px) (.about-donation__col), и здесь эту ширину
   задаёт отступ с противоположной стороны — max-width убил бы вылет
   за контейнер, поэтому «не шире» выражено через max() у отступа.
   Перебор по 100vw на ширину скроллбара срезает overflow: hidden
   у .site-main. */
.about-page__grid > h2:first-of-type,
.about-page__grid > h2:first-of-type ~ p,
.about-page__grid > .kg-button-card {
  align-self: stretch;
  background-color: #020100;
  color: #fff;
}

/* Заголовок полосы — левая половина, подложка от левого края экрана
   до середины зазора между половинами */
.about-page__grid > h2:first-of-type {
  grid-column: 1 / 5;
  grid-row: auto;
  order: 20;
  margin: 65px -12.5px 0 calc(100% + 12.5px - 50vw);
  padding: 50px max(12.5px, calc(100% + 12.5px - 530px)) 0 calc(50vw - 100% - 12.5px);
  font-family: "Cormorant Garamond Holod", sans-serif;
  font-size: 46px;
  line-height: 42px;
  font-weight: 600;
  letter-spacing: normal;
}
@media (max-width: 1199px) {
  .about-page__grid > h2:first-of-type {
    font-size: 36px;
    line-height: 34px;
  }
}

/* Кнопка полосы — правая половина, подложка от середины зазора
   до правого края экрана */
.about-page__grid > .kg-button-card {
  grid-column: 5 / -1;
  order: 30;
  display: block;
  /* width: auto снимает width: 100% из cards.min.css — иначе блок остаётся
     шириной в свою колонку и отрицательные поля его не расширяют */
  width: auto;
  margin: 65px calc(100% + 12.5px - 50vw) 0 -12.5px;
  padding: 50px calc(50vw - 100% - 12.5px) 0 max(12.5px, calc(100% + 12.5px - 530px));
}
.about-page__grid > .kg-button-card a.kg-btn {
  display: block;
  width: 100%;
  height: auto;
  padding: 16px 10px;
  border: 1px solid #FA6E4B;
  border-radius: 3px;
  background-color: #FA6E4B;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  line-height: 1;
  font-weight: 400;
  text-align: center;
  text-transform: none;
  letter-spacing: normal;
}
@media (hover: hover) {
  .about-page__grid > .kg-button-card a.kg-btn {
    transition: background-color 0.25s, border-color 0.25s;
  }
  .about-page__grid > .kg-button-card a.kg-btn:hover {
    background-color: #FB8B6F;
    border-color: #FB8B6F;
    opacity: 1;
  }
}

/* Текст полосы — во всю ширину, но набирается по левой половине:
   правый отступ и обрезает строку по 635px */
.about-page__grid > h2:first-of-type ~ p {
  grid-column: 1 / -1;
  order: 40;
  max-width: none;
  margin: 0 calc(50% - 50vw);
  padding: 20px max(calc(50vw + 12.5px), calc(50vw + 50% - 530px)) 30px calc(50vw - 50%);
  color: #A7A7A7;
}

/* --- Контакты ---
   Заголовок занимает две строки грида (свою и строку списка почт), иначе
   список опускался бы на высоту крупного заголовка, а не соцсетей. */
.about-page__grid > h2 {
  grid-column: 1;
  grid-row: span 2;
  order: 50;
  margin: 25px 0 0;
  font-family: "Cormorant Garamond Holod", sans-serif;
  font-size: 46px;
  line-height: 42px;
  font-weight: 600;
  letter-spacing: normal;
}
@media (max-width: 1199px) {
  .about-page__grid > h2 {
    font-size: 36px;
    line-height: 34px;
  }
}
@media (max-width: 991px) {
  .about-page__grid > h2 {
    font-size: 28px;
    line-height: 25px;
  }
}

.about-page__soc {
  grid-column: 2 / -1;
  order: 60;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 25px;
  margin-top: 42px;
}
@media (max-width: 575px) {
  .about-page__soc {
    gap: 14px 10px;
  }
}
.about-page__soc-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 16px;
  line-height: 22px;
}
@media (hover: hover) {
  .about-page__soc-item {
    transition: color 0.25s;
  }
  .about-page__soc-item:hover {
    color: #FA6E4B;
  }
}
.about-page__soc-item span {
  margin-top: -2px;
  border-bottom: 1px solid;
}

/* Почты: пункт списка = подпись + ссылка по краям строки.
   Тут флекс нужен по рисунку, и это осознанный риск: если редакция наберёт
   в пункте что-то ещё, оно станет третьим элементом строки. */
.about-page__grid > ul {
  grid-column: 2 / -1;
  order: 70;
  margin-top: 25px;
}
.about-page__grid > ul li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  padding: 20px 0;
  border-top: 1px solid rgba(25, 25, 25, 0.1);
  color: #A7A7A7;
}
@media (max-width: 575px) {
  .about-page__grid > ul li {
    font-size: 14px;
    line-height: 20px;
  }
}
.about-page__grid > ul li a {
  color: #191919;
}
@media (hover: hover) {
  .about-page__grid > ul li a {
    transition: opacity 0.25s;
  }
  .about-page__grid > ul li a:hover {
    opacity: 0.8;
  }
}

/* --- Планшет: заголовок во всю ширину, фото рядом с текстом --- */
@media (max-width: 1199px) {
  .about-page__grid {
    grid-template-rows: auto auto 1fr;
  }
  .about-page__title {
    grid-column: 1 / -1;
    margin-bottom: 40px;
  }
  .about-page__photo {
    grid-column: 8;
    grid-row: 2 / span 2;
  }
  .about-page__grid > p {
    grid-column: 1 / 8;
  }
  .about-page__grid > h2,
  .about-page__soc,
  .about-page__grid > ul {
    grid-column: 1 / -1;
  }
  .about-page__grid > h2 {
    grid-row: auto;
    margin-bottom: 40px;
  }
  .about-page__soc {
    margin-top: 0;
  }
}

/* --- ≤991px: полоса становится одноколоночной ---
   Все три блока идут во всю ширину, кнопка уезжает под текст. */
/* Ниже 992px две фиксированные колонки по 305px с семью зазорами перестают
   помещаться в контейнер (610 + 175 = 785px), и середина сетки схлопывается.
   Поэтому здесь сетка другая: текст + фото, а полоса — одноколоночная. */
@media (max-width: 991px) {
  .about-page__grid {
    grid-template-columns: minmax(0, 1fr) 305px;
  }
  .about-page__photo {
    grid-column: 2;
  }
  .about-page__grid > p {
    grid-column: 1;
  }
  .about-page__title,
  .about-page__grid > h2,
  .about-page__soc,
  .about-page__grid > ul {
    grid-column: 1 / -1;
  }
  .about-page__title {
    margin-bottom: 32px;
  }
  .about-page__grid > h2 {
    margin-top: 32px;
    margin-bottom: 32px;
  }
  .about-page__soc {
    margin-bottom: 7px;
  }
  .about-page__grid > h2:first-of-type,
  .about-page__grid > h2:first-of-type ~ p,
  .about-page__grid > .kg-button-card {
    grid-column: 1 / -1;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: calc(50vw - 50%);
    padding-right: calc(50vw - 50%);
  }
  .about-page__grid > h2:first-of-type {
    margin-top: 32px;
    margin-bottom: 0;
    padding-top: 32px;
  }
  .about-page__grid > h2:first-of-type ~ p {
    padding-top: 16px;
    padding-bottom: 0;
  }
  .about-page__grid > .kg-button-card {
    order: 45;
    margin-top: 0;
    padding-top: 20px;
    padding-bottom: 34px;
  }
}

/* --- Телефон: одна колонка --- */
@media (max-width: 767px) {
  .about-page__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }
  .about-page__title,
  .about-page__photo,
  .about-page__grid > p,
  .about-page__grid > h2,
  .about-page__soc,
  .about-page__grid > ul,
  .about-page__grid > .kg-button-card {
    grid-column: 1;
    grid-row: auto;
  }
  .about-page__photo {
    margin-top: 32px;
    max-width: 305px;
  }
}
@media (max-width: 575px) {
  .about-page__photo {
    max-width: 100%;
  }
}

/* ===================================================================
   Контакты (/contacts/)

   Весь текст страницы приходит из редактора; соответствие блоков дизайну:
   | абзац                | подпись под заголовком («Пишите нам:»)
   | маркированный список | три колонки «подпись + адрес почты»
   | заголовок H2         | подпись над иконками соцсетей
   Порядок и типы блоков значимы: раскладку задаёт CSS, а не редактор.
   Сами иконки соцсетей остаются в шаблоне.
   =================================================================== */
.contacts {
  text-align: center;
  padding-top: 15px;
  padding-bottom: 55px;
}
@media (max-width: 991px) {
  .contacts {
    padding-top: 0;
    padding-bottom: 16px;
  }
}
.contacts__title {
  margin-bottom: 20px;
}
@media (max-width: 991px) {
  .contacts__title {
    margin-bottom: 10px;
  }
}

/* «Пишите нам:» */
.contacts__body > p {
  font-size: 18px;
  line-height: 25px;
  letter-spacing: 0.18px;
  margin: 0 0 64px;
}
@media (max-width: 991px) {
  .contacts__body > p {
    font-size: 16px;
    line-height: 22px;
    letter-spacing: normal;
    margin-bottom: 30px;
  }
}

/* Почты: пункт списка = подпись + ссылка. Ссылку делаем блочной, чтобы она
   встала под подписью; флекс тут не нужен и был бы вреден — в пункт пишет
   редакция, и любой инлайновый тег стал бы отдельным элементом. */
.contacts__body > ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 25px;
}
@media (max-width: 767px) {
  .contacts__body > ul {
    grid-template-columns: minmax(0, 1fr);
  }
}
.contacts__body > ul li {
  font-size: 14px;
  line-height: 20px;
  color: #FA6E4B;
}
@media (max-width: 991px) {
  .contacts__body > ul li {
    font-size: 12px;
    line-height: 18px;
  }
}
.contacts__body > ul li a {
  display: block;
  margin-top: 25px;
  font-family: "Cormorant Garamond Holod", sans-serif;
  font-size: 32px;
  line-height: 30px;
  font-weight: 600;
  color: #191919;
}
@media (max-width: 991px) {
  .contacts__body > ul li a {
    margin-top: 12px;
    font-size: 24px;
    line-height: 22px;
  }
}
@media (hover: hover) {
  .contacts__body > ul li a {
    transition: color 0.25s;
  }
  .contacts__body > ul li a:hover {
    color: #FA6E4B;
  }
}

/* «Присоединяйтесь в соцсетях:» — по рисунку это не заголовок-крупняк,
   а такая же подпись, как «Пишите нам:». Отдельным типом блока сделана
   намеренно: так CSS отличает её от первого абзаца без счёта позиций. */
.contacts__body > h2 {
  font-family: inherit;
  font-size: 18px;
  line-height: 25px;
  font-weight: 400;
  letter-spacing: 0.18px;
  margin: 135px 0 48px;
}
@media (max-width: 991px) {
  .contacts__body > h2 {
    margin-top: 70px;
    margin-bottom: 28px;
  }
}

@media (max-width: 575px) {
  .contacts__soc-list {
    max-width: 148px;
    margin: 0 auto;
  }
}

.vacancies__row {
  align-items: flex-start;
  margin-bottom: -32px;
}
.vacancies__col {
  margin-bottom: 32px;
}
.vacancies__left {
  width: 25%;
}
.vacancies__right {
  width: 75%;
}
/* Порядок важен: у .vacancies__col и .vacancies__left одинаковая
   специфичность, поэтому схлопывание колонок должно идти последним —
   иначе на планшете страница остаётся двухколоночной (в legacy так же) */
@media (max-width: 991px) {
  .vacancies__col {
    width: 100%;
  }
}
.contacts-soc {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px 10.5px;
}
.contacts-soc__item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid #FA6E4B;
  border-radius: 50%;
}
@media (hover: hover) {
  .contacts-soc__item {
    transition: background-color 0.25s;
  }
  .contacts-soc__item:hover {
    background-color: #FA6E4B;
  }
  .contacts-soc__item:hover svg path {
    fill: #fff;
  }
}
@media (hover: hover) {
  .contacts-soc__item svg path {
    transition: fill 0.25s;
  }
}

/* Результат платежа (/thank-you/, /failed-payment/) — из legacy _donate-result.scss

   Всё содержимое страницы приходит из редактора:
   | абзац                 | текст под заголовком, узкой колонкой по центру
   | кнопочная карточка    | оранжевая кнопка («На главную» / «Попробовать еще раз»)
   | заглавное изображение | сердце внизу страницы

   .donate-result__text намеренно НЕ флекс: редакция пишет внутрь него, и любой
   второй блок (кнопка) стал бы вторым флекс-элементом и встал бы рядом с абзацем.
   Центрируем колонку через margin: auto у детей. */
.donate-result {
  margin-bottom: 65px;
}
@media (max-width: 575px) {
  .donate-result {
    margin-bottom: 0;
  }
}
.donate-result__title {
  margin-bottom: 16px;
}
@media (max-width: 575px) {
  .donate-result__title {
    text-align: left;
    margin-bottom: 16px;
  }
}
.donate-result__text {
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 135%;
}
.donate-result__text > * {
  max-width: 526px;
  margin-left: auto;
  margin-right: auto;
}
.donate-result__text p {
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 135%;
  margin-bottom: 30px;
  text-align: center;
}
@media (max-width: 575px) {
  .donate-result__text p {
    margin-bottom: 16px;
    text-align: left;
  }
}
.donate-result__text p a {
  color: var(--Orange-100, #FA6E4B);
  text-decoration: none;
  border-bottom: none;
}
/* Кнопка из кнопочной карточки Ghost — вид .btn.btn-lg.
   Селектор длиннее, чем нужно, намеренно: у cards.min.css правило
   `.kg-button-card a.kg-btn` (0,2,1), и более короткое ему проигрывает. */
.donate-result__text .kg-button-card {
  margin-bottom: 30px;
}
@media (max-width: 575px) {
  .donate-result__text .kg-button-card {
    margin-bottom: 24px;
  }
}
.donate-result__text .kg-button-card a.kg-btn {
  justify-content: center;
  width: 100%;
  max-width: 336px;
  height: auto;
  padding: 16px 10px;
  border: 1px solid #FA6E4B;
  border-radius: 3px;
  background-color: #FA6E4B;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 135%;
  text-align: center;
  text-transform: none;
}
@media (hover: hover) {
  .donate-result__text .kg-button-card a.kg-btn {
    transition: background-color 0.25s, border-color 0.25s;
  }
  .donate-result__text .kg-button-card a.kg-btn:hover {
    background-color: #FB8B6F;
    border-color: #FB8B6F;
    opacity: 1;
  }
}

.donate-result__img {
  margin: 0;
}
.donate-result__img img {
  display: block;
  width: 100%;
}