

/* Start:/local/templates/Spoda/assets/contacts.css?17635420169101*/
/* Контейнер страницы контактов */
.cpage__in {
  display: grid;
  gap: 6rem;
  padding-block: clamp(1.5rem, 4vw, 3rem);
  padding-bottom: 9rem;
}

@media (max-width: 64rem) {
  .cpage__in {
    padding-bottom: 6rem;
  }
}

@media (max-width: 33.75rem) {
  .cpage__in {
    padding-bottom: 4rem;
  }
}

/* Заголовок */
.cpage__title {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 2.75rem;
  line-height: 120%;
  letter-spacing: -0.02em;
}

/* Шапка из двух колонок */
.cpage__head {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 4rem;
  align-items: start;
}

/* Левая колонка: два вертикальных стека без отступов — только gap */
.cpage__left {
  display: grid;
  gap: 10.5rem;
}

.cpage__phones {
  display: grid;
  gap: 0.75rem;
}

/* Большие ссылки (телефон/почта) */
.cpage__biglink {
  text-decoration: none;
  color: #332d8d;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 4rem;
  line-height: 120%;
  letter-spacing: -0.02em;
  word-break: break-word;
}
@media (max-width: 64rem) {
  .cpage__biglink {
    font-size: 2.75rem;
  }
  .cpage__head {
    gap: 0;
  }
}
@media (max-width: 33.75rem) {
  .cpage__biglink {
    font-size: 2rem;
    line-height: 110%;
  }
}
/* Адрес (нижний стек слева) */
.cpage__addr {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 120%;
  letter-spacing: -0.02em;
  color: rgba(0, 4, 19, 0.9);
}
@media (max-width: 64rem) {
  .cpage__addr {
    font-size: 1.25rem;
  }
}
@media (max-width: 33.75rem) {
  .cpage__addr {
    font-size: 1rem;
    line-height: 150%;
  }
}
/* Правая колонка: только логотип */
.cpage__right {
  display: grid;
  justify-items: end;
  align-items: start;
}
.cpage__logo {
  width: min(20.875rem, 100%);
  height: auto;
  display: block;
}

/* Карта блоком, радиусы и overflow */
.cpage__map {
  border-radius: 2.75rem;
  overflow: hidden;
  display: grid;
}
.cpage__map iframe {
  width: 100%;
  height: min(35rem, 65vh);
  border: 0;
  display: block;
}

/* Реквизиты */
.cpage__req {
  display: grid;
  gap: 2.75rem;
}

@media (max-width: 33.75rem) {
  .cpage__req {
    gap: 2rem;
  }
}

/* ===== РЕКВИЗИТЫ: 4 КОЛОНКИ ===== */

.req {
  position: relative;
  display: grid;
  row-gap: 0;
}

/* верхняя и нижняя разделительные линии (по 1–3 колонке) */
.req::before,
.req::after {
  content: "";
  position: absolute;
  left: 0;
  right: 25%; /* 4-ю колонку не трогаем */
  border-top: .0625rem solid var(--servyy-osnovnoy);
}
.req::before {
  top: 0;
}
.req::after {
  bottom: 0;
}

/* строка: 4 равных колонки, gap 20px + вертикальный gap 32px */
.req__row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 1.25rem;
  padding-block: 2rem; /* по 2rem сверху и снизу от разделителя */
}

/* внутренние разделители между строками (по 1–3 колонке) */
.req__row:not(:first-child)::before {
  content: "";
  position: absolute;
  left: 0;
  right: 25%;
  top: 0;
  border-top: 0.0625rem solid var(--servyy-osnovnoy);
}

/* заголовок слева — первая колонка */
.req dt {
  grid-column: 1 / 2;
  margin: 0;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 150%;
  letter-spacing: -0.02em;
  color: var(--chernyy-600);
}

/* значение — во 2–3 колонках, 4-я пустая */
.req dd {
  grid-column: 2 / 4;
  margin: 0;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 2rem;
  line-height: 120%;
  letter-spacing: -0.02em;
  color: var(--chernyy-osnovnoy);
  text-wrap: nowrap;
}
.cpage__subtitle {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 2rem;
  line-height: 120%;
  letter-spacing: -0.02em;
  color: var(--chernyy-osnovnoy);
}
/* ===== ПЛАНШЕТЫ (до 1024px) ===== */
@media (max-width: 64rem) {
  .req dt {
    font-size: 1rem;
  }
  .req dd {
    font-size: 1.5rem;
  }
}

