/* ==========================================================================
   Секция «Контакты»
   Сетка: карточка контактов + карта в первом ряду, форма на всю ширину ниже.
   У карты «парус»: большой эллипс только в TL.
   ========================================================================== */

.contacts-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  grid-template-areas:
    "info map"
    "form form";
  gap: clamp(16px, 2vw, 24px);
}

/* --- Карточка контактов ------------------------------------------------ */
.contacts-info {
  grid-area: info;
  display: grid;
  align-content: start;
  gap: clamp(24px, 3vw, 36px);
  padding: clamp(28px, 4vw, 48px);
  border-radius: var(--shape-sail);
}
.contacts-block { display: grid; gap: var(--s-2); align-content: start; }
.contacts-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.contacts-phone {
  font-family: var(--f-display);
  font-size: clamp(1.875rem, 1.4rem + 1.8vw, 2.75rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--c-navy);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--t-fast);
}
.contacts-phone:hover { color: var(--c-blue); }
.contacts-note {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}
.contacts-note svg { flex: none; width: 18px; height: 18px; color: var(--c-red); }

.contacts-messengers { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-1); }

.contacts-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-6);
  padding-top: clamp(24px, 3vw, 32px);
  border-top: 1px solid var(--c-line);
}
.contacts-value {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--c-navy);
  text-decoration: none;
  overflow-wrap: anywhere;
}
a.contacts-value:hover { color: var(--c-blue); }
.contacts-route {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-red);
  text-decoration: none;
}
.contacts-route svg { width: 16px; height: 16px; transition: transform var(--t-base) var(--ease-out); }
.contacts-route:hover svg { transform: translateX(4px); }

