/**
 * Adaptive layout: tablets, phones, narrow viewports.
 * Loaded after main.css — overrides desktop rules.
 */

/* ---------- Без горизонтального «раздувания» страницы ----------
   100vw на мобилках часто шире экрана (scrollbar / safe area) — не использовать для ширины. */
html {
  overflow-x: hidden;
  max-width: 100%;
}

/* ---------- Safe area (notch / home indicator) ---------- */
body {
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
  overflow-x: hidden;
  max-width: 100%;
  position: relative;
}

/* ---------- Tablet & small laptop: video stack ---------- */
@media (max-width: 1024px) {
  .video .container {
    flex-direction: column;
    align-items: stretch;
  }

  .video .video-main {
    width: 100%;
    max-width: 100%;
    height: auto !important;
    min-height: 0;
    aspect-ratio: 16 / 9;
    padding: 10px;
    box-sizing: border-box;
  }

  .video .video-main iframe {
    width: 100%;
    height: 100%;
    min-height: 240px;
    aspect-ratio: 16 / 9;
  }

  .video .video-list {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 200px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-right: 0;
    margin-top: 16px;
  }

  .video .video-list ul {
    display: flex;
    flex-direction: row;
    gap: 12px;
    padding-bottom: 8px;
  }

  .video .video-list ul li {
    flex: 0 0 auto;
    width: min(200px, 45vw);
    height: 112px;
    margin-bottom: 0;
  }

  .features .features-slide .features-slide-content {
    height: auto;
    min-height: 360px;
    max-height: 70vh;
  }

  .slide-about .video-title h {
    font-size: clamp(28px, 5vw, 48px);
  }

  .inner-files__item {
    width: calc(50% - 25px);
    min-width: 200px;
  }

  .download-gif {
    width: 100%;
  }
}

@media (max-width: 600px) {
  .inner-files__item {
    width: 100% !important;
  }
}

/* ---------- Phone landscape / large phone ---------- */
@media (max-width: 768px) {
  .footer {
    overflow-x: hidden;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* home-social — основные правила в home-social.css */

  header {
    padding-top: clamp(160px, 35vw, 280px);
  }

  header .header-text p {
    font-size: clamp(16px, 4vw, 22px);
    line-height: 1.35;
    padding: 0 8px;
  }

  header h {
    font-size: clamp(26px, 7vw, 42px) !important;
    line-height: 1.1;
    padding: 0 8px;
  }

  /* Timer: wrap instead of overflow */
  header #header-timer {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px 16px;
    max-width: 100%;
    transform: none;
    margin-left: auto;
    margin-right: auto;
    padding: 0 8px;
  }

  header #header-timer > div:not(:last-child) {
    margin-right: 0 !important;
  }

  .features .swiper-pagination {
    top: auto;
    bottom: -48px;
    position: relative;
    margin-top: 56px;
  }

  .features .swiper-button-prev,
  .features .swiper-button-next {
    top: auto;
    bottom: -40px;
    transform: rotate(45deg);
  }

  .features .swiper-button-prev {
    left: 15%;
  }

  .features .swiper-button-next {
    right: 15%;
  }

  .features {
    padding-bottom: 80px;
  }

  .video .video-main {
    height: auto !important;
    aspect-ratio: 16 / 9;
    min-height: 200px;
  }

  .video .video-main iframe {
    min-height: 200px;
    height: 100%;
  }

  .slide-about .video-title h {
    font-size: clamp(24px, 6vw, 36px);
  }

  .slide-about .video-title p {
    font-size: 15px;
    line-height: 1.5;
    padding: 0 8px;
  }

  .slide-about .video-title p br {
    display: none;
  }

  /* Accordion: long answers must not clip */
  .accordion button[aria-expanded="true"] + .accordion-content {
    max-height: min(70vh, 800px);
  }

  .accordion .accordion-content p {
    line-height: 1.55;
    margin: 1em 0;
  }

  .accordion button {
    font-size: 1rem;
    padding-right: 36px;
  }

  .accordion button .accordion-title {
    padding-right: 8px;
  }

  /* Заголовок футера: убрать сдвиг из main.css (top: -70px ломает сетку с fixed-кнопкой) */
  .footer .footer-play h {
    font-size: clamp(28px, 8vw, 45px);
    top: 0 !important;
    margin-bottom: 0.5em;
  }

  /* Плавающая «Play Now»: прижать к низу экрана и центрировать — без съезда вбок */
  .footer-play-button {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }

  .footer-play-button.play-now-fixed {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    /* не 100vw — иначе на части телефонов появляется горизонтальный скролл */
    max-width: 100% !important;
    margin: 0 !important;
    padding: 14px 12px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    box-sizing: border-box !important;
    overflow-x: hidden;
  }

  /* Декоративные полосы 393px — полностью убрать из потока (иначе иногда дают overflow) */
  .footer-play-button .line1,
  .footer-play-button .line2 {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    overflow: hidden !important;
    flex: 0 0 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Место под фиксированную полосу только пока кнопка fixed (класс вешает scroll.js) */
  body.has-play-bar-fixed .footer .content-area {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }

  .footer-play-button .header__button {
    width: min(100%, 300px) !important;
    /* 100% от flex-контейнера, не vw */
    max-width: calc(100% - 8px);
    height: auto !important;
    min-height: 56px;
    font-size: clamp(16px, 4.5vw, 22px);
    margin: 0 auto !important;
    flex: 0 1 auto;
    min-width: 0;
    aspect-ratio: auto;
    padding: 12px 16px;
    box-sizing: border-box;
    background-size: 100% 100%;
  }

  .footer .footer-copyright {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    flex-wrap: wrap;
    gap: 16px;
  }

  .footer .footer-copyright-text {
    max-width: 100%;
    min-width: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  .footer-copyright-logos {
    flex-wrap: wrap;
    gap: 24px;
    max-width: 100%;
    min-width: 0;
  }

  .footer .content-area {
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  .scroll-top {
    position: absolute;
    right: 8px;
    top: 0;
  }
}

/* ---------- Small phones ---------- */
@media (max-width: 480px) {
  header .logo img {
    width: min(160px, 55vw) !important;
  }

  header #header-timer > div {
    width: 52px !important;
    height: 52px !important;
  }

  header #header-timer > div > div p {
    font-size: 16px !important;
  }

  header #header-timer > div > div span {
    font-size: 8px !important;
    transform: rotate(-225deg) translateY(8px) !important;
  }

  .features-title h,
  .video .video-title h,
  .slide-about .video-title h {
    font-size: clamp(22px, 6.5vw, 32px) !important;
  }

  .features .features-title p,
  .video .video-title p {
    font-size: 14px;
    line-height: 1.45;
  }

  .features .features-slide .features-slide-content {
    min-height: 280px;
    max-height: 55vh;
  }

  .features .swiper-button-prev {
    left: 8%;
  }

  .features .swiper-button-next {
    right: 8%;
  }

  .video .video-list ul li {
    width: 130px;
    height: 92px;
  }

  .effect,
  .effect2 {
    max-width: 40vw;
    opacity: 0.6;
  }
}

/* ---------- Very narrow (320px) ---------- */
@media (max-width: 380px) {
  .container {
    width: 94% !important;
    padding-left: 4px;
    padding-right: 4px;
  }

  header #header-timer {
    gap: 8px;
  }

  header #header-timer > div {
    width: 46px !important;
    height: 46px !important;
  }

  .footer {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* ---------- Reduce motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .effect,
  .effect2 {
    animation: none !important;
  }
}