/*
 * Адаптив лендинга bsl.fm.
 * Исходники Vite-сборки утеряны, поэтому адаптив сделан отдельным слоем поверх
 * прод-бандла (assets/index-*.css/js не трогаем). Селекторы опираются на
 * DOM-структуру и Tailwind-классы собранного бандла.
 * Бургер-меню — mobile.js (класс html.bsl-nav-open).
 */

.bsl-burger { display: none; }

/* ---------- Узкий десктоп / планшет в альбомной ориентации ---------- */
@media (max-width: 1279px) and (min-width: 1024px) {
  #app .header .flex.gap-6 { gap: 14px; }
  #app .header .flex.gap-5 { gap: 14px; }
  #app .header .flex.gap-6,
  #app .header .flex.gap-6 * { font-size: 14px; }
  #app .header .flex.gap-3 > div { padding: 10px 12px; white-space: nowrap; }
  #app .header .flex.gap-5 > p { white-space: nowrap; }

  #app .header + div [class~="text-[44px]"] { font-size: 34px; margin-top: 110px; }
  #app .header + div [class~="bottom-[20px]"] img { width: 470px; height: auto; }
  #app .header + div [class~="right-[400px]"] { right: 330px; }
  #app .header + div [class~="right-[400px]"] img { width: 150px; height: auto; }

  #app [class~="text-[76px]"] { font-size: 60px; }
}

