/* ============================================================
   KMB TRANS GROUP — каталог категорий на главной (правка №135)
   Раскладка и логика — из вложения аккаунтера fixes/preview (14).html:
   две группы, плотная сетка карточек-категорий, поиск и переключатели.
   Отличия: шрифты локальные (assets/fonts.css), картинки из медиатеки
   сайта, КМУ — отдельная карточка, кнопка «Перейти в каталог».
   Фирменный стиль сохранён: синий #2182AF, Oswald + Inter, прямые углы,
   диагональные срезы кнопок, жёлтые акценты.
   ============================================================ */
.hcat,
.hcat *{box-sizing:border-box}

.hcat{
  --hc-line:#DFE5E9;
  --hc-grid:#D8E0E5;
  --hc-muted:#66717A;
  padding:74px 0 84px;
  background:#F2F5F7;
  border-top:1px solid var(--line);
  color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;
}

.hcat__wrap{width:min(100% - 48px,1360px);margin:0 auto}

/* ---------------------------------------------------- шапка секции */
.hcat__head{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);
  align-items:end;
  gap:44px;
  margin-bottom:30px;
}

.hcat__eyebrow{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 14px;
  color:var(--blue-dark);          /* контраст 5.3:1 на фоне секции */
  font-size:12px;
  font-weight:600;
  letter-spacing:.14em;
  line-height:1;
  text-transform:uppercase;
}
.hcat__eyebrow::before{width:28px;height:3px;background:var(--amber);content:""}

.hcat__title{
  max-width:820px;
  margin:0;
  font-family:'Oswald',sans-serif;
  font-size:clamp(34px,4vw,60px);
  font-weight:600;
  letter-spacing:-.01em;
  line-height:1.02;
  text-transform:uppercase;
}
.hcat__title span{color:var(--blue)}

.hcat__intro{
  max-width:530px;
  margin:0 0 6px;
  color:var(--hc-muted);
  font-size:15px;
  line-height:1.7;
}

/* ---------------------------------------------------- поиск и фильтр */
.hcat__tools{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  align-items:stretch;
  gap:12px;
  margin-bottom:8px;
}

.hcat__search{position:relative;display:block}
.hcat__search svg{
  position:absolute;
  top:50%;
  left:17px;
  width:18px;
  height:18px;
  fill:none;
  stroke:#79858E;
  transform:translateY(-50%);
  pointer-events:none;
}
.hcat__search input{
  width:100%;
  height:52px;
  padding:0 18px 0 48px;
  border:1px solid var(--hc-line);
  border-radius:0;
  background:#fff;
  color:var(--ink);
  font-family:inherit;
  font-size:15px;
  outline:none;
}
.hcat__search input::placeholder{color:#6F7880}
.hcat__search input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(33,130,175,.16)}

/* табы разделов каталога (правка №140): каждая группа — свой таб,
   на одном уровне с остальными основными направлениями */
.hcat__tabs{
  display:flex;
  gap:2px;
  margin-bottom:6px;
  padding:3px;
  background:#DDE4E8;
}
.hcat__tab{
  display:flex;
  flex:1;
  min-height:56px;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:0 20px;
  border:0;
  background:transparent;
  color:#57636B;
  cursor:pointer;
  font-family:'Oswald',sans-serif;
  font-size:14px;
  font-weight:600;
  letter-spacing:.04em;
  line-height:1.15;
  text-align:center;
  text-transform:uppercase;
  transition:background-color .18s ease,color .18s ease;
}
.hcat__tab:hover{color:var(--ink)}
.hcat__tab:focus-visible{outline:2px solid var(--blue);outline-offset:-4px}
.hcat__tab-count{
  flex:none;
  min-width:26px;
  padding:3px 7px;
  background:#C3CDD4;
  color:var(--ink);
  font-family:'Manrope',system-ui,sans-serif;
  font-size:11px;
  font-weight:700;
  letter-spacing:.02em;
}
.hcat__tab.is-active{background:var(--ink);color:#fff}
.hcat__tab.is-active .hcat__tab-count{background:var(--amber);color:var(--ink)}
/* во время поиска выдача идёт по всем разделам — подсветку таба гасим */
.hcat.is-searching .hcat__tab.is-active{background:transparent;color:#57636B}
.hcat.is-searching .hcat__tab.is-active .hcat__tab-count{background:#C3CDD4;color:var(--ink)}

.hcat__go{
  display:inline-flex;
  min-width:186px;
  min-height:52px;
  align-items:center;
  justify-content:center;
  gap:11px;
  padding:0 26px;
  background:var(--blue-dark);     /* белый текст 12px — контраст 5.8:1 */
  color:#fff;
  clip-path:polygon(0 0,92% 0,100% 26%,100% 100%,8% 100%,0 74%);
  font-size:12px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  transition:background-color .18s ease;
}
.hcat__go:hover{background:var(--blue-deep)}
.hcat__go svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;transition:transform .18s ease}
.hcat__go:hover svg{transform:translateX(3px)}

/* ---------------------------------------------------- группы категорий */
.hcat-group{margin-top:26px}
/* с включённым JS активен один таб — заголовок группы дублирует его подпись */
.hcat--tabs .hcat-group__head{display:none}
.hcat--tabs .hcat-group{margin-top:0}
.hcat--tabs.is-searching .hcat-group__head{display:flex}
.hcat--tabs.is-searching .hcat-group{margin-top:34px}
.hcat--tabs.is-searching .hcat-group:first-of-type{margin-top:14px}

.hcat-group__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:24px;
  margin-bottom:16px;
  padding-bottom:12px;
  border-bottom:1px solid #CED6DB;
}

.hcat-group__title{
  margin:0;
  font-family:'Oswald',sans-serif;
  font-size:26px;
  font-weight:600;
  letter-spacing:.01em;
  line-height:1;
  text-transform:uppercase;
}

.hcat-group__count{
  flex:none;
  color:#5F6A72;
  font-size:12px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
}

/* сетка держится на границах самих карточек: незаполненные ячейки
   последнего ряда остаются пустыми, а не серыми плашками */
.hcat-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:0;
  border-top:1px solid var(--hc-grid);
  border-left:1px solid var(--hc-grid);
}

