/* ==========================================================================
   Страница «Контакты» — views/contact.pug. Отдельный модуль, без Bootstrap
   grid (десктопная раскладка тоже своя, не .row/.col-sm-6 из старого шаблона).
   Мобильная и десктопная версии согласованы мокапом (чат 2026-09-10/11).
   ========================================================================== */

.contact-page{
  font-family:'Rubik', Arial, sans-serif;
  color:#16232f;
  padding:24px 0 50px;
}
.c-h1{ font-weight:700; font-size:22px; margin:0 0 20px; }

.contact-grid{ display:grid; grid-template-columns:1fr; gap:28px; }

/* ---------- инфо-карточка ---------- */
.info-card{
  background:#fff; border:1px solid #d7dfe5; border-radius:16px; padding:4px 18px;
}
.info-row{ display:flex; gap:14px; align-items:flex-start; padding:16px 0; }
.info-row + .info-row{ border-top:1px solid #e4eaef; }
.info-ic{
  width:38px; height:38px; border-radius:11px; background:#e4eaef; color:#2c4a63;
  display:flex; align-items:center; justify-content:center; flex:none;
}
.c-ic{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.info-lbl{ font-size:11.5px; color:#8494a3; margin-bottom:3px; }
.info-val{ font-size:15px; font-weight:500; color:#16232f; }
.info-val a{ color:inherit; text-decoration:none; }
.info-val a:hover{ text-decoration:underline; }
.info-val small{ display:block; font-weight:400; color:#526375; font-size:12.5px; margin-top:2px; }
.info-val small a{ color:inherit; }

/* ---------- карта ---------- */
.map-wrap{
  display:flex; flex-direction:column; gap:10px;
  margin-top:20px; border-radius:16px; overflow:hidden; border:1px solid #d7dfe5; height:220px;
}
/* .map-slot — отдельный позиционирующий контейнер НА КАЖДУЮ карту: при
   isCoord их две (город + свой город) и им нужно делить высоту .map-wrap
   пополам через flex, а не обе занимать её целиком. #google_map — абсолютно
   спозиционирован внутри своего слота (inset:0 !important) — так надёжнее,
   чем height:100% на самом div: Яндекс.Карты прописывают на нём инлайн
   width/height при инициализации, обычная % пересчитывалась криво в связке
   с flex-высотой родителя и карта застревала на размере первого рендера. */
.map-slot{ position:relative; flex:1; min-height:0; }
#google_map, #google_map2{
  position:absolute !important; inset:0 !important; width:auto !important; height:auto !important;
  background:#e4eaef;
}

/* ---------- форма (карточка на одном уровне с info-card) ---------- */
.form-card{
  background:#fff; border:1px solid #d7dfe5; border-radius:16px; padding:20px;
}
.c-section-h{ font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; margin:0 0 4px; }
.c-section-sub{ font-size:12.5px; color:#526375; margin:0 0 18px; }

.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.f-group{ margin-bottom:14px; }
.f-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.f-group label{ display:block; font-size:12px; color:#526375; margin-bottom:5px; }
.f-control{
  width:100%; border:1px solid #d7dfe5; border-radius:10px; padding:11px 12px;
  font-family:'Rubik', Arial, sans-serif; font-size:14px; color:#16232f; background:#fff;
}
textarea.f-control{ resize:vertical; min-height:110px; }

/* кастомная кнопка "Выбрать файлы" — прячем нативный input, стилизуем label под него */
.f-file-wrap{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.f-file-input{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.f-file-btn{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  border:1px solid #d7dfe5; border-radius:9px; padding:9px 16px;
  font-size:13px; font-weight:600; color:#16232f; background:#f4f6f8;
  transition:background .15s, border-color .15s;
}
.f-file-btn:hover{ background:#e4eaef; }
.f-file-input:focus-visible + .f-file-btn{ outline:2px solid #e79a1e; outline-offset:2px; }
.f-file-name{ font-size:12.5px; color:#8494a3; }
.f-submit{
  width:100%; border:none; border-radius:11px; padding:14px; margin-top:4px;
  background:#1f3a52; color:#eef4f8; font-family:'Rubik', Arial, sans-serif;
  font-weight:600; font-size:15px; cursor:pointer;
}
.f-submit:hover{ background:#2c4a63; }
.f-note{ font-size:11px; color:#8494a3; margin:10px 0 0; text-align:center; }

#note:not(:empty){
  background:#e7f3ec; color:#2f7a5c; border-radius:10px; padding:12px 14px;
  font-size:13.5px; margin-bottom:14px;
}

@media (min-width:768px){
  .contact-page{ padding:36px 0 70px; }
  .c-h1{ font-size:26px; margin-bottom:28px; }
  /* stretch (не start) — обе колонки одной высоты, низ карты равняется по
     низу формы: .contact-info становится flex-колонкой, карта дотягивается
     до низа через flex:1 вместо фиксированной высоты. */
  .contact-grid{ grid-template-columns:1fr 1fr; gap:40px; align-items:stretch; }
  .contact-info{ display:flex; flex-direction:column; }
  .map-wrap{ flex:1; height:auto; min-height:220px; }
  .f-note{ text-align:left; }
}