/* --- Карта ------------------------------------------------------------- */
.contacts-map {
  grid-area: map;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 420px;
  /* большой эллипс только в TL: в остальных углах у Яндекса кнопки, их нельзя обрезать */
  border-radius: var(--r-xl) var(--r-md) var(--r-md) var(--r-md) / var(--r-xl-v) var(--r-md) var(--r-md) var(--r-md);
  background: #E6EBF0;
  box-shadow: var(--shadow-sm);
}
.contacts-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 0;
}
/* «схема улиц», пока карта не загрузилась */
.contacts-map__placeholder {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(115deg, transparent 47%, #fff 47% 50%, transparent 50%) 0 0 / 100% 100%,
    linear-gradient(25deg, transparent 58%, #fff 58% 60%, transparent 60%) 0 0 / 100% 100%,
    repeating-linear-gradient(0deg, transparent 0 46px, rgba(255,255,255,.7) 46px 48px),
    repeating-linear-gradient(90deg, transparent 0 62px, rgba(255,255,255,.7) 62px 64px),
    #E3E9EF;
}
.contacts-map__chip {
  position: absolute;
  left: 20px;
  bottom: 20px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
  padding: 10px 16px 10px 12px;
  border-radius: var(--shape-chip);
  background: var(--c-navy);
  color: var(--c-white);
  font-size: var(--fs-sm);
  font-weight: 600;
  box-shadow: var(--shadow-md);
  pointer-events: none;
}
.contacts-map.is-loaded .contacts-map__chip { opacity: 0; transform: translateY(8px); }
.contacts-map__chip { transition: opacity var(--t-base), transform var(--t-base) var(--ease-out); }
.contacts-map__chip svg { width: 18px; height: 18px; color: var(--c-red-400); }

/* --- Форма заявки ------------------------------------------------------ */
.lead-form {
  grid-area: form;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr);
  grid-template-areas:
    "head fields"
    "head foot"
    "head status";
  gap: var(--s-6) clamp(32px, 5vw, 72px);
  margin: 0;
  padding: clamp(28px, 4.5vw, 64px);
  border-radius: var(--shape-leaf);
  background:
    radial-gradient(90% 120% at 100% 0%, #1A3957 0%, transparent 60%),
    linear-gradient(160deg, var(--c-navy-800) 0%, var(--c-navy-900) 60%, var(--c-navy-950) 100%);
  color: var(--c-on-dark);
}
.lead-form__deco {
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(40%, 480px);
  height: 88px;
  z-index: -1;
  pointer-events: none;
}
.lead-form__deco::before,
.lead-form__deco::after { content: ""; position: absolute; inset: 0; }
.lead-form__deco::before {
  background: linear-gradient(270deg, transparent 0%, rgba(12, 72, 127, .35) 45%, var(--c-blue) 100%);
  clip-path: polygon(0 8%, 100% 100%, 0 100%);
}
.lead-form__deco::after {
  background: linear-gradient(270deg, transparent 10%, rgba(192, 51, 44, .5) 55%, var(--c-red) 100%);
  clip-path: polygon(0 0, 97% 100%, 0 5%);
}

.lead-form__head { grid-area: head; display: grid; align-content: start; gap: var(--s-4); }
.lead-form__title {
  margin: 0;
  font-family: var(--f-display);
  font-size: var(--fs-xl);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.01em;
}
.lead-form__text { margin: 0; color: var(--c-on-dark-muted); }

.lead-form__fields {
  grid-area: fields;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4);
}
.lead-form__contact { grid-column: 1 / -1; margin: 0; padding: 0; border: 0; min-width: 0; }
.lead-form__contact legend { padding: 0; margin-bottom: var(--s-2); }

.lead-form__foot {
  grid-area: foot;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
}
.lead-form__foot .check { max-width: 440px; }
.lead-form__submit { flex: none; min-height: 56px; padding-inline: 28px; }
.lead-form__submit[disabled] { opacity: .6; pointer-events: none; }

.lead-form__status {
  grid-area: status;
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  min-height: 1.5em;
}
.lead-form__status.is-error { color: var(--c-red-400); }
.lead-form__status.is-ok { color: #7FD6A5; }

/* Успешная отправка: прячем поля, оставляем заголовок и сообщение */
.lead-form.is-sent .lead-form__fields,
.lead-form.is-sent .lead-form__foot { display: none; }
.lead-form.is-sent .lead-form__status { font-size: var(--fs-md); align-self: center; }

/* --- Адаптив ----------------------------------------------------------- */
@media (max-width: 1024px) {
  .contacts-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "info" "map" "form";
  }
  .contacts-map { min-height: 340px; }
  .lead-form {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "fields" "foot" "status";
  }
}

@media (max-width: 600px) {
  .contacts-pair { grid-template-columns: 1fr; gap: var(--s-5); }
  .contacts-phone { font-size: 1.875rem; }
  .contacts-map { min-height: 300px; }
  .lead-form__fields { grid-template-columns: 1fr; }
  .lead-form__foot { flex-direction: column; align-items: stretch; }
  .lead-form__submit { width: 100%; }
  .choices .choice { flex: 1 1 auto; }
  .choices .choice span { width: 100%; justify-content: center; }
}

/* --- Часы «Сейчас во Владивостоке» (живые, без JS не показываем) ------- */
.vl-clock {
  display: none;
  align-items: center;
  gap: 14px;
  width: fit-content;
  margin-top: var(--s-2);
  padding: 10px 18px 10px 10px;
  border-radius: 20px 6px 20px 6px;
  background: var(--c-bg, #F3F5F8);
  box-shadow: inset 0 0 0 1px var(--c-line);
}
.js .vl-clock { display: flex; }
.vl-clock__face { flex: none; width: 48px; height: 48px; }
.vl-clock__rim { fill: #fff; stroke: var(--c-navy); stroke-width: 2; }
.vl-clock__tick { stroke: rgba(30, 58, 85, .35); stroke-width: 1; stroke-linecap: round; }
.vl-clock__tick--major { stroke: var(--c-navy); stroke-width: 1.6; }
.vl-clock__h, .vl-clock__m, .vl-clock__s {
  stroke-linecap: round;
  transform-origin: 20px 20px;
}
.vl-clock__h { stroke: var(--c-navy); stroke-width: 2.6; }
.vl-clock__m { stroke: var(--c-navy); stroke-width: 1.8; }
.vl-clock__s { stroke: var(--c-red); stroke-width: 1; }
.vl-clock.is-ready .vl-clock__m { transition: transform .3s ease-out; }
.vl-clock__pin { fill: var(--c-red); }
.vl-clock__text { display: grid; gap: 2px; }
.vl-clock__label { font-size: 12px; font-weight: 600; color: var(--c-text-muted); }
.vl-clock__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.vl-clock__time {
  font-family: var(--f-display);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--c-navy);
  font-variant-numeric: tabular-nums;
}
.vl-clock__state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text-muted);
}
.vl-clock__state::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #9AA6B3;
}
.vl-clock.is-open .vl-clock__state { color: #1B8E47; }
.vl-clock.is-open .vl-clock__state::before { background: #22B45A; box-shadow: 0 0 0 3px rgba(34, 180, 90, .2); }
.vl-clock.is-closed .vl-clock__state::before { background: var(--c-red); }