/* ============================================================
   Блок «Наши ключевые направления» на главной (правка №60).
   Раскладка, палитра и поведение — из вложения аккаунтера
   fixes/главная-kmb-catalog-categories-block (8).html.
   Отличия от вложения: шрифты локальные (assets/fonts.css),
   картинки — webp из assets/directions/, ссылки ведут в каталог сайта.
   ============================================================ */
.kmb-directions,
.kmb-directions *{box-sizing:border-box}

.kmb-directions{
  --kmb-blue:#2182af;
  --kmb-blue-dark:#196c93;
  --kmb-blue-light:#4ea9cf;
  --kmb-graphite:#27282a;
  --kmb-steel:#4a4b4f;
  --kmb-line:#e3e5e8;
  --kmb-muted:#6e6a72;
  padding:76px 0 84px;
  background:#fff;
  color:var(--kmb-graphite);
  font-family:'Inter',system-ui,sans-serif;
}

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

.kmb-directions__heading{
  margin:0 0 38px;
  color:var(--kmb-graphite);
  font-family:'Oswald',sans-serif;
  font-size:34px;
  font-weight:600;
  letter-spacing:1px;
  line-height:1.15;
  text-transform:uppercase;
}


.kmb-directions__grid{
  display:grid;
  grid-template-areas:
    "cranes cranes remotes tail-lifts"
    "brand hydraulics aerial aerial";
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-template-rows:repeat(2,300px);
  gap:16px;
}

.kmb-direction{
  --direction-bg:linear-gradient(135deg,var(--kmb-graphite),var(--kmb-blue-dark));
  --direction-shade:linear-gradient(to top,rgba(20,23,26,.82),rgba(20,23,26,0) 58%);
  position:relative;
  display:block;
  min-width:0;
  overflow:hidden;
  background:var(--direction-bg);
  color:#fff;
  text-decoration:none;
  isolation:isolate;
  transition:filter .22s ease;
}

