/* Стили страницы «kontakty».
   Вынесены из инлайн-<style> статичной вёрстки.
   Подключаются автоматически по слагу — см. inc/enqueue.php. */

.contacts{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
  @media (max-width:900px){.contacts{grid-template-columns:1fr;gap:32px}}

/* Карточка сотрудника.
   Заказчик 17.08 просил конкретных людей вместо одного общего номера.
   Аватар — круг 72px; нет фотографии — тот же круг с инициалами, чтобы
   ряд карточек не рассыпался, пока заказчик не пришлёт снимки. */
.ppl-card{gap:14px}
.ppl-head{display:flex;align-items:center;gap:14px;min-width:0}
.ppl-ava{width:72px;height:72px;flex:0 0 72px;border-radius:50%;
  object-fit:cover;background:#EEF0FA;border:1px solid var(--line)}
.ppl-ava--text{display:flex;align-items:center;justify-content:center;
  font-family:var(--font-h,'Onest',sans-serif);font-size:24px;font-weight:700;
  color:var(--blue);letter-spacing:.5px;user-select:none}
/* Длинное ФИО переносится, а не уезжает за край карточки. */
.ppl-name{font-size:17px;line-height:1.25;overflow-wrap:anywhere}
  @media (max-width:520px){
    .ppl-ava{width:60px;height:60px;flex:0 0 60px}
    .ppl-ava--text{font-size:21px}
  }

/* Строки контактов: иконка, подпись, текст.
   До 02.09 левая колонка была семью абзацами подряд и читалась как
   сплошной текст — заказчик и Denis отметили это отдельно. */
.cnt-list{display:flex;flex-direction:column;gap:2px}
.cnt-item{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-top:1px solid var(--line)}
.cnt-item:first-child{border-top:0;padding-top:0}
.cnt-item__ico{flex:0 0 40px;width:40px;height:40px;border-radius:12px;
  background:#EEF1FA;color:var(--blue);display:flex;align-items:center;justify-content:center}
.cnt-item__ico svg{width:21px;height:21px}
.cnt-item__body{display:flex;flex-direction:column;gap:3px;min-width:0}
.cnt-item__t{font-family:var(--font-h,'Onest',sans-serif);font-weight:700;font-size:15px;color:var(--navy)}
.cnt-item__x{font-size:14.5px;line-height:1.55;color:var(--muted)}
.cnt-item__x a{color:var(--blue)}

/* Под картой адреса идут в ряд, а не столбцом. */
.cnt-list--row{flex-direction:row;flex-wrap:wrap;gap:12px 40px}
.cnt-list--row .cnt-item{border-top:0;padding:0;flex:1 1 280px}

/* Карта во всю ширину контейнера. Соотношение держим боксом, а не
   фиксированной высотой: iframe внутри тянется на 100%. */
.cnt-map{width:100%;aspect-ratio:21/8;min-height:280px;border-radius:var(--r-md);
  overflow:hidden;border:1px solid var(--line);background:#EEF1FA;display:block}
.cnt-map iframe{width:100%;height:100%;border:0;display:block}
  @media (max-width:760px){
    .cnt-map{aspect-ratio:4/3;min-height:0}
    .cnt-item__ico{flex-basis:36px;width:36px;height:36px;border-radius:10px}
    .cnt-item__ico svg{width:19px;height:19px}
  }

/* Телефон и почта — те же строки, только кликабельные.
   Значение крупнее подписи: это главные контакты страницы. */
.cnt-item--link{text-decoration:none;color:inherit;transition:background .15s}
.cnt-item--link:hover .cnt-item__x--lead{color:var(--blue)}
.cnt-item--link:hover .cnt-item__ico{background:#E3E8F8}
.cnt-item__x--lead{font-family:var(--font-h,'Onest',sans-serif);font-weight:700;
  font-size:19px;line-height:1.3;color:var(--navy)}
  @media (max-width:520px){.cnt-item__x--lead{font-size:17px}}

/* Карточки сотрудников столбиком — заняли место формы обратной связи.
   На узких экранах сетка .contacts всё равно ставит колонки друг под друга,
   поэтому отдельного правила для мобильных не нужно. */
.ppl-col{display:flex;flex-direction:column;gap:14px}
.ppl-col .ppl-card{gap:12px}