/* =========================================================================
   Central Property — страницы «О компании» (tools/pages/o-kompanii.json) и «Контакты» (tools/pages/kontakty.json).
   Макет: docs/preview/v2/about.html; общие компоненты — css/sections.css (.cp-page-hero, .cp-section, .cp-grid,
   .cp-steps, .cp-cta, .cp-chips, .cp-stat, .cp-reveal), карточки — css/cards.css, ID-табличка .cp-plate — style.css.
   Здесь только то, чего нет в общих файлах: отступы виджетов Elementor внутри секций страниц (.cp-pg),
   миссия, карточки направлений (.cp-about-role), карточки «проверка и документы» (.cp-about-guar),
   список и карточки контактов, поиск по номеру на странице (.cp-idsearch--page), форма Houzez (.cp-form).
   Все величины — токены --cp-*; локальные переменные файла объявлены в :root ниже.
   Mobile-first: база 375 px, расширение через min-width (600 / 768 / 1024).
   ========================================================================= */

:root{
  --cp-about-svg:22px;          /* иконка в кружке/квадрате 48 px */
  --cp-about-plate-h:36px;      /* увеличенная ID-табличка в первом экране «О компании» */
  --cp-about-ring:3px;          /* кольцо фокуса полей (как в style.css §5) */
  --cp-about-lift:3px;          /* подъём карточки при наведении (DESIGN.md §8) */
  --cp-about-textarea:128px;    /* высота поля «Вопрос» */
}

/* ---------- 1. Отступы между виджетами Elementor внутри секций страниц ---------- */
/* Контейнеры страниц идут с классом cp-pg и нулевым зазором в JSON; расстояние между блоками задаётся здесь. */
.cp-pg .elementor-widget{margin-block-end:0}
.cp-pg .elementor-widget + .elementor-widget{margin-block-start:var(--cp-s6)}
.cp-pg .cp-pg__head + .elementor-widget{margin-block-start:0}   /* после шапки секции (.cp-section__head даёт свой нижний отступ) */
.cp-pg .elementor-widget + .cp-about-objs__head{margin-block-start:var(--cp-s7)}
.cp-about-objs__head .cp-section__title{font-size:var(--cp-fs-h3)}
/* Поправка общего правила sections.css: в ночной секции надзаголовок остаётся золотым, хотя это <p> */
.cp-section--night p.cp-eyebrow,.cp-section--night h2.cp-eyebrow{color:var(--cp-gold)}
h2.cp-eyebrow{font-size:var(--cp-fs-sm);line-height:1.3}

/* ---------- 2. Иконка в подложке (направления, гарантии, контакты) ---------- */
.cp-about-ico{flex:none;display:grid;place-items:center;width:var(--cp-s7);height:var(--cp-s7);border-radius:var(--cp-r-md);background:var(--cp-accent-soft);color:var(--cp-accent-text)}
.cp-about-ico svg,.cp-about-principles svg{width:var(--cp-about-svg);height:var(--cp-about-svg);fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 3. Первый экран «О компании»: три факта ---------- */
.cp-about-stats .cp-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
.cp-about-stats .cp-stat--code,.cp-about-stats .cp-about-stat--code{grid-column:1/-1}
.cp-about-plate{height:var(--cp-about-plate-h);font-size:var(--cp-fs-base);letter-spacing:.08em}
.cp-about-stat--code b{line-height:1}
.cp-page-hero .cp-btn svg{width:var(--cp-s5);height:var(--cp-s5)}

/* ---------- 4. Миссия ---------- */
.cp-about-mission__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--cp-s5)}
.cp-about-mission__text{margin:0;max-width:34ch;font-family:var(--cp-font-head);font-size:var(--cp-fs-h3);font-weight:500;line-height:1.35;color:var(--cp-text);text-wrap:balance}
.cp-about-mission__text b{font-weight:600;color:var(--cp-accent-text)}
.cp-about-mission__aside p{margin:0 0 var(--cp-s3);line-height:1.55}
.cp-about-mission__aside p:last-child{margin-bottom:0}
.cp-about-mission__aside .cp-lead{color:var(--cp-text)}
@media (min-width:1024px){
  .cp-about-mission__grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--cp-s7);align-items:start}
}

