/* Nocturne — контакты (information/contact) и оптовый отдел (information/contacto).
   Один файл на обе страницы: заголовок, карточки контактов и форма у них общие.
   Цветовых литералов нет — палитра приходит переменными из header_nc.tpl.
   Классы с префиксами nc-ct- и nc-opt-, чтобы не пересечься с chrome.css. */

.nc-ct-head { padding-top: var(--space-4); }
.nc-ct-title { font-size: 38px; line-height: 1.1; margin: var(--space-3) 0 0; }
.nc-ct-sub { margin: var(--space-2) 0 0; color: var(--color-neutral-400); font-size: 15px; }
.nc-ct-top, .nc-ct-bottom { padding-top: var(--space-6); }

/* предупреждение о предзаказе */
.nc-ct-note {
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-accent-800);
  background: var(--color-accent-900);
  border-radius: var(--radius-md);
  color: var(--color-accent-100);
  font-size: 14px;
  line-height: 1.5;
}
.nc-ct-note b { color: var(--color-accent); }

/* ── карточки контактов ─────────────────────────────────────────── */

.nc-ct { padding-top: var(--space-8); }
.nc-ct__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
.nc-ct__grid > * { min-width: 0; }

.nc-ct-card {
  display: grid;
  gap: var(--space-2);
  align-content: start;
  padding: var(--space-6);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  transition: border-color .15s ease;
}
.nc-ct-card:hover { border-color: var(--color-neutral-700); }
/* адрес длиннее прочего — занимает две колонки, чтобы строки не рвались */
.nc-ct-card--wide { grid-column: span 2; }

/* иконки нарисованы под светлую тему; на тёмной вытягиваем их в акцент */
.nc-ct-card__ico { width: 24px; height: 24px; }
.nc-ct-card__ico img {
  width: 100%; height: 100%;
  filter: grayscale(1) brightness(0) invert(1);
  opacity: .55;
}

.nc-ct-card__head {
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-neutral-500);
  margin-top: var(--space-2);
}
.nc-ct-card__body { font-size: 15px; line-height: 1.5; color: var(--color-text); }
.nc-ct-card__body a { color: var(--color-accent-300); text-decoration: none; }
.nc-ct-card__body a:hover { color: var(--color-accent-200); }

.nc-ct-row { display: flex; gap: var(--space-3); align-items: baseline; justify-content: space-between; }
.nc-ct-row .nc-dim { font-size: 13px; }

.nc-ct-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  color: var(--color-accent-300);
}

.nc-ct-photo { padding-top: var(--space-8); }
.nc-ct-photo img { width: 100%; height: auto; border-radius: var(--radius-lg); }

/* ── карта и видео ──────────────────────────────────────────────── */

.nc-ct-media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  padding-top: var(--space-8);
  align-items: start;
}
.nc-ct-media > * { min-width: 0; }
.nc-ct-media--single { grid-template-columns: 1fr; }

/* высоту карты выставляет скрипт (inith), нам остаётся рамка и скругление */
.nc-ct-map {
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-divider);
}
.nc-ct-map .map-item { width: 100%; }

.nc-ct-video__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-neutral-500);
}
.nc-ct-video__head img { filter: grayscale(1) brightness(0) invert(1); opacity: .55; }
.nc-ct-video__body {
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-divider);
}
.nc-ct-video__body lite-youtube { width: 100%; max-width: 100%; }

/* ── реквизиты ──────────────────────────────────────────────────── */

.nc-ct-legal { padding-top: var(--space-8); padding-bottom: 64px; }
.nc-ct-legal__label {
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-neutral-500);
  margin-bottom: var(--space-3);
}
.nc-ct-legal__items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-8);
  font-size: 13px;
  color: var(--color-neutral-400);
}

/* ── оптовая: преимущества ──────────────────────────────────────── */

.nc-opt-adv {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  padding-top: var(--space-8);
  text-align: center;
}
.nc-opt-adv > * { min-width: 0; }
.nc-opt-adv__ico {
  width: 72px; height: 72px;
  margin: 0 auto var(--space-4);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.nc-opt-adv__title {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 17px;
  margin-bottom: var(--space-2);
}
.nc-opt-adv__text { font-size: 14px; color: var(--color-neutral-400); line-height: 1.5; }

/* ── оптовая: контакты отдела ───────────────────────────────────── */

/* Рамку карточки рисуем на внутреннем блоке, а не на .nc-wrap: на контейнере
   она уходила за края и была шире блока формы под ней. */
.nc-opt-lead {
  margin-top: var(--space-8);
  padding: var(--space-8);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.nc-opt-lead__title { font-size: 26px; margin: 0 0 var(--space-3); }
.nc-opt-lead__text { color: var(--color-neutral-300); font-size: 15px; max-width: 70ch; }

.nc-opt-lead__contacts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-6);
  align-items: end;
}
.nc-opt-contact { display: grid; gap: 4px; min-width: 0; font-size: 17px; }
.nc-opt-contact .nc-dim { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.nc-opt-contact a { color: var(--color-accent-300); text-decoration: none; }
.nc-opt-contact a:hover { color: var(--color-accent-200); }
.nc-opt-contact--wide { grid-column: 1 / -1; font-size: 15px; }
.nc-opt-lead__action { grid-column: 1 / -1; }

/* ── оптовая: форма ─────────────────────────────────────────────── */

.nc-opt-form { padding-top: var(--space-8); padding-bottom: 64px; }
.nc-opt-form__title { font-size: 26px; margin: 0 0 var(--space-5); }
.nc-opt-form__box {
  padding: var(--space-8);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
}
.nc-opt-form__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  /* без этого ячейка тянется по высоте самой длинной в ряду, и поле «Имя»
     оказывалось выше соседних на 7px */
  align-items: start;
  margin-bottom: var(--space-5);
}
/* Внутри сетки расстояние задаёт gap: собственный отступ группы складывался
   с ним, а у последней его не было вовсе — на телефоне «Комментарий»
   прилипал к «Имени», а остальные поля стояли вдвое реже. */