/* ---------- Мобильные и планшеты ---------- */
@media (max-width: 1023px) {
  html, body { overflow-x: hidden; }
  #app img { max-width: 100%; }

  /* Сброс в бандле вешает overflow-x:hidden на все div/p — из-за этого текст
     обрезается, а выпадающее меню клипуется. В мобильной раскладке отключаем. */
  #app div, #app p { overflow: visible; }
  #app .header + div > div:first-child,
  #app [class~="bg-[#46BFB3]"],
  #app .customGradientContainer,
  #app [class~="from-[#3DA096]"] { overflow: hidden; }

  /* Секции ближе друг к другу */
  #app [class~="gap-[76px]"] { gap: 48px; }
  #app [class~="mb-[44px]"] { margin-bottom: 24px; }
  #app p.text-4xl.text-center { font-size: 28px; line-height: 1.2; padding: 0 8px; }

  /* ----- Шапка ----- */
  /* у .header есть transform → свой stacking context; без position его z-index
     не работает и выпадающее меню оказывается под героем */
  #app .header:not(.sticky) { position: relative; }
  #app .header [class~="h-[87px]"] { height: 64px; position: relative; }
  #app .header img[src="/logo.svg"] { width: 84px; height: 34px; }
  #app .header .flex.justify-between { padding: 0 12px 0 16px; }

  .bsl-burger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 0 11px;
    background: transparent; border: 1.4px solid #fff; border-radius: 8px; cursor: pointer;
  }
  .bsl-burger span {
    display: block; height: 2px; width: 100%; background: #fff; border-radius: 1px;
    transition: transform .25s ease, opacity .25s ease;
  }
  html.bsl-nav-open .bsl-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  html.bsl-nav-open .bsl-burger span:nth-child(2) { opacity: 0; }
  html.bsl-nav-open .bsl-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  #app .header .flex.gap-6 {
    display: none;
    position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 10001;
    flex-direction: column; align-items: stretch; gap: 16px;
    padding: 20px; border-radius: 12px;
    background: linear-gradient(135deg, #2A8A81, #4FBFB3);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
  }
  html.bsl-nav-open #app .header .flex.gap-6 { display: flex; }
  #app .header .flex.gap-6 .flex.gap-5 { flex-direction: column; align-items: stretch; gap: 0; }
  #app .header .flex.gap-5 > p {
    font-size: 18px; padding: 12px 4px; border-bottom: 1px solid rgba(255, 255, 255, .25);
  }
  #app .header .flex.gap-6 .flex.gap-3 { flex-direction: column; gap: 10px; }
  #app .header .flex.gap-3 > div { font-size: 16px; padding: 12px 16px; }

  /* ----- Герой ----- */
  #app .header + div { margin-top: 8px; }
  #app .header + div > div:first-child {
    height: auto; display: flex; flex-direction: column; padding-bottom: 0;
  }
  #app .header + div [class~="text-[44px]"] {
    order: 1; position: relative; z-index: 2;
    font-size: 30px; line-height: 1.2; margin: 40px 20px 0;
  }
  #app .header + div [class~="text-[44px]"] p { padding: 0; }
  #app .header + div [class~="text-[44px]"] .w-fit { width: auto; }
  #app .header + div [class~="text-[44px]"] > div.rounded-lg {
    font-size: 18px; padding: 14px 20px; margin-top: 28px; width: 100%; max-width: 340px;
  }
  /* макбук + айфон — под текстом, в потоке */
  #app .header + div [class~="bottom-[20px]"] {
    order: 2; position: relative; z-index: 1; bottom: auto; right: auto;
    margin: 32px 0 0 auto; width: 88%; max-width: 555px; transform: translateX(6%);
  }
  #app .header + div [class~="bottom-[20px]"] img { width: 100%; height: auto; display: block; }
  #app .header + div [class~="right-[400px]"] {
    right: auto; left: 14px; bottom: 12px; z-index: 2; width: 24%; max-width: 150px;
  }
  #app .header + div [class~="right-[400px]"] img { width: 100%; height: auto; display: block; }
  #app .header + div .absolute.right-0.bottom-0 img { width: 100%; height: auto; }

  /* ----- Для кого ----- */
  #app .header + div > div.grid-cols-3 {
    grid-template-columns: 1fr; padding: 8px 20px;
  }
  #app .header + div > div.grid-cols-3 > div {
    justify-content: flex-start; border-left-width: 0 !important; padding: 16px 0;
  }
  #app .header + div > div.grid-cols-3 > div + div { border-top: 1px solid #e5e7eb; }
  #app .header + div > div.grid-cols-3 .text-2xl { font-size: 20px; line-height: 1.25; }
  #app .header + div > div.grid-cols-3 .text-2xl p { display: inline; }
  #app .header + div > div.grid-cols-3 .text-2xl p + p::before { content: " "; }
  #app .header + div > div.grid-cols-3 img { width: 40px; height: 40px; }
  #app .header + div > div.grid-cols-3 .flex.gap-3 { gap: 16px; }

  /* ----- Эффекты ----- */
  #app .grid.grid-cols-2.grid-rows-2 { grid-template-columns: 1fr; grid-template-rows: none; gap: 12px; }
  #app .grid.grid-cols-2.grid-rows-2 > div { padding: 18px; }
  #app .grid.grid-cols-2.grid-rows-2 .flex.gap-5 { gap: 16px; }
  #app .grid.grid-cols-2.grid-rows-2 [class~="p-[30px]"] { padding: 18px; flex-shrink: 0; }
  #app .grid.grid-cols-2.grid-rows-2 .text-2xl { font-size: 20px; line-height: 1.25; margin-bottom: 4px; }
  #app .grid.grid-cols-2.grid-rows-2 .text-xl { font-size: 16px; line-height: 1.35; }

  /* ----- Цифры ----- */
  #app .grid.grid-cols-3.h-full { grid-template-columns: 1fr; }
  #app .grid.grid-cols-3.h-full > div { padding: 24px 24px; border-left-width: 0; }
  #app .grid.grid-cols-3.h-full > div + div { border-top: 1px solid #fff; }
  #app [class~="text-[76px]"] { font-size: 48px; line-height: 1.1; }
  #app .grid.grid-cols-3.h-full .text-2xl { font-size: 18px; }

  /* ----- Взаимодействие с системой ----- */
  #app .flex.items-center.justify-between:has(> div > .customGradientContainer),
  #app .flex.flex-start.items-center {
    flex-direction: column; align-items: stretch; gap: 24px;
  }
  #app .flex.flex-start.items-center > div:first-child { order: 2; }
  #app .customGradientContainer {
    width: 100%; max-width: 560px; margin: 0 auto; height: auto; aspect-ratio: 556 / 482;
  }
  #app .customGradientContainer img { width: 100%; height: auto; display: block; }
  #app [class~="p-[22px]"].bg-white, #app .bg-white.rounded-xl.p-5 { padding: 20px; }
  #app p.text-4xl[class~="max-w-[529px]"],
  #app [class~="2xl:max-w-[669px]"] { font-size: 26px; line-height: 1.2; max-width: none; }
  #app .mt-8 > p.text-2xl { font-size: 20px; line-height: 1.25; }
  #app .mt-8 li.text-xl { font-size: 16px; line-height: 1.4; margin-bottom: 6px; }
  #app .mt-8 li span.text-2xl { font-size: 18px; }
  #app .mt-8 { margin-top: 20px; }

  /* ----- Расчёт стоимости ----- */
  #app [class~="bg-[#46BFB3]"] { flex-direction: column; gap: 20px; padding: 20px 16px; }
  #app [class~="bg-[#46BFB3]"] > p { width: auto; font-size: 20px; line-height: 1.3; position: relative; z-index: 10; }
  #app [class~="bg-[#46BFB3]"] > div.bg-white { width: 100%; padding: 18px; }
  #app [class~="bg-[#46BFB3]"] label[class~="text-[22px]"] { font-size: 17px; margin-bottom: 6px; }
  #app [class~="bg-[#46BFB3]"] input[class~="text-[22px]"] { font-size: 16px; padding: 12px 14px; }
  #app [class~="bg-[#46BFB3]"] .flex.items-center.gap-2 { align-items: flex-start; gap: 10px; }
  #app [class~="bg-[#46BFB3]"] input[type="checkbox"] { width: 22px; height: 22px; flex-shrink: 0; margin-top: 2px; }
  #app [class~="bg-[#46BFB3]"] .flex.items-center.gap-2 label { font-size: 14px; line-height: 1.4; }
  #app [class~="bg-[#46BFB3]"] [class~="h-[63px]"] { font-size: 18px; height: 52px; }
  #app [class~="bg-[#46BFB3]"] > img { opacity: .35; }
  #app [class~="bg-[#46BFB3]"] > img.h-full { height: 100%; width: auto; max-width: none; }

  /* ----- Футер ----- */
  #app .grid.grid-cols-3.gap-24 {
    grid-template-columns: 1fr; gap: 28px; margin: 48px 24px 72px;
  }
  #app .grid.grid-cols-3.gap-24 img[src="/logo.svg"] { width: 110px; }
  #app .grid.grid-cols-3.gap-24 .text-xl { font-size: 16px; line-height: 1.4; }
  #app .grid.grid-cols-3.gap-24 .text-2xl { font-size: 20px; }
  #app .grid.grid-cols-3.gap-24 .mb-6 { margin-bottom: 8px; }
  #app .grid.grid-cols-3.gap-24 .mt-6 { margin-top: 12px; }
  #app .grid.grid-cols-3.gap-24 img[class~="w-[24px]"] { width: 20px; height: 20px; flex-shrink: 0; }

  /* ----- Cookie ----- */
  .cookie-banner {
    max-width: none !important; left: 12px !important; right: 12px !important; bottom: 12px !important;
    gap: 12px; font-size: 13px !important; line-height: 1.4;
  }
  .cookie-banner button { flex-shrink: 0; }
}

@media (max-width: 400px) {
  #app .header + div [class~="text-[44px]"] { font-size: 26px; margin: 32px 16px 0; }
  #app p.text-4xl.text-center { font-size: 24px; }
  #app [class~="text-[76px]"] { font-size: 42px; }
}