/* ---------- 5. Команда: карточки направлений без имён и фото + принципы ---------- */
.cp-about-role{display:flex;flex-direction:column;gap:var(--cp-s3);height:100%;padding:var(--cp-s5);border:1px solid var(--cp-line);border-radius:var(--cp-r-md);background:var(--cp-surface);box-shadow:var(--cp-shadow-1)}
.cp-about-role h3{margin:0;font-family:var(--cp-font-text);font-size:var(--cp-fs-h4);font-weight:600;line-height:1.3;color:var(--cp-text)}
.cp-about-role p{flex:1;margin:0;font-size:var(--cp-fs-sm);line-height:1.5;color:var(--cp-muted)}
.cp-about-role__actions{display:flex;gap:var(--cp-s1);margin-top:auto;padding-top:var(--cp-s3);border-top:1px solid var(--cp-line)}
.cp-about-role .cp-iconbtn{display:inline-grid;place-items:center;width:var(--cp-tap);height:var(--cp-tap);border-radius:50%;color:var(--cp-text);text-decoration:none;transition:background-color var(--cp-dur-fast) var(--cp-ease),color var(--cp-dur-fast) var(--cp-ease),transform var(--cp-dur-fast) var(--cp-ease)}
.cp-about-role .cp-iconbtn:hover,.cp-about-role .cp-iconbtn:focus-visible{background:var(--cp-accent-soft);color:var(--cp-accent-text)}
.cp-about-role .cp-iconbtn:active{transform:scale(.94)}
.cp-about-principles{display:grid;gap:var(--cp-s3);margin:var(--cp-s6) 0 0;padding:0;list-style:none}
.cp-about-principles li{display:flex;gap:var(--cp-s3);align-items:flex-start;line-height:1.5;color:var(--cp-text)}
.cp-about-principles svg{flex:none;margin-top:1px;color:var(--cp-success)}
@media (min-width:768px){.cp-about-principles{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--cp-s5)}}

/* ---------- 6. «Что мы проверяем и как оформляем» и «Работаем открыто» (ночная секция) ---------- */
.cp-about-guar{display:flex;flex-direction:column;gap:var(--cp-s2);height:100%;padding:var(--cp-s5);border:1px solid var(--cp-night-line);border-radius:var(--cp-r-md);background:color-mix(in srgb,var(--cp-on-night) 5%,transparent)}
.cp-about-guar .cp-about-ico{background:color-mix(in srgb,var(--cp-on-night) 8%,transparent);color:var(--cp-gold)}
.cp-about-guar h3{margin:var(--cp-s2) 0 0;font-family:var(--cp-font-text);font-size:var(--cp-fs-h4);font-weight:600;line-height:1.3;color:var(--cp-on-night)}
.cp-about-guar p,.cp-about-guar li{margin:0;font-size:var(--cp-fs-sm);line-height:1.5;color:var(--cp-on-night-muted)}
.cp-about-guar ul{margin:0;padding-left:1.1em}
.cp-about-guar li + li{margin-top:var(--cp-s1)}
.cp-about-guar li::marker{color:var(--cp-gold)}
.cp-about-guar .cp-badge{vertical-align:middle;box-shadow:none}
.cp-about-guar__note{margin:var(--cp-s5) 0 0;max-width:70ch;font-size:var(--cp-fs-sm);line-height:1.5;color:var(--cp-on-night-muted)}