.nc-opt .nc-opt-form__grid .form-group { margin-bottom: 0; }

.nc-opt .form-group { display: grid; gap: 6px; margin: 0 0 var(--space-5); }
.nc-opt .form-group:last-child { margin-bottom: 0; }
.nc-opt label { font-size: 13px; color: var(--color-neutral-300); font-weight: 400; margin: 0; }
.nc-opt .form-control {
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  font: inherit;
  font-size: 15px;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  caret-color: var(--color-accent);
}
.nc-opt textarea.form-control { min-height: 120px; resize: vertical; }
.nc-opt .form-control:hover { border-color: var(--color-neutral-600); }
.nc-opt .form-control:focus-visible { border-color: var(--color-accent); outline: none; }
.nc-opt .form-control::placeholder { color: var(--color-neutral-500); }

.nc-opt-form__aux {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  align-items: flex-start;
  justify-content: space-between;
  margin-top: var(--space-5);
}
.nc-opt .upload-block .form-group { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
/* кнопку «очистить» показывает скрипт — до первой загрузки её быть не должно */
.nc-opt #button_fclear { display: none; }
.nc-opt #info_files { width: 100%; display: grid; gap: var(--space-2); }
.nc-opt .item-upload {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  font-size: 13px;
}
.nc-opt .item-upload .text-success { color: var(--color-text); flex: 1; min-width: 0; overflow-wrap: anywhere; }
.nc-opt .updel { cursor: pointer; color: var(--color-neutral-500); min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.nc-opt .updel:hover { color: var(--color-danger); }
.nc-opt .text-warning { color: var(--color-danger); font-size: 13px; }
.nc-opt .item-bupload { padding-top: var(--space-2); }

.nc-opt-form__submit { margin-top: var(--space-6); display: grid; gap: var(--space-4); justify-items: start; }
.nc-opt .text-danger { font-size: 13px; color: var(--color-danger); }
.nc-opt .alert {
  border: 1px solid var(--color-danger-line);
  background: var(--color-danger-bg);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  font-size: 14px;
  color: var(--color-danger);
}
.nc-opt .alert-success {
  border-color: var(--color-accent);
  background: var(--color-accent-900);
  color: var(--color-accent-100);
}

.nc-opt-h2 { padding-bottom: 64px; }
.nc-opt-h2 h2 { font-size: 22px; color: var(--color-neutral-300); font-weight: 400; line-height: 1.4; }

/* ── брейкпоинты ────────────────────────────────────────────────── */

@media (max-width: 1023px) {
  .nc-ct__grid { grid-template-columns: repeat(2, 1fr); }
  .nc-ct-card--wide { grid-column: span 2; }
  .nc-ct-media { grid-template-columns: 1fr; }
  .nc-ct-title { font-size: 30px; }
  .nc-opt-adv { grid-template-columns: 1fr; gap: var(--space-8); }
  .nc-opt-form__grid { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .nc-ct-title { font-size: 24px; }
  .nc-ct { padding-top: var(--space-6); }
  .nc-ct__grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .nc-ct-card--wide { grid-column: auto; }
  .nc-ct-card { padding: 14px; border-radius: var(--radius-md); }
  .nc-ct-legal { padding-bottom: 36px; }
  /* Телефон и почта — ссылки, по которым звонят и пишут прямо с телефона:
     26px в высоту это меньше цели нажатия. */
  .nc-ct-card__body a,
  .nc-opt-contact a { display: inline-flex; align-items: center; min-height: 44px; }
  .nc-ct-legal__items { gap: var(--space-2); flex-direction: column; }

  .nc-opt-lead { padding: var(--space-6); }
  .nc-opt-lead__title, .nc-opt-form__title { font-size: 20px; }
  .nc-opt-lead__contacts { grid-template-columns: 1fr; }
  .nc-opt-form__box { padding: var(--space-5); }
  .nc-opt-form { padding-bottom: 36px; }
  .nc-opt-h2 { padding-bottom: 36px; }
  .nc-opt-h2 h2 { font-size: 18px; }
  /* 16px — ниже этого iOS увеличивает страницу при фокусе поля */
  .nc-opt .form-control { font-size: 16px; min-height: 48px; }
  .nc-opt-form__submit { justify-items: stretch; }
  .nc-opt-form__submit .nc-btn { width: 100%; }
  /* капча шире экрана — ужимаем, иначе тянет страницу вбок */
  .nc-opt .g-recaptcha { transform: scale(.85); transform-origin: 0 0; height: 66px; }
}

/* «Прикрепить файл» — вторичное действие, но кнопка в 30px рядом с полями
   в 44px выглядит случайной. Доводим до общей высоты. */
.nc-opt-form__box #button_select,
.nc-opt-form__box .btn-default {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
}