/* family · components.css
   лейблы, кнопки, плейсхолдеры, reveal, латунные хелперы, step-num, swiper-буллеты — на ВСЕХ страницах */

/* ============ components.css ============ */
.label{font-family:'JetBrains Mono',monospace;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;line-height:1.4;}
/* лейба на тёмном зелёном блоке — светлая латунь (на светлых блоках НЕ применять) */
.label-on-dark{color:var(--brass-light)!important;}
/* мобильная читаемость: на узких экранах поднимаем самые мелкие шрифты на пару пунктов */
@media (max-width:640px){
  .label{font-size:.8rem;letter-spacing:.1em;}
  .bump-sm{font-size:.95rem!important;line-height:1.55;}
  .bump-xs{font-size:.82rem!important;}
  #flatGrid .p-5 .text-sm{font-size:.92rem;}
}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.9rem 1.5rem;border-radius:.375rem;font-weight:600;font-size:.95rem;transition:background-color .2s ease,color .2s ease,border-color .2s ease;cursor:pointer;}
.btn-primary{background:var(--brass);color:#fff;}
.btn-primary:hover{background:var(--brass-2);}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line);}
.btn-ghost:hover{border-color:var(--ink);}
.btn-ghost-light{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.35);}
.btn-ghost-light:hover{border-color:#fff;}
.price{font-family:'JetBrains Mono',monospace;font-weight:500;}

/* латунные подложки/обводки (на CDN-Tailwind opacity для CSS-переменной не работает — задаём явно) */
.tint-brass{background:rgba(192,131,41,.09);}
.bd-brass{border-color:var(--brass)!important;}
.bd-brass-soft{border-color:rgba(227,178,100,.45)!important;}
.chip-pay{display:flex;align-items:center;justify-content:center;flex:none;width:2.4rem;height:2.4rem;border-radius:.5rem;background:rgba(192,131,41,.12);color:var(--brass-2);}

/* появление блоков */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease;}
.reveal.is-in{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto}
}

