/* ==========================================================================
   legacy.css — мост между унаследованной разметкой и новой дизайн-системой.

   Часть страниц («Создание сайтов», «Обо мне», «Как я работаю») перенесена
   с прежнего сайта вместе со своими классами. Переписывать их разметку
   целиком ради оформления смысла нет — проще переназначить старые классы
   на новые стили. Файл подключается последним и перекрывает content.css.

   Когда страницы будут переведены на новую разметку, файл можно удалить.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Баннер-заголовок (бывший .offers)

   В прежнем шаблоне это была полоса во всю ширину окна, внутри которой лежала
   белая скруглённая карточка. После переноса блок оказался вложен в .container,
   и получалась «коробка в коробке»: серая полоса шириной 1152 px, а внутри
   ещё одна белая со скруглениями. Выглядело это как сломанная вёрстка.

   Возвращаем полосе полную ширину окна, а внутреннюю карточку превращаем
   в обычный контейнер без фона и скруглений.
   -------------------------------------------------------------------------- */
.offers {
  position: relative;
  /* Полная ширина окна из вложенного контейнера */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: var(--surface-alt);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  padding: clamp(28px, 3.5vw, 48px) 0;
}
.offers .container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.offers .inner {
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
  border-radius: 0;
}
.offers h1 { margin: 0 0 var(--sp-5); max-width: 24ch; }
.offers h2 { margin: 0 0 var(--sp-4); max-width: 26ch; }

/* --------------------------------------------------------------------------
   Блок «что входит» (бывший .delau)
   -------------------------------------------------------------------------- */
.delau { margin: clamp(32px, 4vw, 56px) 0; }
.delau .container { max-width: var(--container); }
.delau h2, .delau h3 { margin-bottom: var(--sp-6); }
.delau .inner {
  padding: clamp(24px, 3vw, 40px);
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.delau a { color: var(--amber-deep); }

/* Плитки внутри .delau превращаем в чипсы */
.block_with { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.block_seo_include {
  width: auto !important;
  flex: 0 1 auto;
  padding: 9px 16px !important;
  font-size: 15px;
  color: var(--ink-2);
  background: var(--canvas) !important;
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: border-color var(--t), background var(--t);
}
.block_seo_include:hover { border-color: var(--amber); background: var(--amber-tint) !important; }
.seo_include { padding: 0 !important; font-size: 15px !important; }

/* --------------------------------------------------------------------------
   Плашки с подсказками (бывшие .tooltips)
   -------------------------------------------------------------------------- */
.block_tooltip { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: var(--sp-5) 0; }
.tooltips {
  position: relative;
  flex: 0 1 auto;
  padding: 12px 20px !important;
  font-size: 16px !important;
  color: var(--ink) !important;
  background: var(--canvas) !important;
  border: 1px solid var(--line);
  border-radius: var(--r) !important;
  cursor: help;
  transition: border-color var(--t), background var(--t);
}
.tooltips:hover { border-color: var(--amber); background: var(--amber-tint) !important; }
.tooltips .tooltip_txt {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 20;
  width: 320px !important;
  max-width: 78vw;
  padding: 12px 14px !important;
  font-size: 14px !important;
  line-height: 1.5;
  color: var(--on-ink) !important;
  background: var(--surface-ink) !important;
  border-radius: var(--r) !important;
  transition: opacity var(--t), visibility var(--t);
}
.tooltips:hover .tooltip_txt,
.tooltips:focus-within .tooltip_txt { visibility: visible; opacity: 1; }
.tooltips .tooltip_txt ul { padding-left: 18px; margin: 0; }

/* --------------------------------------------------------------------------
   Кнопки прежней разметки
   -------------------------------------------------------------------------- */
.block_btn { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); margin: var(--sp-5) 0; }
.btn_1 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 13px 26px !important;
  font-size: 15px !important;
  font-weight: 500;
  color: #fff !important;
  background: var(--amber) !important;
  border: 1px solid var(--amber) !important;
  border-radius: var(--r) !important;
  cursor: pointer;
  transition: background var(--t), transform var(--t), box-shadow var(--t);
}
.btn_1:hover {
  background: var(--amber-deep) !important;
  border-color: var(--amber-deep) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(192, 133, 50, .28);
}
.block_txt { flex: 1 1 260px; font-size: 15px; line-height: 1.55; color: var(--muted); }

