/*
  Правки поверх дизайн-макета (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;
}

/* ==========================================================================
   Страница отдельного проекта (шаблон контента проекта)
   ========================================================================== */

.project-intro {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.6rem;
  margin: 0 0 1.6rem;
}

/* нет фото для слайдера или нет целей — оставшийся блок на всю ширину */
.project-intro_single {
  grid-template-columns: 1fr;
}

.project-about {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.6rem;
  margin: 0 0 1.6rem;
}

.project-about__aside {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 1.6rem;
}

/* --- карточка --- */
.project-card {
  position: relative;
  overflow: hidden;
  border-radius: 3.5rem;
  padding: 3.2rem;
  display: flex;
  flex-direction: column;
}

.project-card_blue {
  background: #1d82aa;
  color: #fff;
}

.project-card_white {
  background: #fff;
  color: #1f1f1f;
}

/* фирменный водяной знак на синих карточках */
.project-card_blue::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .1;
  background: url(../img/logo-3.svg) 50% 50% no-repeat;
  background-size: 130% auto;
  pointer-events: none;
}

.project-card > * {
  position: relative;
}

.project-card__head {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  margin: 0 0 2.4rem;
}

.project-card__icon {
  flex: 0 0 auto;
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 50%;
  background: #1d82aa;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.project-card_blue .project-card__icon {
  background: rgba(255, 255, 255, .22);
}

.project-card__icon svg {
  width: 2.4rem;
  height: 2.4rem;
  fill: currentColor;
}

.project-card__title {
  margin: 0;
  font-family: ShangoGothic, sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 2.8rem;
  line-height: 1.15;
  color: #1d82aa;
}

.project-card_blue .project-card__title {
  color: #fff;
}

.project-intro__goals .project-card__title {
  font-size: 3.6rem;
  margin: 0 0 2.4rem;
  max-width: 34rem;
}

/* --- список с искрами --- */
.project-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  font-size: 1.4rem;
  line-height: 1.45;
}

.project-list li {
  position: relative;
  padding-left: 3.2rem;
}

.project-list__marker {
  position: absolute;
  left: 0;
  top: .1rem;
  width: 1.8rem;
  height: 1.8rem;
  fill: #1d82aa;
}

.project-card_blue .project-list__marker {
  fill: #fff;
}

/* «Проект призван» — чёрные звёздочки */
.project-list_dark .project-list__marker {
  fill: #000;
}

/* колосья в нижней части карточки «Проект призван» */
.project-about__decor {
  display: block;
  width: auto;
  max-width: 100%;
  height: 16rem;
  margin: 3.2rem 0 0;
  object-fit: contain;
  object-position: left bottom;
}

/* --- куратор --- */
.project-curator__role {
  margin: auto 0 0;
  padding-top: 3.2rem;
  font-size: 1.3rem;
  line-height: 1.4;
  color: #1f1f1f;
}

/* --- контакты проекта --- */
.project-contacts address {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: .8rem;
  font-size: 1.6rem;
  line-height: 1.4;
}

.project-contacts address a {
  color: #fff;
  text-decoration: none;
}

.project-contacts address a:hover {
  text-decoration: underline;
}

.project-contacts__social {
  display: flex;
  gap: .8rem;
  margin: 2.4rem 0 0;
}

.project-contacts__social a {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .25s;
}

.project-contacts__social a:hover {
  background: rgba(255, 255, 255, .35);
}

/* --- слайдер фотографий --- */
.project-slider {
  position: relative;
  border-radius: 3.5rem;
  overflow: hidden;
  min-height: 40rem;
}

.project-slider__item {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .35s;
}

.project-slider__item._active {
  opacity: 1;
}

.project-slider__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-slider__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .8rem;
  z-index: 1;
}

.project-slider__dots button {
  width: .8rem;
  height: .8rem;
  padding: 0;
  border: 0;
  border-radius: 4rem;
  background: rgba(255, 255, 255, .55);
  cursor: pointer;
  transition: all .25s;
}

.project-slider__dots button._active {
  width: 2.4rem;
  background: #fff;
}

/* --- широкое фото --- */
.project-cover {
  margin: 0 0 13.6rem;
}

.project-cover img {
  display: block;
  width: 100%;
  height: 52rem;
  object-fit: cover;
  border-radius: 3.5rem;
}

@media (max-width: 1279.98px) {
  .project-cover {
    margin-bottom: 10rem;
  }
}

@media (max-width: 1023.98px) {
  .project-intro,
  .project-about,
  .project-about__aside {
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: auto;
    gap: .6rem;
    margin-bottom: .6rem;
  }

  .project-card {
    border-radius: 2.4rem;
    padding: 2.4rem 2rem;
  }

  .project-card__title,
  .project-intro__goals .project-card__title {
    font-size: 2.2rem;
    max-width: none;
  }

  .project-card__icon {
    width: 4rem;
    height: 4rem;
  }

  .project-slider {
    min-height: 28rem;
    border-radius: 2.4rem;
  }

  .project-about__decor {
    height: 12rem;
    margin-top: 2.4rem;
  }

  .project-curator__role {
    padding-top: 2.4rem;
  }

  .project-cover {
    margin-bottom: 6rem;
  }

  .project-cover img {
    height: 28rem;
    border-radius: 2.4rem;
  }
}