/* ===== Contacts page ===== */

/* Общий фон страницы — на тон светлее обычного: почти белый (--iw-cloud),
   следующий за белым по шкале нейтральных токенов. Форма остаётся на
   --iw-surface, поэтому карточка по-прежнему отделяется от подложки. */
html, body{ background:var(--iw-cloud); }

/* ——— 1. Секция карты (декоративная, full-bleed, статичная картинка) ——— */
.cmap{
  position:relative;
  min-height:clamp(267px,41vh,427px);
  /* нав фиксированный и прозрачный сверху — отодвигаем карту под него,
     чтобы за логотипом оставался светлый фон страницы, а не тайлы карты */
  margin-top:var(--iw-nav-h);
  background-color:var(--iw-media);            /* фолбэк, пока нет картинки */
  background-image:url('../assets/img/contacts-map.webp'); /* статичный скрин карты (Ростов-на-Дону) */
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  overflow:hidden;
}

/* центральный кастомный маркер (HTML/CSS, без картинок) */
.cmap-marker{
  /* left/top наведены на дом по ул. Города Волос, 6 (блок к северу от
     Городской больницы № 8) при background-position:center/cover */
  position:absolute; left:50%; top:45%;
  transform:translate(-50%,-100%);            /* остриё пина указывает в точку top/left */
  display:flex; flex-direction:column; align-items:center;
  pointer-events:none;
}
.cmap-plate{
  background:var(--iw-accent); color:var(--iw-white);
  padding:11px 15px 12px; text-align:center;
  box-shadow:var(--iw-shadow-soft);
  display:flex; flex-direction:column; align-items:center; gap:3px;
}
.cmap-plate-word{
  font-family:'IBM Plex Mono',monospace; font-weight:500;
  font-size:14px; letter-spacing:var(--iw-eyebrow-track); line-height:1.15;
}
.cmap-plate-sub{
  font-family:'IBM Plex Mono',monospace; font-size:11px;
  letter-spacing:var(--iw-eyebrow-track);
}
.cmap-pin{
  width:0; height:0;
  border-left:8px solid transparent;
  border-right:8px solid transparent;
  border-top:11px solid var(--iw-accent);
  filter:drop-shadow(0 5px 5px color-mix(in srgb, var(--iw-ink) 32%, transparent));
}

/* плашка-оверлей в левом нижнем углу */
.cmap-card{
  position:absolute;
  left:clamp(16px,3vw,44px); bottom:clamp(16px,3vw,44px);
  max-width:min(440px,86vw);
  background:color-mix(in srgb, var(--iw-darkest) 82%, transparent);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  padding:clamp(18px,2vw,26px) clamp(20px,2.4vw,30px);
  color:var(--iw-on-dark-bright);
}
.cmap-eyebrow{
  font-family:'IBM Plex Mono',monospace; font-size:11px;
  letter-spacing:var(--iw-eyebrow-track); color:var(--iw-accent); margin-bottom:12px;
}
.cmap-addr{
  font-size:clamp(14px,1.4vw,16px); line-height:1.55;
  color:var(--iw-on-dark-bright);
}

/* ——— 2. Контентная секция (две колонки) ——— */
.contacts{ padding:clamp(64px,9vh,116px) clamp(18px,5vw,72px); }
.contacts-grid{
  max-width:var(--iw-container); margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(32px,5vw,90px); align-items:start;
}

.contacts-h1{
  font-weight:800; font-size:clamp(30px,4.4vw,54px); line-height:1.05;
  letter-spacing:-0.03em; color:var(--iw-ink);
  margin-bottom:clamp(28px,3.4vw,48px); text-wrap:balance;
}