/* ---------- 7. Список контактов («О компании», блок #contacts) ---------- */
.cp-contacts-list{display:grid;gap:var(--cp-s3);margin:var(--cp-s5) 0 0;padding:0;list-style:none}
.cp-contacts-list li{display:flex;gap:var(--cp-s3);align-items:center;min-width:0}
.cp-contacts-list .cp-about-ico{width:var(--cp-tap);height:var(--cp-tap)}
.cp-contacts-list__k{display:block;font-size:var(--cp-fs-xs);line-height:1.3;color:var(--cp-muted)}
.cp-contacts-list__v{display:block;font-weight:500;line-height:1.35;color:var(--cp-text);overflow-wrap:anywhere}
.cp-contacts-list a{color:var(--cp-text);text-decoration:none}
.cp-contacts-list a:hover,.cp-contacts-list a:focus-visible{color:var(--cp-accent-text)}
.cp-cta__actions .cp-btn svg{width:var(--cp-s5);height:var(--cp-s5)}
.cp-about-box__title{margin:0 0 var(--cp-s4);font-family:var(--cp-font-text);font-size:var(--cp-fs-h4);font-weight:600;line-height:1.3;color:var(--cp-text)}
.cp-about-box__links{display:flex;flex-direction:column;align-items:flex-start;gap:var(--cp-s1);margin-top:var(--cp-s5);padding-top:var(--cp-s4);border-top:1px solid var(--cp-line)}

/* ---------- 8. Поиск по номеру объекта на странице (та же form.cp-idsearch, что в шапке; обработчик — js/header-footer.js) ---------- */
.cp-idsearch--page{display:block;margin:0}
.cp-idsearch__label{display:block;margin:0 0 var(--cp-s2);font-size:var(--cp-fs-sm);font-weight:500;color:var(--cp-muted)}
.cp-idsearch__row{display:flex;gap:var(--cp-s2)}
.cp-idsearch--page input{flex:1 1 auto;min-width:0;height:var(--cp-s7);min-height:0;margin:0;padding:0 var(--cp-s4);border:1px solid var(--cp-line-strong);border-radius:var(--cp-r-sm);background:var(--cp-surface);box-shadow:none;font:500 var(--cp-fs-base)/1 var(--cp-font-text);color:var(--cp-text);-webkit-appearance:none;appearance:none;transition:border-color var(--cp-dur-fast) var(--cp-ease),box-shadow var(--cp-dur-fast) var(--cp-ease)}
.cp-idsearch--page input::placeholder{color:var(--cp-faint);opacity:1}
.cp-idsearch--page input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.cp-idsearch--page input:hover{border-color:var(--cp-muted)}
.cp-idsearch--page input:focus{outline:0;border-color:var(--cp-accent);box-shadow:0 0 0 var(--cp-about-ring) var(--cp-accent-soft)}
.cp-idsearch--page button{flex:none;display:inline-flex;align-items:center;gap:var(--cp-s2);height:var(--cp-s7);padding:0 var(--cp-s5);border:0;border-radius:var(--cp-r-sm);background:var(--cp-accent);color:var(--cp-on-accent);font:600 var(--cp-fs-base)/1 var(--cp-font-text);cursor:pointer;transition:background-color var(--cp-dur-fast) var(--cp-ease),transform var(--cp-dur-fast) var(--cp-ease)}
.cp-idsearch--page button:hover,.cp-idsearch--page button:focus-visible{background:var(--cp-accent-hover)}
.cp-idsearch--page button:active{transform:translateY(1px)}
.cp-idsearch__hint{margin:var(--cp-s2) 0 0;font-size:var(--cp-fs-xs);line-height:1.4;color:var(--cp-muted)}
@media (max-width:359.98px){
  .cp-idsearch--page button span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .cp-idsearch--page button{position:relative;width:var(--cp-s7);padding:0;justify-content:center}
}

