/* Fiveplus — слой вёрстки поверх макета из Claude Design.
   Разметка приходит с инлайновыми стилями, поэтому переопределения идут через !important.
   Правила опираются на структуру и data-атрибуты, а не на конкретные значения стилей. */

/* ================= 1. Шапка: на узких экранах кнопки сжимаются до иконок ================= */
/* До правки группа «Telegram + Почта» не помещалась и уезжала за правый край экрана. */

@media (max-width: 620px) {
  [data-header-inner] > a:first-child span:last-child { display: none; }        /* оставляем только квадрат 5+ */
  [data-header-inner] > div > a {
    font-size: 0 !important;                                                     /* прячем подпись, иконка остаётся */
    gap: 0 !important;
    width: 44px;
    padding: 0 !important;
    justify-content: center;
  }
  [data-header-inner] { gap: 8px !important; }
}

/* Пока навигация скрыта, её место в строке пустует и вся группа прижимается влево.
   Собираем логотип и кнопки в один блок по центру. */
@media (max-width: 860px) {
  [data-header-inner] { justify-content: center; }
  [data-header-inner] > div { margin: 0; }
}

/* пункты навигации и кнопки шапки — по центру строки */
header nav a,
[data-header-inner] a,
[data-header-inner] a > span { justify-content: center; text-align: center; }

/* ================= 2. Центрирование ================= */

main section { text-align: center; }

main h1,
main h2,
main h3,
main p,
main section > div > span:first-child { text-align: center; }

/* надсекционные подписи — блоками, иначе не центруются */
main [data-reveal] > span:first-child,
main section > div > div > span:first-child { display: block; }

/* строки, которые макет разводил по краям, собираем по центру */
main section div[style*="flex-wrap:wrap"] { justify-content: center !important; }

/* выпадающее меню на телефоне */
#mobile-menu a { justify-content: center; text-align: center; }

/* Главная причина «уехавшего» текста: в макете почти у каждого заголовка и абзаца
   стоит инлайновый max-width, но боковые отступы нулевые. Коробка остаётся прижатой
   к левому краю, а text-align:center центрует текст только внутри неё — снаружи это
   читается как смещение влево, местами на 600 с лишним пикселей. Центруем сами коробки. */
main h1, main h2, main h3, main p,
main ul, main ol,
main span[style*="display:block"],
footer p {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Заголовок секции с подписью сбоку разводило по краям. Собираем в столбик по центру. */
main section div[style*="space-between"]:has(> h2) {
  flex-direction: column;
  align-items: center !important;
}

/* Списки. В макете пункт — это flex-строка «точка + текст», где текст занимает всю
   оставшуюся ширину. При центрировании текст съезжал к середине, а маркер оставался
   у левого края и выглядел оторванным. Переводим пункт в обычный блок, а маркер — в
   строчный элемент: тогда точка и первая строка центруются вместе. */
main section ul:not([data-stats]) li,
main section ol li { display: block !important; text-align: center; }

main section ul:not([data-stats]) li > span:first-child {
  display: inline-block !important;
  vertical-align: middle;
  margin: 0 9px 0 0 !important;
  flex: none !important;
}

/* ================= 3. Первый экран одной колонкой ================= */
/* Раньше текст стоял слева, телефоны справа — при центрировании это разваливалось. */

/* Правила ниже целятся в #hero, а не в «первую секцию страницы». Раньше здесь стоял
   main > section:first-of-type, и любой блок, вставленный в начало main, молча уводил
   весь первый экран. Теперь порядок секций на вёрстку не влияет — id есть и на главной,
   и на странице внедрения. */

#hero > div:last-child {
  grid-template-columns: 1fr !important;
  justify-items: center;
}

#hero > div:last-child > div:first-child {
  max-width: 100%;
  width: 100%;
}

/* На широком экране заголовок был ограничен 15ch и вместе с подзаголовком и кнопками
   собирался в узкую полосу посреди пустой секции. Даём тексту нормальную ширину. */
@media (min-width: 900px) {
  #hero h1 { max-width: 19ch !important; }
  /* 19ch подобраны под короткий заголовок главной. Заголовок страницы внедрения длиннее
     и на широком экране рвался бы на четыре строки — он помечается data-wide. */
  #hero h1[data-wide] { max-width: 26ch !important; }
  #hero > div:last-child > div:first-child > p { max-width: 66ch !important; }
  #hero [data-stats] { gap: clamp(32px, 5vw, 84px) !important; }
  #hero > div:last-child { gap: clamp(28px, 3vw, 44px) !important; }
  /* макеты телефонов крупнее, иначе под широким заголовком они теряются */
  #hero [style*="aspect-ratio:9/19"] { width: clamp(200px, 17vw, 268px) !important; }
}