.btn-overlay, .napisat_land, .rasschitat, .ostavit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 13px 26px;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  background: var(--amber);
  border: 1px solid var(--amber);
  border-radius: var(--r);
  cursor: pointer;
  transition: background var(--t), transform var(--t);
}
.btn-overlay:hover, .napisat_land:hover, .rasschitat:hover, .ostavit:hover {
  background: var(--amber-deep);
  border-color: var(--amber-deep);
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   Цитата
   -------------------------------------------------------------------------- */
.citata { padding: clamp(32px, 4vw, 56px) 0; }
.citata .container { max-width: var(--container); }
.citata p {
  max-width: 46ch;
  margin: 0 auto;
  font-family: var(--font-serif);
  font-size: clamp(19px, 2.2vw, 26px);
  font-style: italic;
  line-height: 1.42;
  color: var(--ink);
  text-align: center;
}

/* --------------------------------------------------------------------------
   Старый блок цен: таблица сравнения
   -------------------------------------------------------------------------- */
.block_price { margin: clamp(32px, 4vw, 56px) 0; }
.block_price h2, .block_price h3 { margin-bottom: var(--sp-6); }
.block_price .include,
.block_price .no_include {
  display: block;
  width: 100%;
  height: 22px;
  background: none !important;
}
.block_price .include::before { content: "\2713"; color: var(--amber); font-size: 17px; }
.block_price .no_include::before { content: "\2014"; color: var(--line); font-size: 17px; }
.block_price .free1, .block_price .free2, .block_price .free3, .block_price .free4,
.block_price .free5, .block_price .free6, .block_price .free7 {
  padding: 10px 12px;
  font-size: 15px;
  text-align: center;
  border-bottom: 1px solid var(--line-soft);
}
.block_price .free4, .block_price .one { text-align: left; }
.block_price .one { padding: 12px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--amber-deep); background: var(--amber-tint); }
.block_price .free { padding: 12px; font-size: 15px; color: var(--ink-2); }
.block_price .two { padding: 12px; text-align: center; }
.pr_sozd { padding: 12px; font-size: 16px; }
.price_sozd { padding: 12px; font-size: 16px; font-weight: 500; color: var(--ink); text-align: right; }
.free1, .free2, .free3 { font-weight: 500; color: var(--ink); }

/* --------------------------------------------------------------------------
   Прайс-лист создания сайтов
   -------------------------------------------------------------------------- */
.cont { padding: clamp(24px, 3vw, 40px) 0; }
.bottom_opt { margin-bottom: var(--sp-5); }

/* --------------------------------------------------------------------------
   Страница «Как я работаю»: шаги
   -------------------------------------------------------------------------- */