/* ---------- 9. «Контакты»: карточки способов связи (телефон — первой, с акцентной рамкой) ---------- */
.cp-contact-card{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:var(--cp-s1);height:100%;padding:var(--cp-s5);border:1px solid var(--cp-line);border-radius:var(--cp-r-md);background:var(--cp-surface);box-shadow:var(--cp-shadow-1);color:var(--cp-text);text-decoration:none;transition:transform var(--cp-dur-base) var(--cp-ease),border-color var(--cp-dur-fast) var(--cp-ease)}
.cp-contact-card::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;box-shadow:var(--cp-shadow-2);opacity:0;pointer-events:none;transition:opacity var(--cp-dur-base) var(--cp-ease)}
a.cp-contact-card:hover,a.cp-contact-card:focus-visible{border-color:var(--cp-accent);color:var(--cp-text);text-decoration:none}
@media (hover:hover){
  a.cp-contact-card:hover{transform:translateY(calc(-1 * var(--cp-about-lift)))}
  a.cp-contact-card:hover::before{opacity:1}
}
.cp-contact-card .cp-about-ico{margin-bottom:var(--cp-s2)}
.cp-contact-card__k{font-family:var(--cp-font-head);font-size:var(--cp-fs-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--cp-muted)}
.cp-contact-card__v{font-family:var(--cp-font-head);font-size:var(--cp-fs-h4);font-weight:600;line-height:1.3;color:var(--cp-text);overflow-wrap:anywhere;transition:color var(--cp-dur-fast) var(--cp-ease)}
a.cp-contact-card:hover .cp-contact-card__v{color:var(--cp-accent-text)}
.cp-contact-card__hint{margin-top:auto;padding-top:var(--cp-s2);font-size:var(--cp-fs-sm);line-height:1.45;color:var(--cp-muted)}
.cp-contact-card--primary{border-color:var(--cp-accent)}
.cp-contact-card--primary .cp-about-ico{background:var(--cp-accent);color:var(--cp-on-accent)}
.cp-contact-card--static{background:var(--cp-bg);box-shadow:none}
.cp-contact-card--static .cp-about-ico{background:var(--cp-surface-2);color:var(--cp-muted)}

/* ---------- 10. «Контакты»: блок «Задать вопрос» — две колонки Elementor (текст + бокс с формой Houzez) ---------- */
/* Внутренние контейнеры Elementor красят отступы через переменные — задаём их, как в sections.css для .cp-section */
.e-con.cp-contacts-ask__row{--padding-top:0;--padding-bottom:0;--padding-left:0;--padding-right:0}
.e-con.cp-cta__text{--padding-top:0;--padding-bottom:0;--padding-left:0;--padding-right:0}
.e-con.cp-cta__box{--padding-top:var(--cp-s5);--padding-bottom:var(--cp-s5);--padding-left:var(--cp-s5);--padding-right:var(--cp-s5)}
.cp-contacts-ask__box .elementor-widget + .elementor-widget{margin-block-start:var(--cp-s3)}
.cp-contacts-ask__box .cp-about-box__title{margin-bottom:0}
.cp-contacts-ask__text .cp-cta__points{margin-top:var(--cp-s5)}
.cp-form__note{margin:0;font-size:var(--cp-fs-xs);line-height:1.4;color:var(--cp-muted)}
.cp-form__note a{color:var(--cp-accent-text)}
@media (min-width:1024px){
  .e-con.cp-cta__box{--padding-top:var(--cp-s6);--padding-bottom:var(--cp-s6);--padding-left:var(--cp-s6);--padding-right:var(--cp-s6)}
}

/* ---------- 11. Форма Houzez (виджет houzez_elementor_contact_form с классом cp-form): поля, подписи, кнопка, сообщения ---------- */
/* Разметка виджета: .elementor-form > .elementor-form-fields-wrapper > .elementor-field-group (label.elementor-field-label + .elementor-field),
   кнопка button[type=submit] с .houzez-loader-js, ответ — .ele-form-messages .alert (houzez-validate.js) */
