/* Hover-эффект для блока "Новости" — как у блоков "Практика":
   при наведении активируется верхняя полоска и появляется стрелка. */

/* Плавный переход цвета полоски */
.list .list-item {
  transition: border-top-color 0.4s ease;
}

/* Верхняя полоска ярче при наведении */
.list .list-item:hover {
  border-top-color: #fff;
}

/* Стрелка скрыта по умолчанию, проявляется при наведении на новость */
.list .list-item .image-slider-wrapper {
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.list .list-item:hover .image-slider-wrapper {
  opacity: 1;
  transform: translateX(0);
}

/* Блок "Услуги": текстовый блок из-за place-self:start сжимался
   до ширины текста, поэтому серая линия (border-top) обрывалась
   у текста. Растягиваем его на всю свою грид-область (8 колонок),
   чтобы линия доходила до правого края контейнера.
   Таргетим только "Услуги" (первый элемент — .text.new),
   не задевая "Процесс" (.text.process) и "О нас" (.big-text). */
.grid-2 > .div-block-5:has(> .text.new:first-child) {
  justify-self: stretch !important;
  width: 100%;
}

/* Кейсы: показываем первые 5, остальные скрыты до нажатия "Показать ещё".
   Класс is-collapsed навешивает JS, поэтому без JS видны все кейсы. */
.list.is-collapsed .list-item:nth-child(n+6) {
  display: none;
}

/* Обёртка и круглая кнопка "Показать ещё".
   Позиционируется как кнопка "Все практики" (.button):
   left:50% относительно контейнера → по центру правой колонки. */
.show-more-wrap.is-hidden {
  display: none;
}

.show-more-btn {
  color: #fff;
  background-color: transparent;
  border: 2px solid #f04f24;
  border-radius: 99999px;
  width: 175px;
  height: 175px;
  margin-top: 0;
  padding: 0;
  font-size: 18px;
  font-weight: 400;
  text-align: center;
  cursor: pointer;
  position: relative;
  left: 50%;
  transition: background-color 0.4s cubic-bezier(.22, 1, .36, 1);
}

.show-more-btn:hover {
  background-color: #f04f24;
}

/* Параллакс для баннерного изображения в "Практиках".
   Картинка немного увеличена (scale) — это даёт запас, чтобы при
   сдвиге по скроллу не оголялись края рамки. Сдвиг задаёт JS. */
/* Интерактивная карта на странице контактов (вместо картинки) */
.map-embed {
  width: 100%;
  height: 620px;
  aspect-ratio: 5 / 4;
  border-radius: 10px;
  overflow: hidden;
  background-color: #5b6066;
}

.map-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Вторая строка заголовка в практиках — всегда по правому краю контейнера */
.heading-10 {
  text-align: right !important;
  margin-right: 0 !important;
}

.image_block {
  overflow: hidden;
  border-radius: 10px;
}

.image_block .image-5 {
  transform: scale(1.3);
  will-change: transform;
}

/* Ненавязчивое появление блоков при скролле (fade-in).
   Класс js-fade навешивает JS, поэтому без JS блоки видны сразу. */
.js-fade {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.js-fade.is-inview {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .js-fade {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Анимация пунктов меню в шапке: swap-ролл.
   Текст уезжает вверх, снизу въезжает его оранжевая копия.
   Разметку .nav-roll внутри ссылок создаёт nav-hover.js. */
.nav-link,
.nav-link-2,
.nav-link-4,
.nav-link:hover,
.nav-link-2:hover,
.nav-link-4:hover,
.nav-link.w--current,
.nav-link-2.w--current,
.nav-link-4.w--current {
  text-decoration: none !important;
}

/* Телефоны и почта в контактах — тот же swap-ролл, что и в меню.
   Гасим штатный :hover-перекрас (иначе краснеет и уезжающая строка),
   оранжевой остаётся только въезжающая копия .nav-roll__copy. */
.phone-link:hover,
.link-7:hover {
  color: #fff;
}

.nav-roll {
  position: relative;
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}

/* В контактах шрифт крупный (25px) — хвосты букв (g, @, у) вылезают
   за 1em и проступают при сдвиге. Даём строкам единый line-height с
   запасом по высоте, чтобы translateY(-100%) уводил глиф целиком и
   строки не накладывались. Паддинг — на сами строки, тогда высота
   .nav-roll__in (от неё считается %) включает этот запас. */
.phone-link .nav-roll__in,
.link-7 .nav-roll__in {
  line-height: 1.4;
}

.nav-roll__in {
  display: block;
  transition: transform 0.4s cubic-bezier(.7, 0, .2, 1);
}

/* копия — абсолютно поверх, ждёт снизу */
.nav-roll__copy {
  color: #f04f24;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(100%);
}

.nav-link:hover .nav-roll__in,
.nav-link-2:hover .nav-roll__in,
.nav-link-4:hover .nav-roll__in,
.phone-link:hover .nav-roll__in,
.link-7:hover .nav-roll__in {
  transform: translateY(-100%);
}

.nav-link:hover .nav-roll__copy,
.nav-link-2:hover .nav-roll__copy,
.nav-link-4:hover .nav-roll__copy,
.phone-link:hover .nav-roll__copy,
.link-7:hover .nav-roll__copy {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .nav-roll__in {
    transition: none;
  }
  .nav-link:hover .nav-roll__copy,
  .nav-link-2:hover .nav-roll__copy,
  .nav-link-4:hover .nav-roll__copy,
  .phone-link:hover .nav-roll__copy,
  .link-7:hover .nav-roll__copy {
    color: #f04f24;
  }
}