/* Деловое собрание · мобильная версия и «ловушки» для посетителей (проверка 26.09.2026)
   Общий файл основного и дочерних сайтов: _semya/gen.py копирует его в дочерние.
   Подключается после pages.css (у дочерних после brand.css). */

/* ---------- п. 3: кнопка «Оставить заявку» ---------- */
.stickycta { position: fixed; right: 24px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 40; display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; background: var(--red-d); color: #fff; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; box-shadow: 0 6px 20px rgba(79,21,33,.25); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .3s, transform .3s; }
.stickycta.is-on { opacity: 1; transform: none; pointer-events: auto; }
.stickycta:focus-visible { outline: 2px solid #fff; outline-offset: -5px; }
@media (max-width: 720px) {
  .stickycta { left: 16px; right: 16px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); justify-content: center; }
  /* кнопка прячется у подвала, а запас снизу страхует последнюю строку, если прокрутка резкая */
  body.has-stickycta .ftr { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) { .stickycta { transition: none; } }

/* ---------- В: Telegram в шапке (адрес и подпись задаёт build.py, TG_CONTACT) ---------- */
.hdr__tg { display: inline-flex; align-items: center; gap: 10px; flex: none; min-height: 44px; color: inherit; text-decoration: none; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.hdr__tg svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.hdr__tg:hover .hdr__tg-t { text-decoration: underline; text-underline-offset: 4px; }
.hdr__tg:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
@media (max-width: 1600px) { .hdr__tg-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .hdr__tg { width: 44px; justify-content: center; } }
/* на ноутбуке значок не должен переносить пункты меню на 2 строки: промежутки чуть плотнее */
@media (min-width: 1081px) and (max-width: 1600px) { .hdr { gap: 18px; } .hdr__nav { gap: 20px; } .hdr__nav a { letter-spacing: .06em; } .hdr__tg { margin: 0 -6px; } }
@media (max-width: 1080px) {
  .hdr__tg { width: 44px; height: 44px; margin-left: auto; }
  .hdr__tg ~ .hdr__search, .hdr__tg ~ .hdr__burger { margin-left: 0; }
  .hdr__search, .hdr__burger { width: 44px; height: 44px; }
  .hdr__logo { min-height: 44px; }
}

/* ---------- Б: подписка на Telegram-канал в конце каждой страницы ---------- */
.tgband { position: relative; z-index: 1; background: var(--tg-bg, var(--mist)); color: var(--tg-fg, var(--bordo)); padding: clamp(28px, 4vw, 52px) 0; border-top: 1px solid rgba(79,21,33,.12); }
.tgband__in { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 28px; }
.tgband__ic { width: 40px; height: 40px; flex: none; fill: none; stroke: var(--tg-ic, var(--red-d)); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.tgband__t { flex: 1 1 320px; margin: 0; font-weight: var(--fw-light); font-size: clamp(19px, 1.1vw + 13px, 28px); line-height: 1.2; letter-spacing: .01em; text-transform: uppercase; }
.tgband__btn { flex: none; }
@media (max-width: 600px) {
  .tgband__in { gap: 14px 16px; }
  .tgband__ic { width: 32px; height: 32px; }
  .tgband__t { flex-basis: calc(100% - 48px); }
  .tgband__btn { width: 100%; }
}

/* ---------- А: короткая форма «Остались вопросы» ---------- */
.qform { background: #fff; color: var(--ink); --fg: var(--ink); --fg-2: rgba(17,17,17,.74); --line: rgba(17,17,17,.16); border-top: 1px solid var(--line); }
.qform__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 80px); align-items: start; }
.qform__t { margin: 0; max-width: 18ch; font-weight: var(--fw-light); font-size: clamp(1.6rem, 2vw + .9rem, 3rem); line-height: 1.05; text-transform: uppercase; letter-spacing: -.01em; overflow-wrap: normal; hyphens: manual; }
.qform .form { max-width: 640px; opacity: 1; transform: none; }
.form--short .btn { justify-self: start; }
.form--short input::placeholder { color: inherit; opacity: .5; }
@media (max-width: 1080px) { .qform__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .form--short .btn { width: 100%; } }

/* ---------- п. 4: плитки первого экрана на узких экранах ---------- */
@media (max-width: 640px) {
  /* кегль от ширины плитки: самое длинное слово («Деятельность», «Направления») помещается целиком */
  .rmap__t { font-size: clamp(12px, 11.5cqi, 17px); letter-spacing: 0; overflow-wrap: normal; word-break: normal; hyphens: manual; }
  .rmap__chip { white-space: normal; max-width: 100%; font-size: 12px; line-height: 1.25; }
}

/* ---------- п. 5: заголовки и имена без переносов посреди слова ---------- */
:is(h1, h2, h3, h4, figcaption, dt), figcaption *, .face b, .person b, .plist b, .rmap__t, .sres__t { hyphens: manual; -webkit-hyphens: manual; }
main :is(h1, h2, h3, h4), .face figcaption b, .person b, .plist b { overflow-wrap: normal; }
/* то же для старых копий pages.css у дочерних сайтов, где переносы включены отдельными правилами */
.faces--4 .face figcaption > *, .rows h3, .bureau span, .col h3, .phero__title, .h2s, .person span, .person b { hyphens: manual; -webkit-hyphens: manual; }
@media (max-width: 359px) { main :is(h2, h3, dd, figcaption) { hyphens: manual; -webkit-hyphens: manual; } }
/* имена в 2 колонки на телефоне: заглавными самые длинные фамилии («Счастливцев») не входят в колонку 158 px,
   поэтому на узком экране имя строчными 15 px, целыми словами; колонка подписи не раздвигается */
.faces--4 .face figcaption { grid-template-columns: minmax(0, 1fr); }
.face__more ul { grid-template-columns: minmax(0, 1fr); }
/* подробности под фото в колонке 158 px: строка очень узкая, здесь переносы по слогам допустимы */
@media (max-width: 440px) { .face__more li, .face__more p { hyphens: auto; -webkit-hyphens: auto; } }
@media (max-width: 440px) { .faces--4 .face b { text-transform: none; letter-spacing: 0; font-size: 16px; line-height: 1.25; } }

/* ---------- п. 6-7: кегль основного текста на телефоне и контраст мелких подписей ---------- */
.form .form__opt { opacity: 1; color: inherit; letter-spacing: .04em; }
.cgrid h3 { color: var(--fg); }
@media (max-width: 600px) {
  .cal__row p, .nums__t, .face em, .faces--4 .face span, .note, .plist em, .person em, .face__more, .face__more p, .face__more li, .face__src { font-size: 15px; }
  .pillar__sub { font-size: 15px; letter-spacing: .05em; }
  main .fine, .qform .fine { font-size: 15px; }
  .cgrid h3 { font-size: 13px; }
  .form label, .form__set legend { font-size: 13px; }
  .form .form__opt { font-size: 12px; }
  .form .form__check { font-size: 15px !important; line-height: 1.4; }
  .form__hint { font-size: 14px; }
}

/* ---------- п. 8: подсказка в поле поиска ---------- */
@media (max-width: 600px) { .sform__input::placeholder { font-size: 17px; } }

/* ---------- п. 11: номера и маркеры в списках на узком экране ---------- */
@media (max-width: 600px) {
  .rows li, .split .rows li { grid-template-columns: 32px minmax(0, 1fr); column-gap: 12px; }
  .rows li > :not(b) { grid-column: 2; }
}

/* ---------- п. 12: зоны нажатия от 44 px ---------- */
@media (max-width: 600px) {
  .crumbs > * { padding: 0; }
  .crumbs > a, .crumbs > span { display: inline-flex; align-items: center; min-height: 44px; }
  .crumbs { margin-bottom: 14px; }
  .ftr__nav a { display: flex; align-items: center; min-height: 44px; padding: 4px 0; }
  .ftr__fam a { min-height: 44px; align-content: center; }
  .form select { min-height: 44px; }
  .form .form__check { min-height: 44px; align-items: center; }
  .face__more summary { min-height: 44px; font-size: 13px; }
  .s-contact a, .bigcontacts a, main a[href^="tel:"] { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ---------- п. 13: колонны знака на первом экране не пересекают текст ---------- */
@media (max-width: 720px) {
  .phero:has(> .phero__mark) { padding-top: 196px; }
  .phero > .phero__mark { top: 78px; bottom: auto; right: var(--gut); height: 100px; width: auto; }
}