/* плейсхолдер под фото */
.ph{position:relative;overflow:hidden;border-radius:14px;background:
  repeating-linear-gradient(45deg,var(--paper-2) 0 14px,#E7E0D3 14px 28px);}
.ph::after{content:attr(data-ph);position:absolute;inset:auto .75rem .6rem auto;font-family:'JetBrains Mono',monospace;font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(23,36,29,.45);}
.ph-dark{background:repeating-linear-gradient(45deg,#224134 0 14px,#1B352A 14px 28px);}
.ph-dark::after{color:rgba(255,255,255,.45);}

/* step-num (общий: about, lead) */
.step-num{font-family:'JetBrains Mono',monospace;color:var(--brass);font-size:.8rem;}

/* swiper подгонка */
.swiper-pagination-bullet{background:#fff;opacity:.5;}
.swiper-pagination-bullet-active{opacity:1;}

/* карусель-доказательство: стрелки + лейба поверх медиа (B13 застройщик, B18 спецпредложения) */
.proof-swiper{min-width:0;max-width:100%;}
.proof-swiper .swiper-slide{min-width:0;}
.proof-label{position:absolute;right:.6rem;bottom:.6rem;z-index:3;font-family:'JetBrains Mono',monospace;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;background:rgba(23,36,29,.78);color:#fff;padding:.32rem .6rem;border-radius:.25rem;transition:opacity .18s ease;}
.proof-label.is-fading{opacity:0;}
.proof-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:2.4rem;height:2.4rem;border-radius:.4rem;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.5);background:rgba(20,32,26,.45);color:#fff;transition:background-color .2s ease;}
.proof-arrow:hover{background:var(--brass);border-color:var(--brass);}
.proof-prev{left:.8rem}
.proof-next{right:.8rem}

/* ---- плитки статистики/фактов (B12 концепция, B13 застройщик, B14 генплан) ---- */
/* плитки статистики/генплана */
.stat-tile{background:#fff;border:1px solid var(--line);border-radius:.6rem;padding:1.4rem;}
.stat-num{font-family:'JetBrains Mono',monospace;font-weight:500;font-size:1.9rem;line-height:1;color:var(--brass-2);}
.feat-tile{display:flex;gap:.9rem;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:.6rem;padding:1.1rem 1.2rem;}
.feat-ico{flex:none;width:2.6rem;height:2.6rem;border-radius:.5rem;display:flex;align-items:center;justify-content:center;background:rgba(30,58,47,.07);color:var(--pine);}

/* ---- хлебные крошки (на всех внутренних страницах, кроме главной) ---- */
.breadcrumbs{border-bottom:1px solid var(--line);background:var(--paper);}
.crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:.4rem;font-size:.82rem;line-height:1.4;
  list-style:none;margin:0;padding:0;}
.crumbs a{color:rgba(23,36,29,.55);transition:color .2s ease;}
.crumbs a:hover{color:var(--ink);}
.crumbs .sep{color:rgba(23,36,29,.28);user-select:none;}
.crumbs .current{color:var(--ink);}

/* ---- поиск (блог/статья): широкий, не куцый ---- */
.search-form{position:relative;width:100%;}
.search-form input{width:100%;background:#fff;border:1px solid var(--line);border-radius:.5rem;
  padding:.85rem 3rem .85rem 1.1rem;font-size:.9rem;color:var(--ink);outline:none;transition:border-color .2s ease;}
.search-form input::placeholder{color:rgba(23,36,29,.45);}
.blog .search-form input{background:#fff;}
.search-form input:focus{border-color:var(--ink);}
.search-form button{position:absolute;right:.4rem;top:50%;transform:translateY(-50%);
  width:2.3rem;height:2.3rem;display:flex;align-items:center;justify-content:center;border-radius:.4rem;
  color:rgba(23,36,29,.55);transition:color .2s ease,background-color .2s ease;}
.search-form button:hover{color:var(--ink);background:var(--paper-2);}


/* ---- полировка: читаемость, фокус, зона нажатия (замеры по WCAG AA) ----
   Меняются только цвет/прозрачность и площадь нажатия. Раскладка и фирменные цвета прежние. */

/* приглушённый текст давал 2.74:1 (opacity-45), 3.13:1 (opacity-50) и 4.23:1 (opacity-60)
   на фоне --paper при норме 4.5:1. Поднимаем пол только у текстовых элементов —
   на иконках и декоративных слоях утилиты работают как раньше. */
p.opacity-45,span.opacity-45,li.opacity-45,dd.opacity-45,
p.opacity-50,span.opacity-50,li.opacity-50,dd.opacity-50,
p.opacity-60,span.opacity-60,li.opacity-60,dd.opacity-60{opacity:.64;}

/* латунь как цвет мелкого текста на светлом: --brass давал 3.0:1, --brass-2 — 4.0:1.
   Для текста берём ту же латунь на шаг темнее (4.7:1). Фон кнопок и обводки не трогаем. */
body .text-\[--brass\],
body .text-\[--brass-2\]{color:var(--brass-text);}
.step-num{color:var(--brass-text);}

/* видимый фокус с клавиатуры: его не было нигде, а у поиска и поля ассистента
   стоял outline:none без замены. Цвет кольца наследуется — на тёмных блоках светлее. */
:root{--focus-ring:var(--brass-text);}
.bg-\[--pine\],.bg-\[\#1E3A2F\],.hero-overlay,footer{--focus-ring:var(--brass-light);}
body a:focus-visible,body button:focus-visible,body input:focus-visible,
body select:focus-visible,body textarea:focus-visible,body summary:focus-visible,
body [tabindex]:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;}

/* зона нажатия иконочных кнопок доведена до 44×44 — видимый размер прежний */
.spec-msgr{position:relative;}
.proof-arrow::after,.spec-msgr::after,.search-form button::after{content:'';position:absolute;
  top:50%;left:50%;width:44px;height:44px;min-width:100%;min-height:100%;transform:translate(-50%,-50%);}

/* подпись на плейсхолдере фото: было 2.7:1 */
.ph:not(.ph-dark)::after{color:rgba(23,36,29,.66);}

/* хлебные крошки на внутренних страницах: ссылка была 3.6:1 */
.crumbs a{color:rgba(23,36,29,.72);}

/* ---- animate: ритм появления и отклик на нажатие ---- */

/* появление блоков: та же механика, но кривая с затуханием и ход короче — меньше «качания» страницы */
.reveal{transform:translateY(18px);transition:opacity .55s var(--ease-out-quart),transform .55s var(--ease-out-quart);}

/* нажатие кнопки теперь чувствуется: короткое проседание на 1,5% */
.btn{transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .12s var(--ease-out-quart);}
.btn:active{transform:scale(.985);}

@media (prefers-reduced-motion: reduce){
  .btn{transition:background-color .2s ease,color .2s ease,border-color .2s ease;}
  .btn:active{transform:none;}
}

@keyframes hero-rise{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}

/* вход шапки внутренних страниц: фото на месте сразу, поднимается только заголовок и подводка.
   Та же кривая и тот же шаг, что у героя главной, — движение на сайте одно, а не разное на каждой странице. */
.hero-simple-inner>*{animation:hero-rise .6s var(--ease-out-quart) both;}
.hero-simple-inner>*:nth-child(1){animation-delay:.06s;}
.hero-simple-inner>*:nth-child(2){animation-delay:.14s;}
.hero-simple-inner>*:nth-child(3){animation-delay:.22s;}

@media (prefers-reduced-motion: reduce){
  .hero-simple-inner>*{animation:none;}
}