main [data-stats] { justify-content: center !important; }

/* подпись под кнопкой Telegram */
main [data-stats] li span:last-child { margin-left: auto; margin-right: auto; }

/* ================= 4. Кнопки ================= */

main a[href^="https://t.me"],
main a[href^="mailto"] { justify-content: center !important; }

@media (max-width: 620px) {
  #hero a[href^="https://t.me"],
  #hero a[href^="mailto"] { width: 100%; }
  #hero div[style*="flex-wrap:wrap"] > div { width: 100%; }
}

/* ================= 5. Вопросы и ответы ================= */
/* Вопрос по центру, плюс остаётся у правого края и не съезжает вместе с текстом. */

/* Секция шла в две колонки: заголовок слева, аккордеон справа — и заголовок оказывался
   заметно левее середины страницы. Ставим одной колонкой по центру. */
main section:has(details[data-faq]) > div {
  grid-template-columns: minmax(0, 820px) !important;
  justify-content: center;
  gap: clamp(24px, 3vw, 40px) !important;
}

details[data-faq] > summary {
  position: relative;
  justify-content: center !important;
  padding-right: 34px;
  padding-left: 34px;
}

details[data-faq] > summary > [data-plus] {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  margin-top: 0 !important;
}

details[data-faq][open] > summary > [data-plus] { transform: translateY(-50%) rotate(45deg); }

/* ================= 6. Цены ================= */
/* На широком экране это таблица: услуга слева, цена справа — так её и читают.
   На узком строки складываются, и тогда центрируем. */

@media (max-width: 620px) {
  #pricing div[style*="space-between"] { justify-content: center !important; text-align: center; }
  #pricing div[style*="space-between"] > div { flex-basis: auto !important; }
}

/* ================= 7. Работы ================= */

#works article > div:last-child { text-align: center; }

/* заголовок секции с подзаголовком сбоку — в столбик по центру */
#works > div > div:first-child { flex-direction: column; align-items: center !important; }

/* ================= 8. Контакты и подвал ================= */

#contacts a > span:first-child { margin-left: auto; margin-right: auto; }

footer { text-align: center; }
footer > div > div { justify-items: center; }
footer > div > div > div:first-child { justify-content: center; }

/* ================= 9. Уведомление о скопированном адресе ================= */

#fp-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 100;
  max-width: min(92vw, 480px);
  padding: 13px 20px;
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-2);
  box-shadow: var(--shadow);
  font-size: 15px;
  line-height: 1.4;
  text-align: center;
  overflow-wrap: anywhere;
  opacity: 0;
  transform: translateX(-50%) translateY(12px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}

#fp-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* на телефоне снизу висит панель с кнопками — поднимаем над ней */
@media (max-width: 760px) {
  #fp-toast { bottom: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  #fp-toast { transition: none; }
}

/* ================= 10. Мелкие переполнения ================= */

/* Макет собран на repeat(auto-fit, minmax(320px, 1fr)). Когда доступной ширины меньше
   минимума — а внутри карточки с отступами это наступает уже на 360px — колонка всё равно
   растягивается до 320px и вылезает за край. На узких экранах колонка всегда одна. */
@media (max-width: 620px) {
  [style*="repeat(auto-fit"] { grid-template-columns: 1fr !important; }
}

/* Элемент сетки по умолчанию не сжимается уже своего min-content. Пара макетов телефонов
   с жёстким минимумом в 148px растягивала колонку первого экрана и утаскивала за собой
   весь текст. Разрешаем колонкам сжиматься, а телефонам — считаться от ширины экрана. */
#hero > div:last-child > div { min-width: 0; max-width: 100%; }

@media (max-width: 620px) {
  [style*="aspect-ratio:9/19"] { width: 44% !important; }
}

main img { max-width: 100%; }

/* длинные адреса и подписи не должны растягивать карточку */
#contacts span,
footer a { overflow-wrap: anywhere; }