.how_block { margin-bottom: var(--sp-6); }
.how_me, .how_me1, .how_me2, .how_me3, .how_me4, .how_me5, .how_me6, .how_me7, .how_me8, .how_me9 {
  position: relative;
  max-width: 74ch;
  margin: 0 0 var(--sp-5);
  padding: var(--sp-5) var(--sp-6) var(--sp-5) 72px;
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: border-color var(--t), transform var(--t);
}
.how_me:hover, .how_me1:hover, .how_me2:hover, .how_me3:hover, .how_me4:hover,
.how_me5:hover, .how_me6:hover, .how_me7:hover, .how_me8:hover, .how_me9:hover {
  border-color: var(--amber);
  transform: translateX(3px);
}
.how_me::before, .how_me1::before, .how_me2::before, .how_me3::before, .how_me4::before,
.how_me5::before, .how_me6::before, .how_me7::before, .how_me8::before, .how_me9::before {
  content: "";
  position: absolute;
  left: 26px;
  top: var(--sp-5);
  width: 22px;
  height: 22px;
  background: var(--amber-tint);
  border: 1px solid var(--amber);
  border-radius: 50%;
}
.how_service, .how_sut, .how_cms, .how_7000 {
  max-width: 74ch;
  margin: 0 0 var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  font-size: 15px;
  background: var(--surface-alt);
  border-left: 2px solid var(--amber);
  border-radius: 0 var(--r) var(--r) 0;
}
.breef {
  max-width: 74ch;
  margin: var(--sp-6) 0;
  padding: var(--sp-6);
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: var(--r);
}

/* --------------------------------------------------------------------------
   Портфолио: карточки работ

   Разметка досталась от прежнего шаблона: каждый абзац оформлен отдельной
   рамкой, а цена выглядит как поле ввода — белая плашка со скруглением.
   Приводим к виду обычной карточки проекта.
   -------------------------------------------------------------------------- */
.img_work_left img { border: 1px solid var(--line); border-radius: var(--r); }

.description_work_right,
.description_work_name,
.description_work_ul,
.description_work_price,
.description_work_site {
  padding: 0;
  background: none;
  border: 0;
}

.description_work_name {
  margin: 0 0 var(--sp-4);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--ink);
}

.description_work_ul {
  margin: 0 0 var(--sp-5);
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
}

.description_work_right ul {
  margin: var(--sp-3) 0 var(--sp-5);
  padding-left: 1.2em;
}
.description_work_right li {
  margin-bottom: 6px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink-2);
}

.description_work_price {
  margin: 0 0 var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
}

.description_work_site { margin: 0; font-size: 15px; }
.description_work_site a { color: var(--amber-deep); font-weight: 500; }
.description_work_site a:hover { color: var(--amber-bright); }

/* --------------------------------------------------------------------------
   Контакты
   -------------------------------------------------------------------------- */
