/* ============================================================
   ЗАКЛИК + ПІДВАЛ  (Figma 149:740 + 521:364 / мобілка 149:1599 + 149:1667)

   Уся секція — чиста геометрія: жодної растрової картинки,
   тільки текст і маска іконки. Тому всі розміри йдуть через --u
   («піксель макета»), а мобілка — це той самий десктоп × 0.7124,
   перерахований у власні числа макета 375.

   Заклик набраний Khartia_023-CondMedium — тим самим накресленням,
   що й у макеті (файл отримано від замовника). Ніяких підмін і стиснень.
   ============================================================ */

.call {
  background: var(--bg);
}

/* Відступи висять на .band__inner, а не на секції: декоративна сітка
   позиціонується саме від нього. Верхній відступ — 103 макета мінус
   12.92 надкапітельної частини Khartia Cond при міжрядді 0.9. */
.call .band__inner {
  padding-top: calc(90.08 * var(--u));
  padding-bottom: calc(87.97 * var(--u));
}

.call__title {
  position: relative;
  z-index: 1;
  font-family: var(--font-display-cond);
  font-weight: 500;
  font-size: calc(129.241028 * var(--u));
  line-height: .9;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-align: center;
  color: var(--grey-05);
}

.call__lead { display: block; }

.call__phone {
  display: flex;
  align-items: baseline;
  justify-content: center;
  color: var(--white);
  transition: color var(--dur) var(--ease);
}

.call__phone:hover,
.call__phone:focus-visible {
  color: var(--accent);
}

/* Іконка йде маскою, а не картинкою: так вона фарбується разом із
   рядком. Розміри й зазори — у частках кегля, тому однакові на
   обох брейкпойнтах. Зазори менші за намальовані в макеті на бокові
   напливи двокрапки й шістки — інакше рядок виходить ширшим. */
.call__icon {
  align-self: baseline;
  position: relative;
  top: -.0106em;
  width: .4922em;
  height: .6928em;
  margin-left: .1479em;
  margin-right: .0751em;
  background-color: currentColor;
  -webkit-mask: url('/assets/phone.svg') no-repeat center / contain;
          mask: url('/assets/phone.svg') no-repeat center / contain;
}

.call__br--m { display: none; }

/* ============================================================
   ПІДВАЛ
   ============================================================ */

.footer {
  background: var(--bg);
  padding-top: calc(90 * var(--u));
  padding-bottom: calc(54.14 * var(--u));   /* 56.4 макета мінус нижнє міжряддя */
}

.footer__inner {
  width: calc(1260 * var(--u));
  margin-inline: auto;
}

.footer__social {
  display: flex;
  gap: calc(16 * var(--u));
}

/* Кронштейни соцпосилання — не окремі елементи, а сім шарів фону.
   Шість із них намальовані кольором currentColor, тому наведення
   міняє колір ліній, зарубок і підпису однією властивістю.
   Сьомий — сіра смужка ліворуч, вона є лише на мобілці, і лежить
   найнижче, щоб зарубки перекривали її так само, як у макеті. */
.footer__link {
  --notch-w: calc(2.16 * var(--u));
  --notch-h: calc(9.7 * var(--u));
  --social-accent: transparent;

  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(63.59 * var(--u));
  font-family: var(--font-text);
  font-weight: 400;
  font-size: max(11px, calc(15.0898 * var(--u)));
  line-height: 1.2;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--grey-70);
  background-color: transparent;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(var(--social-accent), var(--social-accent));
  background-size:
    1px 100%,
    1px 100%,
    var(--notch-w) var(--notch-h),
    var(--notch-w) var(--notch-h),
    var(--notch-w) var(--notch-h),
    var(--notch-w) var(--notch-h),
    1px 100%;
  background-position:
    left top,
    right top,
    left 1px top,
    left 1px bottom,
    right 1px top,
    right 1px bottom,
    left 1px top;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

/* «при наведені курсором з'являється сіре поле» — коментар дизайнера #8 */
.footer__link:hover,
.footer__link:focus-visible {
  color: var(--white);
  background-color: rgba(212, 216, 203, .1);
}

.footer__wordmark {
  margin-top: calc(31.9 * var(--u));   /* 50 у макеті мінус верхнє міжряддя */
  font-family: var(--font-display);
  font-weight: 500;
  font-size: calc(122 * var(--u));     /* 122/1440 ≈ 8.47vw — тягнеться з шириною */
  line-height: 1;
  letter-spacing: .01em;               /* єдиний текст секції не на 0.02em */
  text-transform: uppercase;
  text-align: center;
  color: var(--white);
}

.footer__wordmark-in {
  display: block;
  white-space: nowrap;
}

.footer__rule {
  height: 0;
  margin: calc(31.5 * var(--u)) 0 0;
  border: 0;
  border-top: 1px solid var(--grey-70);
}

.footer__rights {
  margin-top: calc(45.89 * var(--u));   /* 50 мінус міжряддя і 1px самої лінії */
  font-family: var(--font-text);
  font-weight: 400;
  font-size: max(10px, calc(10 * var(--u)));
  line-height: 1.2;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-align: center;
  color: var(--white);
}

/* ============================================================
   МОБІЛКА (макет 375). Форма — той самий десктоп × 0.7124,
   підвал — інша верстка: соцмережі стають стовпчиком і всі
   намальовані «активними», роздільної лінії немає.
   ============================================================ */

@media (max-width: 599px) {

  .call .band__inner {
    padding-top: calc(56.33 * var(--u));
    padding-bottom: calc(56.47 * var(--u));
  }

  .call__title { font-size: calc(56.723312 * var(--u)); }

  .call__br--d { display: none; }
  .call__br--m { display: inline; }

  /* --- підвал --- */

  .footer {
    padding-top: calc(24 * var(--u));
    padding-bottom: calc(29 * var(--u));
  }

  .footer__inner { width: calc(335 * var(--u)); }

  .footer__social {
    flex-direction: column;
    gap: calc(10.38 * var(--u));
  }

  /* На мобілці всі чотири рядки намальовані в «активному» вигляді:
     білі кронштейни, підкладка й сіра смужка ліворуч. Стану спокою
     в макеті немає, тому наведення тільки трохи підсвічує підкладку. */
  .footer__link {
    --notch-w: calc(1.95 * var(--u));
    --notch-h: calc(8.79 * var(--u));
    --social-accent: var(--grey-50);

    flex: none;
    height: calc(57.62 * var(--u));
    font-size: max(11px, calc(13.6735 * var(--u)));
    color: var(--white);
    background-color: rgba(30, 30, 30, .5);
  }

  .footer__link:hover,
  .footer__link:focus-visible {
    background-color: rgba(212, 216, 203, .1);
  }

  .footer__wordmark {
    margin-top: calc(31.14 * var(--u));
    font-size: calc(31.33 * var(--u));
  }

  .footer__rule { display: none; }

  .footer__rights { margin-top: calc(37.27 * var(--u)); }

  /* Низ 24.5: в макете копирайт кончается на 465.5 при высоте фрейма 490 */
  .footer { padding-bottom: calc(24.5 * var(--u)); }
}