/* ================= 11. Переключатель направлений ================= */
/* Две ссылки, а не вкладки в смысле ARIA: это переходы между документами, поэтому
   role="tablist" здесь был бы враньём для скринридера. Активная страница помечается
   aria-current="page" — он же и раскрашивает «бегунок», так что единственное отличие
   разметки между index.html и ai.html — этот атрибут.

   Атрибут именно data-tabs, а не data-nav: app.js прячет [data-nav] на ≤860px,
   и переключатель исчезал бы ровно там, где он нужнее всего. */

[data-tabs] {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 12px clamp(14px, 4vw, 44px);
}

[data-tabs-inner] {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

[data-tabs-pill] {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border-2);
  border-radius: 999px;
  background: var(--card-2);
}

[data-tab] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 clamp(15px, 2.2vw, 26px);
  border-radius: 999px;
  font-size: clamp(14px, 1.3vw, 16px);
  font-weight: 600;
  letter-spacing: -.015em;
  white-space: nowrap;
  color: var(--text-2);
}

/* специфичность (0,2,0) перебивает базовое a:hover из <head> — !important не нужен */
[data-tab]:hover { color: var(--text); }

[data-tab][aria-current="page"],
[data-tab][aria-current="page"]:hover {
  background: var(--accent);
  color: var(--bg);
}

@media (max-width: 620px) {
  [data-tabs] { padding: 10px 14px; }
  [data-tabs-pill] { width: 100%; }
  [data-tab] {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 10px;
    font-size: 14px;
  }
}

/* Переключатель и навигация в шапке должны стоять друг под другом по центру.
   Мешала асимметрия боков: логотип занимает ~110px, группа кнопок ~280px, и
   навигация с flex:1 1 auto центровалась в оставшейся щели — то есть уезжала
   влево ровно на половину разницы, на 85px.

   Даём бокам flex:1 1 0 — они делят свободное место поровну независимо от
   содержимого, и навигация оказывается в настоящем центре. min-width:min-content
   страхует узкие экраны: если поровну не выходит, кнопки останутся целыми,
   а не сплющатся. Ниже 861px правило не нужно — там навигацию прячет app.js. */
@media (min-width: 861px) {
  [data-header-inner] > a:first-child,
  [data-header-inner] > div:last-child {
    flex: 1 1 0 !important;
    min-width: min-content;
  }
  [data-header-inner] > div:last-child { justify-content: flex-end; }
  [data-header-inner] > nav[data-nav] { flex: 0 1 auto !important; }
}

/* ================= 12. Ховер-эффекты ================= */
/* В index.html эти же эффекты лежат в <head> под сквозными именами .h1…h44 — нумерация
   ломается при любой вставке блока. Здесь то же самое, но по смыслу. Новые страницы
   используют только эти классы; миграция index.html — отдельная задача.

   !important обязателен: цвета и рамки заданы инлайново, а инлайн бьёт любую
   специфичность автора без !important. */

.hv-link:hover        { color: var(--text) !important; }
.hv-accent:hover      { color: var(--accent-2) !important; }
.hv-border:hover      { border-color: var(--accent) !important; }
.hv-outline:hover     { border-color: var(--accent) !important; color: var(--text) !important; }
.hv-tg:hover          { background: #229ED9 !important; color: #06131F !important; }
.hv-card:hover        { border-color: var(--accent) !important; box-shadow: var(--shadow) !important; }
.hv-chip:hover        { border-color: var(--accent) !important; color: var(--accent-2) !important; }

.hv-lift:hover {
  border-color: var(--accent) !important;
  transform: translateY(-3px) !important;
  box-shadow: var(--shadow) !important;
}

/* карточки в секциях с инвертированной палитрой (#works, #pricing) */
.hv-inv-chip:hover    { border-color: var(--inv-accent) !important; color: var(--inv-accent) !important; }
.hv-inv-fill:hover    { background: var(--inv-accent) !important; color: var(--inv-bg) !important; }
.hv-inv-outline:hover { border-color: var(--inv-accent) !important; color: var(--inv-text) !important; }

.hv-tg-card:hover {
  border-color: #2AABEE !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 22px 50px -26px rgba(42, 171, 238, .7) !important;
  color: var(--text) !important;
}

.hv-mail-card:hover {
  border-color: var(--accent) !important;
  transform: translateY(-3px) !important;
  box-shadow: var(--shadow) !important;
  color: var(--text) !important;
}

@media (prefers-reduced-motion: reduce) {
  .hv-lift:hover,
  .hv-tg-card:hover,
  .hv-mail-card:hover { transform: none !important; }
}