.cont_v { padding: var(--sp-4) 0; }
.contact_icon_adress, .contact_icon_phone, .contact_icon_time,
.contact_icon_vk, .contact_icon_ip, .contact_icon_adress_msc {
  padding: var(--sp-5);
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: border-color var(--t), transform var(--t);
}
.contact_icon_adress:hover, .contact_icon_phone:hover, .contact_icon_time:hover,
.contact_icon_vk:hover, .contact_icon_ip:hover, .contact_icon_adress_msc:hover {
  border-color: var(--amber);
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   Унаследованные обёртки jQuery-плагинов

   Карусель owl, аккордеон su-spoiler и мобильное меню mmenu больше
   не подключаются: разметка осталась, скрипты — нет. Приводим её к виду
   обычных блоков, чтобы ничего не разъезжалось.
   -------------------------------------------------------------------------- */

/* Карусель owl задавала сцене абсолютную ширину во много десятков тысяч
   пикселей — на этом страница получала горизонтальную прокрутку.
   Разворачиваем слайды в обычную сетку. */
.owl-carousel, .owl-stage-outer, .owl-stage { width: auto !important; transform: none !important; position: static !important; }
.owl-stage { display: flex; flex-wrap: wrap; gap: var(--sp-6); }
.owl-item, .su-content-slide, .su-content-wrap {
  width: auto !important;
  max-width: 100%;
  flex: 1 1 300px;
  float: none !important;
  position: static !important;
}
.owl-dots, .owl-nav, .owl-dot, .owl-prev, .owl-next { display: none !important; }

.su-spoiler { margin: var(--sp-4) 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.su-spoiler-title {
  padding: var(--sp-4) var(--sp-5);
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  background: var(--surface-alt);
  cursor: pointer;
}
.su-spoiler-title h5 { margin: 0; font-size: inherit; }
.su-spoiler-content { padding: 0 var(--sp-5) var(--sp-5); }
.su-spoiler-closed .su-spoiler-content { display: none; }
.su-spoiler-icon { display: none; }

.mm-panel, .mm-listview, .mm-navbar, .mm-title { display: none !important; }
.mm-slideout, .mm-menu, .mm-offcanvas { transform: none !important; }

/* --------------------------------------------------------------------------
   Служебное из прежней вёрстки
   -------------------------------------------------------------------------- */
.hidden-xs.block_price { display: block !important; }
.mar-top { margin-top: var(--sp-6); }
.tags ul { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: 0; list-style: none; }
.tags ul li a { color: var(--muted); font-size: 14px; }
.sitebox, .prodau, .pol, .promo_img, .client_block img { border-radius: var(--r); }


/* --------------------------------------------------------------------------
   Вложенные контейнеры

   Разметка прежнего сайта рассчитана на то, что блоки лежат на верхнем уровне
   страницы и каждый приносит свой .container. У нас контент уже обёрнут
   в .container, поэтому внутренние только сужали блок и добавляли отступы —
   секции выглядели зажатыми в узкую колонку. Гасим вложенные контейнеры.
   -------------------------------------------------------------------------- */
.content .container,
.content .container-fluid {
  width: 100%;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* --------------------------------------------------------------------------
   Карточки портфолио

   Внутри карточки image-блок и описание стоят рядом. Снимки работ
   восстановить из архива не удалось, поэтому .img_work_left остался пустым —
   и забирал половину ширины, оставляя описанию около 140 пикселей.
   Пустой блок убираем из потока, описание занимает всю ширину.
   -------------------------------------------------------------------------- */
.img_work_left:empty { display: none; }
.description_work_right { width: 100%; }
.description_work_ul { padding-top: var(--sp-3); }

/* Список работ: карточки в две колонки вместо сжатых слайдов карусели */
.owl-stage { display: grid; grid-template-columns: repeat(auto-fit, minmax(430px, 1fr)); gap: var(--sp-5); }
.owl-item { width: auto !important; }
.su-content-slide, .su-content-wrap { background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r); padding: var(--sp-5); }


/* Свёрнутая часть списка работ: карточки остаются в разметке,
   их только не видно, поэтому поисковик читает весь список. */
.portfolio__rest[hidden] { display: none; }
.portfolio__rest { margin-top: var(--sp-5); }
.portfolio__toggle {
  display: block;
  width: 100%;
  max-width: 320px;
  margin: var(--sp-6) auto 0;
}


/* --------------------------------------------------------------------------
   Блоки преимуществ на странице «Как я работаю»

   В прежней вёрстке это колонки Bootstrap (col-lg-4) без обёртки .row:
   колонки не вставали в ряд и растягивали страницу на одиннадцать тысяч
   пикселей. Собираем их в сетку.
   -------------------------------------------------------------------------- */
.item-page:has(> [class*="col-lg-"]) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-5);
  align-items: start;
}
.item-page:has(> [class*="col-lg-"]) > [class*="col-"] { width: auto !important; padding: 0; }
.item-page:has(> [class*="col-lg-"]) > h1,
.item-page:has(> [class*="col-lg-"]) > h2,
.item-page:has(> [class*="col-lg-"]) > h3,
.item-page:has(> [class*="col-lg-"]) > p,
.item-page:has(> [class*="col-lg-"]) > ul,
.item-page:has(> [class*="col-lg-"]) > .how_block:not([class*="col-"]) { grid-column: 1 / -1; }

.how_block {
  height: 100%;
  padding: var(--sp-5);
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: border-color var(--t), transform var(--t);
}
.how_block:hover { border-color: var(--amber); transform: translateY(-3px); }
.how_block p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.how_block img {
  width: 40px;
  height: 40px;
  margin-bottom: var(--sp-4);
  object-fit: contain;
}