/*
  Правки поверх дизайн-макета (css/main.css).
  Держим их здесь, чтобы обновление main.css от дизайнера ничего не затирало.
*/

/* Левый блок первого экрана — не фотография, а фирменный фон (тот же, что на 404),
   растянутый под пропорции правого снимка. Высота подхватывается от соседней
   колонки грида, а aspect-ratio держит блок в одну колонку на мобильных. */
.hero__media_promo {
  background: #1d82aa url(../img/img-2.png) center / cover no-repeat;
  aspect-ratio: 1600 / 1135;
}

/* Фон уже тёмный и однородный — затемнять текст поверх него не нужно */
.hero__media_promo .hero__media-content {
  background: none;
}

/* В одну колонку блок сужается, и текст перестаёт помещаться в пропорцию —
   отпускаем высоту и пускаем текст в поток, чтобы ничего не обрезалось. */
@media (max-width: 1023.98px) {
  .hero__media_promo {
    aspect-ratio: auto;
  }

  .hero__media_promo .hero__media-content {
    position: relative;
  }
}

/* Табы разделов на /projects: в макете их три, из базы может прийти больше —
   разрешаем перенос на вторую строку вместо горизонтального выезда. */
@media (min-width: 1024px) {
  .projects__nav {
    flex-wrap: wrap;
  }
}

/* Подпись под фотографией в статье: в макете её не было, а в базе поле есть */
.article__media-caption {
  display: block;
  margin: 1.2rem 0 0;
  font-size: 1.3rem;
  line-height: 1.4;
  color: #6b6b6b;
  text-align: center;
}

/* Автор публикации в подвале статьи. В макете там ссылка, у нас обычный текст,
   поэтому повторяем оформление правила .article__footer a. */
.article__footer-link {
  text-transform: uppercase;
}

/* Страница /partners. Отдельного макета для неё нет, поэтому собираем сетку
   логотипов в тех же радиусах и отступах, что и карточки в остальных разделах. */
.partners-page {
  margin: 0 0 13.6rem;
}

.partners-page__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.6rem;
}

.partners-page__item {
  background: #fff;
  border-radius: 3.5rem;
  min-height: 18rem;
  padding: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.partners-page__item img {
  display: block;
  max-width: 100%;
  max-height: 12rem;
  width: auto;
  height: auto;
  object-fit: contain;
}

@media (max-width: 1180.9px) {
  .partners-page__list {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1023.98px) {
  .partners-page {
    margin: 0 0 6rem;
  }

  .partners-page__list {
    grid-template-columns: repeat(2, 1fr);
    gap: .6rem;
  }

  .partners-page__item {
    min-height: 12rem;
    padding: 1.6rem;
  }
}

/* Блок «Любая ваша помощь будет полезна».
   Картинка заменена на handofgod.png: она почти квадратная (1004x1056),
   а размеры в макете заданы под прежнюю горизонтальную — поэтому задаём
   высоту, а ширину считаем от пропорций, чтобы изображение не растягивало. */
.helpful__img {
  width: auto;
  height: 37rem;
  object-fit: contain;
  object-position: bottom center;
  /* В самом файле снизу 42px прозрачного поля (4% высоты) — из-за него руки
     не доходили до края блока. Опускаем картинку на эту величину в текущем
     масштабе, чтобы запястья обрезались нижней границей, как в макете. */
  bottom: -1.5rem;
}

@media (max-width: 1023.98px) {
  .helpful__img {
    height: 28rem;
    bottom: -1.1rem;
  }
}

/* Та же картинка в блоке «История создания организации» на /about.
   В макете она растягивалась на всю ширину блока — для почти квадратной
   картинки так нельзя, поэтому ограничиваем по высоте и центрируем. */
.about__two-main ._media {
  text-align: center;
}

.about__two-main ._media img {
  width: auto;
  height: 24rem;
  margin: 0 auto;
}

@media (max-width: 1023.98px) {
  .about__two-main ._media img {
    height: 20rem;
  }
}

/* Ловушка для ботов в контактной форме — от посетителя скрыта */
.form-row_hidden {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Ответ контактной формы */
#feedback-message {
  margin-top: 1.2rem;
  font-size: 1.4rem;
  line-height: 1.4;
}

#feedback-message.success {
  color: #1d82aa;
}

#feedback-message.error {
  color: #c0392b;
}

/* Ответ формы подписки */
#subscribe-message {
  margin-top: 0.8rem;
  font-size: 1.4rem;
  line-height: 1.4;
}

#subscribe-message.success {
  color: #1d82aa;
}

#subscribe-message.error {
  color: #c0392b;
}