/* ===== МОБИЛЬНЫЕ (до 540px) ===== */
@media (max-width: 33.75rem) {
  .req__row {
    grid-template-columns: 1fr; /* одна колонка */
    column-gap: 0;
    padding-block: 1.5rem;
    gap: 0.25rem;
  }

  .cpage__subtitle {
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 110%;
    letter-spacing: -0.02em;
  }

  /* линии на мобиле — по всей ширине */
  .req::before,
  .req::after,
  .req__row:not(:first-child)::before {
    left: 0;
    right: 0;
  }

  .req dt {
    grid-column: 1;
    font-weight: 400;
    font-size: 1rem;
    color: var(--chernyy-600);
  }

  .req dd {
    grid-column: 1;
    font-size: 1rem;
    line-height: 150%;
  }
}

/* ===== Телефоны ===== */
@media (max-width: 33.75rem) {
  .cpage__head {
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    gap: 1.5rem;
  }

  .cpage__left {
    display: grid;
    grid-auto-flow: row;
    gap: 1.25rem;
  }

  .cpage__right {
    justify-items: start;
    align-items: start;
    order: 2; /* чтобы логотип оказался под контактами */
  }

  .cpage__logo {
    width: 8.75rem;
  }

  .cpage__phones {
    gap: 0.5rem;
  }
}
/* ===== Планшеты (541–1024 px) ===== */
@media (max-width: 64rem) and (min-width: 33.8125rem) {
  .cpage__map {
    border-radius: 2rem;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 720 / 400; /* сохраняем пропорцию */
    justify-self: start; /* прижатие к сетке */
  }
  .cpage__map iframe {
    width: 100%;
    height: 100%;
    display: block;
  }
}

/* ===== Телефоны (до 540 px) ===== */
@media (max-width: 33.75rem) {
  .cpage__map {
    border-radius: 1.5rem;
    overflow: hidden;
    display: grid;
    width: 100%;
    max-width: 100%;
    /* гибкая высота — не фикс, а плавно уменьшается */
    height: clamp(10rem, 45vw, 12.5rem);
    justify-self: center;
  }

  .cpage__map iframe {
    width: 100%;
    height: 100%;
    display: block;
  }
}
/* ===== Планшеты (541–1024 px) ===== */
@media (max-width: 64rem) and (min-width: 33.8125rem) {
  .req {
    display: grid;
    grid-template-columns: 1fr 1fr; /* две колонки */
    gap: 0;
  }

  /* каждая строка — ячейка таблицы */
  .req__row {
    display: contents; /* чтобы dt/dd стали дочерними ячейками grid-контейнера */
  }

  .req dt,
  .req dd {
    padding: 1rem 0;
    border-bottom: 0.0625rem solid #ececf1;
    display: flex;
    align-items: center;
  }

  .req dt {
    grid-column: 1;
    justify-content: flex-start;
    font-size: 1.25rem;
    color: rgba(0, 4, 19, 0.5);
  }

  .req dd {
    grid-column: 2;
    justify-content: flex-start;
    font-size: 1.5rem;
    color: rgba(0, 4, 19, 0.9);
    text-wrap: auto;
  }

  /* первый ряд — верхняя граница */
  .req dt:first-of-type,
  .req dd:first-of-type {
    border-top: 0.0625rem solid #ececf1;
  }
  .cpage__logo {
    width: 13.75rem;
  }
  .cpage__left {
    gap: 20.9375rem;
  }
  .cpage__in {
    gap: 2rem;
  }
  .cpage__title {
    padding-bottom: 2rem;
  }
  .cpage__subtitle {
    padding-top: 2rem;
  }
}
/* ===== Телефоны (до 540 px) ===== */
@media (max-width: 33.75rem) {
  .cpage__head {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 5rem;
    align-items: start;
  }

  /* внутренняя сетка левой колонки полностью убирается */
  .cpage__left {
    display: contents;
  }

  /* порядок элементов внутри */
  .cpage__phones {
    order: 1;
    display: grid;
    gap: 1rem;
  }

  .cpage__right {
    order: 2;
    display: grid;
    justify-items: start;
  }

  .cpage__addr {
    order: 3;
    display: block;
  }

  .cpage__logo {
    height: auto;
  }
}
@media (max-width: 33.75rem) {
  .cpage__in {
    display: grid;
    grid-auto-flow: row;
    gap: 1.5rem;
  }

  .cpage__map {
    margin-bottom: 0;
  }

  .cpage__map + .cpage__req {
    margin-top: 0;
    gap: 2rem;
  }

  .cpage__title {
    font-weight: 500;
    font-size: 2rem;
    line-height: 110%;
    letter-spacing: -0.02em;
  }

  .cpage__req {
    padding-top: 2.5rem;
  }
}

/* End */
/* /local/templates/Spoda/assets/contacts.css?17635420169101 */
