/**
 * Посадочная «Рекламодателям».
 *
 * Макет Figma 5I1FqrBj0f4h5XuA6PW5KJ, «Рекламодателям питомцы» 7957:10641.
 * Замеры: контент 1840 (поле 40), карточка кейса 597×624 с фото 597×446,
 * грид 3 в ряд с зазорами 24/40, тёмная плашка заявки 1840×269.
 *
 * Поле и кнопки формы — компонент кита из newsletter.css, он подключается
 * рядом; здесь только раскладка и то, чего в подписке нет.
 */

/* ---------- Заголовок раздела ---------- */

.partners__head {
  padding-block: 40px;
}

.partners__title {
  color: var(--c-dark-brown);
  font-family: var(--font-serif);
  font-size: 44px;
  font-weight: 400;
  line-height: 58px;
  margin: 0;
}

.partners__title em {
  font-style: italic;
}

.partners__lead {
  color: var(--c-dark-gray);
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 28px;
  margin: 16px 0 0;
  max-width: 750px;
}

/* ---------- Витрина кейсов ---------- */

/* 1840 = три колонки по 597 и два зазора по 24. */
.partners__grid {
  display: grid;
  gap: 40px 24px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding-block: 80px;
}

.case-card {
  display: flex;
  flex-direction: column;
}

.case-card__photo {
  display: block;
  margin-bottom: 16px;
}

/* height:auto обязателен: wp_get_attachment_image печатает атрибут height,
   и без него заданный aspect-ratio молча отключается. */
.case-card__photo img {
  aspect-ratio: 597 / 446;
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}

.case-card__badges {
  color: var(--c-terracotta-dark);
  display: flex;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 16px;
  letter-spacing: 0.04em;
  line-height: 21px;
  margin: 0;
  text-transform: uppercase;
}

/* Точка-разделитель — псевдоэлементом у второго бейджа, а не отдельным тегом:
   самостоятельный элемент при переносе строки уезжает на свою строку. */
.case-card__badge + .case-card__badge::before {
  content: "·";
  display: inline-block;
  margin-inline: 8px;
}

.case-card__title {
  color: var(--c-dark-brown);
  font-family: var(--font-serif-text);
  font-size: 30px;
  font-weight: 400;
  line-height: 41px;
  margin: 8px 0 0;
}

.case-card__title a {
  color: inherit;
  transition: color 0.2s ease;
}

.case-card__title a:hover {
  color: var(--c-terracotta-dark);
}

.case-card__text {
  color: var(--c-gray);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 28px;
  margin: 8px 0 0;
}

/* ---------- Тёмная плашка с заявкой ---------- */

/* Внутренние поля 101.5 взяты из макета: заголовок 1000 и форма 613 стоят
   симметрично, между ними 24. */
.brand-cta {
  align-items: center;
  background: var(--c-dark-gray);
  display: flex;
  gap: 24px;
  justify-content: space-between;
  margin-bottom: 80px;
  padding: 40px 101.5px;
}

.brand-cta__title {
  color: var(--c-cream);
  font-family: var(--font-serif);
  font-size: 44px;
  font-weight: 400;
  line-height: 58px;
  margin: 0;
  max-width: 1000px;
}

.brand-cta__form-wrap {
  flex-shrink: 0;
  width: 613px;
}

.brand-cta__form {
  gap: 0;
}

/* Поле подписки держит собственный отступ снизу; в макете от него до кнопок 32. */
.brand-cta__form .newsletter__field {
  margin-bottom: 32px;
}

.brand-cta__buttons {
  display: flex;
  gap: 32px;
}

.brand-cta__submit {
  min-width: 217px;
}

/* Шеврон в макете 10×7 при зазоре 16 — SVG приезжает в натуральные 24 px и
   распирал бы кнопку до 180 вместо 167. */
/* Габарит задан макетом (167×53), содержимое центрируется само: своими
   падингами кита ширина вышла бы 174 — надпись и шеврон совпадают, а поля
   у кнопки в макете чуть уже стандартных 32. */
.brand-cta__file {
  gap: 16px;
  padding-inline: 0;
  width: 167px;
}

.brand-cta__file img {
  height: 7px;
  width: 10px;
}

.brand-cta__note {
  color: var(--c-light-gray);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  line-height: 18px;
  margin: 16px 0 0;
  text-transform: uppercase;
}

/* ---------- Адаптив ---------- */

@media (max-width: 1440px) {
  .brand-cta {
    padding: 40px;
  }
}

@media (max-width: 1024px) {
  .partners__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-block: 56px;
  }

  .brand-cta {
    align-items: flex-start;
    flex-direction: column;
    gap: 32px;
  }

  .brand-cta__form-wrap {
    width: 100%;
  }
}

@media (max-width: 560px) {
  .partners__head {
    padding-block: 24px;
  }

  .partners__title {
    font-size: 32px;
    line-height: 42px;
  }

  .partners__lead {
    font-size: 16px;
    line-height: 24px;
  }

  .partners__grid {
    gap: 32px;
    grid-template-columns: minmax(0, 1fr);
    padding-block: 40px;
  }

  .case-card__title {
    font-size: 24px;
    line-height: 32px;
  }

  .brand-cta {
    margin-bottom: 40px;
    padding: 24px;
  }

  .brand-cta__title {
    font-size: 28px;
    line-height: 36px;
  }

  .brand-cta__buttons {
    flex-direction: column;
    gap: 16px;
  }

  .brand-cta__submit,
  .brand-cta__file {
    width: 100%;
  }
}