.c-eyebrow{
  font-family:'IBM Plex Mono',monospace; font-size:11.5px;
  letter-spacing:var(--iw-eyebrow-track); color:var(--iw-line);
  text-transform:uppercase; margin-bottom:14px;
}
.c-org{
  font-weight:700; font-size:clamp(18px,2vw,22px);
  letter-spacing:-0.01em; color:var(--iw-ink); margin-bottom:10px;
}
.c-addr{ font-size:16px; line-height:1.6; color:var(--iw-body); max-width:36em; }
.c-meta{ margin-top:14px; font-size:13px; line-height:1.65; color:var(--iw-label); }
.c-phone{ margin-top:16px; font-size:16px; color:var(--iw-body); }
.c-link{ color:var(--iw-accent); font-weight:600; transition:color .3s ease; }
.c-link:hover{ color:var(--iw-accent-hover); }
.c-mail{
  display:inline-block; font-size:clamp(20px,2.4vw,28px); font-weight:700;
  letter-spacing:-0.01em; color:var(--iw-accent); transition:color .3s ease;
}
.c-mail:hover{ color:var(--iw-accent-hover); }
.c-divider{
  height:1px; border:0; background:var(--iw-border);
  margin:clamp(28px,3.4vw,44px) 0;
}

/* правая колонка — карточка формы (светлая surface-подложка) */
.cform{
  background:var(--iw-surface);
  padding:clamp(26px,3vw,44px);
}
.cform-title{
  font-weight:800; font-size:clamp(20px,2.2vw,26px);
  letter-spacing:-0.015em; color:var(--iw-ink);
  margin-bottom:clamp(22px,2.6vw,30px);
}
.cform-fields{ display:flex; flex-direction:column; gap:clamp(18px,2vw,24px); }
.cform-field > span{
  display:block; font-family:'IBM Plex Mono',monospace; font-size:11px;
  letter-spacing:var(--iw-eyebrow-track); color:var(--iw-label);
  text-transform:uppercase; margin-bottom:9px;
}
.cform-field textarea,
.cform-field input{
  width:100%; background:var(--iw-white); border:1px solid var(--iw-border);
  padding:14px 15px; color:var(--iw-ink);
  font-family:'Manrope',sans-serif; font-size:15px; line-height:1.5;
  transition:border-color .3s ease;
}
.cform-field textarea{ resize:vertical; min-height:118px; }
.cform-field textarea:focus,
.cform-field input:focus{ border-color:var(--iw-accent); outline:none; }
.cform-field textarea::placeholder,
.cform-field input::placeholder{ color:var(--iw-line); }
.cform-field[data-invalid] textarea,
.cform-field[data-invalid] input{ border-color:var(--iw-error); }
.cform-err{ display:none; font-size:13.5px; line-height:1.4; color:var(--iw-error); }
.cform [data-btn="submit"]{ margin-top:2px; }

/* The invisible-reCAPTCHA badge is hidden site-wide in components.css
   (.grecaptcha-badge{display:none}); the required branding text is shown below. */
.cform-recaptcha-note{
  margin-top:14px; font-size:12px; line-height:1.5; color:var(--iw-label);
}
.cform-recaptcha-note a{ color:var(--iw-accent); border-bottom:1px solid rgba(5,178,216,0.4); }

.cform-success{ display:none; text-align:center; padding:16px 0; }
.cform-success .badge{
  width:54px; height:54px; margin:0 auto 18px;
  background:var(--iw-accent); color:var(--iw-white); font-size:26px;
  display:flex; align-items:center; justify-content:center;
}
.cform-success h3{ font-weight:800; font-size:22px; color:var(--iw-ink); }
.cform-success p{
  font-size:15px; color:var(--iw-body); line-height:1.55;
  max-width:300px; margin:10px auto 0;
}

/* ——— Адаптив: колонки складываются в одну ——— */
@media (max-width:900px){
  .contacts-grid{ grid-template-columns:1fr; gap:clamp(36px,7vw,56px); }
}
@media (max-width:520px){
  .cmap-card{ left:12px; right:12px; bottom:12px; max-width:none; }
}