/* ===== Страница «О компании» — стили только для /company/ ===== */

/* --- База (desktop) --- */
.company-page{color:#3a4145;font-size:15px;line-height:1.65}
.company-page *{box-sizing:border-box}
.company-page img{max-width:100%;height:auto}
.company-page a{text-decoration:none}

/* визуально скрытый H1 страницы (SEO / доступность) */
#pagetitle{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* hero-баннер (готовые изображения, без наложений и декора) */
.cp-hero{display:block;margin:0 0 42px}
.cp-hero img{display:block;width:100%;height:auto;border-radius:14px}

/* секции */
.cp-sec{margin:0 0 44px}
.cp-title{font-size:26px;line-height:1.25;font-weight:700;color:#282828;margin:0 0 10px}
.cp-title-sm{font-size:17px;color:#5a646a;margin:0 0 18px}
.cp-text{color:#4a5156;margin:0 0 12px}

/* блок колонок «О компании» — только desktop (на mobile скрыт) */
.cp-about-cols{display:none}

/* --- /company/: крошки — «О компании» без хвостового «/» (файл подключён только тут) --- */
#navigation .item.active::after{content:none}
#navigation .item.active > [itemprop="name"]{font-size:0}
#navigation .item.active > [itemprop="name"]::after{content:"О компании";font-size:15px}

/* --- Desktop (>=768px): композиция и вертикальный ритм, scope только .company-page --- */
@media (min-width:768px){
  /* вертикальный ритм: убираем дублирующие отступы (mb секции + mt следующего) */
  .company-page .cp-hero{margin-bottom:36px}   /* hero -> H2 ~36px */
  .company-page .cp-sec{margin-bottom:40px}    /* между секциями ~40px */
  /* заголовки: крупнее, по центру, собраннее снизу */
  .company-page .cp-title{font-size:31px;line-height:1.2;margin:0 0 21px;text-align:center}
  /* карточки категорий — заметнее рамка (светло-серо-голубой, ближе к фирменному) */
  .company-page .cp-cat{border-color:#c2d9e3}
  /* категории: hover — фирменный голубой для рамки/названия/стрелки, лёгкий фон */
  .company-page .cp-cat:hover{border-color:#1b9fc6;color:#1b9fc6;background:#eff8fc;box-shadow:none}
  .company-page .cp-cat:hover .ar{color:#1b9fc6}
  /* преимущества: компактнее по высоте (~10–15%), высота в ряду одинаковая (grid) */
  .company-page .cp-adv{padding:16px 20px}
  .company-page .cp-adv .ic{margin-bottom:8px}
  .company-page .cp-adv h3{margin:0 0 6px}
  /* содержимое секций — без собственного верхнего отступа (H2 -> контент ~21px) */
  .company-page .cp-grid4,
  .company-page .cp-cats,
  .company-page .cp-steps,
  .company-page .cp-clients{margin-top:0}
  /* блок «Помогаем подобрать…»: 3 редакционные колонки вместо абзацев (mobile не трогаем) */
  .company-page .cp-text{display:none}
  .company-page .cp-about-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:26px}
  .company-page .cp-about-col{padding:0 18px;text-align:left}
  .company-page .cp-about-col:first-child{padding-left:0}
  .company-page .cp-about-col:last-child{padding-right:0}
  .company-page .cp-about-col + .cp-about-col{border-left:1px solid #e8eef2}
  .company-page .cp-about-col h3{font-size:19px;line-height:1.3;font-weight:700;color:#282828;margin:0 0 8px}
  .company-page .cp-about-col p{font-size:16px;line-height:1.5;color:#4a5156;margin:0}
  /* финальный CTA: центрируем всю группу по горизонтали и вертикали */
  .company-page .cp-cta{display:flex;flex-direction:column;align-items:center;justify-content:center}
  .company-page .cp-cta h2{margin:0 0 11px}
  .company-page .cp-cta p{margin:0 auto 22px}
  .company-page .cp-cta .cp-actions{margin-top:0}
  .company-page .cp-cta .phone{margin:19px 0 0}
}
@media (min-width:768px) and (max-width:1024px){
  .company-page .cp-title{font-size:29px}
}

/* кнопки */
.cp-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:22px}
.cp-btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 30px;border-radius:30px;font-weight:700;font-size:15px;line-height:1;transition:all .2s;cursor:pointer;border:none}
a.cp-btn{text-decoration:none}
.cp-btn-primary{background:#1b9fc6;color:#fff}
.cp-btn-primary:hover{background:#1488ab}
.cp-btn-ghost{background:#fff;color:#1b9fc6;border:2px solid #1b9fc6}
.cp-btn-ghost:hover{background:#e9f5f9}

/* цифры */
.cp-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:24px}
.cp-stat{background:#f5f9fb;border:1px solid #e3eef3;border-radius:12px;padding:22px 16px;text-align:center}
.cp-stat b{display:block;font-size:30px;line-height:1.15;font-weight:800;color:#1b9fc6}
.cp-stat b.t{font-size:22px}
.cp-stat span{display:block;margin-top:8px;font-size:13.5px;line-height:1.45;color:#5a646a}

/* категории */
.cp-cats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:22px}
.cp-cat{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff;border:1px solid #e3eef3;border-radius:12px;padding:16px 18px;color:#282828;font-weight:600;font-size:15px;transition:all .2s;min-height:60px}
.cp-cat:hover{border-color:#1b9fc6;color:#1b9fc6;box-shadow:0 6px 16px rgba(27,159,198,.14)}
.cp-cat .ar{font-size:18px;font-weight:700;color:#1b9fc6;flex:0 0 auto}
.cp-center{text-align:center;margin-top:26px}

/* преимущества */
.cp-adv{background:#fff;border:1px solid #e3eef3;border-radius:12px;padding:24px 20px}
.cp-adv .ic{width:48px;height:48px;border-radius:12px;background:#e9f5f9;color:#1b9fc6;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.cp-adv .ic svg{width:26px;height:26px}
.cp-adv h3{font-size:16px;color:#282828;margin:0 0 8px;font-weight:700}
.cp-adv p{margin:0;font-size:14px;color:#4a5156}

/* доверие */
.cp-clients{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:22px}
.cp-client{background:#f5f9fb;border:1px solid #e3eef3;border-radius:12px;padding:22px 14px;text-align:center;font-weight:600;color:#333;font-size:14.5px;line-height:1.4;display:flex;align-items:center;justify-content:center}

/* шаги */
.cp-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:24px}
.cp-step{position:relative;background:#fff;border:1px solid #e3eef3;border-radius:12px;padding:22px 20px}
.cp-step .n{font-size:30px;font-weight:800;color:#1b9fc6;line-height:1;opacity:.85}
.cp-step h3{font-size:15.5px;color:#282828;margin:12px 0 6px;font-weight:700}
.cp-step p{margin:0;font-size:13.5px;color:#4a5156;line-height:1.55}

/* финальный CTA */
.cp-cta{background:linear-gradient(120deg,#1b9fc6 0%,#127fa3 100%);border-radius:16px;padding:46px 32px;text-align:center;color:#fff}
.cp-cta h2{color:#fff;font-size:26px;margin:0 0 10px}
.cp-cta p{margin:0 auto 22px;max-width:560px;font-size:15.5px;color:rgba(255,255,255,.92)}
.cp-cta .cp-actions{justify-content:center;margin-top:0}
.cp-btn-light{background:#fff;color:#127fa3}
.cp-btn-light:hover{background:#f0f7fa}
.cp-btn-line{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.9)}
.cp-btn-line:hover{background:rgba(255,255,255,.12)}
.cp-cta .phone{display:block;margin-top:20px;color:#fff;font-size:17px;font-weight:700}
.cp-cta .phone a{color:#fff;text-decoration:none}

/* --- Планшет --- */
@media (max-width:1100px){
  .cp-hero{margin-bottom:34px}
  .cp-grid4{grid-template-columns:repeat(2,1fr)}
  .cp-cats{grid-template-columns:repeat(3,1fr)}
  .cp-steps{grid-template-columns:repeat(2,1fr)}
  .cp-clients{grid-template-columns:repeat(2,1fr)}
}

/* --- MOBILE (<=767px) ---
   Все селекторы префиксованы .company-page, чтобы перебивать правила шаблона
   .content-page h2/h3 (template_styles_ug.css грузится ПОСЛЕ этого файла). */
@media (max-width:767px){
  /* крошки → hero: без хвостового «/», «О компании», зазор 24–28px (только /company/) */
  #navigation{margin:14px 0 0}
  #navigation + br{display:none}
  #navigation .item.active::after{content:none}
  #navigation .item.active > [itemprop="name"]{font-size:0}
  #navigation .item.active > [itemprop="name"]::after{content:"О компании";font-size:15px}
  .content-wrapper .content-column.content-page{margin-top:0;padding:26px 12px 18px}

  /* типографика */
  .company-page{font-size:16px;line-height:1.5}
  .company-page .cp-title{font-size:24px;line-height:1.17;font-weight:700;margin:0 0 18px}
  .company-page .cp-title-sm{font-size:15px;margin:0 0 10px}
  .company-page .cp-text{margin:0 0 11px;line-height:1.48}
  .company-page .cp-sec{margin-bottom:44px}

  .company-page .cp-hero{margin:0 0 16px}
  .company-page .cp-hero img{border-radius:12px}

  .company-page .cp-stat,.company-page .cp-cat,.company-page .cp-adv,.company-page .cp-client{min-width:0}
  .company-page .cp-adv h3,.company-page .cp-adv p{overflow-wrap:break-word}
  /* категории: разрывы только между словами, НИКОГДА внутри слова */
  .company-page .cp-cat,.company-page .cp-cat .t{word-break:normal;overflow-wrap:normal;hyphens:none}

  /* кнопки: tap-target ≥44px */
  .company-page .cp-actions{gap:10px;margin-top:12px}
  .company-page .cp-btn{min-height:46px;padding:0 22px;font-size:15px}
  .company-page .cp-actions .cp-btn{width:100%}

  /* цифры: 2×2 */
  .company-page .cp-grid4{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:0}
  .company-page .cp-stat{padding:14px 10px;border-radius:10px;font-size:13.5px;line-height:1.4;overflow-wrap:break-word}
  .company-page .cp-stat b{font-size:22px}
  .company-page .cp-stat b.t{font-size:14.5px}

  /* категории: 2 колонки; разрыв только между словами, длинные названия — на всю ширину */
  .company-page .cp-cats{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:0;grid-auto-flow:dense}
  .company-page .cp-cat{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:6px;font-size:14px;padding:0 8px;min-height:54px;line-height:1.22}
  .company-page .cp-cat--wide{grid-column:1 / -1}
  .company-page .cp-cat .t{min-width:0}
  .company-page .cp-cat .ar{justify-self:end;font-size:15px}
  .company-page .cp-center{margin-top:14px}
  .company-page .cp-center .cp-btn{min-height:48px;padding:0 26px}

  /* преимущества: иконка слева + контент справа, 1 колонка */
  .company-page .cp-grid4.cp-adv-grid{grid-template-columns:minmax(0,1fr);gap:8px}
  .company-page .cp-adv{display:grid;grid-template-columns:40px 1fr;column-gap:12px;row-gap:2px;padding:8px 12px;border-radius:10px;align-items:center}
  .company-page .cp-adv .ic{width:40px;height:40px;border-radius:10px;margin:0;grid-row:1 / span 2}
  .company-page .cp-adv .ic svg{width:20px;height:20px}
  .company-page .cp-adv h3{font-size:15px;margin:0;align-self:end}
  .company-page .cp-adv p{font-size:13.5px;line-height:1.35;align-self:start}

  /* клиенты: 2×2 */
  .company-page .cp-clients{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:0}
  .company-page .cp-client{padding:10px 8px;font-size:12.5px;line-height:1.3;border-radius:10px;min-height:52px}
  .company-page .cp-clients .cp-client:last-child{font-size:11px}

  /* шаги → вертикальный timeline */
  .company-page .cp-steps{display:block;margin-top:0}
  .company-page .cp-step{background:transparent;border:0;border-radius:0;padding:0 0 4px 40px}
  .company-page .cp-step:last-child{padding-bottom:0}
  .company-page .cp-step .n{position:absolute;left:0;top:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:#1b9fc6;background:#e9f5f9;border-radius:50%;opacity:1;line-height:1}
  .company-page .cp-step:not(:last-child)::before{content:"";position:absolute;left:14px;top:34px;bottom:2px;width:2px;background:#bfe3ef}
  .company-page .cp-step h3{font-size:15.5px;margin:0 0 2px}
  .company-page .cp-step p{font-size:13.5px;line-height:1.4;margin:0}

  /* CTA компактнее */
  .company-page .cp-cta{padding:10px 14px;border-radius:14px}
  .company-page .cp-cta h2{font-size:21px;line-height:1.2;margin:0 0 6px}
  .company-page .cp-cta p{font-size:14px;margin:0 auto 8px}
  .company-page .cp-cta .cp-actions .cp-btn{min-height:46px}
  .company-page .cp-cta .phone{margin-top:10px;font-size:14px;font-weight:400}
  .company-page .cp-cta .phone a{display:block;margin-top:2px;font-size:16px;font-weight:700;white-space:nowrap}
}

/* --- Узкие экраны (<=360px): чуть плотнее, чтобы слова влезали по ширине --- */
@media (max-width:360px){
  .content-wrapper .content-column.content-page{padding-left:8px;padding-right:8px}
  .company-page .cp-cat{font-size:13px;padding:0 7px}
}

/* --- Cookie-banner: компактно, только /company/ mobile (файл грузится лишь здесь) --- */
@media (max-width:767px){
  .awz_cookies_sett__message.awz_cookies_sett__bg1{left:0;right:0;bottom:0;width:100%;max-width:none;border-radius:0;box-shadow:0 -2px 12px rgba(0,0,0,.18)}
  .awz_cookies_sett__message .awz_cookies_sett__container{padding:8px 12px}
  .awz_cookies_sett__message .awz_cookies_sett__row{flex-direction:column;align-items:stretch;gap:6px}
  .awz_cookies_sett__message .awz_cookies_sett__col{width:100%}
  /* текст: заменяем на компактный, ссылка на политику сохраняется */
  .awz_cookies_sett__message #awz_cookies_sett__msg{font-size:0;line-height:1.3;text-align:center}
  .awz_cookies_sett__message #awz_cookies_sett__msg::before{content:"Мы используем cookie для работы сайта и аналитики. Подробнее — в ";font-size:12.5px}
  .awz_cookies_sett__message #awz_cookies_sett__msg::after{content:".";font-size:12.5px}
  .awz_cookies_sett__message #awz_cookies_sett__msg .awz_cookies_sett__agr_link{font-size:12.5px}
  .awz_cookies_sett__message .awz_cookies_sett__col__right{display:flex;flex-direction:row;justify-content:center;gap:8px;padding-top:0;width:100%}
  .awz_cookies_sett__message .awz_cookies_sett__btn{margin:0;flex:1 1 0;min-height:42px;line-height:42px;padding:0 12px;font-size:13.5px;border-radius:8px}
}