/* ---------------------------------------------------- карточка категории */
.hcat-card{
  position:relative;
  display:flex;
  min-height:200px;
  flex-direction:column;
  padding:13px 15px 16px;
  overflow:hidden;
  border-right:1px solid var(--hc-grid);
  border-bottom:1px solid var(--hc-grid);
  background:#fff;
  color:inherit;
  transition:background-color .2s ease;
}
.hcat-card::before{
  position:absolute;
  top:0;
  left:0;
  width:0;
  height:3px;
  background:var(--amber);
  content:"";
  transition:width .25s ease;
}
.hcat-card__img{display:flex;height:124px;align-items:center;justify-content:center;margin-bottom:10px}
.hcat-card__img img{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  transition:transform .26s ease;
}
.hcat-card__row{
  display:grid;
  margin-top:auto;
  grid-template-columns:1fr 18px;
  align-items:end;
  gap:8px;
}
.hcat-card__name{font-size:12.5px;font-weight:700;line-height:1.35}
.hcat-card__arrow{display:block;color:var(--blue)}
.hcat-card__arrow svg{
  display:block;
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  transition:transform .18s ease;
}
.hcat-card:hover{background:#F9FBFC}
.hcat-card:hover::before{width:100%}
.hcat-card:hover .hcat-card__img img{transform:scale(1.045)}
.hcat-card:hover .hcat-card__arrow svg{transform:translateX(3px)}

.hcat-card[hidden],.hcat-group[hidden]{display:none}

.hcat__empty{
  margin:36px 0 0;
  padding:26px 22px;
  border:1px dashed #C4CDD3;
  background:#fff;
  color:var(--hc-muted);
  font-size:15px;
  text-align:center;
}

/* ---------------------------------------------------- подвал секции */
.hcat__foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin-top:28px;
  padding:24px 28px;
  background:var(--ink);
  color:#fff;
}
.hcat__foot-text strong{
  display:block;
  margin-bottom:5px;
  font-family:'Oswald',sans-serif;
  font-size:19px;
  font-weight:600;
  letter-spacing:.02em;
  line-height:1.2;
  text-transform:uppercase;
}
.hcat__foot-text span{color:#AEB8BF;font-size:13.5px;line-height:1.5}

.hcat__cta{
  display:inline-flex;
  flex:none;
  min-height:48px;
  align-items:center;
  gap:10px;
  padding:0 28px;
  background:var(--wa);
  color:#10321C;
  clip-path:polygon(0 0,92% 0,100% 26%,100% 100%,8% 100%,0 74%);
  font-size:12px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  transition:filter .18s ease;
}
.hcat__cta:hover{filter:brightness(1.07)}
.hcat__cta svg{width:18px;height:18px;flex:none}

/* ---------------------------------------------------------- адаптив */
@media (max-width:1180px){
  .hcat__wrap{width:min(100% - 36px,1360px)}
  .hcat-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .hcat__head{grid-template-columns:1fr;align-items:start;gap:18px}
  .hcat__intro{max-width:760px}
}

@media (max-width:980px){
  .hcat__tools{grid-template-columns:1fr auto}
  .hcat__tab{font-size:13px;padding:0 14px}
  .hcat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (max-width:760px){
  .hcat{padding:54px 0 62px}
  .hcat__wrap{width:min(100% - 32px,1360px)}
  .hcat__tools{grid-template-columns:1fr;gap:10px}
  .hcat__go{width:100%}
  .hcat__tabs{flex-direction:column;gap:3px}
  .hcat__tab{
    min-height:52px;
    justify-content:space-between;
    padding:0 14px;
    font-size:13px;
    text-align:left;
  }
  .hcat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hcat-card{min-height:176px;padding:11px 11px 14px}
  .hcat-card__img{height:102px}
  .hcat-card__name{font-size:11.5px}
  .hcat-group{margin-top:34px}
  .hcat-group__title{font-size:22px}
  .hcat-group__count{font-size:11px}
  .hcat__foot{align-items:flex-start;flex-direction:column;padding:20px}
  .hcat__cta{width:100%;justify-content:center}
}

@media (max-width:430px){
  .hcat__wrap{width:min(100% - 24px,1360px)}
  .hcat-card{min-height:164px}
  .hcat-card__img{height:94px}
}

@media (prefers-reduced-motion:reduce){
  .hcat-card,.hcat-card::before,.hcat-card__img img,
  .hcat-card__arrow svg,.hcat__go svg{transition:none}
}