/* Главная на телефоне (≤767px, 30.09.2026) — по правилам docs/mobile-design.md.
   Раздел «Отзывы» не трогаем (его переделывают отдельно) — он исключён через [data-title="Отзывы"].
   Подключается после CSS шаблона и правок блоков. */

@media (max-width: 767px) {
  /* Слова-подложки за заголовками разделов (30.09.2026): как на компьютере, но меньше.
     Длинное слово («Ближайшие события») плавно растворяется у правого края, а не обрывается. */
  .about-us__title, .our-services-block__title, .brand-block__title, .upcoming-events__title {
    padding-top: 30px; padding-right: 0; overflow: visible;
  }
  .about-us__title:before, .our-services-block__title:before, .brand-block__title:before, .upcoming-events__title:before {
    display: block; left: -2px; right: 0; top: 0; width: auto; font-size: 54px; letter-spacing: -0.03em; overflow: hidden;
    /* растворение — у правого края экрана, а не по длине слова: короткие слова остаются целыми */
    -webkit-mask-image: linear-gradient(90deg, #000 78%, transparent 100%); mask-image: linear-gradient(90deg, #000 78%, transparent 100%);
  }
  /* рисованные иконки у заголовков на телефоне не показываем (решение 30.09.2026) */
  .about-us__animation, .our-services-block__animation, .upcoming-events__title .upcoming-events__animation { display: none; }

  /* заголовки разделов — одним стилем */
  .about-us__title-in,
  .our-services-block__title-in,
  .brand-block__title-in,
  .upcoming-events__title:not([data-title="Отзывы"]) .upcoming-events__title-in {
    font-size: 26px; font-weight: 600; line-height: 1.2; color: #272727;
  }

  /* «Заголовок | Ссылка» — ссылка под заголовком, без вертикальной черты и декора */
  .brand-block__title,
  .upcoming-events__title:not([data-title="Отзывы"]) {
    display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 24px;
  }
  .brand-block__title-in,
  .upcoming-events__title:not([data-title="Отзывы"]) .upcoming-events__title-in {
    margin: 0; padding: 0; border: 0;
  }
  .brand-block__title-in:after,
  .upcoming-events__title:not([data-title="Отзывы"]) .upcoming-events__title-in:after { display: none; }
  .brand-block__more, .upcoming-events__title:not([data-title="Отзывы"]) .upcoming-events__more { margin: 0; padding: 0; border: 0; }
  .brand-block__more a,
  .upcoming-events__title:not([data-title="Отзывы"]) .upcoming-events__more a {
    font-size: 15px; font-weight: 600; color: #e9423d; text-decoration: none; border: 0;
  }
  .brand-block__more a:after,
  .upcoming-events__title:not([data-title="Отзывы"]) .upcoming-events__more a:after { content: " →"; }
  /* красная полоса-подчёркивание шаблона под ссылкой — у всех блоков, включая «Отзывы» */
  .upcoming-events__more a, .brand-block__more a { padding: 0; }
  .upcoming-events__more a:before, .brand-block__more a:before { display: none; }

  /* первый экран: кнопка на всю ширину, вращающаяся надпись не наезжает на кнопку */
  .hero-main__more { display: block; width: 100%; padding-right: 0 !important; } /* шаблон: inline-block */
  .hero-main__more .site-btn { display: flex; justify-content: center; width: 100%; white-space: nowrap; }
  .hero-main__more-animation { display: none; }

  .about-us__title { margin-bottom: 8px; }

  /* «О нас»: цифры — строками в одной карточке «число · подпись» (правило 2 mobile-design.md),
     а не плитками 2 × 2; колонка чисел общая (subgrid), подписи начинаются на одной линии */
  .home-stats { grid-template-columns: max-content minmax(0, 1fr); gap: 0; padding: 4px 16px; border-radius: 18px; background: #f3f9f5; }
  .home-stats__item {
    display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; column-gap: 16px; align-items: center;
    padding: 14px 0; border-radius: 0; background: none; border-bottom: 1px solid #dcebe2;
  }
  .home-stats__item:last-child { border-bottom: 0; }
  .home-stats__value { font-size: 26px; }
  .home-stats__label { font-size: 14px; }

  /* «Наши услуги»: строки «название и результат слева · картинка справа» вместо шести плиток
     почти на весь экран каждая; нажимается вся карточка (.home-svc__link) */
  .our-services-block__description { font-size: 15px; margin-bottom: 20px; }
  .our-services-block__item {
    display: grid; grid-template-columns: minmax(0, 1fr) 84px; column-gap: 12px; align-items: center;
    margin: 0 0 10px; padding: 16px; border-radius: 18px;
  }
  .our-services-block__item-name { grid-column: 1; margin: 0 0 4px; font-size: 17px; }
  .our-services-block__item-body { display: contents; }
  .our-services-block__item-body:before { display: none; }
  .home-svc__summary { grid-column: 1; max-width: none; font-size: 14px; }
  .our-services-block__item-img {
    position: static; grid-column: 2; grid-row: 1 / span 2; width: 84px; height: 72px;
  }
  .our-services-block__item-img img { width: 100%; height: 100%; object-fit: contain; }
  .our-services-block__item-button { display: none; }

  /* «Наши услуги»: кнопка заявки на всю ширину */
  .our-services-block__button .site-btn, .our-services-block__more .site-btn { display: flex; justify-content: center; width: 100%; }

}

/* Коллаж первого экрана на телефоне и планшете (шаблон его скрывает): слои — в процентах
   от блока 796×665 (замерено на компьютере), без параллакса; слои слегка «дышат». */
@media (max-width: 1022px) {
  .hero-main__images {
    display: block !important; position: relative !important; left: auto !important; right: auto !important;
    width: 100%; max-width: 460px; height: auto !important; aspect-ratio: 796 / 665; margin: 28px 0 0;
  }
  .hero-main__images .paralacs-box { position: absolute; inset: 0; height: 100%; }
  .hero-main__images .paralacs-box__layer { right: auto !important; bottom: auto !important; transform: none !important; }
  .hero-main__images .paralacs-box__layer img { width: 100% !important; height: 100% !important; max-width: none; object-fit: contain; }
  .hero-main__images .paralacs-box__layer--1 { left: 2.26% !important; top: 20.94% !important; width: 16% !important; height: 53.2% !important; }
  .hero-main__images .paralacs-box__layer--2 { left: 54.4% !important; top: -.25% !important; width: 45.6% !important; height: 87.31% !important; }
  .hero-main__images .paralacs-box__layer--3 { left: 0 !important; top: 14.86% !important; width: 86% !important; height: 79.88% !important; }
  .hero-main__images .paralacs-box__layer--4 { left: 15.58% !important; top: 40.6% !important; width: 23.5% !important; height: 59.4% !important; }
  .hero-main__images .paralacs-box__layer--5 { left: 38% !important; top: 31.4% !important; width: 25.15% !important; height: 43.3% !important; }
  .hero-main__images .paralacs-box__layer--6 { left: 6% !important; top: 60.8% !important; width: 19.4% !important; height: 13.9% !important; }
  .hero-main__images .paralacs-box__layer--2 img { animation: hero-float 7s ease-in-out infinite; }
  .hero-main__images .paralacs-box__layer--1 img { animation: hero-float 6s ease-in-out -2s infinite; }
  .hero-main__images .paralacs-box__layer--5 img { animation: hero-float 8s ease-in-out -4s infinite; }
}
@keyframes hero-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) {
  .hero-main__images .paralacs-box__layer img { animation: none !important; }
}