/* style_devices.css — responsive overrides */

html, body { overscroll-behavior-y: none; margin: 0; }
section { scroll-margin-top: 84px; }

@supports (padding: env(safe-area-inset-top)) {
  header.glass { padding-top: env(safe-area-inset-top); }
}

/* Aspect ratio fallback */
.aspect-video { position: relative; width: 100%; }
.aspect-video::before { content: ""; display: block; padding-top: 56.25%; }
.aspect-video > iframe, .aspect-video > video, .aspect-video > img { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Reduce parallax on mobile */
@media (max-width: 1024px) {
  .parallax { background-attachment: scroll !important; }
}

/* Header & nav */
@media (max-width: 1024px) {
  .glass .container { height: 56px !important; }
}
/* keep nav scrollable on small screens */
@media (max-width: 640px) {
  header.glass nav { display:flex; gap:12px; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch; }
}

/* Typography scaling */
.hero-wrap h1 { font-size: clamp(28px, 7vw, 56px) !important; line-height: 1.1; }
.hero-wrap p { font-size: clamp(14px, 3.9vw, 20px) !important; }
@media (max-width: 640px) {
  .btn-primary, .btn-ghost { width:100%; text-align:center; }
  .neon-card::before { filter: blur(6px); opacity:.5; }
  .neon-card { border-radius:12px; }
  .container { padding-inline: 16px !important; }
  #partners .logo { height: 36px !important; }
  #services .neon-card { padding: 1rem !important; }
}

/* Motion reduce */
@media (prefers-reduced-motion: reduce) {
  .reveal { transition:none !important; opacity:1 !important; transform:none !important; }
  .mobile-nav { transition:none !important; }
}


/* --- Fix: On mobile/tablet hide the desktop nav (we use hamburger) --- */
@media (max-width: 1024px) {
  header.glass > .container > nav { display: none !important; }
}

/* --- Mobile: только белая иконка бургера --- */
@media (max-width: 640px) {
  /* Скрываем любой текст рядом/внутри кнопки, оставляем только SVG */
  #hamburger span:not(.sr-only) { display: none !important; }
  #hamburger .sr-only {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
  }

  /* Белая иконка, без рамки */
  #hamburger {
    color: #fff !important;           /* SVG берёт currentColor → белый */
    border: 0 !important;
    background: transparent !important;
    padding: 8px !important;          /* удобная зона клика */
  }
  #hamburger svg { width: 28px; height: 28px; }
}

/* На мобилке прячем десктоп-меню (на всякий случай, с !important) */
@media (max-width: 1024px) {
  header.glass > .container > nav { display: none !important; }
}


/* --- Mobile drawer: full-bleed фон + без отступов --- */
@media (max-width: 640px) {
  /* сам дропдаун фиксируем и растягиваем */
  #mobileMenu.mobile-nav {
    position: fixed;
    top: 56px;           /* высота шапки на мобилке */
    left: 0;
    right: 0;
    bottom: 0;           /* до низа экрана */
    background: rgba(14,11,24,.98) !important; /* плотнее фон */
    border: 0;           /* без линии */
    padding: 0 !important;
  }

  /* убираем внутренние отступы и gap у списка */
  #mobileMenu nav {
    background: #111;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;           /* перебиваем gap-2 */
    row-gap: 0 !important;
  }

  /* ссылки — на всю ширину, без скругления, с ровным разделителем */
  #mobileMenu .m-link {
    display: block;
    width: 100%;
    padding: 16px 20px !important;
    border-radius: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.06);
  }

  /* CTA внизу — с такими же краями */
  #mobileMenu .btn-primary {
    display: block;
    width: calc(100% - 40px);
    margin: 16px 20px;
    border-radius: 12px;
  }
}

/* когда меню открыто — не скроллим фон */
body.menu-open { overflow: hidden; }

/* Автор: фото целиком в экране (fix dvh + центровка) */
@media (max-width: 640px){
  :root{
    --header-h: 56px;     /* реальная высота шапки на мобиле */
    --author-pad: 16px;   /* внутренний отступ карточки */
  }

  /* при скролле к якорю заголовок не перекрывается */
  #author { scroll-margin-top: calc(var(--header-h) + 12px); }

  /* Снимаем aspect-ratio, задаём высоту от dynamic viewport */
  #author .author-media.ratio-3-2 { aspect-ratio: auto; }

  /* Высота = экран - шапка - паддинги; max до 85svh, чтобы не упираться в «подбородок» */
  #author .author-media{
    height: clamp(260px, calc(100dvh - var(--header-h) - 2*var(--author-pad)), 85svh);
    display: grid;
    place-items: center;       /* абсолютный центр и по вертикали, и по горизонтали */
    padding: 0;
    margin: 0;
    background: #0b0a10;       /* фон-подложка по бокам при letterbox */
    overflow: hidden;
  }

  /* Картинка полностью влезает, без обрезки */
  #author .author-media img{
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: center center;
    display: block;
  }

  /* Убираем затемнение поверх фото на мобиле */
  #author .author-media::after{ display: none; }
}