/* ==========================================================================
   Контакти — сітка контактів + форма зворотного зв'язку
   ========================================================================== */

.page-hero {
  position: relative;
  isolation: isolate;
  padding: 164rem 0 96rem;
}

/* світлий фон із макета — перекриває всю секцію і йде за контентом */
.page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
}

.page-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* у макеті між заголовком і блоком контактів 24, а не 40 */
.page-hero__content {
  display: flex;
  flex-direction: column;
  gap: 24rem;
  margin-top: 24rem;
}

/* У макеті ліва колонка відцентрована відносно картки форми,
   а не притиснута вгору. */
.contacts {
  display: flex;
  align-items: center;
  gap: 24rem;
}

/* ------------------------------------------------------ сітка контактів */
.contacts__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40rem 96rem;
  width: 628rem;
  flex-shrink: 0;
}

.contact-card {
  display: flex;
  align-items: center;
  gap: 16rem;
}

/* адреса займає обидві колонки */
.contact-card--wide {
  grid-column: 1 / -1;
  align-items: flex-start;
}

.contact-card__icon {
  display: flex;
  width: 50rem;
  height: 50rem;
  flex-shrink: 0;
}

.contact-card__icon svg {
  width: 100%;
  height: 100%;
}

.contact-card__text {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

.contact-card__label {
  font-weight: 500;
  font-size: 16rem;
  line-height: 1.4;
  color: var(--c-grey);
}

.contact-card--wide .contact-card__label {
  color: var(--c-black);
}

.contact-card__value {
  font-weight: 500;
  font-size: 20rem;
  line-height: 1.4;
  color: var(--c-black);
  transition: color 0.2s ease;
}

a.contact-card__value:hover {
  color: var(--c-red);
}

/* ------------------------------------------------------------- форма */
.san-form {
  display: flex;
  flex-direction: column;
  gap: 40rem;
  width: 572rem;
  flex-shrink: 0;
  padding: 24rem;
  border-radius: 20rem;
  background: var(--c-bg-grey);
}

.san-form__title {
  font-weight: 500;
  font-size: 20rem;
  line-height: 1.4;
  text-align: center;
}

.san-form__fields {
  display: flex;
  flex-direction: column;
  gap: 23rem;
}

.san-form__field {
  display: block;
}

.san-form__input {
  /* блоковий, інакше під textarea лишається ~6 px місця під нижні виносні
     і поле стає 127.4 замість 121 з макета */
  display: block;
  width: 100%;
  height: 40rem;
  padding: 9rem 16rem;
  border: 1rem solid transparent;
  border-radius: 10rem;
  font-weight: 500;
  font-size: 16rem;
  line-height: 1.4;
  color: var(--c-black);
  background: var(--c-white);
  transition: border-color 0.2s ease;
}

.san-form__input::placeholder {
  color: var(--c-grey);
}

.san-form__input:focus {
  outline: none;
  border-color: var(--c-red);
}

.san-form__input--area {
  height: 121rem;
  padding: 12rem 16rem;
  resize: vertical;
}

.san-form__field.has-error .san-form__input {
  border-color: var(--c-red);
}

.san-form__error {
  display: none;
  margin-top: 6rem;
  font-size: 14rem;
  line-height: 1.4;
  color: var(--c-red);
}

.san-form__field.has-error .san-form__error {
  display: block;
}

/* пастка для ботів */
.san-form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.san-form__submit {
  align-self: flex-start;
}

.san-form__submit[disabled] {
  opacity: 0.6;
  cursor: default;
}

.san-form__status:empty {
  display: none;
}

.san-form__status {
  font-weight: 500;
  font-size: 16rem;
  line-height: 1.4;
}

.san-form__status.is-ok {
  color: #1b8a4b;
}

.san-form__status.is-error {
  color: var(--c-red);
}

/* ========================================================== мобільна версія */
@media (max-width: 479px) {
  .page-hero {
    padding: 60rem 0;
  }

  .page-hero .container {
    padding-inline: 16rem;
  }

  .page-hero__content {
    margin-top: 0;
  }

  /* Декор у самій картинці лежить по краях: крайні двадцяті дають 25 і 32
     одиниці «чорнила», середина — 3-5. Тому кадр по центру показував саме
     порожню середину, і фон здавався відсутнім.

     Спершу я зважував варіанти за розкидом яскравості лише в бічних полях
     завширшки 16 — і вибрав кадр зі зсувом 90%. Порівняння цілих секцій
     показало, що та міра брехала: у вузьке вікно не потрапляли великі
     розчерки посеред сторінки. По всій площі найближче лягає розтягування:
     видно обидва краї композиції, як у макеті. Спотворення тут нешкідливе —
     це м'які абстрактні лінії без прямих кутів. */
  .page-hero__bg,
  .page-hero__bg img {
    object-fit: fill;
  }

  /* Заголовок контактів у мобільному макеті крупніший за решту сторінок і
     набраний щільно: чорнило 31 заввишки дає 34 px, а рядок при цьому все
     одно вміщається в 337 — отже трекінг від'ємний. */
  .page-title {
    font-size: 34rem;
    letter-spacing: -3.7rem;
  }

  /* На мобілці в макеті форма йде ПЕРШОЮ, а контакти під нею; крихт немає. */
  .contacts {
    flex-direction: column;
    align-items: stretch;
    gap: 40rem;
  }

  .contacts__grid {
    order: 2;
  }

  .san-form {
    order: 1;
  }

  .breadcrumbs {
    display: none;
  }

  /* У макеті крок між пунктами 94: сам пункт 46 і просвіт 48.
     Підпис і значення там стоять впритул, без додаткового проміжку. */
  .contacts__grid {
    grid-template-columns: 1fr;
    gap: 47rem;
    width: 100%;
  }

  .contact-card__text {
    gap: 0;
  }

  .contact-card__label {
    line-height: 1.2;
  }

  /* Значок у мобільному макеті 25 — рівно вдвічі менший за десктопний. */
  .contact-card__icon {
    width: 25rem;
    height: 25rem;
  }

  .contact-card--wide {
    grid-column: auto;
  }

  .san-form {
    width: 100%;
    gap: 24rem;
    padding: 20rem 16rem;
  }

  /* Кнопка в макеті за розміром напису (209), а не на всю ширину форми. */
  .san-form__submit {
    align-self: flex-start;
  }
}