.kmb-direction--cranes{
  grid-area:cranes;
  --direction-bg:linear-gradient(135deg,#27282a 0%,#344b58 58%,#196c93 100%);
  --direction-shade:linear-gradient(90deg,rgba(22,25,28,0) 32%,rgba(22,25,28,.84) 100%);
}

.kmb-direction--remotes{
  grid-area:remotes;
  --direction-bg:linear-gradient(145deg,#4ea9cf 0%,#2182af 50%,#196c93 100%);
}

.kmb-direction--tail-lifts{
  grid-area:tail-lifts;
  --direction-bg:linear-gradient(145deg,#4a4b4f 0%,#386479 48%,#2182af 100%);
  --direction-shade:linear-gradient(to bottom,rgba(20,23,26,.82) 0%,rgba(20,23,26,.22) 38%,rgba(20,23,26,0) 62%);
}

/* Брендовая плитка — правка №145 (брендбук п.14 «Локальное осветление фона»).
   Белая скошенная плашка и тень под логотипом сняты: по брендбуку логотип
   не получает ни обводки, ни тени. Плитка — ровный графит эталонной страницы
   брендбука (#37383C), за логотипом осветляется только участок графита. */
.kmb-direction--brand{
  grid-area:brand;
  --direction-bg:#37383c;
  --brand-logo-w:166px;
  --brand-logo-h:92px;
}

/* косая световая полоса остальных плиток здесь не нужна — фон ровный */
.kmb-direction--brand::before{display:none}

.kmb-direction--brand::after{
  position:absolute;
  z-index:1;
  top:50%;
  left:50%;
  /* ореол пропорционален логотипу — пропорции сняты с эталонной страницы брендбука */
  width:calc(var(--brand-logo-w) * 1.82);
  height:calc(var(--brand-logo-h) * 2.74);
  background:var(--logo-halo);
  content:"";
  pointer-events:none;
  transform:translate(-50%,-50%);
}

.kmb-direction--hydraulics{
  grid-area:hydraulics;
  --direction-bg:linear-gradient(145deg,#2182af 0%,#196c93 52%,#27282a 100%);
}

.kmb-direction--aerial{
  grid-area:aerial;
  --direction-bg:linear-gradient(135deg,#27282a 0%,#315469 52%,#2182af 100%);
  --direction-shade:linear-gradient(90deg,rgba(22,25,28,.86) 0%,rgba(22,25,28,.18) 55%,rgba(22,25,28,0) 100%);
}

.kmb-direction::before{
  position:absolute;
  z-index:0;
  top:-35%;
  right:9%;
  width:34%;
  height:165%;
  background:linear-gradient(135deg,rgba(255,255,255,.11),rgba(255,255,255,0));
  content:"";
  pointer-events:none;
  transform:skewX(-16deg);
}

.kmb-direction__shade{
  position:absolute;
  z-index:2;
  inset:0;
  background:var(--direction-shade);
  pointer-events:none;
}

.kmb-direction__visual{
  position:absolute;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}

.kmb-direction__visual img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  filter:drop-shadow(0 14px 18px rgba(0,0,0,.2));
  transition:transform .38s cubic-bezier(.2,.7,.2,1);
}

.kmb-direction--cranes .kmb-direction__visual{top:8px;bottom:10px;left:12px;width:61%}
.kmb-direction--remotes .kmb-direction__visual{top:12px;right:4px;left:4px;height:70%}
.kmb-direction--tail-lifts .kmb-direction__visual{top:50px;right:2%;bottom:4px;left:2%}
.kmb-direction--tail-lifts .kmb-direction__content{top:18px;bottom:auto}
.kmb-direction--hydraulics .kmb-direction__visual{top:16px;right:3%;left:3%;height:70%}
.kmb-direction--aerial .kmb-direction__visual{top:5px;right:8px;bottom:7px;width:67%}
.kmb-direction--aerial .kmb-direction__visual img{object-position:right center}

.kmb-direction__content{position:absolute;z-index:3;right:20px;bottom:18px;left:20px}
.kmb-direction--cranes .kmb-direction__content{right:22px;left:auto;width:43%;text-align:right}
.kmb-direction--aerial .kmb-direction__content{width:48%}

.kmb-direction__title{
  display:block;
  margin:0;
  color:#fff;
  font-family:'Oswald',sans-serif;
  font-size:22px;
  font-weight:600;
  letter-spacing:.2px;
  line-height:1.12;
  text-wrap:balance;
  text-transform:uppercase;
  text-shadow:0 2px 10px rgba(0,0,0,.28);
}

.kmb-direction--cranes .kmb-direction__title,
.kmb-direction--aerial .kmb-direction__title{font-size:30px}

.kmb-direction__brand-logo{
  position:absolute;
  z-index:2;
  top:50%;
  left:50%;
  display:block;
  width:var(--brand-logo-w);
  height:var(--brand-logo-h);
  object-fit:contain;
  transform:translate(-50%,-50%);
}

.kmb-direction:hover{filter:brightness(1.06)}
.kmb-direction--brand:hover{filter:none}
.kmb-direction:hover .kmb-direction__visual img{transform:scale(1.05)}
.kmb-direction:focus-visible{outline:3px solid var(--kmb-blue-light);outline-offset:3px}

@media (max-width:1180px){
  .kmb-directions__grid{
    grid-template-areas:
      "cranes cranes"
      "remotes tail-lifts"
      "brand hydraulics"
      "aerial aerial";
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:repeat(4,300px);
  }
  .kmb-direction--cranes .kmb-direction__visual{width:58%}
  .kmb-direction--cranes .kmb-direction__content{width:44%}
  .kmb-direction--aerial .kmb-direction__visual{width:64%}
  .kmb-direction__title{font-size:24px}
}

@media (max-width:640px){
  .kmb-directions{padding:52px 0 60px}
  .kmb-directions__container{width:min(100% - 32px,1360px)}
  .kmb-directions__heading{margin-bottom:28px;font-size:27px}
  .kmb-directions__grid{
    grid-template-areas:
      "cranes"
      "remotes"
      "tail-lifts"
      "brand"
      "hydraulics"
      "aerial";
    grid-template-columns:1fr;
    grid-template-rows:280px 280px 280px 170px 280px 280px;
    gap:12px;
  }
  .kmb-direction__content{right:16px;bottom:16px;left:16px}
  .kmb-direction__title,
  .kmb-direction--cranes .kmb-direction__title,
  .kmb-direction--aerial .kmb-direction__title{font-size:24px;line-height:1.1}
  .kmb-direction--cranes .kmb-direction__visual{top:6px;bottom:12px;left:6px;width:63%}
  .kmb-direction--cranes .kmb-direction__content{right:16px;width:54%}
  .kmb-direction--remotes .kmb-direction__visual{top:8px;right:4px;left:4px;height:72%}
  .kmb-direction--tail-lifts .kmb-direction__visual{top:48px;right:2%;bottom:4px;left:2%}
  .kmb-direction--hydraulics .kmb-direction__visual{top:14px;right:3%;left:3%;height:72%}
  .kmb-direction--aerial .kmb-direction__visual{top:4px;right:0;bottom:8px;width:72%}
  .kmb-direction--aerial .kmb-direction__content{width:64%}
  /* плитка бренда здесь всего 170px высотой — ореол укорачиваем, чтобы
     переход успевал раствориться в фоне и не обрезался краем плитки */
  .kmb-direction--brand{--brand-logo-w:150px;--brand-logo-h:84px}
  .kmb-direction--brand::after{height:calc(var(--brand-logo-h) * 1.95)}
}

@media (prefers-reduced-motion:reduce){
  .kmb-direction,
  .kmb-direction__visual img{transition:none}
}