.cp-form .elementor-form-fields-wrapper{display:flex;flex-wrap:wrap;gap:var(--cp-s4) var(--cp-s3);margin:0!important} /* !important: Elementor пишет margin -5px/padding 5px в CSS страницы с большей специфичностью — давало горизонтальное переполнение */
.cp-form .elementor-field-group{display:flex;flex-direction:column;flex-wrap:nowrap!important;gap:var(--cp-s2);flex:1 1 100%;min-width:0;margin:0!important;padding:0!important} /* nowrap: Elementor задаёт flex-wrap:wrap — в колонке поле уходило во второй столбец правее подписи */
.cp-form .elementor-col-50{flex-basis:calc(50% - var(--cp-s3) / 2)}
.cp-form .elementor-field-label{margin:0;align-self:flex-start;text-align:left;font-size:var(--cp-fs-sm);font-weight:500;line-height:1.3;color:var(--cp-muted)}
.cp-form .elementor-mark-required .elementor-field-label::after{content:" *";color:var(--cp-error)}
.cp-form .elementor-field{width:100%;min-height:var(--cp-s7);margin:0;padding:0 var(--cp-s4);border:1px solid var(--cp-line-strong);border-radius:var(--cp-r-sm);background:var(--cp-surface);box-shadow:none;font:400 var(--cp-fs-base)/1.4 var(--cp-font-text);color:var(--cp-text);transition:border-color var(--cp-dur-fast) var(--cp-ease),box-shadow var(--cp-dur-fast) var(--cp-ease)}
.cp-form textarea.elementor-field{min-height:var(--cp-about-textarea);padding-block:var(--cp-s3);line-height:1.5;resize:vertical}
.cp-form .elementor-field::placeholder{color:var(--cp-faint);opacity:1}
.cp-form .elementor-field:hover{border-color:var(--cp-muted)}
.cp-form .elementor-field:focus{outline:0;border-color:var(--cp-accent);box-shadow:0 0 0 var(--cp-about-ring) var(--cp-accent-soft)}
.cp-form .elementor-field.error{border-color:var(--cp-error);box-shadow:0 0 0 var(--cp-about-ring) color-mix(in srgb,var(--cp-error) 14%,transparent)}
.cp-form label.error{margin:0;font-size:var(--cp-fs-xs);font-weight:400;line-height:1.4;color:var(--cp-error)}
.cp-form .elementor-form button[type="submit"]{display:inline-flex;align-items:center;justify-content:center;gap:var(--cp-s2);width:100%;min-height:var(--cp-s7);padding:0 var(--cp-s5);border:1px solid transparent;border-radius:var(--cp-r-sm);background:var(--cp-accent)!important;color:var(--cp-on-accent)!important; /* !important: CSS страницы Elementor красит .elementor-button в голубой с большей специфичностью */font:600 var(--cp-fs-base)/1.2 var(--cp-font-text);cursor:pointer;transition:background-color var(--cp-dur-fast) var(--cp-ease),transform var(--cp-dur-fast) var(--cp-ease)}
.cp-form .elementor-form button[type="submit"]:hover,.cp-form .elementor-form button[type="submit"]:focus-visible{background:var(--cp-accent-hover)!important;color:var(--cp-on-accent)!important}
.cp-form .elementor-form button[type="submit"]:active{transform:translateY(1px)}
.cp-form .elementor-form button[type="submit"]:disabled{opacity:.55;cursor:wait;transform:none}
.cp-form .houzez-loader-js{display:none}
.cp-form .houzez-loader-js.loader-show{display:inline-block}
.cp-form .elementor-form > br{display:none}
.cp-form .ele-form-messages:empty,.cp-form .error-container:empty{display:none}
.cp-form .alert{margin:var(--cp-s3) 0 0;padding:var(--cp-s3) var(--cp-s4);border:0;border-left:3px solid var(--cp-success);border-radius:var(--cp-r-sm);background:color-mix(in srgb,var(--cp-success) 12%,var(--cp-surface));color:var(--cp-text);font-size:var(--cp-fs-sm);line-height:1.45}
.cp-form .alert-danger{border-left-color:var(--cp-error);background:color-mix(in srgb,var(--cp-error) 10%,var(--cp-surface))}
.cp-form .alert .btn-close{display:none}

/* ---------- 12. «Контакты»: поиск по номеру + чипы разделов ---------- */
.cp-contacts-chips{margin-top:var(--cp-s3)}
.cp-contacts-id .cp-cta__box{align-self:center}

/* ---------- 13. Без движения по просьбе системы ---------- */
@media (prefers-reduced-motion:reduce){
  .cp-contact-card,.cp-contact-card::before,.cp-contact-card__v,.cp-about-role .cp-iconbtn,.cp-idsearch--page input,.cp-idsearch--page button,.cp-form .elementor-field,.cp-form .elementor-form button[type="submit"]{transition:none}
  a.cp-contact-card:hover,.cp-about-role .cp-iconbtn:active,.cp-idsearch--page button:active,.cp-form .elementor-form button[type="submit"]:active{transform:none}
}