/* =============================================
   Страница «Контакты»
   ============================================= */

/* ── Интро ── */
.contacts-intro {
  position: relative;
  padding-top: var(--header-height);
  overflow: hidden;
}

.contacts-intro__img {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.contacts-intro__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contacts-intro .container {
  position: relative;
  z-index: 2;
  padding-top: 48px;
  padding-bottom: 80px;
}

.contacts-intro h1 {
  margin: 24px 0 16px;
}

.contacts-intro .text-l {
  max-width: 640px;
}

.contacts-intro .btn {
  margin-top: 32px;
  display: inline-flex;
  max-width: 285px;
}

/* ── Основной блок: контакты + форма ── */
.contacts-main {
  padding: 80px 0;
}

.contacts-main__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}

/* ── Левая карточка: контактная информация ── */
.contacts-info {
  padding: 40px;
  background: #F6F8FC;
box-shadow: 0px 2px 4px 0px #00000040;

  border-radius: 8px;
  display: flex;
  flex-direction: column;
}

.contacts-info h2 {
  margin-bottom: 24px;
}

.contacts-info__item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--muted);
  text-decoration: none;
  color: var(--primary-dark);
}

.contacts-info__item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.contacts-info__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Правая карточка: форма ── */
.contacts-form-card {
  padding: 40px;
  background: var(--primary-dark);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
}

.contacts-form-card h2 {
  color: var(--background);
}

.contacts-form-card .callback__form {
  gap: 16px;
}

.contacts-form-card .checkbox > .text-s {
  color: var(--background);
}

/* ── Карта ── */
.contacts-map {
  padding: 0 0 80px;
  display: flex;
  flex-direction: column;
  gap: 60px;
}


.contacts-map__embed {
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.contacts-map__embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ── Реквизиты ── */
.contacts-req {
  padding-bottom: 80px;
}

.contacts-req h2 {
  margin-bottom: 24px;
}

.contacts-req__list {
  list-style: disc;
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style-position: inside;
  padding-left: 12px;
}

.contacts-req__list li {
  list-style: disc;
  list-style-position: inside;
}

/* ── Адаптив ── */
@media (max-width: 768px) {
  .contacts-intro .container {
    padding-top: 24px;
    padding-bottom: 40px;
  }

  .contacts-main {
    padding: 40px 0;
  }

  .contacts-main__grid {
    grid-template-columns: 1fr;
  }

  .contacts-info,
  .contacts-form-card {
    padding: 24px;
  }

  .contacts-map {
    padding-bottom: 40px;
    gap: 40px;
  }

  .contacts-map__embed {
    height: 300px;
  }

  .contacts-req {
    padding-bottom: 40px;
  }

  .contacts-intro .btn {
    max-width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════════
   404 Page
   ═══════════════════════════════════════════════════════════════ */
.error-404 {
  padding: calc(40px + var(--header-height)) 0 60px;
}

.error-404__img {
  background-image: url('../img/img-404.png');
  background-image: image-set(url('../img/img-404.webp') type('image/webp'), url('../img/img-404.png') type('image/png'));
  background-repeat: no-repeat;
  background-size: contain;
  width: 100%;
  aspect-ratio: 1536 / 511;
  height: auto;
}

.error-404__inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  text-align: center;
}

.error-404__btn { max-width: 285px; }